/* ===================================
   NattyApp - Dark Theme Styles
   =================================== */

:root {
  /* Dark theme colors - Pure Black Background */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0d;
  --bg-tertiary: #111115;
  --bg-card: #16161c;
  --bg-hover: #1c1c24;

  /* Accent colors */
  --accent-green: #22c55e;
  --accent-green-glow: rgba(34, 197, 94, 0.3);
  --accent-blue: #3b82f6;
  --accent-blue-glow: rgba(59, 130, 246, 0.3);
  --accent-purple: #a855f7;
  --accent-orange: #f97316;
  --accent-red: #ef4444;
  --primary-red: #b51238;
  --primary-red-glow: rgba(181, 18, 56, 0.4);

  /* Text colors */
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  /* Border colors */
  --border-color: #2a2a3a;
  --border-light: #3a3a4a;

  /* Spacing */
  --nav-height: 64px;
  --sidebar-width: 280px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-green-glow);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===================================
   App Container
   =================================== */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===================================
   Top Navigation - HIDDEN (using bottom nav now)
   =================================== */
.top-nav {
  display: none !important;
}

/* ===================================
   Bottom Navigation - Floating Bar
   =================================== */
.main-tabs {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 4px;
  width: auto;
  max-width: 95vw;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(124, 14, 41, 0.4);
  border-radius: 20px;
  padding: 12px 20px;
  z-index: 1000;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
}

.tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.tab-btn.active {
  color: #b51238;
  background: transparent;
}

/* Active indicator line */
.tab-btn.active::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #b51238;
  border-radius: 2px;
}

.tab-btn .tab-icon {
  font-size: 20px;
}

.tab-btn .tab-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Nav Actions */
.nav-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover {
  background: var(--accent-green);
  border-color: var(--accent-green);
  transform: scale(1.05);
}

/* ===================================
   Main Content
   =================================== */
.main-content {
  flex: 1;
  padding: 24px;
  padding-bottom: 100px;
  /* Space for floating bottom nav */
  overflow-y: auto;
}

/* Tab Content */
.tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content Header */
.content-header {
  margin-bottom: 24px;
}

.content-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.content-header .subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

/* ===================================
   Diet Analysis Priority Card
   =================================== */
.diet-analysis-card {
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.diet-analysis-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #b51238, #8a0e2a, #b51238);
}

.diet-analysis-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: rgba(181, 18, 56, 0.1);
  border-radius: 50%;
  border: 1px solid rgba(181, 18, 56, 0.2);
}

.diet-analysis-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.diet-analysis-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 300px;
  margin: 0 auto 20px;
}

.diet-analysis-desc strong {
  color: #b51238;
  font-weight: 600;
}

.btn-whatsapp-diet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25);
}

.btn-whatsapp-diet:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp-diet:active {
  transform: translateY(0);
}

/* ===================================
   Empty State
   =================================== */
.empty-state,
.nutrition-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: rgba(20, 20, 25, 0.85);
  border-radius: 16px;
  border: 1px solid rgba(139, 30, 63, 0.15);
}

.empty-icon {
  margin-bottom: 20px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workout-empty-mark {
  width: 62px;
  height: 62px;
  display: block;
  filter: drop-shadow(0 0 18px rgba(181, 18, 56, 0.22));
}

.empty-state h2,
.nutrition-empty h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.empty-state p,
.nutrition-empty p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  max-width: 280px;
  margin-bottom: 24px;
}

/* Paste Button (wine theme) */
.btn-paste {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  background: linear-gradient(135deg, #8B1E3F, #5a1228);
  color: #fff;
  border: 1px solid rgba(139, 30, 63, 0.4);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-paste:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 30, 63, 0.3);
  background: linear-gradient(135deg, #a52548, #8B1E3F);
}

.btn-manual-workout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  background: transparent;
  color: #a82850;
  border: 1px solid rgba(168, 40, 80, 0.35);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.btn-manual-workout:hover {
  background: rgba(168, 40, 80, 0.1);
  border-color: #a82850;
}

.btn-whatsapp-workout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  background: transparent;
  color: #25D366;
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.btn-whatsapp-workout:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: #25D366;
}

/* ===================================
   Buttons
   =================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent-green), #16a34a);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-green-glow);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

/* ===================================
   Workout Display
   =================================== */
.workout-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
}

.workout-info h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.workout-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.meta-item {
  font-size: 13px;
  color: var(--text-secondary);
}

.meta-item strong {
  color: var(--accent-green);
}

.workout-actions {
  display: flex;
  gap: 8px;
}

/* Workout Days */
.workout-days {
  display: grid;
  gap: 16px;
}

.workout-day {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.day-header:hover {
  background: var(--bg-hover);
}

.day-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-title {
  font-size: 16px;
  font-weight: 600;
}

.day-muscles {
  font-size: 13px;
  color: var(--text-secondary);
}

.accordion-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  transition: all var(--transition-normal);
}

.accordion-toggle.expanded {
  transform: rotate(180deg);
}

.exercise-list {
  padding: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.exercise-list.expanded {
  max-height: 2000px;
  padding: 12px;
}

.exercise-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all var(--transition-fast);
}

.exercise-card:hover {
  background: var(--bg-hover);
}

.exercise-card:last-child {
  margin-bottom: 0;
}

.exercise-order {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green);
  color: #000;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.exercise-info {
  flex: 1;
}

.exercise-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.exercise-details {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

.exercise-actions {
  display: flex;
  gap: 8px;
}

.exercise-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.exercise-action-btn:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.exercise-action-btn.complete {
  background: var(--accent-green);
  border-color: var(--accent-green);
}

/* ===================================
   Profile
   =================================== */
.profile-container {
  max-width: 600px;
}

/* ===================================
   PROFILE HERO SECTION
   =================================== */
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 24px;
  text-align: center;
}

.profile-photo-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.profile-photo-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #8B1A2B, #c9304a, #8B1A2B);
  position: relative;
  overflow: hidden;
}

.profile-photo-ring.small {
  width: 76px;
  height: 76px;
}

.profile-photo-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a2e;
  display: none;
}

.profile-photo-img.visible {
  display: block;
}

.profile-photo-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.profile-photo-placeholder.small svg {
  width: 28px;
  height: 28px;
}

.profile-photo-edit-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #8B1A2B;
  border: 2px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 2;
}

.profile-photo-edit-btn:hover {
  transform: scale(1.1);
  background: #c9304a;
}

.profile-user-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 4px;
}

.profile-protocol {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 20px;
  font-weight: 500;
}

.profile-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-btn-edit {
  padding: 8px 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-btn-edit:hover {
  border-color: #c9304a;
  color: #c9304a;
}

.profile-btn-settings {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-btn-settings:hover {
  border-color: #c9304a;
  color: #c9304a;
}

/* Edit Profile Modal */
.edit-profile-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.edit-profile-section {
  padding: 0 0 16px;
}

.edit-profile-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.subscription-info {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--border-color);
}

.subscription-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.subscription-badge svg {
  color: #8B1A2B;
  flex-shrink: 0;
}

/* ===================================
   SETTINGS MODAL
   =================================== */
.settings-modal-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.settings-body {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 20px;
}

.settings-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}

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

.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.settings-row-complex {
  flex-wrap: nowrap;
  gap: 16px;
  padding: 14px 0;
}

.settings-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.settings-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  transition: all 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch input:checked+.toggle-slider {
  background: #8B1A2B;
}

.toggle-switch input:checked+.toggle-slider::before {
  transform: translateX(20px);
}

/* Weight Selector */
.weight-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.weight-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.weight-btn:hover {
  border-color: #c9304a;
  color: #c9304a;
}

.weight-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 55px;
  text-align: center;
}

/* Settings Action Buttons */
.settings-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 4px 0;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.settings-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.settings-action-btn svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.settings-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(139, 26, 43, 0.3);
  color: #c9304a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-logout-btn {
  color: #dc2626;
  margin-top: 8px;
}

.settings-logout-btn svg {
  color: #dc2626;
}

/* FAQ */
.faq-chevron {
  margin-left: auto;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-chevron.rotated {
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 8px;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.faq-toggle {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s ease;
}

.faq-answer {
  padding: 0 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Report Problem Form */
.report-form {
  padding: 12px 8px;
}

.settings-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease;
}

.settings-textarea:focus {
  outline: none;
  border-color: #8B1A2B;
}

.report-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.report-char-count {
  font-size: 11px;
  color: var(--text-secondary);
}

.report-send-btn {
  padding: 8px 20px;
  border-radius: 8px;
  background: #8B1A2B;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.report-send-btn:hover {
  background: #c9304a;
}

.report-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* AI Status Indicator Card */
.ai-status-card {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 14px 18px;
  margin: 0 16px 16px;
  transition: border-color 0.3s ease;
}

.ai-status-card.degraded {
  border-color: rgba(220, 38, 38, 0.4);
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), var(--bg-card));
}

.ai-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-status-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.ai-status-svg {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.ai-status-card:not(.degraded) .ai-status-svg {
  color: #22c55e;
}

.ai-status-card.degraded .ai-status-svg {
  color: #dc2626;
}

.ai-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--bg-card);
  transition: background 0.3s ease;
}

.ai-status-card.degraded .ai-status-dot {
  background: #dc2626;
  animation: aiPulse 1.5s ease-in-out infinite;
}

@keyframes aiPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.ai-status-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-status-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.ai-status-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.ai-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  transition: all 0.3s ease;
}

.ai-status-card.degraded .ai-status-badge {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.ai-status-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.ai-status-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffa500;
  font-size: 12px;
}

.ai-status-detail-row svg {
  flex-shrink: 0;
}

.profile-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  padding: 24px;
}

.profile-card h3 {
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.form-group label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.form-group input,
.form-group select {
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px var(--accent-green-glow);
}

/* ===================================
   Chat Overlay
   =================================== */
.chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
}

.chat-overlay.hidden {
  display: none;
}

.chat-panel {
  width: 450px;
  max-width: 100%;
  height: calc(100vh - 40px);
  background: var(--bg-secondary);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

.chat-icon {
  font-size: 24px;
}

.chat-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chat-close:hover {
  background: var(--accent-red);
  color: white;
}

/* Chat Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.welcome-message {
  text-align: center;
  padding: 40px 20px;
}

.welcome-message .welcome-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.welcome-message h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.welcome-message p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 24px;
}

.quick-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.quick-btn {
  padding: 10px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-btn:hover {
  background: var(--accent-green);
  color: #000;
  border-color: var(--accent-green);
}

/* Message Bubbles */
.message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 10px;
  font-size: 18px;
  flex-shrink: 0;
}

.message.user .message-avatar {
  background: var(--accent-blue);
}

.message-body {
  max-width: 80%;
}

.message-content {
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.message.user .message-content {
  background: var(--accent-green);
  color: #000;
}

.message-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  padding: 0 4px;
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* Chat Input */
.chat-input-container {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
}

.chat-input-container textarea {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  max-height: 120px;
}

.chat-input-container textarea:focus {
  outline: none;
  border-color: var(--accent-green);
}

.chat-input-container textarea::placeholder {
  color: var(--text-muted);
}

.send-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green);
  border: none;
  border-radius: 12px;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.send-btn:disabled {
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: not-allowed;
}

.send-btn:not(:disabled):hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow);
}

/* ===================================
   Utility Classes
   =================================== */
.hidden {
  display: none !important;
}

/* ===================================
   Scrollbar
   =================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

/* ===================================
   Responsive - Mobile First
   =================================== */

/* Tablet */
@media (max-width: 1024px) {
  .workout-header {
    flex-direction: column;
    gap: 16px;
  }

  .workout-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Mobile */
@media (max-width: 768px) {

  /* Top Nav - Simplificado para mobile */
  .top-nav {
    padding: 0 12px;
    height: 56px;
  }

  .nav-brand {
    gap: 8px;
  }

  .brand-icon {
    font-size: 24px;
  }

  .brand-name {
    display: none;
  }

  /* Navegação inferior fixa (estilo app nativo) - CENTERED */
  .main-tabs {
    position: fixed;
    bottom: 16px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: 95vw;
    background: rgba(13, 13, 13, 0.95);
    border: 1px solid rgba(124, 14, 41, 0.4);
    border-radius: 20px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    justify-content: center;
    z-index: 1000;
    gap: 2px;
  }

  .tab-btn {
    flex-direction: column;
    gap: 3px;
    padding: 6px 10px;
    font-size: 9px;
    min-width: 48px;
    border-radius: 12px;
  }

  .tab-btn .tab-icon {
    font-size: 18px;
  }

  .tab-btn .tab-label {
    font-size: 8px;
  }

  .tab-btn.active {
    background: transparent;
    color: #b51238;
  }

  /* Main Content */
  .main-content {
    padding: 16px 12px;
    padding-bottom: 100px;
    /* Espaço para nav inferior */
  }

  /* Headers */
  .content-header h1 {
    font-size: 22px;
  }

  .content-header .subtitle {
    font-size: 13px;
  }

  /* Empty State */
  .empty-state {
    padding: 40px 16px;
  }

  .empty-icon {
    font-size: 48px;
  }

  .empty-state h2 {
    font-size: 18px;
  }

  /* Buttons */
  .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 15px;
  }

  /* Workout Display */
  .workout-header {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .workout-meta {
    gap: 12px;
  }

  .workout-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .workout-actions .btn-secondary {
    justify-content: center;
    padding: 12px;
  }

  /* Exercise Cards */
  .exercise-card {
    flex-wrap: wrap;
    padding: 14px;
    gap: 12px;
  }

  .exercise-order {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .exercise-info {
    flex: 1;
    min-width: calc(100% - 100px);
  }

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

  .exercise-details {
    gap: 10px;
    font-size: 11px;
    flex-wrap: wrap;
  }

  .exercise-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }

  /* Profile Form */
  .profile-container {
    max-width: 100%;
  }

  .profile-card {
    padding: 16px;
    border-radius: 12px;
  }

  .form-group input,
  .form-group select {
    padding: 14px;
    font-size: 16px;
    /* Previne zoom no iOS */
  }

  /* Chat Overlay - Tela cheia no mobile */
  .chat-overlay {
    padding: 0;
  }

  .chat-panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
    max-width: 100%;
  }

  .chat-header {
    padding: 14px 16px;
  }

  .chat-messages {
    padding: 16px;
  }

  .chat-input-container {
    padding: 12px 16px;
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }

  .chat-input-container textarea {
    padding: 14px;
    font-size: 16px;
  }

  /* Quick Actions */
  .quick-actions {
    flex-direction: column;
    gap: 10px;
  }

  .quick-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Message Bubbles */
  .message-body {
    max-width: 85%;
  }

  .message-avatar {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Day Header */
  .day-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
  }

  .exercise-list {
    padding: 10px;
  }
}

/* Small Mobile */
@media (max-width: 375px) {
  .tab-btn {
    padding: 6px 4px;
    min-width: 48px;
  }

  .tab-btn .tab-icon {
    font-size: 20px;
  }

  .tab-btn .tab-label {
    font-size: 9px;
  }

  .content-header h1 {
    font-size: 20px;
  }

  .exercise-details {
    gap: 8px;
  }
}

/* ===================================
   Quiz Overlay
   =================================== */
.quiz-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.quiz-overlay.hidden {
  display: none;
}

.quiz-container {
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 100vh;
  background: var(--bg-secondary);
  border-radius: 0;
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease;
}

@media (min-width: 601px) {
  .quiz-overlay {
    padding: 20px;
  }

  .quiz-container {
    max-height: 90vh;
    border-radius: 24px;
    border: 1px solid var(--border-color);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.quiz-header {
  text-align: center;
  padding: 20px 20px 16px;
  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  flex-shrink: 0;
}

.quiz-logo {
  font-size: 48px;
  margin-bottom: 10px;
}

.quiz-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quiz-header p {
  color: var(--text-secondary);
  font-size: 14px;
}

/* Progress Bar */
.quiz-progress {
  padding: 0 20px 12px;
  flex-shrink: 0;
}

.progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c0e29, #b51238);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  display: block;
}

/* Quiz Content */
.quiz-content {
  padding: 0 20px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 20px;
}

.quiz-step {
  display: none;
  animation: fadeIn 0.3s ease;
}

.quiz-step.active {
  display: block;
}

.quiz-step h2 {
  font-size: 16px;
  margin-bottom: 16px;
  text-align: center;
}

/* Quiz Fields */
.quiz-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quiz-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-field label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.quiz-field input,
.quiz-field textarea {
  padding: 14px 18px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.quiz-field input:focus,
.quiz-field textarea:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 4px var(--accent-green-glow);
}

.quiz-field textarea {
  resize: vertical;
  min-height: 100px;
}

/* Quiz Options */
.quiz-options {
  display: flex;
  gap: 12px;
}

.quiz-option {
  flex: 1;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quiz-option:hover {
  border-color: var(--accent-green);
  background: var(--bg-hover);
}

.quiz-option.selected {
  border-color: var(--accent-green);
  background: var(--accent-green);
  color: #000;
}

/* Quiz Option Cards */
.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quiz-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quiz-option-card:hover {
  border-color: var(--accent-green);
  transform: translateY(-2px);
}

.quiz-option-card.selected {
  border-color: var(--accent-green);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.2) 0%, var(--bg-tertiary) 100%);
  box-shadow: 0 0 20px var(--accent-green-glow);
}

.option-icon {
  font-size: 32px;
}

.option-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.option-desc {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Quiz Option Pills */
.quiz-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.quiz-option-pill {
  padding: 12px 24px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 30px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quiz-option-pill:hover {
  border-color: var(--accent-green);
}

.quiz-option-pill.selected {
  border-color: var(--accent-green);
  background: var(--accent-green);
  color: #000;
}

/* Quiz Footer */
.quiz-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.quiz-footer .btn-primary {
  flex: 1;
}

.quiz-footer .btn-secondary {
  padding: 12px 20px;
}

.quiz-footer .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Injury detail */
.injury-detail {
  margin-top: 16px;
}

.injury-detail.hidden {
  display: none;
}

/* Responsive Quiz */
@media (max-width: 600px) {
  .quiz-logo {
    font-size: 36px;
    margin-bottom: 8px;
  }

  .quiz-header h1 {
    font-size: 18px;
  }

  .quiz-header p {
    font-size: 12px;
  }

  .quiz-step h2 {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .quiz-options-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .quiz-option-card {
    padding: 12px 14px;
  }

  .option-icon {
    font-size: 24px;
  }

  .option-title {
    font-size: 13px;
  }

  .option-desc {
    font-size: 11px;
  }

  .quiz-option-pill {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Allergy Checkboxes */
.allergy-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.checkbox-item:hover {
  border-color: var(--accent-green);
}

.checkbox-item:has(input:checked) {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.15);
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-green);
  cursor: pointer;
}

.allergy-options.hidden {
  display: none;
}

@media (max-width: 600px) {
  .allergy-checkboxes {
    grid-template-columns: 1fr;
  }
}

/* Muscle Focus Grid */
.muscle-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.muscle-option {
  cursor: pointer;
}

.muscle-option input[type="checkbox"] {
  display: none;
}

.muscle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.muscle-option:hover .muscle-card {
  border-color: var(--accent-green);
}

.muscle-option input:checked+.muscle-card {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.15);
  box-shadow: 0 0 15px var(--accent-green-glow);
}

.muscle-icon {
  font-size: 28px;
}

.muscle-name {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.focus-counter {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--accent-green);
  font-weight: 600;
}

/* Large option cards */
.quiz-option-card.large {
  padding: 24px 20px;
}

.quiz-option-card.large .option-icon {
  font-size: 40px;
}

.quiz-option-card.large .option-title {
  font-size: 16px;
}

.quiz-option-card.large .option-desc {
  margin-top: 4px;
}

@media (max-width: 600px) {
  .muscle-focus-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .muscle-card {
    padding: 12px 8px;
  }

  .muscle-icon {
    font-size: 24px;
  }

  .muscle-name {
    font-size: 11px;
  }
}

/* Weekday Selection Grid */
.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.weekday-option {
  cursor: pointer;
}

.weekday-option input[type="checkbox"] {
  display: none;
}

.weekday-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  transition: all var(--transition-fast);
  text-align: center;
}

.weekday-option:hover .weekday-card {
  border-color: var(--accent-green);
}

.weekday-option input:checked+.weekday-card {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.15);
  box-shadow: 0 0 15px var(--accent-green-glow);
}

.weekday-abbr {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.weekday-name {
  font-size: 10px;
  color: var(--text-muted);
}

.weekday-counter {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--accent-green);
  font-weight: 600;
}

@media (max-width: 600px) {
  .weekday-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .weekday-card {
    padding: 12px 6px;
  }

  .weekday-abbr {
    font-size: 12px;
  }

  .weekday-name {
    font-size: 9px;
  }
}


/* ===================================
   Modal Styles
   =================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn 0.25s ease;
}

.modal-overlay#legalModal {
  z-index: 10003;
}

.modal-overlay.hidden {
  display: none !important;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content {
  background: var(--bg-secondary);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease;
}

.modal-content.modal-large {
  max-width: 600px;
}

.modal-content.modal-fullscreen {
  max-width: 900px;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  border-radius: 20px 20px 0 0;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--accent-red);
  color: white;
}

.modal-body {
  padding: 24px;
}

.modal-fullscreen .modal-body {
  flex: 1;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  border-radius: 0 0 20px 20px;
}

.modal-footer.sticky {
  position: sticky;
  bottom: 0;
}

/* Modal Options (Nova Ficha) */
.modal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.modal-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-option-btn:hover:not(:disabled) {
  border-color: var(--accent-green);
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.modal-option-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-option-btn .option-icon {
  font-size: 36px;
}

.modal-option-btn .option-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-option-btn .option-desc {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

/* Disclaimer Box (Injury Modal) */
.disclaimer-box {
  background: var(--bg-tertiary);
  border-left: 4px solid var(--accent-orange);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.disclaimer-box p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.disclaimer-box p:last-child {
  margin-bottom: 0;
}

.disclaimer-box strong {
  color: var(--text-primary);
}

.disclaimer-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.disclaimer-checkbox:hover {
  background: var(--bg-hover);
}

.disclaimer-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent-green);
}

.disclaimer-checkbox span {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Muscle Focus Grid (Modal version) */
.modal-content .muscle-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.modal-content .muscle-option {
  cursor: pointer;
}

.modal-content .muscle-option input {
  display: none;
}

.modal-content .muscle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.modal-content .muscle-option:hover .muscle-card {
  border-color: var(--accent-green);
  background: var(--bg-hover);
}

.modal-content .muscle-option input:checked+.muscle-card {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.15);
}

.modal-content .muscle-icon {
  font-size: 28px;
}

.modal-content .muscle-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
}

.focus-counter {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 12px 0;
}

/* Responsive for modals */
@media (max-width: 600px) {
  .modal-content {
    max-width: 100%;
    margin: 10px;
  }

  .modal-options {
    grid-template-columns: 1fr;
  }

  .modal-content .muscle-focus-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================
   Dev Mode - IA Feed System
   =================================== */
.dev-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
}

.dev-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  padding: 20px;
}

.dev-card h3 {
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dev-card>p {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
}

.dev-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dev-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}

.dev-state-display {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  font-size: 12px;
  font-family: 'Fira Code', monospace;
  color: var(--text-secondary);
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-danger:hover {
  background: var(--accent-red);
  color: white;
}

/* IA Feed Grid */
.ia-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.btn-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-feed:hover {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.btn-feed[data-feed="musculacao"]:hover {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.1);
}

.btn-feed[data-feed="nutricao"]:hover {
  border-color: var(--accent-orange);
  background: rgba(249, 115, 22, 0.1);
}

.btn-feed[data-feed="sono"]:hover {
  border-color: var(--accent-purple);
  background: rgba(168, 85, 247, 0.1);
}

.btn-feed[data-feed="contexto"]:hover {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
}

/* Feed Modal */
.feed-modal-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 16px;
}

.feed-info {
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 8px 8px 0;
}

.feed-info p {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0;
}

.feed-messages {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  min-height: 200px;
  max-height: 400px;
}

.feed-welcome {
  text-align: center;
  padding: 40px 20px;
}

.feed-welcome-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.feed-welcome p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.feed-welcome-hint {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.feed-message {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  animation: fadeIn 0.3s ease;
}

.feed-message.user {
  flex-direction: row-reverse;
}

.feed-message-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: 8px;
  font-size: 16px;
  flex-shrink: 0;
}

.feed-message.user .feed-message-avatar {
  background: var(--accent-blue);
}

.feed-message-content {
  max-width: 80%;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.feed-message.user .feed-message-content {
  background: var(--accent-green);
  color: #000;
}

.feed-message.assistant .feed-message-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.feed-input-container {
  display: flex;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.feed-input-container textarea {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: none;
}

.feed-input-container textarea:focus {
  outline: none;
  border-color: var(--accent-green);
}

.feed-input-container textarea::placeholder {
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .ia-feed-grid {
    grid-template-columns: 1fr 1fr;
  }

  .btn-feed {
    padding: 16px 12px;
    font-size: 13px;
  }
}

/* ===================================
   Active Workout Mode
   =================================== */
.workout-active-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 4000;
  display: flex;
  flex-direction: column;
}

.workout-active-overlay.hidden {
  display: none;
}

.workout-active-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  min-height: 0;
}

.workout-active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-wrap: wrap;
}

.workout-timer {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.timer-display {
  font-size: 24px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--accent-green);
}

.workout-day-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.workout-day-info span {
  font-size: 14px;
  color: var(--text-secondary);
}

.btn-change-day {
  background: transparent;
  border: none;
  color: var(--accent-blue);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-finish-workout {
  padding: 10px 20px;
  background: var(--accent-green);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-finish-workout:hover {
  filter: brightness(1.1);
}

.workout-active-exercises {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Exercise Cards in Active Mode */
.active-exercise-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 12px;
  border: 2px solid var(--border-color);
  margin-bottom: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.active-exercise-card:hover {
  border-color: var(--accent-green);
}

.active-exercise-card.completed {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--accent-green);
}

.active-exercise-card.completed .exercise-name-active {
  text-decoration: line-through;
  color: var(--text-muted);
}

.exercise-order-active {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.active-exercise-card.completed .exercise-order-active {
  background: var(--accent-green);
  color: #000;
}

.active-exercise-card.completed .exercise-order-active::after {
  content: "\2713";
}

.active-exercise-card.completed .exercise-order-active span {
  display: none;
}

.exercise-details-active {
  flex: 1;
}

.exercise-name-active {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.exercise-meta-active {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.exercise-load-badge {
  padding: 4px 8px;
  background: var(--accent-green);
  color: #000;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.warmup-badge {
  padding: 4px 8px;
  background: rgba(249, 115, 22, 0.2);
  color: var(--accent-orange);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

/* Start Workout Button */
.btn-start-workout {
  width: 100%;
  padding: 18px 28px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c0e29, #b51238);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-start-workout.btn-completed {
  background: var(--bg-tertiary);
  color: var(--accent-green);
  border: 2px solid var(--accent-green);
  box-shadow: none;
  cursor: default;
}

.btn-start-workout.btn-completed:hover {
  transform: none;
  box-shadow: none;
}

.btn-start-workout:disabled {
  opacity: 1;
}

/* Today's Training Info */
.today-training-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--accent-green);
  border-radius: 12px;
}

.training-badge {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-green);
}

.training-duration {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
}


/* Load Feedback Modal */
.exercise-info-display {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.info-badge {
  padding: 8px 14px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.warmup-section {
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid var(--accent-orange);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.warmup-section h3 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--accent-orange);
}

.warmup-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.warmup-sets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warmup-set-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.warmup-set-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-orange);
}

.load-input-section {
  margin-bottom: 20px;
}

.load-input-section h3 {
  font-size: 14px;
  margin-bottom: 12px;
}

.load-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.load-input-group input {
  width: 120px;
  padding: 14px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.load-input-group input:focus {
  outline: none;
  border-color: var(--accent-green);
}

.load-unit {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 500;
}

.feedback-section {
  text-align: center;
}

.feedback-section h3 {
  font-size: 14px;
  margin-bottom: 12px;
}

.feedback-options {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.feedback-btn {
  padding: 12px 20px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.feedback-btn:hover {
  border-color: var(--accent-green);
}

.feedback-btn.selected {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #000;
}

/* Day Selector */
.day-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.day-selector-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.day-selector-btn:hover {
  border-color: var(--accent-green);
}

.day-selector-btn.active {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.1);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .workout-active-header {
    padding: 12px 16px;
  }

  .timer-display {
    font-size: 20px;
  }

  .workout-day-info {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }

  .exercise-info-display {
    flex-wrap: wrap;
  }

  .feedback-options {
    flex-wrap: wrap;
  }
}

/* ===================================
   Hide exercise action buttons 
   =================================== */
.exercise-actions {
  display: none !important;
}

/* Compact workout tab */
.workout-header {
  padding: 16px;
}

.workout-meta {
  gap: 8px;
}

.workout-day-section {
  padding: 12px;
}

/* ===================================
   Training Calendar
   =================================== */
.training-calendar {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  margin-top: 20px;
}

.training-calendar h3 {
  font-size: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.calendar-month {
  font-size: 16px;
  font-weight: 600;
}

.calendar-nav {
  display: flex;
  gap: 8px;
}

.calendar-nav button {
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.calendar-nav button:hover {
  background: var(--accent-green);
  color: #000;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.calendar-weekday {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  cursor: default;
}

.calendar-day.empty {
  background: transparent;
}

.calendar-day.today {
  border: 2px solid var(--accent-blue);
  font-weight: 600;
  color: var(--text-primary);
}

.calendar-day.trained {
  background: var(--accent-green);
  color: #000;
  font-weight: 600;
}

.calendar-day.rest {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.calendar-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.legend-dot.trained {
  background: var(--accent-green);
}

.legend-dot.rest {
  background: var(--bg-tertiary);
}

/* ===================================
   Active Workout Overlay
   =================================== */
.workout-active-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease;
}

.workout-active-overlay.hidden {
  display: none;
}

.workout-active-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.workout-active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  gap: 16px;
}

.workout-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

.timer-icon {
  font-size: 18px;
}

.timer-display {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--accent-green);
}

.workout-day-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.workout-day-info span {
  font-size: 16px;
  font-weight: 600;
}

.btn-change-day {
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-change-day:hover {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.btn-finish-workout {
  padding: 10px 20px;
  background: var(--accent-green);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-finish-workout:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px var(--accent-green-glow);
}

.workout-active-exercises {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.active-exercise-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.active-exercise-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
  transform: translateX(4px);
}

.active-exercise-card.completed {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--accent-green);
}

.active-exercise-card.completed .exercise-order-active span {
  background: var(--accent-green);
  color: #000;
}

.active-exercise-card.completed .exercise-name-active {
  text-decoration: line-through;
  opacity: 0.7;
}

.exercise-order-active {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.exercise-order-active span {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.exercise-details-active {
  flex: 1;
}

.exercise-name-active {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.exercise-meta-active {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.exercise-load-badge {
  padding: 2px 8px;
  background: var(--accent-purple);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.warmup-badge {
  padding: 2px 8px;
  background: var(--accent-orange);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* ===================================
   Day Selector Modal
   =================================== */
.day-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.day-selector-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.day-selector-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-green);
}

.day-selector-btn.active {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--accent-green);
}

.day-selector-btn span:first-child {
  font-weight: 600;
}

.day-selector-btn span:last-child {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ===================================
   Workout Completion Modal
   =================================== */
.modal-completion {
  max-width: 400px;
  text-align: center;
}

.modal-completion .modal-header h2 {
  font-size: 24px;
}

.completion-stats {
  display: flex;
  justify-content: space-around;
  gap: 16px;
  margin: 24px 0;
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 16px;
}

.completion-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.completion-stat .stat-icon {
  font-size: 28px;
}

.completion-stat .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.completion-stat .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.completion-rate.excellent {
  color: var(--accent-green) !important;
}

.completion-rate.good {
  color: var(--accent-orange) !important;
}

.completion-rate.low {
  color: var(--accent-red) !important;
}

.completion-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.completion-actions .btn-primary,
.completion-actions .btn-secondary {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
}

/* ===================================
   Workout Summary Modal
   =================================== */
.summary-modal-body {
  padding: 0;
}

.summary-header {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-green), #16a34a);
  margin: -20px -20px 20px -20px;
  color: #000;
}

.summary-header h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.summary-header p {
  font-size: 14px;
  opacity: 0.8;
  text-transform: capitalize;
}

.summary-stats-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 0 20px;
}

.summary-stat-card {
  flex: 1;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.summary-stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-green);
  font-family: 'Courier New', monospace;
}

.summary-stat-card .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.summary-modal-body h4 {
  padding: 0 20px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.summary-exercises-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 20px 20px;
  max-height: 300px;
  overflow-y: auto;
}

.summary-exercise {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.summary-exercise.completed {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--accent-green);
}

.summary-exercise.skipped {
  opacity: 0.6;
}

.summary-exercise-status {
  font-size: 18px;
}

.summary-exercise-info {
  flex: 1;
}

.summary-exercise-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.summary-exercise-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.summary-load {
  padding: 2px 8px;
  background: var(--accent-purple);
  color: white;
  border-radius: 6px;
  font-weight: 600;
}

/* ===================================
   Nutrition Tab Styles
   =================================== */

/* Diet Display Container */
.diet-display {
  padding: 16px;
}

.diet-display.hidden,
.empty-diet-state.hidden {
  display: none;
}

/* Diet Header */
.diet-header {
  margin-bottom: 20px;
}

.diet-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.diet-title-row h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.diet-type-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.diet-type-badge.bulk {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #000;
}

.diet-type-badge.bulking {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #000;
}

.diet-type-badge.cut {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.diet-type-badge.cutting {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.diet-type-badge.maintain {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.diet-type-badge.recomp {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

/* Macros Summary */
.macros-summary {
  display: flex;
  gap: 12px;
}

.macro-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.macro-item.calories {
  border-color: var(--accent-orange);
  background: rgba(251, 146, 60, 0.1);
}

.macro-item.protein {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.1);
}

.macro-item.carbs {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
}

.macro-item.fat {
  border-color: var(--accent-yellow);
  background: rgba(234, 179, 8, 0.1);
}

.macro-value {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

.macro-item.calories .macro-value {
  color: var(--accent-orange);
}

.macro-item.protein .macro-value {
  color: var(--accent-red);
}

.macro-item.carbs .macro-value {
  color: var(--accent-blue);
}

.macro-item.fat .macro-value {
  color: var(--accent-yellow);
}

.macro-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Diet Deck Bar */
.diet-deck-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 4px 0;
}

.deck-slot {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.deck-slot:hover {
  border-color: var(--accent-green);
}

.deck-slot.active {
  background: var(--accent-green);
  color: #000;
  font-weight: 600;
  border-color: var(--accent-green);
}

.deck-slot.empty {
  border-style: dashed;
  opacity: 0.6;
}

/* Daily Progress Bar */
.daily-progress-bar {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.progress-count {
  color: var(--accent-green);
  font-weight: 600;
}

.progress-bar-container {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-green), #16a34a);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Meals Timeline */
.meals-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/* Meal Card */
.meal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
}

.meal-card.done {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.05);
}

.meal-card.skipped {
  opacity: 0.5;
}

.meal-header {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}

.meal-time {
  width: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-blue);
  font-family: 'Courier New', monospace;
}

.meal-info {
  flex: 1;
}

.meal-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.meal-macros {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.meal-macros span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meal-macros .cal {
  color: var(--accent-orange);
}

.meal-macros .prot {
  color: var(--accent-red);
}

.meal-macros .carb {
  color: var(--accent-blue);
}

.meal-macros .fat {
  color: var(--accent-yellow);
}

.meal-status {
  font-size: 20px;
}

/* Meal Foods (expandable) */
.meal-foods {
  padding: 0 16px 16px 16px;
  display: none;
}

.meal-card.expanded .meal-foods {
  display: block;
}

.meal-foods-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.food-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 13px;
}

.food-name {
  flex: 1;
}

.food-qty {
  color: var(--text-secondary);
  margin-right: 12px;
}

.food-cals {
  color: var(--accent-orange);
  font-weight: 600;
}

/* Meal Actions */
.meal-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.btn-meal-action {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-meal-done {
  background: var(--accent-green);
  color: #000;
  border: none;
}

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

.btn-meal-skip:hover {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

.btn-meal-compensate {
  background: var(--accent-orange);
  color: #000;
  border: none;
}

/* Diet Type Buttons (Empty State) */
.diet-type-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  width: 100%;
  max-width: 300px;
}

.btn-diet-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-diet-type:hover {
  transform: translateY(-2px);
}

.btn-diet-type.bulk:hover {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.1);
}

.btn-diet-type.cut:hover {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.1);
}

.btn-diet-type.maintain:hover {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
}

.diet-type-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.diet-type-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.diet-type-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Diet Actions */
.diet-actions {
  display: flex;
  gap: 12px;
}

.diet-actions button {
  flex: 1;
}

/* Compensation Modal */
.compensation-modal .modal-content {
  max-width: 400px;
}

.missed-macros {
  padding: 16px;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid var(--accent-orange);
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.missed-macros .title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.missed-macros .values {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}

.compensation-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compensation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 10px;
}

.compensation-item .food {
  font-weight: 500;
}

.compensation-item .add-to {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ===================================
   Manual Workout Wizard
   =================================== */
.mw-wizard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0a0a0c;
  position: relative;
}

.mw-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(168, 40, 80, 0.15);
  position: relative;
}

.mw-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.mw-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #a82850;
  margin-bottom: 10px;
}

.mw-steps {
  display: flex;
  gap: 8px;
}

.mw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.mw-dot.active {
  background: #a82850;
  box-shadow: 0 0 8px rgba(168, 40, 80, 0.5);
}

.mw-dot.done {
  background: #a82850;
}

.mw-step {
  display: none;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px 100px;
  overflow-y: auto;
  flex: 1;
}

.mw-step.active {
  display: flex;
}

.mw-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #a82850;
  margin-bottom: 10px;
}

.mw-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: -6px;
}

.mw-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 40, 80, 0.2);
  border-radius: 10px;
  color: #fff;
  font-size: 0.8rem;
  box-sizing: border-box;
}

.mw-input:focus {
  outline: none;
  border-color: #a82850;
  box-shadow: 0 0 0 3px rgba(168, 40, 80, 0.15);
}

.mw-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.mw-pills {
  display: flex;
  gap: 6px;
}

.mw-pills-wrap {
  flex-wrap: wrap;
}

.mw-pill {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 40, 80, 0.15);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mw-pill:hover {
  border-color: rgba(168, 40, 80, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

.mw-pill.active {
  background: rgba(168, 40, 80, 0.2);
  border-color: #a82850;
  color: #fff;
  box-shadow: 0 0 10px rgba(168, 40, 80, 0.2);
}

.mw-division-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mw-division-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 40, 80, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.mw-division-card:hover {
  border-color: rgba(168, 40, 80, 0.35);
  background: rgba(168, 40, 80, 0.06);
}

.mw-division-card.active {
  background: rgba(168, 40, 80, 0.12);
  border-color: #a82850;
  box-shadow: 0 0 12px rgba(168, 40, 80, 0.15);
}

.mw-div-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.mw-div-desc {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.mw-days-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mw-day-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 40, 80, 0.15);
  border-radius: 10px;
  overflow: hidden;
}

.mw-day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.mw-day-number {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 40, 80, 0.25);
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.mw-day-input {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 40, 80, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.mw-day-input:focus {
  outline: none;
  border-color: #a82850;
}

.mw-day-muscles {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 40, 80, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.65rem;
}

.mw-day-muscles:focus {
  outline: none;
  border-color: #a82850;
  color: #fff;
}

.mw-exercises-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mw-ex-day {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 40, 80, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.mw-ex-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.mw-ex-day-header:hover {
  background: rgba(168, 40, 80, 0.06);
}

.mw-ex-day-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mw-ex-day-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.mw-ex-day-count {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
}

.mw-ex-day-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  color: rgba(255, 255, 255, 0.3);
}

.mw-ex-day-chevron.expanded {
  transform: rotate(180deg);
}

.mw-ex-day-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mw-ex-day-body.expanded {
  max-height: 3000px;
}

.mw-ex-day-content {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mw-ex-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 40, 80, 0.08);
  border-radius: 8px;
}

.mw-ex-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mw-ex-card-top .mw-ex-name {
  flex: 1;
  min-width: 0;
}

.mw-ex-order {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 40, 80, 0.25);
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
}

.mw-ex-info {
  flex: 1;
  min-width: 0;
}

.mw-ex-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-ex-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.mw-ex-input-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mw-ex-input-group label {
  font-size: 0.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
}

.mw-ex-input-group input {
  width: 100%;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(168, 40, 80, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  outline: none;
}

.mw-ex-input-group input:focus {
  border-color: #a82850;
}

.mw-ex-meta {
  display: flex;
  gap: 8px;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

.mw-ex-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.mw-ex-remove:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #ef4444;
}

.mw-ex-detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 0 12px 8px;
}

.mw-ex-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mw-ex-detail-label {
  font-size: 0.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mw-ex-detail-input {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 40, 80, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
}

.mw-ex-detail-input:focus {
  outline: none;
  border-color: #a82850;
}

.mw-btn-add-ex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px dashed rgba(168, 40, 80, 0.25);
  border-radius: 8px;
  color: #a82850;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.mw-btn-add-ex:hover {
  border-color: #a82850;
  background: rgba(168, 40, 80, 0.06);
}

.mw-picker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0c;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.mw-picker.hidden {
  display: none;
}

.mw-picker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(168, 40, 80, 0.15);
}

.mw-picker-header h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #a82850;
}

.mw-picker-back {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.mw-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 40, 80, 0.15);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.mw-picker-search input {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 0.75rem;
  outline: none;
}

.mw-picker-search input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.mw-picker-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mw-picker-tabs::-webkit-scrollbar {
  display: none;
}

.mw-picker-tab {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 40, 80, 0.1);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.mw-picker-tab.active {
  background: rgba(168, 40, 80, 0.2);
  border-color: #a82850;
  color: #fff;
}

.mw-picker-results {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mw-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 40, 80, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.mw-picker-item:hover {
  background: rgba(168, 40, 80, 0.1);
  border-color: rgba(168, 40, 80, 0.3);
}

.mw-picker-item-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.mw-picker-item-muscle {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mw-picker-item-add {
  color: #a82850;
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.mw-picker-item-add.added {
  color: #25D366;
}

.mw-picker-item.added {
  opacity: 0.5;
  pointer-events: none;
}

.mw-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(10, 10, 12, 0.95);
  border-top: 1px solid rgba(168, 40, 80, 0.15);
  backdrop-filter: blur(10px);
}

.mw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #a82850, #7a1a38);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.mw-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(168, 40, 80, 0.3);
}

.mw-btn-primary svg {
  width: 14px;
  height: 14px;
}

.mw-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(168, 40, 80, 0.2);
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.mw-btn-secondary:hover {
  border-color: rgba(168, 40, 80, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

.mw-btn-secondary svg {
  width: 14px;
  height: 14px;
}

.manual-config-section {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 500px) {
  .config-row {
    grid-template-columns: 1fr;
  }
}

.config-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-field label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.config-field input {
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
}

.config-field input:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px var(--accent-green-glow);
}

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

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.btn-add-day {
  padding: 8px 16px;
  background: var(--accent-green);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-add-day:hover {
  transform: scale(1.05);
}

.manual-days-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.manual-day-card {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.day-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.day-card-header input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.day-card-header input:focus {
  outline: none;
  border-color: var(--accent-green);
}

.btn-remove-day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--accent-red);
  border-radius: 8px;
  color: var(--accent-red);
  cursor: pointer;
}

.btn-remove-day:hover {
  background: var(--accent-red);
  color: white;
}

.day-exercises-list {
  padding: 12px;
}

.exercise-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 60px 60px 36px;
  gap: 6px;
  align-items: center;
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

@media (max-width: 480px) {
  .exercise-row {
    grid-template-columns: minmax(0, 1fr) 50px 50px 50px 32px;
    gap: 4px;
    padding: 8px;
  }
}

.exercise-row input {
  padding: 8px 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.exercise-row input:focus {
  outline: none;
  border-color: var(--accent-green);
}

.exercise-row input[type="number"] {
  text-align: center;
  padding: 8px 4px;
}

.btn-remove-exercise {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.btn-remove-exercise:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: white;
}

.btn-add-exercise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}

.btn-add-exercise:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.suggestions-panel {
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.suggestions-toggle {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.suggestions-panel.collapsed .suggestions-content {
  display: none;
}

.suggestions-content {
  padding: 0 16px 16px;
}

.muscle-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.muscle-tab {
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.muscle-tab.active {
  background: var(--accent-green);
  color: #000;
  border-color: var(--accent-green);
}

.suggestions-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.suggestion-item {
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.suggestion-item:hover {
  background: var(--accent-green);
  color: #000;
}

.empty-days-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
  background: var(--bg-card);
  border: 2px dashed var(--border-color);
  border-radius: 12px;
}

.empty-days-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.empty-days-state p {
  color: var(--text-secondary);
  font-size: 14px;
}

/* ===================================
   Exercise Replacement Confirmation
   =================================== */
.exercise-replacement-card {
  background: var(--bg-tertiary);
  border: 2px solid var(--accent-blue);
  border-radius: 16px;
  padding: 16px;
  max-width: 100%;
}

.replacement-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.replacement-icon {
  font-size: 24px;
}

.replacement-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-blue);
}

.replacement-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.replacement-item {
  flex: 1;
  min-width: 100px;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
}

.replacement-item.old {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--accent-red);
}

.replacement-item.new {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--accent-green);
}

.replacement-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.replacement-exercise {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.replacement-arrow {
  font-size: 20px;
  color: var(--accent-blue);
  flex-shrink: 0;
}

.replacement-reason {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.replacement-reason strong {
  color: var(--text-primary);
}

.replacement-actions {
  display: flex;
  gap: 10px;
}

.btn-confirm-replacement,
.btn-cancel-replacement {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-confirm-replacement {
  background: var(--accent-green);
  color: #000;
}

.btn-confirm-replacement:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px var(--accent-green-glow);
}

.btn-cancel-replacement {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-cancel-replacement:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

/* ===================================
   Treino Tab - New Design
   =================================== */
.treino-container {
  padding: 16px;
}

.treino-display {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Today Workout Card */
.today-workout-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* REMOVED: ::before gradient bar that was causing green/blue line */

.workout-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #b51238;
  margin-bottom: 16px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.today-workout-name {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.today-workout-phase {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.today-workout-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.today-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.today-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.today-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.today-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-color);
}

/* Large Start Button */
.btn-start-workout-large {
  width: 100%;
  padding: 20px 32px;
  background: linear-gradient(135deg, var(--accent-green), #16a34a);
  border: none;
  border-radius: 16px;
  color: #000;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px var(--accent-green-glow);
}

.btn-start-workout-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-green-glow);
}

.btn-start-workout-large:active {
  transform: translateY(0);
}

/* Daily Performance Section */
.daily-performance {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
}

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

.performance-header h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-primary);
  margin: 0;
}

.metrics-live-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent-green);
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 20px;
}

/* Performance Metrics */
.performance-metric {
  margin-bottom: 20px;
}

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

.metric-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.metric-percent {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.metric-subvalue {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.metric-progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.metric-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-green), #16a34a);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.metric-progress-bar.recovery .metric-progress-fill {
  background: linear-gradient(90deg, var(--accent-blue), #2563eb);
}

/* Performance Cards Row */
.performance-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.performance-stat-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
}

.stat-card-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-green);
}

.stat-card-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.stat-card-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.stat-card-subtext {
  font-size: 12px;
  color: var(--accent-blue);
}

/* ===================================
   Profile - Workout Sheets Section
   =================================== */
.workout-sheets-card {
  margin: 16px 16px 0;
  background: rgba(20, 20, 25, 0.85);
  border: 1px solid rgba(139, 30, 63, 0.2);
  border-radius: 16px;
  padding: 18px;
}

.workout-sheets-card h3 {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

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

.sheets-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-delete-workout {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-delete-workout:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #ef4444;
}

/* All Loads Button */
.all-loads-section {
  margin-top: 16px;
  text-align: center;
}

.btn-all-loads {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  justify-content: center;
}

.btn-all-loads:hover {
  color: #a82850;
  border-color: rgba(168, 40, 80, 0.3);
  background: rgba(168, 40, 80, 0.05);
}

/* All Loads Modal */
.all-loads-modal {
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.all-loads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.all-loads-header h3 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
}

.all-loads-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.all-loads-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}

.all-loads-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  transition: background 0.2s;
}

.all-loads-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.all-loads-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.all-loads-active-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: #25D366;
}

.all-loads-inactive-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.all-loads-item-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.all-loads-item-date {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 1px;
}

.all-loads-item-right {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.all-loads-item-weight {
  font-size: 0.8rem;
  font-weight: 700;
  color: #a82850;
}

.all-loads-item-reps {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}

.sheets-header h3 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 1.5px;
}

.btn-new-workout {
  padding: 6px 14px;
  background: rgba(139, 30, 63, 0.3);
  border: 1px solid rgba(139, 30, 63, 0.4);
  border-radius: 8px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

.btn-new-workout:hover {
  background: rgba(139, 30, 63, 0.5);
  transform: none;
  box-shadow: none;
}

.workout-sheets-container {
  margin-bottom: 20px;
}

.sheets-empty-state {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px dashed rgba(139, 30, 63, 0.2);
}

.active-workout-sheet {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 16px;
}

.sheet-info {
  margin-bottom: 16px;
}

.sheet-info h4 {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  color: #8B1E3F;
}

.sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.workout-days-accordion {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Workout Day Card - Profile Override */
.workout-sheets-card .workout-day {
  background: transparent;
  border: 1px solid rgba(139, 30, 63, 0.15);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.workout-sheets-card .workout-day:hover {
  border-color: rgba(139, 30, 63, 0.35);
}

/* Day Header - Profile Override */
.workout-sheets-card .day-header {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.workout-sheets-card .day-header:hover {
  background: rgba(139, 30, 63, 0.08);
}

.workout-sheets-card .day-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-align: left;
}

.workout-sheets-card .day-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

.workout-sheets-card .day-muscles {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
}

/* Accordion Toggle Chevron - Profile Override */
.workout-sheets-card .accordion-toggle {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 30, 63, 0.15);
  border: 1px solid rgba(139, 30, 63, 0.25);
  border-radius: 50%;
  font-size: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: rgba(255, 255, 255, 0.5);
}

.workout-sheets-card .accordion-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.workout-sheets-card .accordion-toggle.expanded {
  background: rgba(139, 30, 63, 0.3);
  transform: none;
}

.workout-sheets-card .accordion-toggle.expanded svg {
  transform: rotate(180deg);
}

/* Exercise List - Profile Override (smooth expand) */
.workout-sheets-card .exercise-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.workout-sheets-card .exercise-list.expanded {
  max-height: 2000px;
  display: block;
}

/* Exercise Card - Profile Override */
.workout-sheets-card .exercise-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease;
}

.workout-sheets-card .exercise-card:last-child {
  border-bottom: none;
}

.workout-sheets-card .exercise-card:hover {
  background: rgba(139, 30, 63, 0.06);
}

.workout-sheets-card .exercise-order {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 30, 63, 0.25);
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.workout-sheets-card .exercise-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.workout-sheets-card .exercise-details {
  display: flex;
  gap: 8px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.workout-sheets-card .exercise-actions {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .today-workout-name {
    font-size: 32px;
  }

  .today-workout-stats {
    gap: 16px;
  }

  .today-stat-value {
    font-size: 16px;
  }

  .performance-cards-row {
    grid-template-columns: 1fr;
  }

  .stat-card-value {
    font-size: 28px;
  }
}

/* Today Workout Name - handle long names */
.today-workout-name {
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  word-break: break-word;
}

/* ===================================
   Workout Tab - Custom Design
   =================================== */

/* Today Workout Card */
.today-workout-card {
  background: rgba(20, 20, 25, 0.8);
  border: 1px solid rgba(124, 14, 41, 0.4);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

/* Treino Display - Scale to fit viewport */
.treino-display {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 100px);
  transform-origin: top center;
}

@media (max-height: 800px) {
  .treino-display {
    transform: scale(0.9);
    margin-bottom: -10%;
  }
}

@media (max-height: 700px) {
  .treino-display {
    transform: scale(0.8);
    margin-bottom: -20%;
  }
}

@media (max-height: 600px) {
  .treino-display {
    transform: scale(0.7);
    margin-bottom: -30%;
  }
}

@media (max-height: 550px) {
  .treino-display {
    transform: scale(0.65);
    margin-bottom: -35%;
  }
}

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

.status-dot {
  width: 8px;
  height: 8px;
  background: #b51238;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.workout-status-badge span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #b51238;
  text-transform: uppercase;
}

.today-workout-phase {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.today-workout-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.today-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.today-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.today-stat-value {
  font-size: 18px;
  font-weight: 700;
}

.today-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
}

/* Start Workout Button - Square Design */
.btn-start-workout-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  margin: 32px auto;
  background: rgba(10, 10, 15, 0.9);
  border: 2px solid rgba(124, 14, 41, 0.6);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 30px rgba(124, 14, 41, 0.25);
  text-align: center;
  line-height: 1.4;
  padding: 16px;
}

.btn-start-workout-large:hover {
  background: rgba(124, 14, 41, 0.15);
  border-color: #b51238;
  box-shadow: 0 0 40px rgba(181, 18, 56, 0.4);
  transform: scale(1.03);
}

/* Daily Performance Section */
.daily-performance {
  margin-top: 32px;
}

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

.performance-header h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
}

.metrics-live-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #b51238;
  text-transform: uppercase;
}

/* Performance Metrics */
.performance-metric {
  margin-bottom: 20px;
}

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

.metric-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.8);
}

.metric-percent {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.metric-subvalue {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-subvalue::after {
  content: "\2197";
  color: #b51238;
  font-size: 14px;
}

.metric-progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.metric-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c0e29, #b51238);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Performance Cards Row */
.performance-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.performance-stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.stat-card-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.stat-card-unit {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
}

.stat-card-subtext {
  font-size: 10px;
  font-weight: 500;
  color: #b51238;
  font-style: italic;
}

/* Streak Dots */
.performance-stat-card:last-child::after {
  content: "\25CF \25CF \25CF \25CB";
  display: block;
  font-size: 8px;
  letter-spacing: 4px;
  color: #b51238;
  margin-top: 4px;
}

/* ===================================
   Modal Overrides - Crimson Theme (Dark)
   =================================== */
.modal-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.modal-content {
  background: #0a0a0f;
  border: 1px solid rgba(124, 14, 41, 0.3);
  border-radius: 16px;
}

.modal-header {
  background: #0d0d12;
  border-bottom: 1px solid rgba(124, 14, 41, 0.2);
}

/* Day selector items */
#daySelector>div,
.day-option {
  border: 1px solid rgba(124, 14, 41, 0.3) !important;
  background: #0d0d12 !important;
  transition: all 0.2s ease;
}

#daySelector>div:hover,
.day-option:hover {
  border-color: #b51238 !important;
  background: #12121a !important;
}

#daySelector>div.selected,
#daySelector>div.active,
.day-option.selected,
.day-option.active {
  border-color: #b51238 !important;
  background: rgba(124, 14, 41, 0.15);
  box-shadow: 0 0 10px rgba(124, 14, 41, 0.3);
}

/* Override any green accents in modals */
.modal-content .btn-primary,
.modal-content button.active {
  background: linear-gradient(135deg, #7c0e29, #b51238);
  border-color: #b51238;
}

.modal-content .accent,
.modal-content .highlight {
  color: #b51238;
}

/* ===================================
   DEV Mode Styles
   =================================== */
.dev-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

.dev-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
}

.dev-card h3 {
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dev-card>p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.dev-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dev-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
  font-style: italic;
}

.dev-state-display {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  font-size: 11px;
  font-family: 'Consolas', 'Monaco', monospace;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}

.ia-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.btn-feed {
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-feed:hover {
  background: var(--bg-hover);
  border-color: var(--accent-purple);
}

/* Time Travel DEV Feature */
.dev-time-travel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.time-travel-display,
.time-travel-offset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.time-travel-display {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.time-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.time-value {
  font-size: 16px;
  font-weight: 700;
  color: #b51238;
}

.time-travel-offset .time-value {
  font-size: 14px;
  color: var(--accent-blue);
}

.time-travel-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

.btn-time,
.btn-time-week {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-time {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-time:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.btn-time-week {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.btn-time-week:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: white;
}

/* Day Selector "HOJE" Badge */
.day-selector-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 8px;
}

.day-selector-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.day-selector-btn.today {
  border-color: #b51238;
  background: rgba(181, 18, 56, 0.1);
}

.day-selector-btn.active {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.1);
}

.day-selector-btn .day-name {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-selector-btn .day-exercise-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.today-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #b51238, #7c0e29);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.done-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.day-selector-btn.done {
  opacity: 0.6;
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.day-selector-btn.done:disabled {
  cursor: not-allowed;
}

/* ===================================
   Active Workout View - Focused Mode
   =================================== */
.active-workout-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 90px;
}

.active-workout-view.hidden {
  display: none;
}

/* Timer Bar */
.workout-timer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: transparent;
  flex-shrink: 0;
}

.timer-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timer-dot {
  width: 10px;
  height: 10px;
  background: #b51238;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.timer-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'Inter', monospace;
  color: white;
  letter-spacing: 1px;
}

.btn-finalizar {
  padding: 10px 24px;
  background: #b51238;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-finalizar:hover {
  background: #d91a45;
  transform: scale(1.02);
}

/* Exercise Swipe Area */
.exercise-swipe-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.exercise-focus-card {
  min-width: 100%;
  scroll-snap-align: center;
  padding: 30px 20px;
  background: linear-gradient(180deg, rgba(181, 18, 56, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.exercise-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
}

.current-day-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.exercise-counter {
  font-size: 14px;
  font-weight: 600;
  color: #b51238;
}

.exercise-focus-name {
  font-size: 48px;
  font-weight: 800;
  color: white;
  line-height: 1.1;
  margin-bottom: 20px;
  text-align: left;
  word-wrap: break-word;
  max-width: 100%;
}

@media (max-width: 400px) {
  .exercise-focus-name {
    font-size: 36px;
  }
}

.btn-aquecer {
  padding: 8px 16px;
  background: rgba(181, 18, 56, 0.3);
  border: 1px solid #b51238;
  color: #b51238;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 40px;
  transition: all 0.2s ease;
}

.btn-aquecer:hover {
  background: #b51238;
  color: white;
}

.btn-aquecer.active {
  background: #b51238;
  color: white;
}

/* Exercise Metrics */
.exercise-metrics-row {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.exercise-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exercise-metric .metric-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value-container {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metric-big-value {
  font-size: 42px;
  font-weight: 500;
  color: white;
  line-height: 1;
}

.metric-sub {
  font-size: 18px;
  font-weight: 500;
  color: #b51238;
}

/* Next Objective */
.next-objective {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 30px;
}

.objective-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.objective-text {
  font-size: 14px;
  font-weight: 500;
  color: white;
  letter-spacing: 0.5px;
}

.objective-text.last-set {
  color: #b51238;
}

.objective-text.warmup {
  color: #f97316;
}

/* Workout Progression Bar */
.workout-progression {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 16px;
}

.progression-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.progression-step:hover {
  background: rgba(255, 255, 255, 0.1);
}

.progression-step:active {
  transform: scale(0.95);
}

.progression-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.progression-step.warmup .progression-dot {
  background: rgba(249, 115, 22, 0.3);
  border-color: #f97316;
}

.progression-step.valid .progression-dot {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.progression-step.falha .progression-dot {
  background: rgba(181, 18, 56, 0.3);
  border-color: #b51238;
}

.progression-step.current .progression-dot {
  width: 16px;
  height: 16px;
  transform: scale(1.2);
  animation: pulse-dot 1.5s infinite;
}

.progression-step.current.warmup .progression-dot {
  background: #f97316;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
}

.progression-step.current.valid .progression-dot {
  background: white;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.progression-step.current.falha .progression-dot {
  background: #b51238;
  box-shadow: 0 0 12px rgba(181, 18, 56, 0.6);
}

.progression-step.completed .progression-dot {
  background: #22c55e;
  border-color: #22c55e;
}

.progression-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.progression-hint {
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.progression-step.current .progression-label {
  color: white;
  font-weight: 600;
}

.progression-connector {
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 16px;
}

.progression-connector.completed {
  background: #22c55e;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* ===================================
   Warmup Tasks (Reconhecimento + Aquecimento)
   =================================== */
.warmup-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}

.warmup-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(35, 35, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.warmup-task:hover {
  background: rgba(45, 45, 50, 0.98);
}

.warmup-task:active {
  transform: scale(0.99);
}

.warmup-task.completed {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}

.warmup-task-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.warmup-task-icon svg {
  width: 18px;
  height: 18px;
}

.warmup-task-icon.reconhecimento {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.warmup-task-icon.aquecimento {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: #f97316;
}

.warmup-task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.warmup-task-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.warmup-task-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.warmup-task-weight {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 8px;
}

.warmup-task-check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warmup-task-check .check-empty {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: transparent;
}

.warmup-task-check .check-done {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warmup-task-check .check-done svg {
  width: 14px;
  height: 14px;
}

/* Work Sets Bar Container */
.work-sets-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(30, 30, 30, 0.8);
  border-radius: 12px;
}

/* Complete Set Button */
.btn-complete-set {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: auto;
}

.btn-complete-set:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

/* Exercise Navigation Container */
.exercise-nav-container {
  flex-shrink: 0;
  padding: 10px 0 8px;
  background: rgba(20, 20, 20, 0.95);
  border-top: 1px solid rgba(181, 18, 56, 0.3);
  position: relative;
}

/* Fade edges to hint scrollability */
.exercise-nav-container::before,
.exercise-nav-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}

.exercise-nav-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(20, 20, 20, 0.95), transparent);
}

.exercise-nav-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(20, 20, 20, 0.95), transparent);
}

.exercise-nav-bar {
  display: flex;
  gap: 16px;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.exercise-nav-bar::-webkit-scrollbar {
  display: none;
}

.exercise-nav-item {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border-radius: 8px;
  border-bottom: 2px solid transparent;
}

.exercise-nav-item .nav-number {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 4px;
}

.exercise-nav-item .nav-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.exercise-nav-item.active {
  background: rgba(181, 18, 56, 0.15);
  border-bottom-color: #b51238;
}

.exercise-nav-item.active .nav-number {
  color: #b51238;
}

.exercise-nav-item.active .nav-name {
  color: white;
  font-weight: 700;
}

.exercise-nav-item.completed .nav-number {
  color: #22c55e;
}

.exercise-nav-item.completed .nav-name {
  color: rgba(34, 197, 94, 0.7);
  text-decoration: line-through;
}

.swipe-hint {
  text-align: center;
  padding: 8px 0 0 0;
}

.swipe-hint span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

/* Swipe Arrow Indicator */
.swipe-arrow-hint {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  pointer-events: none;
  animation: swipe-pulse 2s ease-in-out infinite;
}

.swipe-arrow-hint .arrow {
  font-size: 24px;
  color: rgba(181, 18, 56, 0.6);
}

@keyframes swipe-pulse {

  0%,
  100% {
    opacity: 0.3;
    transform: translateY(-50%) translateX(0);
  }

  50% {
    opacity: 0.7;
    transform: translateY(-50%) translateX(5px);
  }
}

.exercise-swipe-area {
  position: relative;
}

/* ===================================
   Botão Registrar Série
   =================================== */
/* ===================================
   Exercise Load Indicator
   =================================== */
.exercise-load-indicator {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.exercise-load-indicator.hidden {
  display: none;
}

.load-indicator-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.load-indicator-icon {
  display: flex;
  align-items: center;
  color: #94a3b8;
}

.load-indicator-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  flex: 1;
}

.load-indicator-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.exercise-load-indicator.source-suggestion {
  background: rgba(124, 14, 41, 0.15);
  border-color: rgba(181, 18, 56, 0.3);
}

.exercise-load-indicator.source-suggestion .load-indicator-icon {
  color: #e74c6f;
}

.exercise-load-indicator.source-suggestion .load-indicator-label {
  color: #e74c6f;
}

.exercise-load-indicator.source-suggestion .load-indicator-value {
  color: #f8b4c8;
}

.exercise-load-indicator.source-history .load-indicator-icon {
  color: #64748b;
}

/* ===================================
   Auto-Fill Weight Button
   =================================== */
.btn-autofill-weight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(124, 14, 41, 0.2);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 8px;
  color: #e74c6f;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-autofill-weight:active {
  background: rgba(124, 14, 41, 0.4);
  transform: scale(0.97);
}

.btn-autofill-weight svg {
  color: #e74c6f;
}

.btn-registrar-serie {
  width: 100%;
  padding: 16px 24px;
  margin-top: 20px;
  background: linear-gradient(135deg, #7c0e29, #b51238);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-registrar-serie:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 18, 56, 0.4);
}

/* ===================================
   Modal de Registro de Série
   =================================== */
.set-registration-modal {
  background: #0a0a0f;
  max-width: 100%;
  height: 100%;
}

.set-reg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid rgba(181, 18, 56, 0.2);
}

.set-reg-header h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: white;
  margin: 0;
}

.set-reg-header .btn-back,
.set-reg-header .btn-menu {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
}

.set-reg-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Stats Row (3 cards) */
.set-reg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.set-stat-card {
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.set-stat-card.active {
  border-color: #b51238;
  background: rgba(181, 18, 56, 0.1);
}

.set-stat-card .stat-label {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.set-stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.set-stat-card .stat-value small {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* Set Focus Card */
.set-focus-card {
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.set-focus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.set-focus-number {
  font-size: 12px;
  font-weight: 600;
  color: #b51238;
  letter-spacing: 0.5px;
}

.set-focus-badge {
  font-size: 10px;
  font-weight: 500;
  color: #b51238;
  letter-spacing: 0.5px;
}

.set-inputs-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.set-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.set-input-group .input-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.input-controls .btn-decrement,
.input-controls .btn-increment {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(181, 18, 56, 0.2);
  border: 1px solid #b51238;
  color: #b51238;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-controls .btn-decrement:hover,
.input-controls .btn-increment:hover {
  background: #b51238;
  color: white;
}

.input-controls .input-value {
  font-size: 36px;
  font-weight: 700;
  color: white;
  min-width: 60px;
  text-align: center;
}

/* RPE Section */
.rpe-section {
  margin-bottom: 24px;
}

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

.rpe-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rpe-value {
  font-size: 24px;
  font-weight: 700;
  color: #b51238;
}

.rpe-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  appearance: none;
  cursor: pointer;
}

.rpe-slider::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #b51238;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(181, 18, 56, 0.5);
}

.rpe-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #b51238;
  cursor: pointer;
  border: none;
}

/* Complete Set Button (in registration modal) */
.btn-complete-set-reg {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #7c0e29, #b51238);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-complete-set-reg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 18, 56, 0.4);
}

/* Completed Sets List */
.completed-sets-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.completed-set-item {
  background: rgba(30, 30, 35, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.completed-set-item .set-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.completed-set-item .set-number {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.completed-set-item .set-data {
  font-size: 18px;
  font-weight: 700;
  color: white;
}

.completed-set-item .set-data small {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.completed-set-item .set-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.completed-set-item .rest-badge {
  font-size: 10px;
  padding: 4px 8px;
  background: rgba(181, 18, 56, 0.2);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 12px;
  color: #b51238;
}

.completed-set-item .rpe-badge {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.add-set-item {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-set-item:hover {
  border-color: #b51238;
  color: #b51238;
}

/* Footer */
.set-reg-footer {
  padding: 20px;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-finish-workout {
  width: 100%;
  padding: 18px;
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-finish-workout:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Next Exercise Button */
.btn-next-exercise {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #7c0e29, #b51238);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-next-exercise:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 18, 56, 0.4);
}

.btn-next-exercise.is-final {
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-next-exercise.is-final:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Footer Buttons Row */
.footer-buttons-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.btn-close-modal {
  flex: 0 0 auto;
  padding: 18px 20px;
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close-modal:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.footer-buttons-row .btn-next-exercise {
  flex: 1;
}

/* ===================================
   Tela de Resumo do Treino
   =================================== */
.workout-summary-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0f;
  z-index: 1002;
  overflow-y: auto;
}

.workout-summary-overlay.hidden {
  display: none;
}

.workout-summary-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: transparent;
}

.summary-header h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: white;
  margin: 0;
}

.summary-header .btn-back,
.summary-header .btn-share {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
}

.summary-body {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Progress Circle */
.summary-progress-circle {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 24px;
}

.progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: rgba(181, 18, 56, 0.2);
  stroke-width: 8;
}

.progress-ring-fill {
  fill: none;
  stroke: #b51238;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.29;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-percent {
  font-size: 36px;
  font-weight: 700;
  color: #b51238;
}

.progress-text .progress-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.summary-workout-name {
  font-size: 20px;
  font-weight: 800;
  color: white;
  text-align: center;
  margin: 0 0 8px 0;
}

.summary-status {
  font-size: 11px;
  font-weight: 500;
  color: #b51238;
  letter-spacing: 1px;
  margin: 0 0 24px 0;
}

/* Stats Grid */
.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}

.summary-stat-card {
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-stat-card .stat-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
}

.summary-stat-card .stat-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: white;
}

.summary-stat-card .stat-value small {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* Performance Section */
.performance-section {
  width: 100%;
}

.performance-section h3 {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  margin: 0 0 16px 0;
}

.performance-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.performance-card {
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.performance-card .exercise-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.performance-card .exercise-name {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.performance-card .exercise-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.performance-card .sets-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.performance-card .change-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.performance-card .change-badge.positive {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.performance-card .change-badge.negative {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.performance-card .change-badge.stable {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.performance-card .change-badge.not-registered {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

/* Performance Bars */
.performance-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.performance-bar {
  width: 10px;
  background: linear-gradient(to top, #b51238, #d91a45);
  border-radius: 2px;
  min-height: 8px;
}

/* Summary Footer */
.summary-footer {
  padding: 20px;
  background: transparent;
}

.btn-view-details {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #7c0e29, #b51238);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-view-details:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 18, 56, 0.4);
}

/* Complete Workout Button */
.btn-complete-workout {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #7c0e29, #b51238);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.btn-complete-workout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 18, 56, 0.4);
}

/* Secondary Details Button */
.btn-view-details-secondary {
  width: 100%;
  padding: 14px;
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-view-details-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* ===================================
   Progressão de Carga Tab
   =================================== */

/* Header */
.progression-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.progression-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progression-header .header-icon {
  font-size: 20px;
}

.progression-header h1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: white;
}

.header-profile-btn {
  width: 40px;
  height: 40px;
  background: rgba(181, 18, 56, 0.2);
  border: 1px solid rgba(181, 18, 56, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-profile-btn:hover {
  background: rgba(181, 18, 56, 0.3);
}

/* Volume Section */
.volume-section {
  padding: 24px 20px;
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.volume-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.volume-card {
  background: rgba(20, 20, 25, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.volume-circle {
  position: relative;
  width: 100px;
  height: 100px;
}

.volume-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.volume-circle .circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

.volume-circle .circle-fill {
  fill: none;
  stroke: #b51238;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  transition: stroke-dashoffset 0.5s ease;
}

.volume-circle.daily .circle-fill {
  stroke-dashoffset: 314;
}

.volume-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.volume-number {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.volume-unit {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
}

.volume-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #b51238;
}

/* History Section */
.history-section {
  padding: 24px 20px;
}

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

.refresh-btn {
  width: 36px;
  height: 36px;
  background: rgba(124, 14, 41, 0.15);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #e74c6f;
}

.refresh-btn:hover {
  background: rgba(124, 14, 41, 0.3);
  transform: rotate(90deg);
}

.exercise-history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-state-small {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

/* Exercise Progress Card */
.exercise-progress-card {
  background: rgba(20, 20, 25, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
}

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

.exercise-card-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

.exercise-last-load {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.target-badge {
  background: rgba(181, 18, 56, 0.2);
  border: 1px solid rgba(181, 18, 56, 0.5);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}

.target-label {
  display: block;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.target-value {
  font-size: 16px;
  font-weight: 700;
  color: white;
}

/* Target Badge Variants - Color coded by suggestion type */
.target-badge.increase {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.5);
}

.target-badge.increase .target-value {
  color: #4ade80;
}

.target-badge.decrease {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.5);
}

.target-badge.decrease .target-value {
  color: #f87171;
}

.target-badge.stable,
.target-badge.maintain {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* AI Indicator Icon */
.ai-indicator {
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(181, 18, 56, 0.5));
}

/* Direction Arrow Icons */
.direction-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.direction-arrow.up {
  color: #4ade80;
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.4));
}

.direction-arrow.down {
  color: #f87171;
  filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.4));
}

.direction-arrow.stable {
  color: #94a3b8;
  filter: drop-shadow(0 0 4px rgba(148, 163, 184, 0.3));
}

/* AI Suggestion Reasoning Text - Full display without truncation */
.suggestion-reasoning-text {
  background: linear-gradient(135deg, rgba(30, 30, 40, 0.9) 0%, rgba(20, 20, 28, 0.95) 100%);
  border-left: 3px solid var(--primary-red, #b51238);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin: 12px 0 8px 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  /* Remove text truncation - show full reasoning */
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-wrap: break-word;
}

/* Color-coded reasoning borders based on parent context */
.exercise-progress-card .suggestion-reasoning-text {
  animation: fadeInSlide 0.3s ease-out;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Increase suggestion reasoning - green accent */
.target-badge.increase~.suggestion-reasoning-text,
.exercise-progress-card:has(.target-badge.increase) .suggestion-reasoning-text {
  border-left-color: #4ade80;
}

/* Decrease suggestion reasoning - red accent */
.target-badge.decrease~.suggestion-reasoning-text,
.exercise-progress-card:has(.target-badge.decrease) .suggestion-reasoning-text {
  border-left-color: #f87171;
}

/* Stable suggestion reasoning - neutral accent */
.target-badge.stable~.suggestion-reasoning-text,
.target-badge.maintain~.suggestion-reasoning-text,
.exercise-progress-card:has(.target-badge.stable) .suggestion-reasoning-text,
.exercise-progress-card:has(.target-badge.maintain) .suggestion-reasoning-text {
  border-left-color: #94a3b8;
}

/* Progress Bar Chart */
.progress-bar-chart {
  margin-top: 16px;
}

.bar-chart-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 60px;
  gap: 6px;
  padding: 0 4px;
}

.progress-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.progress-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: #b51238;
  transition: height 0.3s ease;
  min-height: 4px;
}

.progress-bar.empty {
  background: rgba(255, 255, 255, 0.1);
  height: 4px !important;
}

.bar-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
}

.bar-chart-labels .today {
  color: #b51238;
}

/* Chart Tooltip */
.progress-bar-wrapper {
  position: relative;
  cursor: pointer;
}

.chart-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: linear-gradient(135deg, #b51238, #8a0e2a);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(181, 18, 56, 0.4);
  pointer-events: none;
}

.chart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #8a0e2a;
}

.progress-bar-wrapper:hover .chart-tooltip,
.progress-bar-wrapper:active .chart-tooltip,
.progress-bar-wrapper.touched .chart-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* Loading Pulse Animation */
.loading-pulse {
  display: inline-block;
  animation: pulse 1.5s ease-in-out infinite;
  color: rgba(255, 255, 255, 0.5);
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* View Summary Button (when already trained today) */
.btn-view-summary {
  display: block;
  width: 100%;
  padding: 16px 24px;
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.2), rgba(181, 18, 56, 0.1));
  border: 1px solid rgba(181, 18, 56, 0.4);
  border-radius: 16px;
  color: #b51238;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.btn-view-summary:hover {
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.3), rgba(181, 18, 56, 0.2));
  border-color: rgba(181, 18, 56, 0.6);
  transform: translateY(-2px);
}

/* ===================================
   Workout Completed Overlay - Neon Design
   =================================== */
.workout-completed-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 30px;
  min-height: 400px;
  text-align: center;
}

.completed-icon-container {
  margin-bottom: 40px;
}

.completed-checkmark-circle {
  width: 100px;
  height: 100px;
  position: relative;
}

.checkmark-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(76, 217, 100, 0.6)) drop-shadow(0 0 40px rgba(76, 217, 100, 0.4)) drop-shadow(0 0 60px rgba(76, 217, 100, 0.2));
}

.checkmark-circle-bg {
  fill: #4cd964;
  stroke: none;
}

.checkmark-check {
  fill: none;
  stroke: #1a1a1f;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.completed-title {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 30px 0;
  line-height: 1.5;
  text-transform: uppercase;
}

.completed-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #b51238, transparent);
  margin-bottom: 50px;
}

.btn-ver-resumo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 18px 32px;
  background: rgba(181, 18, 56, 0.15);
  border: 1px solid rgba(181, 18, 56, 0.5);
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.btn-ver-resumo:hover {
  background: rgba(181, 18, 56, 0.25);
  border-color: rgba(181, 18, 56, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(181, 18, 56, 0.3);
}

.resumo-icon {
  font-size: 18px;
}

/* Progression Day Groups */
.progression-day-group {
  margin-bottom: 24px;
}

.progression-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.15) 0%, rgba(181, 18, 56, 0.05) 100%);
  border-left: 3px solid var(--primary-red);
  border-radius: 8px;
  margin-bottom: 12px;
}

.progression-day-title {
  font-size: 16px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progression-day-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Weight Trend Section */
.weight-trend-section {
  padding: 16px;
  margin-bottom: 16px;
}

.weight-trend-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weight-trend-card {
  background: rgba(30, 30, 40, 0.9);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.weight-trend-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.weight-trend-card.trend-up {
  border-left: 3px solid #4ade80;
}

.weight-trend-card.trend-down {
  border-left: 3px solid #f87171;
}

.weight-trend-card.trend-stable {
  border-left: 3px solid #94a3b8;
}

.trend-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.trend-day-name {
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trend-indicator {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.trend-indicator.up {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.trend-indicator.down {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.trend-indicator.stable {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.trend-chart {
  height: 60px;
  margin: 8px 0;
}

.trend-chart svg {
  width: 100%;
  height: 100%;
}

.trend-line.up {
  stroke: #4ade80;
}

.trend-line.down {
  stroke: #f87171;
}

.trend-line.stable {
  stroke: #94a3b8;
}

.trend-point.up {
  fill: #4ade80;
}

.trend-point.down {
  fill: #f87171;
}

.trend-point.stable {
  fill: #94a3b8;
}

.trend-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.trend-current {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.empty-trend-message {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  padding: 32px 16px;
}

/* Day-integrated Trend Chart */
.day-trend-chart {
  background: rgba(20, 20, 28, 0.95);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 16px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.day-trend-chart.trend-up {
  border-left: 3px solid #4ade80;
}

.day-trend-chart.trend-down {
  border-left: 3px solid #f87171;
}

.day-trend-chart.trend-stable {
  border-left: 3px solid #94a3b8;
}

.day-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.day-trend-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.day-trend-graph {
  height: 80px;
  margin: 6px 0;
}

.day-trend-graph svg {
  width: 100%;
  height: 100%;
}

.day-trend-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* ===================================
   Recovery Tab Styles - Refined V2
   =================================== */
.recovery-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 10px 0 40px 0;
}

.recovery-header {
  text-align: center;
  margin-bottom: 10px;
}

.recovery-header h1 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #b51238;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.recovery-date {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Time Section */
.recovery-time-section {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 10px;
}

.time-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(124, 14, 41, 0.08);
  border: 1px solid rgba(124, 14, 41, 0.2);
  border-radius: 16px;
  padding: 16px 12px;
  transition: all 0.2s ease;
}

.time-card.auto-filled {
  position: relative;
  background: rgba(124, 14, 41, 0.14);
  border-color: rgba(196, 24, 56, 0.38);
  box-shadow: 0 0 0 1px rgba(196, 24, 56, 0.12);
}

.time-card.auto-filled::after {
  content: 'AUTO';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(196, 24, 56, 0.16);
  color: #ff8ea7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.time-card:active {
  background: rgba(124, 14, 41, 0.15);
  transform: scale(0.98);
}

.time-label {
  font-size: 11px;
  font-weight: 700;
  color: #b51238;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.recovery-autofill-info {
  margin: 12px 10px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(124, 14, 41, 0.12);
  border: 1px solid rgba(124, 14, 41, 0.22);
  color: #f4d3dc;
  font-size: 13px;
  line-height: 1.45;
}

.recovery-autofill-info.manual {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d5d7de;
}

.time-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 42px;
  font-weight: 300;
  font-family: 'Inter', sans-serif;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

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

.time-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Sleep Quality Section */
.section-label {
  font-size: 12px;
  font-weight: 700;
  color: #b51238;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

.quality-options {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.quality-option {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quality-option:active {
  transform: scale(0.93);
}

.quality-option.selected {
  background: rgba(124, 14, 41, 0.2);
  border-color: rgba(181, 18, 56, 0.5);
  box-shadow: 0 0 25px rgba(124, 14, 41, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.quality-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  pointer-events: none;
}

.quality-icon svg {
  width: 100%;
  height: 100%;
}

.quality-option.selected .quality-icon {
  color: #e74c6f;
  filter: drop-shadow(0 0 8px rgba(231, 76, 111, 0.5));
}

.quality-text {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}

.quality-option.selected .quality-text {
  color: #fff;
}

/* Feeling Section */
.feeling-section {
  padding: 0 10px;
}

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

.feeling-header .section-label {
  margin-bottom: 0;
  text-align: left;
}

.feeling-value {
  font-size: 24px;
  font-weight: 700;
  color: #b51238;
}

.feeling-max {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
}

.feeling-slider-container {
  position: relative;
  padding: 10px 0;
}

.feeling-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
}

.feeling-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b51238, #7c0e29);
  cursor: pointer;
  box-shadow: 0 0 15px rgba(181, 18, 56, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.9);
  margin-top: -10px;
}

.feeling-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, #7c0e29 50%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 2px;
}

.feeling-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.feeling-labels span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1px;
}

/* Save Button */
.btn-save-recovery {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #b51238 0%, #7c0e29 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 10px;
  box-shadow: 0 4px 20px rgba(124, 14, 41, 0.3);
}

.btn-save-recovery:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(124, 14, 41, 0.4);
}


/* Time Picker Styles */
.time-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.time-picker-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.time-picker-modal {
  background: #111;
  border: 1px solid #333;
  border-radius: 24px;
  width: 320px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.time-picker-overlay.hidden .time-picker-modal {
  transform: translateY(50px);
}

.time-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.time-picker-header span {
  font-size: 12px;
  font-weight: 700;
  color: #8B1E3F;
  letter-spacing: 2px;
}

.time-picker-close {
  background: transparent;
  border: none;
  color: #666;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}

.time-picker-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  position: relative;
  margin-bottom: 24px;
  /* Mask for fading top/bottom */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.time-picker-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 40px;
  background: rgba(139, 30, 63, 0.1);
  border-top: 1px solid rgba(139, 30, 63, 0.3);
  border-bottom: 1px solid rgba(139, 30, 63, 0.3);
  transform: translateY(-50%);
  pointer-events: none;
}

.time-column {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.time-column-label {
  position: absolute;
  top: -20px;
  font-size: 10px;
  color: #666;
  font-weight: 600;
  letter-spacing: 1px;
}

.time-scroll {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  width: 100%;
  padding: 80px 0;
  /* Padding to center first/last items */
  scrollbar-width: none;
  /* Firefox */
}

.time-scroll::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.time-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #666;
  font-weight: 400;
  scroll-snap-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.time-item.selected {
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(139, 30, 63, 0.5);
}

.time-separator {
  font-size: 24px;
  color: #fff;
  padding: 0 10px;
  margin-top: -5px;
}

.btn-time-confirm {
  width: 100%;
  padding: 16px;
  background: #8B1E3F;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
}


/* ===================================
   Recovery Dashboard Styles
   =================================== */
.recovery-dashboard {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  animation: fadeIn 0.5s ease;
}

/* Circular Score */
.score-section {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 10px;
}

.circular-chart-container {
  width: 220px;
  height: 220px;
  position: relative;
}

.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.circle-bg {
  fill: none;
  stroke: rgba(192, 14, 48, 0.1);
  stroke-width: 2.5;
}

.circle {
  fill: none;
  stroke: #c00e30;
  /* Vinho Neon */
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  /* Start at top */
  transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(192, 14, 48, 0.6));
  stroke-dasharray: 0, 100;
  transition: stroke-dasharray 1s ease-out;
}

.score-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-value {
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.score-label {
  font-size: 10px;
  font-weight: 600;
  color: #c00e30;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Sleep Graph */
.graph-section {
  padding: 0 10px;
}

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

.graph-title {
  font-size: 10px;
  font-weight: 700;
  color: #881337;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.graph-trend {
  font-size: 10px;
  color: var(--accent-green);
}

.graph-value {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

.sleep-graph-container {
  height: 120px;
  width: 100%;
  position: relative;
}

.sleep-graph-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.graph-line {
  fill: none;
  stroke: #c00e30;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(192, 14, 48, 0.4));
}

.graph-fill {
  fill: url(#graphGradient);
  opacity: 0.3;
}

.graph-time-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 4px;
}

.graph-time-labels span {
  font-size: 9px;
  color: #555;
  font-weight: 500;
}

/* Stats Row */
.stats-row-dashboard {
  display: flex;
  gap: 20px;
  padding: 0 10px;
}

.stat-box {
  flex: 1;
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(192, 14, 48, 0.2);
  /* Dark red border */
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #c00e30;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stat-value-group {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-val {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
}

.stat-unit {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

.stat-sub {
  font-size: 8px;
  color: #555;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Recommendation */
.recommendation-section {
  text-align: center;
  padding: 20px 10px;
  margin-top: 10px;
}

.rec-label {
  font-size: 10px;
  font-weight: 700;
  color: #881337;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.rec-text {
  font-size: 16px;
  line-height: 1.5;
  color: #ddd;
  max-width: 280px;
  margin: 0 auto;
}

.rec-highlight {
  color: #c00e30;
  font-weight: 700;
  display: block;
  margin-top: 4px;
  font-size: 18px;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(192, 14, 48, 0.3);
}

.rec-highlight.moderate {
  color: #ea580c;
  /* Orange */
  text-shadow: 0 0 15px rgba(234, 88, 12, 0.3);
}

.rec-highlight.rest {
  color: #3b82f6;
  /* Blue */
  text-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

/* ===================================
   NUTRITION TAB STYLES
   =================================== */

/* Quiz Overlay */
.nutrition-quiz-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.nutrition-quiz-overlay.hidden {
  display: none;
}

.quiz-container {
  width: 100%;
  max-width: 400px;
  background: var(--bg-secondary);
  border-radius: 20px;
  border: 1px solid rgba(181, 18, 56, 0.3);
  padding: 32px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.quiz-header {
  text-align: center;
  margin-bottom: 24px;
}

.quiz-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: #b51238;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.quiz-header p {
  font-size: 13px;
  color: var(--text-secondary);
}

.quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.quiz-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(181, 18, 56, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b51238, #e11d48);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.quiz-step {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.quiz-question {
  margin-bottom: 24px;
}

.quiz-question h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.4;
}

.nutri-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nutri-quiz-option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nutri-quiz-option:hover {
  border-color: rgba(181, 18, 56, 0.5);
  background: rgba(181, 18, 56, 0.1);
}

.nutri-quiz-option.selected {
  border-color: #b51238;
  background: rgba(181, 18, 56, 0.15);
}

.nutri-quiz-radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
}

.nutri-quiz-option.selected .nutri-quiz-radio {
  border-color: #b51238;
}

.nutri-quiz-option.selected .nutri-quiz-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #b51238;
  border-radius: 50%;
}

.nutri-quiz-text {
  font-size: 14px;
  color: var(--text-primary);
}

.nutri-quiz-nav {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.nutri-quiz-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nutri-quiz-btn-back {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.nutri-quiz-btn-back:hover {
  border-color: var(--border-light);
  color: var(--text-primary);
}

.nutri-quiz-btn-next {
  background: linear-gradient(135deg, #b51238, #e11d48);
  border: none;
  color: #fff;
}

.nutri-quiz-btn-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(181, 18, 56, 0.4);
}

.nutri-quiz-btn-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Nutrition Display */
.nutrition-display {
  padding: 0;
}

.nutrition-display.hidden {
  display: none;
}

/* Nutrition Header */
.nutrition-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(181, 18, 56, 0.15);
  margin-bottom: 24px;
}

.phase-section {
  flex: 1;
}

.phase-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.phase-value {
  font-size: 32px;
  font-weight: 700;
  color: #b51238;
  letter-spacing: -1px;
  line-height: 1;
  margin: 0;
}

.calorie-section {
  text-align: left;
  padding-left: 20px;
  border-left: 1px solid rgba(181, 18, 56, 0.2);
}

.calorie-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.calorie-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.calorie-number {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
}

.calorie-unit {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.nutrition-profile-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(181, 18, 56, 0.15);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 50%;
  color: #b51238;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nutrition-profile-btn:hover {
  background: rgba(181, 18, 56, 0.25);
}

/* Energy Progress Section */
.energy-progress-section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(181, 18, 56, 0.1);
  margin-bottom: 24px;
}

.energy-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.energy-values-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.energy-consumed {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.consumed-value {
  font-size: 28px;
  font-weight: 600;
  color: #b51238;
}

.consumed-total {
  font-size: 16px;
  color: var(--text-secondary);
}

.energy-remaining {
  font-size: 14px;
  color: #b51238;
  font-weight: 500;
}

.energy-bar {
  height: 6px;
  background: rgba(181, 18, 56, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.energy-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b51238, #e11d48);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Meals Section */
.meals-section {
  margin-bottom: 24px;
}

.meals-title {
  font-size: 10px;
  font-weight: 700;
  color: #b51238;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-left: 2px;
}

.meals-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.meal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.meal-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.meal-btn-check {
  background: rgba(181, 18, 56, 0.15);
  color: #b51238;
}

.meal-btn-check:hover {
  background: #b51238;
  color: #fff;
}

.meal-btn-check.completed {
  background: #b51238;
  color: #fff;
}

.meal-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.meal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.meal-content {
  flex: 1;
  min-width: 0;
}

.meal-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.meal-foods {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.meal-card.completed .meal-foods {
  opacity: 0.5;
  text-decoration: line-through;
}

.meal-time {
  font-size: 13px;
  color: #b51238;
  font-weight: 500;
  text-align: right;
  min-width: 50px;
}

/* Macros Footer */
.macros-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 0;
  margin-top: 16px;
  border-top: 1px solid rgba(181, 18, 56, 0.1);
}

.macros-remaining {
  flex: 1;
}

.macros-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.macros-values {
  display: flex;
  gap: 16px;
}

.macro-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.macro-letter {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
}

.macro-letter.protein {
  background: rgba(181, 18, 56, 0.2);
  color: #b51238;
}

.macro-letter.carbs {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.macro-letter.fat {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.macro-amount {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Status Badge */
.nutrition-status {
  text-align: right;
}

.status-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.status-value {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.status-value.optimized .status-dot {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.status-value.attention .status-dot {
  background: #f97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}

.status-value.risk .status-dot {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

#statusText {
  font-size: 13px;
  font-weight: 600;
  color: #22c55e;
  letter-spacing: 0.5px;
}

.status-value.attention #statusText {
  color: #f97316;
}

.status-value.risk #statusText {
  color: #ef4444;
}

/* Nutrition Empty State */
.nutrition-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.nutrition-empty.hidden {
  display: none;
}

.nutrition-empty .empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.nutrition-empty h2 {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.nutrition-empty p {
  color: var(--text-secondary);
  max-width: 300px;
  margin-bottom: 24px;
}

.btn-start-quiz {
  padding: 14px 28px;
  background: linear-gradient(135deg, #b51238, #e11d48);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-start-quiz:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 18, 56, 0.4);
}

/* ===================================
   NUTRITION TAB - COMPLETE STYLES
   =================================== */

/* Nutrition Quiz Overlay */
.nutrition-quiz-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 100;
  padding: 20px;
  overflow-y: auto;
}

.nutrition-quiz-overlay.hidden {
  display: none;
}

.nutrition-quiz-overlay .quiz-container {
  max-width: 500px;
  margin: 0 auto;
}

.nutrition-quiz-overlay .quiz-header {
  text-align: center;
  margin-bottom: 24px;
}

.nutrition-quiz-overlay .quiz-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.nutrition-quiz-overlay .quiz-header p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Quiz Progress */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.quiz-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b51238, #e11d48);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.quiz-step {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: right;
}

/* Nutrition Quiz Questions */
.nutri-quiz-question {
  margin-bottom: 24px;
}

.nutri-quiz-question h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  text-align: center;
}

.nutri-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nutri-quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nutri-quiz-option:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.nutri-quiz-option.selected {
  background: rgba(181, 18, 56, 0.15);
  border-color: #b51238;
}

.nutri-quiz-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.nutri-quiz-option.selected .nutri-quiz-radio {
  border-color: #b51238;
}

.nutri-quiz-option.selected .nutri-quiz-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #b51238;
  border-radius: 50%;
}

.nutri-quiz-text {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
}

/* Quiz Navigation */
.nutri-quiz-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.nutri-quiz-btn {
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nutri-quiz-btn-back {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.nutri-quiz-btn-back:hover {
  background: var(--bg-hover);
}

.nutri-quiz-btn-next {
  flex: 1;
  background: linear-gradient(135deg, #b51238, #e11d48);
  border: none;
  color: #fff;
}

.nutri-quiz-btn-next:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 18, 56, 0.4);
}

.nutri-quiz-btn-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================================
   Nutrition Display - Redesigned
   =================================== */
.nutrition-display {
  padding: 0 0 80px;
}

.nutrition-display.hidden {
  display: none;
}

/* ─── Nutrition Swipe Container (Full-Page) ─── */
.nutrition-swipe-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nutrition-swipe-container::-webkit-scrollbar {
  display: none;
}

.nutrition-swipe-page {
  flex: 0 0 100%;
  width: 100%;
  min-height: calc(100vh - 140px);
  scroll-snap-align: start;
  overflow-y: auto;
}

/* Active Diet Badge */
.active-diet-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(181, 18, 56, 0.08);
  border: 1px solid rgba(181, 18, 56, 0.2);
  border-radius: 12px;
}

.active-diet-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.active-diet-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.swipe-hint {
  margin-left: auto;
  font-size: 10px;
  color: rgba(181, 18, 56, 0.5);
  animation: swipeHintPulse 2s ease-in-out infinite;
}

@keyframes swipeHintPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-4px);
  }
}

/* Paste Page (Page 2) */
.nutrition-swipe-page.paste-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  overflow-y: hidden;
}

.paste-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
  text-align: center;
}

.paste-page-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(181, 18, 56, 0.08);
  border-radius: 50%;
}

.paste-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.paste-page-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  max-width: 260px;
}

.paste-page-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #b51238, #8b1e3f);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.paste-page-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(181, 18, 56, 0.3);
}

.paste-page-back {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 12px;
  transition: color 0.2s;
}

.paste-page-back:hover {
  color: #b51238;
}

.deck-slot {
  flex: 1;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
}

.deck-slot:hover {
  border-color: rgba(181, 18, 56, 0.3);
}

.deck-slot.active {
  border-color: #b51238;
  background: rgba(181, 18, 56, 0.08);
  box-shadow: 0 0 12px rgba(181, 18, 56, 0.15);
}

.deck-slot.empty {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  opacity: 0.6;
}

.deck-slot.empty:hover {
  opacity: 1;
  border-color: #b51238;
}

.deck-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deck-slot-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-slot-info {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

.deck-active-badge {
  font-size: 9px;
  font-weight: 700;
  color: #b51238;
  letter-spacing: 0.5px;
}

.deck-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.2s;
}

.deck-delete-btn:hover {
  color: #ef4444;
}

.deck-add-icon {
  color: var(--text-muted);
}

.deck-add-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ─── Deck Cards (New Horizontal Scroll) ─── */
.deck-card {
  flex: 0 0 auto;
  width: calc(100% - 60px);
  min-width: 240px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-snap-align: start;
}

.deck-card:hover {
  border-color: rgba(181, 18, 56, 0.3);
}

.deck-card.active {
  border-color: #b51238;
  background: rgba(181, 18, 56, 0.08);
  box-shadow: 0 0 12px rgba(181, 18, 56, 0.15);
}

.deck-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deck-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-card-info {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.deck-card-badge {
  font-size: 9px;
  font-weight: 700;
  color: #b51238;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.deck-card-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  line-height: 1;
}

.deck-card-delete:hover {
  color: #ef4444;
}

/* Paste Card (revealed on scroll) */
.deck-card.paste-card {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: rgba(181, 18, 56, 0.25);
  background: rgba(181, 18, 56, 0.04);
  min-width: 140px;
  width: 140px;
  gap: 8px;
}

.deck-card.paste-card:hover {
  border-color: #b51238;
  background: rgba(181, 18, 56, 0.1);
}

.deck-paste-icon {
  color: rgba(181, 18, 56, 0.5);
}

.deck-card.paste-card:hover .deck-paste-icon {
  color: #b51238;
}

.deck-paste-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.deck-card.paste-card:hover .deck-paste-label {
  color: var(--text-primary);
}

/* ---- Delete Diet Modal ---- */
.diet-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.diet-delete-modal.hidden {
  display: none;
}

.diet-delete-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.diet-delete-modal-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 28px 24px;
  width: 300px;
  max-width: 90vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.diet-delete-modal-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 0;
}

.diet-delete-modal-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.diet-delete-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}

.diet-delete-cancel {
  flex: 1;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diet-delete-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.diet-delete-confirm {
  flex: 1;
  padding: 12px;
  background: #ef4444;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diet-delete-confirm:hover {
  background: #dc2626;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---- Calorie Progress Card ---- */
.calorie-progress-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.calorie-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.calorie-main {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.calorie-consumed-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
}

.calorie-separator {
  font-size: 18px;
  color: var(--text-muted);
  margin: 0 2px;
}

.calorie-total-num {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}

.calorie-unit-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
}

.calorie-remaining-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.calorie-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.calorie-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.calorie-bar-fill.high {
  background: linear-gradient(90deg, #f97316, #ea580c);
}

.calorie-bar-fill.over {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Macro Summary Pills */
.macro-summary-row {
  display: flex;
  gap: 8px;
}

.macro-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  flex: 1;
  justify-content: center;
}

.macro-pill-letter {
  font-size: 11px;
  font-weight: 700;
}

.macro-pill-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.macro-pill.pro .macro-pill-letter {
  color: #ef4444;
}

.macro-pill.carb .macro-pill-letter {
  color: #3b82f6;
}

.macro-pill.fat .macro-pill-letter {
  color: #eab308;
}

/* ---- Meals Section ---- */
.meals-section {
  margin-bottom: 20px;
}

.meals-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.meals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Meal Cards (Collapsible) ---- */
.meal-card {
  display: block;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.meal-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.meal-card.completed {
  opacity: 0.55;
}

.meal-card.completed .meal-name {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

.meal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.meal-check-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.meal-check-btn:hover {
  border-color: #22c55e;
}

.meal-check-btn.checked {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.meal-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.meal-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.meal-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.meal-card.expanded .meal-chevron {
  transform: rotate(180deg);
}

/* Expandable content */
.meal-expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding-top: 0;
}

.meal-card.expanded .meal-expand-content {
  max-height: 600px;
  padding-top: 14px;
}

.meal-foods-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.meal-food-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.meal-food-item:last-child {
  border-bottom: none;
}

.food-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.food-detail {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: 12px;
}

.meal-macros-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.meal-macro {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--bg-tertiary);
}

.meal-macro.cal {
  color: #f97316;
}

.meal-macro.pro {
  color: #ef4444;
}

.meal-macro.carb {
  color: #3b82f6;
}

.meal-macro.fat {
  color: #eab308;
}

/* ---- Meal Skip & Compensation ---- */
.meal-card.skipped {
  opacity: 0.5;
  border-style: dashed;
}

.meal-card.skipped .meal-name {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

.meal-card.compensation {
  border-left: 3px solid #f59e0b;
}

.meal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meal-skip-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: transparent;
  color: #ef4444;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.meal-skip-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.meal-unskip-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: transparent;
  color: #3b82f6;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.meal-unskip-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

/* Badges */
.meal-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
}

.meal-badge.skipped {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.meal-badge.redistributed {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.meal-badge.comp {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.meal-comp-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  font-size: 0;
  flex-shrink: 0;
}

.meal-comp-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Sub-tabs */
.meals-subtabs {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}

.meals-subtabs .subtab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.meals-subtabs .subtab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Compensate CTA */
.compensate-cta {
  margin-top: 16px;
}

.compensate-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--wine), var(--wine-dark, #6b0f2a));
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.compensate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(181, 18, 56, 0.3);
}

.compensate-btn svg {
  flex-shrink: 0;
}

/* Compensation loading */
.compensation-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  color: var(--text-secondary);
  font-size: 14px;
}

.comp-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--wine);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ===================================
   Diet Chat Overlay - For reviewing diet before confirming
   =================================== */
.diet-chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.diet-chat-overlay.hidden {
  display: none;
}

.diet-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.diet-chat-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.diet-chat-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.diet-chat-header p {
  font-size: 13px;
  color: var(--text-secondary);
}

.diet-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diet-chat-message {
  padding: 16px;
  border-radius: 16px;
  max-width: 90%;
  line-height: 1.5;
  white-space: pre-wrap;
}

.diet-chat-message.ai {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  align-self: flex-start;
  color: var(--text-primary);
}

.diet-chat-message.user {
  background: linear-gradient(135deg, #b51238, #e11d48);
  color: #fff;
  align-self: flex-end;
}

.diet-chat-message.loading {
  color: var(--text-secondary);
  font-style: italic;
}

.diet-chat-input-area {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
}

#dietChatInput {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
}

#dietChatInput::placeholder {
  color: var(--text-muted);
}

#dietChatInput:focus {
  outline: none;
  border-color: #b51238;
}

.diet-chat-send-btn {
  padding: 14px 20px;
  background: linear-gradient(135deg, #b51238, #e11d48);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diet-chat-send-btn:hover {
  transform: translateY(-2px);
}

.diet-chat-actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.diet-confirm-btn {
  flex: 1;
  padding: 16px 24px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diet-confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}

.diet-cancel-btn {
  padding: 16px 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diet-cancel-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ===================================
   AI Progression Suggestions
   =================================== */
.ai-suggestions-section {
  margin-bottom: 24px;
}

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

.suggestions-header h2 {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

.suggestions-badge {
  background: linear-gradient(135deg, #b51238, #e11d48);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  min-width: 24px;
  text-align: center;
}

/* Suggestions list full page */
.suggestions-list-full {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 100px;
}

.suggestions-list-full .sug-card {
  width: 100%;
}

/* ===================================
   Suggestion Card — Reference Design
   =================================== */
.sug-card {
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--primary-red, #b51238);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

/* Top Row: SVG + Name on left, Weights on right */
.sug-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.sug-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sug-card-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-red, #b51238);
}

.sug-card-svg.increase {
  color: #b51238;
}

.sug-card-svg.deload {
  color: #b51238;
}

.sug-card-svg.stable {
  color: rgba(255, 255, 255, 0.3);
}

.sug-card-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.93);
  line-height: 1.3;
}

.sug-card-right {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}

.sug-old-w {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: line-through;
}

.sug-new-w {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.5px;
}

.sug-new-w small {
  font-size: 12px;
  font-weight: 500;
  margin-left: 1px;
  opacity: 0.5;
}

/* Type Label */
.sug-card-type {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-red, #b51238);
  padding-left: 24px;
  margin-bottom: 10px;
}

/* Bottom Row: ACEITAR pill + IGNORAR text + chevron circle */
.sug-card-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sug-btn-accept {
  padding: 8px 22px;
  background: var(--primary-red, #b51238);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sug-btn-accept:hover {
  background: #d41545;
  box-shadow: 0 3px 12px rgba(181, 18, 56, 0.4);
  transform: translateY(-1px);
}

.sug-btn-ignore {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: color 0.2s ease;
}

.sug-btn-ignore:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* Chevron circle button */
.sug-chevron-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sug-chevron-btn:hover {
  background: rgba(181, 18, 56, 0.1);
  border-color: rgba(181, 18, 56, 0.25);
  color: rgba(255, 255, 255, 0.6);
}

.sug-chevron-btn[aria-expanded="true"] {
  background: rgba(181, 18, 56, 0.12);
  border-color: rgba(181, 18, 56, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

.sug-chevron-btn svg {
  transition: transform 0.3s ease;
}

.sug-chevron-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Accordion Content */
.sug-accordion-content {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sug-accordion-inner {
  padding: 10px 0 2px;
}

.sug-reasoning-text {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  padding: 10px 12px;
  background: rgba(181, 18, 56, 0.05);
  border-left: 2px solid var(--primary-red, #b51238);
  border-radius: 0 8px 8px 0;
  word-wrap: break-word;
}

/* ===================================
   AI Indicator & Progression Card Enhancements
   =================================== */
.ai-indicator {
  font-size: 14px;
  margin-left: 4px;
  animation: pulse 2s ease-in-out infinite;
}

.target-badge.increase {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.target-badge.increase .target-value {
  color: #22c55e;
}

.target-badge.decrease {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.target-badge.decrease .target-value {
  color: #ef4444;
}

/* ===================================
   Sleep Graph Styles
   =================================== */
.sleep-bars {
  display: flex;
  align-items: flex-end;
  height: 80px;
  gap: 4px;
  padding: 8px 0;
}

.sleep-bar-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}

.sleep-bar {
  width: 70%;
  min-height: 4px;
  background: linear-gradient(180deg, rgba(181, 18, 56, 0.6), rgba(181, 18, 56, 0.3));
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.sleep-bar.today {
  background: linear-gradient(180deg, #b51238, #8b0e2a);
  box-shadow: 0 0 8px rgba(181, 18, 56, 0.5);
}

/* Sleep Trend Colors */
.graph-trend.positive {
  color: #4ade80;
}

.graph-trend.negative {
  color: #f87171;
}

/* ===================================
   SVG Navigation Icons
   =================================== */
.tab-btn .tab-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
}

.tab-btn.active .tab-icon svg {
  stroke: var(--primary-red);
  filter: drop-shadow(0 0 6px rgba(181, 18, 56, 0.5));
}

.tab-btn .tab-icon .tab-logo-mark {
  width: 24px;
  height: 24px;
  display: block;
}

.tab-btn .tab-icon .tab-logo-mark rect {
  stroke: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.tab-btn:not(.active) .tab-icon .tab-logo-mark {
  opacity: 0.58;
  filter: saturate(0.7);
}

.tab-btn.active .tab-icon .tab-logo-mark {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(181, 18, 56, 0.38));
}

/* Navigation icon specific styling */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-btn .tab-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

/* ===================================
   Swipeable Progress Sub-Tabs
   =================================== */
.progress-subtab-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 10px 20px;
  background: rgba(15, 15, 20, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.subtab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  letter-spacing: 0.3px;
}

.subtab-btn svg {
  opacity: 0.5;
  transition: opacity 0.35s ease;
}

.subtab-btn.active {
  color: #fff;
  background: rgba(181, 18, 56, 0.15);
  border: 1px solid rgba(181, 18, 56, 0.35);
  box-shadow: 0 0 20px rgba(181, 18, 56, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.subtab-btn.active svg {
  opacity: 1;
  color: #e74c6f;
}

.subtab-btn:not(.active):active {
  transform: scale(0.95);
}

/* Also keep backwards compat for subtab-dot */
.subtab-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.subtab-dot.active {
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.3), rgba(181, 18, 56, 0.1));
  border-color: rgba(181, 18, 56, 0.5);
  color: #fff;
}

.subtab-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

/* Swipe Container */
.progress-swipe-container {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-x;
  position: relative;
}

.progress-page {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  padding: 16px;
  display: none;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-page.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.progress-page.slide-out-left {
  opacity: 0;
  transform: translateX(-30px);
}

.progress-page.slide-out-right {
  opacity: 0;
  transform: translateX(30px);
}

/* Accept/Reject Card Animations */
@keyframes cardAccepted {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  30% {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
  }

  100% {
    transform: scale(0.95) translateX(60px);
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}

@keyframes cardRejected {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.9) translateX(-40px);
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}

.sug-card.accepting {
  animation: cardAccepted 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.sug-card.rejecting {
  animation: cardRejected 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Swipe Hint Animation */
@keyframes swipeHint {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-10px);
  }
}

.progress-page[data-page="0"]:after {
  content: '\2190 Deslize para Sugestões';
  position: absolute;
  bottom: 120px;
  right: 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  animation: swipeHint 2s ease-in-out infinite;
}

/* ===================================
   ONBOARDING QUIZ STYLES
   =================================== */

/* Overlay Container */
.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0a0f 0%, #000000 100%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.onboarding-overlay.hidden {
  display: none;
}

.onboarding-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* Progress Bar */
.quiz-progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 0;
}

.quiz-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-red), #d91a47);
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px var(--primary-red-glow);
}

.quiz-progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 80px;
  text-align: right;
}

/* Quiz Content */
.quiz-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Quiz Screens */
.quiz-screen {
  display: none;
  flex-direction: column;
  animation: fadeSlideIn 0.4s ease-out;
}

.quiz-screen.active {
  display: flex;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Intro Screen */
.quiz-intro-icon {
  display: flex;
  justify-content: center;
  margin: 40px 0 32px;
  animation: pulse 2s ease-in-out infinite;
}

.quiz-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 16px;
}

.quiz-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
}

.quiz-time-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  margin: 0 auto 40px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Primary Button */
.quiz-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary-red), #8b0e2a);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
}

.quiz-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--primary-red-glow);
}

.quiz-btn-primary:active {
  transform: translateY(0);
}

.quiz-btn-primary.final {
  margin-top: 32px;
}

/* Block Header */
.quiz-block-header {
  text-align: center;
  margin-bottom: 32px;
}

.block-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(181, 18, 56, 0.2);
  border: 1px solid rgba(181, 18, 56, 0.4);
  border-radius: 20px;
  color: var(--primary-red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.quiz-block-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.block-message {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Questions */
.quiz-question {
  display: none;
  flex-direction: column;
  animation: fadeSlideIn 0.3s ease-out;
}

.quiz-question.active {
  display: flex;
}

.question-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 24px;
  text-align: center;
}

/* Quiz Options */
.quiz-options {
  display: flex;
  gap: 12px;
}

.quiz-options.vertical {
  flex-direction: column;
}

.quiz-options.horizontal {
  flex-wrap: wrap;
  justify-content: center;
}

.quiz-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.quiz-option.selected {
  background: rgba(181, 18, 56, 0.2);
  border-color: var(--primary-red);
  color: white;
}

.quiz-option.compact {
  padding: 14px 20px;
  min-width: 56px;
  font-weight: 600;
}

.option-icon {
  font-size: 20px;
}

/* Input Fields */
.quiz-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.quiz-input {
  flex: 1;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: none;
  transition: all 0.2s ease;
}

.quiz-input:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-glow);
}

.quiz-input::placeholder {
  color: var(--text-muted);
}

.quiz-input-suffix {
  color: var(--text-secondary);
  font-size: 16px;
}

/* Next Button */
.quiz-btn-next {
  width: 100%;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-btn-next:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Shake animation for validation */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-6px);
  }

  80% {
    transform: translateX(6px);
  }
}

.shake {
  animation: shake 0.4s ease;
}

/* Quiz hint text (subtitle for multi-select) */
.quiz-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* Multi-select options container */
.multi-select {
  gap: 10px !important;
}

/* Multi-select: checkbox indicator on the left */
.multi-select .quiz-option {
  position: relative;
  justify-content: flex-start;
  padding-left: 52px;
  transition: all 0.25s ease;
}

.multi-select .quiz-option::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.25s ease;
}

/* Checkmark inside checkbox when selected */
.multi-select .quiz-option.selected::before {
  background: var(--primary-red);
  border-color: var(--primary-red);
  box-shadow: 0 0 10px rgba(181, 18, 56, 0.4);
}

.multi-select .quiz-option.selected::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-55%) rotate(45deg);
  opacity: 0;
  animation: checkIn 0.2s ease-out forwards;
}

@keyframes checkIn {
  from {
    opacity: 0;
    transform: translateY(-55%) rotate(45deg) scale(0.5);
  }

  to {
    opacity: 1;
    transform: translateY(-55%) rotate(45deg) scale(1);
  }
}

/* Selected state for multi-select */
.multi-select .quiz-option.selected {
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.18), rgba(181, 18, 56, 0.08));
  border-color: rgba(181, 18, 56, 0.6);
  color: var(--text-primary);
  box-shadow: 0 0 20px rgba(181, 18, 56, 0.1), inset 0 0 20px rgba(181, 18, 56, 0.05);
}

.multi-select .quiz-option.selected:hover {
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.25), rgba(181, 18, 56, 0.12));
}

/* Outras text field */
.quiz-outras-field {
  margin-top: 14px;
  margin-bottom: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 12px;
  overflow: hidden;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding: 0 16px;
  }

  to {
    opacity: 1;
    max-height: 120px;
    margin-top: 14px;
    padding: 14px 16px;
  }
}

.quiz-outras-field.hidden {
  display: none;
}

.quiz-outras-field .quiz-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease;
}

.quiz-outras-field .quiz-input:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(181, 18, 56, 0.15);
}

.quiz-outras-field .quiz-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* Confirm button spacing in multi-select questions */
.quiz-question .quiz-btn-next {
  margin-top: 20px;
}

/* Scale Options */
.quiz-scale {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.quiz-scale.large {
  flex-direction: column;
}

.scale-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.scale-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scale-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.scale-btn.selected {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: white;
  box-shadow: 0 0 12px var(--primary-red-glow);
}

.scale-label {
  font-size: 12px;
  color: var(--text-muted);
}

.scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 8px;
  margin-top: 8px;
}

.scale-labels span {
  font-size: 12px;
  color: var(--text-muted);
}

/* Block Feedback */
.quiz-block-feedback {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
  animation: feedbackPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quiz-block-feedback.active {
  display: flex;
}

.quiz-block-feedback.emotional {
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.15), rgba(181, 18, 56, 0.05));
  border-color: rgba(181, 18, 56, 0.4);
}

@keyframes feedbackPop {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.feedback-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--accent-green);
}

.quiz-block-feedback.emotional .feedback-icon {
  color: var(--primary-red);
}

.quiz-block-feedback p {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Final Screen */
.quiz-final-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}

.final-success-icon {
  margin-bottom: 32px;
}

.final-circle {
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
  animation: drawCircle 0.8s ease-out forwards;
}

.final-check {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.4s ease-out 0.6s forwards;
}

@keyframes drawCircle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

.final-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.final-subtitle {
  font-size: 16px;
  color: var(--accent-green);
  margin-bottom: 24px;
}

.final-message {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 32px;
}

.final-message p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.final-message p:last-child {
  margin-bottom: 0;
}

/* Pulse Animation */
@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Success Animation for Options */
@keyframes selectPulse {
  0% {
    box-shadow: 0 0 0 0 var(--primary-red-glow);
  }

  70% {
    box-shadow: 0 0 0 10px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.quiz-option.selected {
  animation: selectPulse 0.4s ease-out;
}

/* ===================================
   PATH BADGE STYLES (Final Screen)
   =================================== */

.path-badge-container {
  margin-bottom: 20px;
}

.path-badge {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.path-badge.path-estruturado {
  background: linear-gradient(135deg, rgba(181, 18, 56, 0.3), rgba(181, 18, 56, 0.15));
  border: 1px solid rgba(181, 18, 56, 0.5);
  color: #f43f5e;
  box-shadow: 0 0 20px rgba(181, 18, 56, 0.3);
}

.path-badge.path-sozinho {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.15));
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #4ade80;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.path-badge.path-ambos {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #a78bfa;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Path Message Content */
.final-message .path-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.final-message .path-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.final-message .path-message {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.final-message .path-details {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid var(--primary-red);
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===================================
   GREETING SPLASH OVERLAY
   =================================== */

.greeting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0a0f 0%, #000000 100%);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.greeting-overlay.hidden {
  display: none;
}

.greeting-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.greeting-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.greeting-icon {
  opacity: 0;
  transform: scale(0.7);
  animation: greetIconIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

.greeting-text {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  opacity: 0;
  transform: translateY(12px);
  animation: greetTextIn 0.5s ease-out 0.4s forwards;
  margin: 0;
}

.greeting-username {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary, #aaa);
  opacity: 0;
  transform: translateY(8px);
  animation: greetTextIn 0.5s ease-out 0.6s forwards;
  margin: 0;
}

@keyframes greetIconIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes greetTextIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   LOGIN OVERLAY STYLES
   =================================== */

.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0a0f 0%, #000000 100%);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-overlay.hidden {
  display: none;
}

.login-container {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo */
.login-logo {
  text-align: center;
  margin-bottom: 40px;
}

.login-logo svg {
  margin-bottom: 16px;
}

.login-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Auth Form */
.auth-form {
  width: 100%;
  animation: fadeSlideIn 0.3s ease-out;
}

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

.auth-form .form-group {
  margin-bottom: 20px;
}

.auth-form .form-group label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}

.auth-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}

.auth-input:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-glow);
}

.auth-input::placeholder {
  color: var(--text-muted);
}

/* Error Message */
.auth-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #f87171;
  font-size: 13px;
  text-align: center;
}

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

/* Primary Button */
.auth-btn-primary {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary-red), #8b0e2a);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--primary-red-glow);
}

.auth-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Switch Link */
.auth-switch {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-switch a {
  color: var(--primary-red);
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* Footer */
.login-footer {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.auth-legal-links {
  margin-top: 18px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.auth-legal-links-label {
  display: block;
  margin-bottom: 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
}

.auth-legal-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-legal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.auth-legal-pill:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.auth-legal-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Loading Spinner */
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Responsive adjustments */
@media (max-width: 480px) {
  .login-container {
    padding: 0 16px;
  }

  .login-title {
    font-size: 28px;
  }

  .auth-input {
    padding: 12px 14px;
  }

  .auth-legal-links {
    padding: 14px;
  }

  .auth-legal-links-row {
    gap: 8px;
  }

  .auth-legal-pill {
    width: 100%;
    justify-content: center;
  }

  .legal-modal-body {
    padding: 22px 18px 28px;
  }

  .legal-doc-section h3 {
    font-size: 16px;
  }
}

/* Auth Select Dropdown */
.auth-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.auth-select option {
  background: #1a1a22;
  color: #fff;
  padding: 10px;
}

/* Input Hint */
.input-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Auth Checkbox Group */
.auth-checkbox-group {
  margin-bottom: 16px !important;
}

.auth-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.auth-checkbox-label input[type="checkbox"] {
  display: none;
}

.auth-checkbox-label .checkmark {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.auth-checkbox-label input[type="checkbox"]:checked+.checkmark {
  background: var(--primary-red);
  border-color: var(--primary-red);
}

.auth-checkbox-label input[type="checkbox"]:checked+.checkmark::after {
  content: '\2713';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.auth-checkbox-label:hover .checkmark {
  border-color: var(--primary-red);
}

.auth-link {
  color: var(--primary-red);
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.legal-modal-content {
  max-width: 840px;
  height: min(92vh, 860px);
  background:
    radial-gradient(circle at top right, rgba(181, 18, 56, 0.16), transparent 34%),
    linear-gradient(180deg, #11111a 0%, #09090d 100%);
}

.legal-modal-body {
  padding: 28px 28px 36px;
}

.legal-doc {
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--text-primary);
}

.legal-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-doc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(181, 18, 56, 0.3);
  border-radius: 999px;
  background: rgba(181, 18, 56, 0.1);
  color: #ffd2dd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-doc-callout {
  padding: 18px 18px 18px 20px;
  border: 1px solid rgba(181, 18, 56, 0.28);
  border-left: 3px solid #b51238;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(181, 18, 56, 0.14), rgba(255, 255, 255, 0.03));
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
}

.legal-doc-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-doc-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.legal-doc-section h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.legal-doc-section p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.72;
  font-size: 14px;
}

.legal-doc-list {
  margin: 0;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.76);
  display: grid;
  gap: 10px;
  line-height: 1.65;
  font-size: 14px;
}

.legal-doc-note {
  padding: 16px 18px;
  border: 1px solid rgba(181, 18, 56, 0.24);
  border-radius: 16px;
  background: rgba(181, 18, 56, 0.1);
  color: #fff;
  line-height: 1.65;
}

/* Date input styling */
input[type="date"].auth-input {
  color-scheme: dark;
}

input[type="date"].auth-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* Scrollable register form */
#registerForm {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 8px;
}

#registerForm::-webkit-scrollbar {
  width: 4px;
}

#registerForm::-webkit-scrollbar-track {
  background: transparent;
}

#registerForm::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

#registerForm::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

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

.paste-workout-modal.hidden {
  display: none;
}

.paste-modal-content {
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  background: var(--card-bg, #1a1a22);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.paste-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.paste-modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary, #fff);
}

.paste-modal-close {
  background: none;
  border: none;
  color: var(--text-muted, #666);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.paste-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}

.paste-modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.paste-modal-body p {
  margin: 0 0 12px 0;
  color: var(--text-secondary, #aaa);
  font-size: 14px;
}

#workoutPasteArea {
  width: 100%;
  min-height: 300px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: var(--text-primary, #fff);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

#workoutPasteArea:focus {
  border-color: var(--primary-red, #dc2626);
}

#workoutPasteArea::placeholder {
  color: var(--text-muted, #555);
}

.paste-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: 13px;
}

.paste-error.hidden {
  display: none;
}

.paste-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.paste-modal-footer .btn-secondary {
  flex: 1;
  padding: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 12px;
  color: var(--text-primary, #fff);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.paste-modal-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

.paste-modal-footer .btn-primary {
  flex: 2;
  padding: 14px;
  background: var(--primary-red, #dc2626);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.paste-modal-footer .btn-primary:hover {
  background: #b91c1c;
}

/* ===================================
   Ficha Renewal Banner & Modal
   =================================== */

/* Banner de Lembrete */
.ficha-renewal-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ficha-renewal-banner:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
  border-color: rgba(251, 191, 36, 0.5);
  transform: translateY(-1px);
}

.ficha-renewal-banner .renewal-icon {
  font-size: 24px;
}

.ficha-renewal-banner .renewal-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ficha-renewal-banner .renewal-text strong {
  color: #fbbf24;
  font-size: 14px;
  font-weight: 600;
}

.ficha-renewal-banner .renewal-text span {
  color: rgba(251, 191, 36, 0.8);
  font-size: 12px;
}

.ficha-renewal-banner .renewal-arrow {
  color: #fbbf24;
  font-size: 20px;
  font-weight: bold;
}

/* Modal de Confirmação */
.ficha-renewal-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.ficha-renewal-modal.hidden {
  display: none;
}

.ficha-renewal-modal-content {
  background: #1a1a1f;
  border-radius: 20px;
  padding: 32px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.renewal-modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.ficha-renewal-modal-content h3 {
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.ficha-renewal-modal-content p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.renewal-modal-buttons {
  display: flex;
  gap: 12px;
}

.renewal-modal-buttons .btn-cancel {
  flex: 1;
  padding: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

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

.renewal-modal-buttons .btn-confirm {
  flex: 1;
  padding: 14px;
  background: var(--primary-red, #b51238);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.renewal-modal-buttons .btn-confirm:hover {
  background: #9a0f30;
}

/* ===================================
   WARMUP BOXES STYLES
   =================================== */

.warmup-boxes-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  width: 100%;
}

.warmup-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.warmup-box:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.warmup-box.completed {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.warmup-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.warmup-box-icon {
  font-size: 18px;
}

.warmup-box-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.warmup-box-details {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.warmup-box-load {
  font-weight: 600;
  color: #fbbf24;
}

.warmup-box-separator {
  color: var(--text-muted);
}

.warmup-box-reps {
  color: var(--text-secondary);
}

.warmup-box-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.warmup-box-pending {
  font-size: 18px;
  font-weight: bold;
  color: #ef4444;
}

.warmup-box-done {
  font-size: 13px;
  font-weight: 600;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* When completed, add green styling */
.warmup-box.completed .warmup-box-title {
  color: #22c55e;
}

.warmup-box.completed .warmup-box-load {
  color: #22c55e;
}

/* ==== Toast Spinner Animation ==== */
@keyframes toastFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

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

.toast-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(181, 18, 56, 0.3);
  border-top-color: #b51238;
  border-radius: 50%;
  animation: toastSpin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ============================================
   SETTINGS MODAL
   ============================================ */
.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: settingsOverlayIn 0.25s ease-out;
}

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

@keyframes settingsOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.settings-modal-content {
  width: 100%;
  max-width: 500px;
  max-height: 92vh;
  background: #1a1a2e;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  animation: settingsSlideUp 0.3s ease-out;
  overflow: hidden;
}

@keyframes settingsSlideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  flex-shrink: 0;
}

.settings-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.settings-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.5rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.settings-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.settings-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 24px 32px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* Section titles */
.settings-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(181, 18, 56, 0.9);
  margin: 24px 0 8px;
}

.settings-section-title:first-child {
  margin-top: 8px;
}

.settings-ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-ai-icon {
  font-size: 0.8rem;
}

/* Settings rows */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}

.settings-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.settings-row-complex {
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 14px 0;
}

.settings-row-complex>div:first-child {
  flex: 1;
  min-width: 0;
}

.settings-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
}

.settings-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  line-height: 1.4;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #333;
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-switch input:checked+.toggle-slider {
  background: #b51238;
}

.toggle-switch input:checked+.toggle-slider::before {
  transform: translateX(22px);
}

/* Weight selector */
.weight-selector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.weight-selector-label {
  flex: 1;
  min-width: 0;
}

.weight-selector-label .settings-label {
  font-size: 0.9rem;
}

.weight-selector-label .settings-desc {
  font-size: 0.75rem;
}

.weight-selector-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.weight-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.weight-btn:active {
  background: rgba(181, 18, 56, 0.3);
  border-color: rgba(181, 18, 56, 0.5);
}

.weight-display {
  min-width: 60px;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
}

/* Divider */
.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 8px 0;
}

/* Support action buttons */
.settings-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background 0.15s;
  position: relative;
}

.settings-action-btn:active {
  background: rgba(255, 255, 255, 0.04);
}

.settings-action-icon {
  font-size: 1.2rem;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-badge-soon {
  font-size: 0.65rem;
  font-weight: 700;
  color: #b51238;
  background: rgba(181, 18, 56, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-action-chevron {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
  transition: transform 0.3s;
}

/* FAQ accordion */
.faq-container {
  padding: 0 0 4px;
  display: none;
}

.faq-container.active {
  display: block;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.faq-question:active {
  color: #fff;
}

.faq-chevron {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.3s;
  flex-shrink: 0;
  margin-left: 12px;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 0 0 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

.faq-item.active .faq-answer {
  display: block;
}

/* Report problem form */
.report-form {
  display: none;
  padding: 8px 0 16px;
}

.report-form.active {
  display: block;
}

.report-textarea {
  width: 100%;
  min-height: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  padding: 12px;
  resize: vertical;
  font-family: inherit;
}

.report-textarea:focus {
  outline: none;
  border-color: rgba(181, 18, 56, 0.5);
}

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

.report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.report-char-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.report-send-btn {
  padding: 8px 20px;
  border-radius: 20px;
  background: #b51238;
  color: #fff;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.report-send-btn:active {
  opacity: 0.8;
}

/* Logout button */
.settings-logout-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  color: #b51238;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  margin-top: 8px;
}

.settings-logout-icon {
  font-size: 1.1rem;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   WEEKLY VOLUME CARD
   ============================================ */

.weekly-volume-card {
  margin: 16px 16px 0;
  background: rgba(20, 20, 25, 0.85);
  border: 1px solid rgba(201, 48, 74, 0.15);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.weekly-volume-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 48, 74, 0.4), transparent);
}

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

.wv-title {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  text-transform: uppercase;
}

.wv-change {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.wv-change.positive {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.wv-change.negative {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.wv-change.neutral {
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.wv-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}

.wv-number {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wv-unit {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}

.wv-chart-container {
  position: relative;
  margin-top: 8px;
}

.wv-chart {
  width: 100%;
  height: 80px;
  display: block;
}

.wv-chart .chart-area {
  fill: url(#wvGradient);
  opacity: 0.3;
}

.wv-chart .chart-line {
  fill: none;
  stroke: #c9304a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(201, 48, 74, 0.4));
}

.wv-chart .chart-dot {
  fill: #c9304a;
  stroke: #1e1e23;
  stroke-width: 2;
}

.wv-chart .chart-dot-glow {
  fill: rgba(201, 48, 74, 0.3);
}

.wv-day-labels {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
}

.wv-day-labels span {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  flex: 1;
}

.wv-empty-state {
  text-align: center;
  padding: 20px 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

/* ============================================
   CONSISTENCY CARD (HEATMAP CALENDAR)
   ============================================ */

.consistency-card {
  margin-top: 16px;
  background: rgba(20, 20, 25, 0.85);
  border: 1px solid rgba(139, 30, 63, 0.2);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 16px 16px;
}

.cs-header {
  margin-bottom: 2px;
}

.cs-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
}

.cs-streak {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 14px;
}

.cs-fire {
  font-size: 1rem;
}

.cs-streak-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.cs-streak-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

/* Calendar Grid */
.cs-calendar {
  display: grid;
  grid-template-columns: repeat(10, 28px);
  gap: 6px;
  margin-bottom: 10px;
  justify-content: center;
}

.cs-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cs-day {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}

/* Intensity levels — wine color with varying opacity */
.cs-day[data-intensity="0"] {
  background: rgba(255, 255, 255, 0.08);
}

.cs-day[data-intensity="1"] {
  background: rgba(139, 30, 63, 0.4);
}

.cs-day[data-intensity="2"] {
  background: rgba(160, 35, 70, 0.6);
}

.cs-day[data-intensity="3"] {
  background: rgba(170, 40, 75, 0.8);
}

.cs-day[data-intensity="4"] {
  background: rgba(190, 50, 80, 1);
}

/* Empty cell (outside current month) */
.cs-day[data-intensity="-1"] {
  background: transparent;
}

/* Today marker */
.cs-day.cs-today {
  outline: 1.5px dashed rgba(255, 255, 255, 0.45);
  outline-offset: 1px;
}

/* Footer */
.cs-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.cs-month {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
}

.cs-legend {
  display: flex;
  align-items: center;
  gap: 3px;
}

.cs-legend-label {
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
}

.cs-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgb(139, 30, 63);
}

/* Meta Batida in consistency header */
.cs-meta {
  font-size: 0.7rem;
  font-weight: 700;
  color: #8B1E3F;
  letter-spacing: 0.5px;
}

/* ============================================
   PROFILE STATS ROW
   ============================================ */

.profile-stats-row {
  display: flex;
  gap: 12px;
  margin: 16px 16px 0;
}

.stat-mini-card {
  flex: 1;
  background: rgba(20, 20, 25, 0.85);
  border: 1px solid rgba(139, 30, 63, 0.2);
  border-radius: 16px;
  padding: 16px;
}

.stat-mini-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 1px;
  display: block;
  margin-bottom: 8px;
}

.stat-mini-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.stat-mini-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
}

.stat-mini-unit {
  font-size: 0.6rem;
  font-weight: 600;
  color: #8B1E3F;
  letter-spacing: 0.5px;
}

/* ============================================
   MILESTONE CARD
   ============================================ */

.milestone-card {
  background: rgba(20, 20, 25, 0.85);
  border: 1px solid rgba(139, 30, 63, 0.2);
  border-radius: 16px;
  padding: 18px;
  margin: 16px 16px 0;
}

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

.milestone-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 1.5px;
}

.milestone-edit-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
}

.milestone-edit-btn:hover {
  color: #8B1E3F;
}

.milestone-progress-container {
  margin-bottom: 12px;
}

.milestone-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.milestone-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B1E3F, #c2185b);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.milestone-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.milestone-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.milestone-pct {
  font-size: 0.7rem;
  font-weight: 700;
  color: #8B1E3F;
}

/* Milestone Modal */
.milestone-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.milestone-modal-overlay.hidden {
  display: none;
}

.milestone-modal {
  background: #1a1a22;
  border: 1px solid rgba(139, 30, 63, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 85%;
  max-width: 340px;
  text-align: center;
}

.milestone-modal h3 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 8px 0;
}

.milestone-modal p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  margin: 0 0 16px 0;
}

.milestone-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(139, 30, 63, 0.3);
  border-radius: 10px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  box-sizing: border-box;
}

.milestone-input:focus {
  border-color: #8B1E3F;
}

.milestone-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.milestone-cancel-btn {
  flex: 1;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

.milestone-save-btn {
  flex: 1;
  padding: 10px;
  background: #8B1E3F;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

/* ===================================
   MOBILE: expand content to screen edges
   =================================== */
@media (max-width: 500px) {
  .main-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Remove extra padding on training tab container */
  .treino-container {
    padding: 0 !important;
  }

  .main-tabs {
    width: calc(100% - 20px);
    left: 10px;
    transform: none;
    padding: 10px 8px;
  }

  .tab-btn {
    padding: 6px 6px;
    flex: 1;
    min-width: 0;
  }

  /* ==========================================
     Active Workout View - Fit on mobile screen
     ========================================== */
  .active-workout-view {
    padding-bottom: 0;
  }

  .workout-timer-bar {
    padding: 10px 16px;
  }

  .timer-value {
    font-size: 18px;
  }

  .btn-finalizar {
    padding: 8px 16px;
    font-size: 11px;
  }

  .exercise-swipe-area {
    padding: 0 12px;
  }

  .exercise-focus-card {
    padding: 16px 16px;
  }

  .exercise-header-row {
    margin-bottom: 8px;
  }

  .exercise-focus-name {
    font-size: 28px !important;
    margin-bottom: 10px;
  }

  .exercise-metrics-row {
    gap: 24px;
    margin-bottom: 16px;
  }

  .metric-big-value {
    font-size: 32px;
  }

  /* Warmup boxes compact */
  .warmup-boxes-container {
    margin-bottom: 10px;
  }

  /* Registrar serie button */
  .btn-registrar-serie {
    padding: 14px;
    margin-top: 8px;
  }

  /* Exercise nav bar at bottom */
  .exercise-nav-container {
    padding: 6px 10px;
    flex-shrink: 0;
  }

  .swipe-hint {
    font-size: 10px;
    padding: 2px 0;
  }

  .swipe-arrow-hint {
    display: none;
  }

  /* ==========================================
     Set Registration Modal - Fit on mobile
     ========================================== */
  .modal-overlay#setRegistrationModal {
    padding: 0;
  }

  .set-registration-modal {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
  }

  .set-reg-header {
    padding: 12px 16px;
    flex-shrink: 0;
  }

  .set-reg-header h2 {
    font-size: 14px;
  }

  .set-reg-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
  }

  .set-reg-stats {
    gap: 6px;
    margin-bottom: 12px;
  }

  .set-stat-card {
    padding: 8px 6px;
  }

  .set-stat-card .stat-label {
    font-size: 9px;
  }

  .set-stat-card .stat-value {
    font-size: 18px;
  }

  .set-focus-card {
    padding: 16px 12px;
    margin-bottom: 8px;
  }

  .set-focus-header {
    margin-bottom: 12px;
  }

  .input-controls .input-value {
    font-size: 32px;
    min-width: 50px;
  }

  .input-controls .btn-decrement,
  .input-controls .btn-increment {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .rpe-section {
    margin-top: 12px;
  }

  .btn-complete-set-reg {
    padding: 14px;
    font-size: 14px;
    margin-top: 12px;
  }

  .set-reg-footer {
    flex-shrink: 0;
    padding: 10px 16px;
  }

  .footer-buttons-row {
    gap: 8px;
  }

  .footer-buttons-row .btn-close-modal,
  .footer-buttons-row .btn-next-exercise {
    padding: 12px 10px;
    font-size: 12px;
  }

  /* ==========================================
     Quiz Final Screen - Fit on mobile
     ========================================== */
  .quiz-final-container {
    padding: 20px 16px;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
  }

  .final-success-icon {
    margin-bottom: 16px;
  }

  .final-success-icon svg {
    width: 64px;
    height: 64px;
  }

  .final-title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .final-subtitle {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .path-badge-container {
    margin-bottom: 10px;
  }

  .final-message {
    padding: 14px;
    margin-bottom: 16px;
  }

  .final-message p {
    font-size: 13px;
    line-height: 1.5;
  }

  .quiz-btn-primary.final {
    padding: 14px 24px;
    font-size: 14px;
  }

  /* ==========================================
     Progress Tab - Scroll & Sizing for mobile
     ========================================== */
  #tab-progresso {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    padding-bottom: 20px;
  }

  .progression-header {
    padding: 12px 16px;
  }

  .progression-header h1 {
    font-size: 16px;
  }

  .progress-subtab-nav {
    padding: 8px 12px;
  }

  .progress-page {
    padding: 12px;
  }

  .progress-swipe-container {
    scroll-behavior: smooth;
  }

  .history-section,
  .ai-suggestions-section {
    width: 100%;
  }

  .exercise-history-list {
    gap: 10px;
  }

  .section-label {
    font-size: 13px;
  }

  /* Ensure suggestions list scrolls smoothly */
  .suggestions-list-full {
    scroll-behavior: smooth;
  }

  /* Bigger cards for mobile readability */
  .exercise-history-card,
  .sug-card {
    padding: 14px;
    border-radius: 10px;
  }
}

/* ===================== */
/* PROFILE DIETS SECTION */
/* ===================== */

.profile-diets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-diet-card {
  background: rgba(20, 20, 30, 0.8);
  border: 1px solid rgba(139, 30, 63, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.profile-diet-card:hover {
  border-color: rgba(139, 30, 63, 0.5);
}

.profile-diet-card.active {
  border-color: rgba(139, 30, 63, 0.6);
  background: rgba(139, 30, 63, 0.1);
}

.profile-diet-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.profile-diet-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-diet-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.profile-diet-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.profile-diet-type-badge.maintain { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.profile-diet-type-badge.recomp { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.profile-diet-type-badge.bulk { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.profile-diet-type-badge.cut { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.profile-diet-type-badge.cutting { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.profile-diet-type-badge.bulking { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

.profile-diet-active-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(139, 30, 63, 0.3);
  color: #e0526f;
  letter-spacing: 0.5px;
}

.profile-diet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

.profile-diet-delete-btn {
  background: none;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  color: rgba(239, 68, 68, 0.6);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-diet-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.5);
}

/* Diet Delete Confirm Overlay */
.diet-delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.diet-delete-confirm-overlay.hidden {
  display: none;
}

.diet-delete-confirm-modal {
  background: #1a1a2e;
  border: 1px solid rgba(139, 30, 63, 0.4);
  border-radius: 16px;
  padding: 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}

.diet-delete-confirm-modal h3 {
  color: #fff;
  font-size: 16px;
  margin: 0 0 12px;
}

.diet-delete-confirm-modal p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin: 0 0 20px;
  line-height: 1.5;
}

.diet-delete-confirm-actions {
  display: flex;
  gap: 12px;
}

.diet-delete-cancel-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.diet-delete-confirm-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ===================================
   CONSISTENCY CARD (HEATMAP CALENDAR)
   =================================== */

.consistency-card {
  background: rgba(20, 20, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
}

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

.cs-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.cs-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.cs-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.cs-fire svg {
  display: block;
}

.cs-streak-number {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}

.cs-streak-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  margin-left: 2px;
  align-self: flex-end;
  margin-bottom: 5px;
}

/* Heatmap Grid */
.cs-calendar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}

.cs-day {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

/* Intensity levels */
.cs-day[data-intensity="1"] {
  background: rgba(139, 30, 63, 0.25);
}

.cs-day[data-intensity="2"] {
  background: rgba(139, 30, 63, 0.50);
}

.cs-day[data-intensity="3"] {
  background: rgba(139, 30, 63, 0.75);
}

.cs-day[data-intensity="4"] {
  background: rgba(139, 30, 63, 1);
}

/* Footer & Legend */
.cs-footer {
  display: flex;
  justify-content: flex-start;
}

.cs-legend {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-legend-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.cs-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(139, 30, 63, 1);
}