/* ============================================================
   PREMIUM UI  —  Micro-interactions, Animations & Visual Polish
   Design language: ivoire / noir editorial luxury minimalism
   Colors : ivory #FAFAF7 · black #0A0A09 · grey tones
   Fonts  : Georgia (serif) · Helvetica Neue (sans-serif)
   ============================================================ */


/* -------------------------------------------------------
   1. PAGE TRANSITIONS
   Smooth page transitions when switching steps
   ------------------------------------------------------- */

.page-enter {
  animation: pageEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.page-exit {
  animation: pageExit 0.2s ease forwards;
}

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


/* -------------------------------------------------------
   2. CARD INTERACTIONS
   Cards with smooth selection animation
   ------------------------------------------------------- */

.sel-card {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sel-card:active {
  transform: scale(0.97);
}

.sel-card.on {
  transform: scale(1);
  box-shadow: 0 2px 12px rgba(10, 10, 9, 0.12);
}


/* -------------------------------------------------------
   3. BUTTON ENHANCEMENTS
   Premium button press effect with shine sweep
   ------------------------------------------------------- */

.btn-primary {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
}

.btn-primary:hover::after {
  transform: translateX(100%);
  transition: transform 0.6s ease;
}


/* -------------------------------------------------------
   4. NUMBER INPUT ANIMATIONS
   Smooth number input focus
   ------------------------------------------------------- */

.num-input {
  transition: all 0.3s ease;
}

.num-input:focus {
  box-shadow: 0 0 0 3px rgba(10, 10, 9, 0.06);
}


/* -------------------------------------------------------
   5. PROGRESS BAR ANIMATION
   Animated progress with gradient and dot indicator
   ------------------------------------------------------- */

.progress-fill {
  background: linear-gradient(90deg, #0A0A09, #1A1A18);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 6px;
  background: #0A0A09;
  border-radius: 50%;
}


/* -------------------------------------------------------
   6. SPLASH SCREEN ENHANCEMENTS
   Premium splash animations with subtle pulse CTA
   ------------------------------------------------------- */

.splash-logo {
  font-size: 13px;
  letter-spacing: 10px;
}

.splash-quote {
  font-size: 18px;
  line-height: 1.8;
}

@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 10, 9, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(10, 10, 9, 0.04); }
}

.splash-btn {
  animation:
    splashFadeUp 0.8s ease 1.1s forwards,
    subtlePulse 3s ease 2s infinite;
}


/* -------------------------------------------------------
   7. MEAL CARD HOVER EFFECTS
   ------------------------------------------------------- */

.meal-card {
  transition: all 0.2s ease;
}

.meal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(10, 10, 9, 0.08);
}


/* -------------------------------------------------------
   8. SVG RING ANIMATIONS
   Entrance animation for macro rings
   ------------------------------------------------------- */

.ring-wrap {
  opacity: 0;
  animation: ringIn 0.5s ease forwards;
}

.ring-wrap:nth-child(1) { animation-delay: 0.1s; }
.ring-wrap:nth-child(2) { animation-delay: 0.25s; }
.ring-wrap:nth-child(3) { animation-delay: 0.4s; }

@keyframes ringIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}


/* -------------------------------------------------------
   9. STAGGERED LIST ITEMS
   Stagger animation for lists, grids and check items
   ------------------------------------------------------- */

.level-item,
.check-item,
.sel-card {
  opacity: 0;
  animation: staggerIn 0.3s ease forwards;
}

.level-item:nth-child(1),
.sel-card:nth-child(1),
.check-item:nth-child(1) { animation-delay: 0.05s; }

.level-item:nth-child(2),
.sel-card:nth-child(2),
.check-item:nth-child(2) { animation-delay: 0.1s; }

.level-item:nth-child(3),
.sel-card:nth-child(3),
.check-item:nth-child(3) { animation-delay: 0.15s; }

.level-item:nth-child(4),
.sel-card:nth-child(4),
.check-item:nth-child(4) { animation-delay: 0.2s; }

.level-item:nth-child(5),
.sel-card:nth-child(5),
.check-item:nth-child(5) { animation-delay: 0.25s; }

.level-item:nth-child(6),
.sel-card:nth-child(6)  { animation-delay: 0.3s; }

.level-item:nth-child(7) { animation-delay: 0.35s; }

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


/* -------------------------------------------------------
   10. RESULT PAGE PREMIUM ANIMATIONS
   Big number entrance and decorative rule expansion
   ------------------------------------------------------- */

.big-number .bn-val {
  display: inline-block;
  animation: countIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.result-rule {
  animation: ruleExpand 0.5s ease 0.3s forwards;
  transform-origin: center;
}

@keyframes ruleExpand {
  from { width: 0; }
  to   { width: 32px; }
}


/* -------------------------------------------------------
   11. MODAL ENHANCEMENTS
   Premium modal with backdrop blur
   ------------------------------------------------------- */

.modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-sheet {
  border-radius: 0;
  box-shadow: 0 -8px 32px rgba(10, 10, 9, 0.15);
}


/* -------------------------------------------------------
   12. TOOLTIP SYSTEM
   Elegant editorial tooltips
   ------------------------------------------------------- */

[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0A0A09;
  color: #FAFAF7;
  padding: 6px 12px;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 100;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


/* -------------------------------------------------------
   13. CHIP / TAG INTERACTIONS
   ------------------------------------------------------- */

.chip {
  transition: all 0.15s ease;
}

.chip:active {
  transform: scale(0.95);
}

.chip.on {
  box-shadow: inset 0 0 0 1px #0A0A09;
}


/* -------------------------------------------------------
   14. PHOTO UPLOAD ZONES
   ------------------------------------------------------- */

.photo-upload {
  transition: all 0.3s ease;
}

.photo-upload:hover {
  border-color: #0A0A09;
  background: rgba(10, 10, 9, 0.02);
}

.photo-upload.has-photo {
  border-style: solid;
  border-color: #1A4A1A;
}

@keyframes photoIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.photo-upload img {
  animation: photoIn 0.3s ease;
}


/* -------------------------------------------------------
   15. CHART CONTAINER ANIMATIONS
   ------------------------------------------------------- */

.chart-container {
  opacity: 0;
  animation: chartIn 0.5s ease 0.2s forwards;
}

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


/* -------------------------------------------------------
   16. EXERCISE CARD — SPORT MODULE
   ------------------------------------------------------- */

.exercise-card {
  border-radius: 4px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--ivory2);
  transition: all 0.2s ease;
  cursor: pointer;
  overflow: hidden;
}

.exercise-card:hover {
  transform: translateX(4px);
  border-left: 3px solid var(--black);
  padding-left: 13px;
}

.exercise-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  color: var(--blue, #1A3A6A);
  margin-top: 8px;
  text-decoration: none;
  border: 1px solid var(--blue, #1A3A6A);
  padding: 4px 10px;
  transition: all 0.2s ease;
}

.exercise-video:hover {
  background: var(--bluebg, rgba(26,58,106,.06));
  transform: translateX(2px);
}

.exercise-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  margin-bottom: 4px;
}

.exercise-muscle {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey);
}

.exercise-sets {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  color: var(--black);
  margin-top: 6px;
}

.exercise-detail {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  color: var(--grey);
  margin-top: 6px;
}


/* -------------------------------------------------------
   17. AUTH SCREEN POLISH
   ------------------------------------------------------- */

.auth-container {
  animation: authIn 0.6s ease forwards;
}

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

.auth-line {
  animation: splashLine 0.5s ease 0.2s forwards;
  width: 0;
}

.auth-form .field {
  opacity: 0;
  animation: staggerIn 0.3s ease forwards;
}

.auth-form .field:nth-child(1) { animation-delay: 0.1s; }
.auth-form .field:nth-child(2) { animation-delay: 0.15s; }
.auth-form .field:nth-child(3) { animation-delay: 0.2s; }
.auth-form .field:nth-child(4) { animation-delay: 0.25s; }


/* -------------------------------------------------------
   18. SCROLL BEHAVIOR ENHANCEMENTS
   Smooth scroll and custom themed scrollbar
   ------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 3px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--grey3);
  border-radius: 0;
}

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


/* -------------------------------------------------------
   19. DAY TAB ANIMATIONS
   ------------------------------------------------------- */

.day-tab {
  transition: all 0.2s ease;
  position: relative;
}

.day-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #0A0A09;
  animation: tabActivate 0.2s ease;
}

@keyframes tabActivate {
  from { width: 0; }
  to   { width: 20px; }
}


/* -------------------------------------------------------
   20. NAVIGATION PREMIUM
   ------------------------------------------------------- */

.main-nav {
  position: relative;
}

.main-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #0A0A09;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav-tab {
  transition: all 0.3s ease;
}

.main-nav-tab:hover {
  background: rgba(10, 10, 9, 0.02);
}

.main-nav-tab.active {
  font-weight: 500;
}


/* -------------------------------------------------------
   21. LOADING SKELETON
   Shimmer placeholder for charts and content loading
   ------------------------------------------------------- */

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #EEEDE8 25%, #F4F4F0 50%, #EEEDE8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 2px;
}


/* -------------------------------------------------------
   22. NOTIFICATION / TOAST SYSTEM
   ------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #0A0A09;
  color: #FAFAF7;
  padding: 12px 24px;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 2000;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(10, 10, 9, 0.2);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}


/* -------------------------------------------------------
   23. PRINT STYLES
   ------------------------------------------------------- */

@media print {
  .header,
  .footer,
  .main-nav,
  .user-bar,
  .btn-primary,
  .btn-secondary,
  .btn-back,
  .swap-btn,
  .regen-btn {
    display: none !important;
  }

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

  .meal-card {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
}


/* -------------------------------------------------------
   24. DARK MODE SUPPORT
   Subtle dark mode — keeps the editorial feel
   ------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --ivory:    #1A1A18;
    --ivory2:   #222220;
    --ivory3:   #2A2A28;
    --ivory4:   #333330;
    --black:    #FAFAF7;
    --black2:   #F0F0ED;
    --grey:     #9A9A94;
    --grey2:    #7A7A74;
    --grey3:    #5A5A54;
    --border:   #3A3A38;
    --green:    #4ABA4A;
    --greenbg:  rgba(74, 186, 74, .08);
    --blue:     #6A9ADA;
    --bluebg:   rgba(106, 154, 218, .08);
    --orange:   #DAA06A;
    --orangebg: rgba(218, 160, 106, .08);
    --red:      #DA6A6A;
    --redbg:    rgba(218, 106, 106, .08);
  }

  body {
    background: var(--ivory);
    color: var(--black);
  }

  .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
  }
}

/* ── DARK MODE — Manual toggle ── */
body.dark-mode {
  --ivory:#1A1A18;--ivory2:#222220;--ivory3:#2A2A28;--ivory4:#333330;
  --black:#FAFAF7;--black2:#F0F0ED;--grey:#9A9A94;--grey2:#7A7A74;--grey3:#5A5A54;
  --border:#3A3A38;--green:#4ABA4A;--greenbg:rgba(74,186,74,.08);
  --blue:#6A9ADA;--bluebg:rgba(106,154,218,.08);--orange:#DAA06A;--orangebg:rgba(218,160,106,.08);
  --red:#DA6A6A;--redbg:rgba(218,106,106,.08);
  /* Semantic aliases — dark overrides */
  --bg:#1A1A18;--text:#FAFAF7;--text-secondary:#9A9A94;
  --card:#222220;--surface:#222220;--accent:#4ABA4A;
  background:var(--ivory);color:var(--black);
}
body.dark-mode .modal-overlay{background:rgba(0,0,0,0.7)}
body.dark-mode input,body.dark-mode select{background:var(--ivory2);color:var(--black);border-color:var(--border)}
body.dark-mode .sel-card{background:var(--ivory2);border-color:var(--border);color:var(--black)}
body.dark-mode .sel-card.on{background:var(--black);color:var(--ivory)}
body.dark-mode .btn-primary{background:var(--black);color:var(--ivory)}
body.dark-mode .exercise-card,body.dark-mode .meal-card,body.dark-mode .product-card{background:var(--ivory2);border-color:var(--border)}
body.dark-mode .chart-container,body.dark-mode .photo-upload{background:var(--ivory2);border-color:var(--border)}
body.dark-mode .num-input{background:var(--ivory2);color:var(--black);border-color:var(--border)}
body.dark-mode .level-item{border-color:var(--border)}
body.dark-mode .level-item.on{background:var(--black);color:var(--ivory)}
body.dark-mode .chip{border-color:var(--border);color:var(--grey)}
body.dark-mode .chip.on{background:var(--black);color:var(--ivory);border-color:var(--black)}
body.dark-mode .day-tab{color:var(--grey)}
body.dark-mode .day-tab.active{color:var(--black);border-bottom-color:var(--black)}
body.dark-mode .progress-fill{background:var(--black)}
body.dark-mode .toast{background:var(--ivory);color:#1A1A18}

/* E-07: règles dark mode manquantes */
body.dark-mode .main-nav-tab:hover{background:rgba(250,250,247,0.06)}
body.dark-mode .main-nav::after{background:var(--black)}
body.dark-mode .skeleton{background:linear-gradient(90deg,var(--ivory2) 25%,var(--ivory3) 50%,var(--ivory2) 75%);background-size:200% 100%}
body.dark-mode .user-logout{background:none;color:var(--grey);border-color:var(--border)}
body.dark-mode .user-logout:hover{color:var(--black)}
body.dark-mode .btn-back{color:var(--grey)}
body.dark-mode .btn-secondary{background:var(--ivory2);color:var(--black);border-color:var(--border)}
body.dark-mode .result-block{background:var(--ivory2);border-color:var(--border)}
body.dark-mode .stat-badge,body.dark-mode .kpi-box{background:var(--ivory2);border-color:var(--border);color:var(--black)}
body.dark-mode table td,body.dark-mode table th{border-color:var(--border);color:var(--black)}
body.dark-mode table tr:nth-child(even){background:var(--ivory2)}
body.dark-mode .week-separator{border-color:var(--border)}


/* -------------------------------------------------------
   25. RESPONSIVE ENHANCEMENTS
   ------------------------------------------------------- */

/* Small phones */
@media (max-width: 560px) {
  h1 { font-size: 32px; }
  .result-title { font-size: 36px; }
  .card-grid-3,
  .card-grid-4  { grid-template-columns: 1fr 1fr; }
  .check-grid   { grid-template-columns: 1fr; }
  .stats-row    { grid-template-columns: 1fr 1fr; }
  .macro-pills  { grid-template-columns: 1fr 1fr; }
  .rings-row    { gap: 20px; }
  .photo-grid   { grid-template-columns: 1fr; }

  .alcohol-item {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* Narrow phones */
@media (max-width: 380px) {
  .app            { padding: 0 16px 60px; }
  .card-grid-2    { grid-template-columns: 1fr; }
  .auth-container { padding: 40px 16px; }
}

/* Tablet optimization */
@media (min-width: 768px) {
  .app { max-width: 720px; }
  h1   { font-size: 48px; }

  .splash-quote {
    font-size: 20px;
    max-width: 400px;
  }
}

/* -------------------------------------------------------
   SEMANTIC VALUE INDICATORS
   Green = good · Orange = warning · Red = alert
   Applied to macros, vitals, performance metrics
   ------------------------------------------------------- */

/* Macro progress bars — colored fill */
.macro-fill-protein { background: var(--green) !important; }
.macro-fill-carbs   { background: var(--blue, #6A9ADA) !important; }
.macro-fill-fat     { background: var(--orange) !important; }

/* Value status chips — compact inline indicators */
.val-good    { color: var(--green);  background: var(--greenbg);  border: 1px solid var(--green);  padding: 2px 8px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.val-warn    { color: var(--orange); background: var(--orangebg); border: 1px solid var(--orange); padding: 2px 8px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.val-alert   { color: var(--red);    background: var(--redbg);    border: 1px solid var(--red);    padding: 2px 8px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.val-neutral { color: var(--grey);   border: 1px solid var(--border); padding: 2px 8px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }

/* Calorie budget bar — dynamic color */
.budget-bar-fill {
  background: var(--green);
  transition: background 0.4s ease, width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.budget-bar-fill.over-budget { background: var(--red); }
.budget-bar-fill.near-budget { background: var(--orange); }

/* Set tracking — per-series result color */
.set-success { color: var(--green); font-weight: 600; }
.set-fail    { color: var(--red);   font-weight: 600; }
.set-pending { color: var(--grey); }

/* Performance trend arrows */
.trend-up   { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--grey); }

/* Score badge — weekly compliance */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: 'Georgia', serif;
  font-size: 14px;
  font-weight: normal;
  border: 2px solid;
}
.score-badge.excellent { color: var(--green);  border-color: var(--green);  background: var(--greenbg); }
.score-badge.good      { color: var(--blue, #6A9ADA); border-color: var(--blue, #6A9ADA); background: var(--bluebg, rgba(106,154,218,.08)); }
.score-badge.average   { color: var(--orange); border-color: var(--orange); background: var(--orangebg); }
.score-badge.poor      { color: var(--red);    border-color: var(--red);    background: var(--redbg); }

/* Macro ring — colored outlines for donut chart segments */
.ring-protein { stroke: var(--green); }
.ring-carbs   { stroke: var(--blue, #6A9ADA); }
.ring-fat     { stroke: var(--orange); }

/* Stat cell highlight — for key metrics in summary */
.stat-cell.stat-good  { border-bottom: 2px solid var(--green); }
.stat-cell.stat-warn  { border-bottom: 2px solid var(--orange); }
.stat-cell.stat-alert { border-bottom: 2px solid var(--red); }

/* -------------------------------------------------------
   MACRO PROGRESS BAR — 3-color split visual
   ------------------------------------------------------- */
.macro-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 8px;
}
.macro-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

/* -------------------------------------------------------
   ANIMATED NUMBER — when values update
   ------------------------------------------------------- */
@keyframes numPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.num-pop { animation: numPop 0.3s ease; }

/* -------------------------------------------------------
   IMC WIDGET — prominent colored display
   ------------------------------------------------------- */
.imc-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  border: 2px solid;
  margin: 12px 0;
  gap: 4px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.imc-widget .imc-value {
  font-family: 'Georgia', serif;
  font-size: 36px;
  line-height: 1;
  font-weight: normal;
}
.imc-widget .imc-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey);
}
.imc-widget .imc-category {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* -------------------------------------------------------
   TYPOGRAPHIC HIERARCHY — Luxury House Standard
   ------------------------------------------------------- */

/* Majuscules espacées pour labels et catégories */
.label-caps {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: normal;
}

/* Valeurs numériques proéminentes */
.value-display {
  font-family: 'Georgia', serif;
  font-size: 28px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: -0.5px;
}

/* Titres de section — style editorial */
.section-head {
  font-family: 'Georgia', serif;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  line-height: 1.2;
}

/* Sous-titres — Helvetica léger */
.section-sub {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--grey);
  font-weight: 300;
  line-height: 1.5;
}

/* Séparateurs fins style luxe */
.divider-luxury {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
  opacity: 0.5;
}

/* Espacement cohérent des listes d'items */
.list-item-luxury {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
}
.list-item-luxury:last-child { border-bottom: none; }

/* Chips et badges — sizing cohérent */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  border: 1px solid var(--border);
  white-space: nowrap;
  gap: 4px;
}

/* -------------------------------------------------------
   LAYOUT ANTI-OVERLAP — Spacing & Breathing Room
   ------------------------------------------------------- */

/* Line-height systématique */
body, p, .subtitle {
  line-height: 1.7;
}

/* Cards spacing */
.card,
.meal-card,
.exercise-card,
.sel-card,
.product-card {
  margin-bottom: 16px;
}

/* Section titles spacing */
.section-title,
.step-title,
.page-title {
  margin-bottom: 20px;
  margin-top: 32px;
}

/* Badges, chips, tags — overflow control */
.badge,
.chip,
.tag,
.muscle-tag,
.level-badge,
.val-good,
.val-warn,
.val-alert,
.val-neutral {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Tags collections — prevent overlap */
.tags,
.chip-wrap,
.muscle-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Recipe name truncation — 2-line clamp */
.recipe-name,
.meal-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}

/* Grid responsive — prevent overflow on small screens */
.card-grid-2,
.card-grid-3,
.card-grid-4 {
  gap: 12px;
}

@media (max-width: 480px) {
  .card-grid-3,
  .card-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* App container — iOS smooth scroll */
.app {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Button minimum touch target */
.btn-primary,
.btn-secondary {
  min-height: 44px;
}

/* App padding mobile */
@media (max-width: 680px) {
  .app {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* -------------------------------------------------------
   UX AUDIT FIXES — go-live
   ------------------------------------------------------- */

/* 1. Prevent horizontal scroll on mobile */
body {
  overflow-x: hidden;
}

/* 2. Touch targets — Apple HIG 44×44 minimum */
.btn-primary,
.btn-secondary,
.btn-back,
.swap-btn,
.regen-btn,
.day-tab,
.main-nav-tab,
.chip,
.level-item,
.sel-card,
.muscle-tag,
.dash-action,
.dash-nav {
  min-height: 44px;
}
.btn-primary,
.btn-secondary,
.swap-btn,
.chip,
.level-badge,
.muscle-tag {
  min-width: 44px;
}

/* 3. Focus outlines — keyboard accessibility */
.btn-primary:focus,
.btn-secondary:focus,
.btn-back:focus,
.swap-btn:focus,
.regen-btn:focus,
.day-tab:focus,
.main-nav-tab:focus,
.chip:focus,
.sel-card:focus,
.level-item:focus,
.check-item:focus,
.muscle-tag:focus,
.exercise-card:focus,
.dash-action:focus,
.dash-nav:focus,
.modal-close:focus {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* 4. Word-break to prevent text overflow */
.recipe-name,
.meal-name,
.exercise-name,
.card-name,
.level-name,
.check-label,
.exercise-detail,
.ingredient-list li {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 5. Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 6. WCAG AA contrast — text-secondary must be ≥4.5:1 on #FAFAF7
   #6B6B65 = ratio ~3.9:1 (FAIL) → corrected to #5A5A54 = ratio ~4.6:1 (PASS) */
:root {
  --grey: #5A5A54;
  --text-secondary: #5A5A54;
}

/* 7. Empty state styling */
.empty-state {
  text-align: center;
  padding: 32px 24px;
  color: var(--grey);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  border: 1px dashed var(--border);
  background: var(--ivory2);
  margin: 16px 0;
}
.empty-state-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 12px;
}
.empty-state-title {
  font-family: 'Georgia', serif;
  font-size: 16px;
  color: var(--black);
  margin-bottom: 6px;
  line-height: 1.3;
}

/* 8. Body line-height enforcement */
p, li, .card-sub, .level-desc, .exercise-detail,
.exercise-muscle, .exercise-sets, .check-label {
  line-height: 1.5;
}

/* 9. Section spacing */
.dash-label,
.section-label,
.step-label {
  margin-top: 32px;
  margin-bottom: 14px;
}

/* 10. Cursor pointer for all interactive elements */
.sel-card,
.level-item,
.check-item,
.chip,
.muscle-tag,
.exercise-card,
.day-tab,
.main-nav-tab,
.meal-card,
.swap-btn,
.regen-btn,
.dash-action,
.dash-nav {
  cursor: pointer;
}



/* -------------------------------------------------------
   25. ARABIC SHOPPING LIST (RTL / Darija)
   ------------------------------------------------------- */

/* Conteneur principal RTL */
.shop-ar {
  direction: rtl;
  text-align: right;
  font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
}

/* Header de catégorie en RTL */
.shop-ar .shop-cat-header {
  direction: rtl;
  text-align: right;
  font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
  letter-spacing: 0;
}

/* Ligne d'article en RTL */
.shop-ar .shop-item-row {
  direction: rtl;
  flex-direction: row-reverse;
}

/* Checkbox RTL */
.shop-ar .shop-cb {
  margin-right: 0;
  margin-left: 12px;
}

/* Label RTL */
.shop-ar .shop-item-label {
  text-align: right;
  font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
}

/* Titre principal liste en arabe */
.shop-ar-title {
  font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
  direction: rtl;
  text-align: right;
}

/* Bouton toggle arabe */
.btn-shop-ar {
  padding: 8px 14px;
  background: #1A4A1A;
  color: #fff;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
}
.btn-shop-ar.active {
  background: #0D3310;
}

/* Bouton imprimer en arabe */
.btn-shop-print-ar {
  padding: 8px 14px;
  background: #1A3A6A;
  color: #fff;
  border: none;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
}

/* ── PRINT : n'imprimer QUE la liste de courses en arabe ── */
@media print {
  /* Masquer tout sauf la liste */
  body > *:not(#app),
  .header,
  .footer,
  .main-nav,
  .user-bar,
  .btn-primary,
  .btn-secondary,
  .btn-back,
  .swap-btn,
  .regen-btn,
  .btn-shop-ar,
  .btn-shop-print-ar,
  .shop-print-hide {
    display: none !important;
  }

  /* Zone d'impression de la liste */
  .shop-print-area {
    display: block !important;
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
    padding: 20px;
    color: #000;
    background: #fff;
  }

  .shop-print-area .shop-print-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
  }

  .shop-print-area .shop-print-date {
    font-size: 12px;
    color: #666;
    margin-bottom: 16px;
    direction: rtl;
    text-align: right;
  }

  .shop-print-area .shop-cat-block {
    margin-bottom: 12px;
    break-inside: avoid;
  }

  .shop-print-area .shop-cat-name {
    font-size: 13px;
    font-weight: 700;
    background: #f0f0f0;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 4px;
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
  }

  .shop-print-area .shop-print-item {
    display: flex;
    justify-content: space-between;
    direction: rtl;
    padding: 3px 10px;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    font-family: 'Segoe UI', Arial, 'Tahoma', sans-serif;
  }

  /* Masquer les éléments non liés à l'impression */
  .shop-no-print {
    display: none !important;
  }
}

/* ============================================================
   LUXURY REFINEMENT — Cormorant Garamond · Montserrat
   Design language: Hermès · Patek Philippe · Dior · Richard Mille
   ============================================================ */

/* -------------------------------------------------------
   L1. TYPOGRAPHY — Cormorant Garamond for editorial titles
   Montserrat for labels and UI copy
   ------------------------------------------------------- */

h1, h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.eyebrow,
.eyebrow-title,
.result-eyebrow {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  letter-spacing: 6px;
}

.result-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

body,
.field-label,
.section-label,
.label-caps,
.num-unit,
.num-hint,
.eyebrow,
.subtitle,
.card-sub,
.card-tag,
.level-desc,
.level-badge,
.chip,
.check-label,
.step-indicator,
.main-nav-tab,
.day-tab,
.meal-type,
.meal-macros,
.meal-level,
.dt-label,
.bar-name,
.bar-val,
.ring-label,
.stat-label,
.macro-cell .m-unit,
.macro-cell .m-label,
.mp-label,
.chart-title,
.user-name,
.user-logout,
.auth-sub,
.auth-switch,
.modal-close,
.swap-btn,
.regen-btn,
.btn-primary,
.btn-secondary,
.btn-back,
.section-sub,
.section-head,
.imc-widget .imc-label,
.imc-widget .imc-category,
.macro-check,
.splash-sub,
.photo-upload .photo-label {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
}

/* Serif titles for cards and modules */
.card-name,
.level-name,
.meal-name,
.exercise-name,
.step-title,
.page-title,
.section-head,
.modal-title,
.auth-logo,
.splash-logo,
.logo,
.empty-state-title,
.imc-value,
.imc-widget .imc-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Numerical display — Cormorant with oldstyle figures (Patek detail) */
.dash-big,
.macro-value,
.kpi-value,
.stat-val,
.macro-cell .m-val,
.macro-pill .mp-val,
.big-number .bn-val,
.num-input,
.meal-kcal,
.dt-val,
.ring-val,
.value-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-feature-settings: "onum" 1;
  font-weight: 300;
}


/* -------------------------------------------------------
   L2. BODY LINE-HEIGHT & BREATHING ROOM
   Le luxe respire — generosity of space
   ------------------------------------------------------- */

body, p, .subtitle {
  line-height: 1.7;
}

.eyebrow,
.eyebrow-title,
.result-eyebrow,
.field-label,
.section-label,
.stat-label,
.card-tag,
.label-caps,
.level-badge,
.main-nav-tab,
.day-tab {
  letter-spacing: 6px;
}


/* -------------------------------------------------------
   L3. BUTTONS — signature luxe hover fill bottom-to-top
   Hermès cubic-bezier courbe
   ------------------------------------------------------- */

.btn-primary {
  letter-spacing: 6px;
  font-size: 8px;
  padding: 18px 28px;
  border: 1px solid var(--black);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* Override the existing shine sweep ::after with fill-from-bottom */
.btn-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--black2);
  transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
  transform: none;
}

.btn-primary:hover::after {
  height: 100%;
  transform: none;
  transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure button text stays above the fill overlay */
.btn-primary > * {
  position: relative;
  z-index: 1;
}


/* -------------------------------------------------------
   L4. SEPARATORS — gradient-fade signature lines
   ------------------------------------------------------- */

.result-rule,
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--black), transparent);
  margin: 20px 0;
}

/* Luxury divider — for important separations */
.luxury-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--black), transparent);
  margin: 28px 0;
  opacity: 0.6;
}


/* -------------------------------------------------------
   L5. CARDS — lévitation subtile Dior
   ------------------------------------------------------- */

.sel-card,
.meal-card,
.exercise-card,
.dash-card {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s ease;
}

.sel-card:hover,
.meal-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(10, 10, 9, 0.06);
}


/* -------------------------------------------------------
   L6. NAVIGATION — backdrop blur luxe
   ------------------------------------------------------- */

.main-nav {
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(250, 250, 247, 0.92);
}

.main-nav-tab {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}


/* -------------------------------------------------------
   L7. INPUTS — underline style Hermès (angles droits)
   ------------------------------------------------------- */

.field input,
.field textarea {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  background: transparent;
  transition: border-color 0.3s ease;
}

.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--black);
  outline: none; /* border-bottom acts as focus indicator */
  box-shadow: 0 1px 0 0 var(--black); /* WCAG: visible focus via underline reinforcement */
}

.num-input {
  border-radius: 0;
}


/* -------------------------------------------------------
   L8. MICRO-ANIMATIONS — entrance et sélections
   ------------------------------------------------------- */

#app-root {
  animation: luxeFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.chip,
.level-item {
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* -------------------------------------------------------
   L9. AUTH SCREENS — vitrine de la maison
   ------------------------------------------------------- */

.auth-container {
  max-width: 420px;
  margin: 0 auto;
  padding: 60px 32px;
}

.auth-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  letter-spacing: 8px;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 48px;
  text-align: center;
}

.auth-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 32px;
  text-align: center;
}


/* -------------------------------------------------------
   L10. SECTIONS — spacing +8px for breathing room
   ------------------------------------------------------- */

.card,
.result-block,
.kpi-box {
  padding-top: calc(var(--card-pad, 16px) + 4px);
  padding-bottom: calc(var(--card-pad, 16px) + 4px);
}

.section-label,
.step-label,
.dash-label {
  margin-top: 40px;
  margin-bottom: 22px;
}

.section-title,
.step-title,
.page-title {
  margin-bottom: 28px;
  margin-top: 40px;
}


/* -------------------------------------------------------
   L11. SCROLLBAR — 3px ultra-fine luxe
   ------------------------------------------------------- */

::-webkit-scrollbar {
  width: 3px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--grey3);
  border-radius: 0;
}

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


/* -------------------------------------------------------
   L12. DARK MODE — luxury class consistency
   ------------------------------------------------------- */

body.dark-mode .main-nav {
  background: rgba(26, 26, 24, 0.92);
  border-top-color: var(--border);
}

body.dark-mode .field input,
body.dark-mode .field textarea {
  border-bottom-color: var(--border);
  background: transparent;
  color: var(--black);
}

body.dark-mode .field input:focus,
body.dark-mode .field textarea:focus {
  border-bottom-color: var(--black);
}

body.dark-mode .luxury-divider {
  background: linear-gradient(90deg, transparent, var(--black), transparent);
}

body.dark-mode .result-rule,
body.dark-mode .section-divider {
  background: linear-gradient(90deg, transparent, var(--black), transparent);
}

body.dark-mode .auth-container {
  color: var(--black);
}

@media (prefers-color-scheme: dark) {
  .main-nav {
    background: rgba(26, 26, 24, 0.92);
  }

  .field input,
  .field textarea {
    background: transparent;
    border-bottom-color: var(--border);
    color: var(--black);
  }

  .field input:focus,
  .field textarea:focus {
    border-bottom-color: var(--black);
  }
}


/* -------------------------------------------------------
   REDUCED MOTION — respect system preference
   (reinforces existing rule, luxury animations only)
   ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after,
  #app-root,
  .luxury-divider,
  .sel-card,
  .meal-card,
  .exercise-card,
  .dash-card {
    animation: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------
   MEAL BADGES — Training day / Rest day indicators
   ------------------------------------------------------- */
.meal-badge {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.badge-pre {
  background: linear-gradient(135deg, #E07B00, #F39C12);
  color: #fff;
}
.badge-post {
  background: linear-gradient(135deg, #1A8C1A, #27AE60);
  color: #fff;
}
.badge-rest {
  background: linear-gradient(135deg, #6C3483, #8E44AD);
  color: #fff;
}
.day-training-indicator {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: #C0392B;
  font-weight: 700;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: rgba(192, 57, 43, 0.06);
  border-radius: 8px;
  border-left: 3px solid #C0392B;
}
.day-rest-indicator {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: #7F8C8D;
  font-weight: 600;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: rgba(127, 140, 141, 0.06);
  border-radius: 8px;
  border-left: 3px solid #8E44AD;
}

/* -------------------------------------------------------
   SET TABLE — Interactive series tracking with deltas
   ------------------------------------------------------- */
.set-table-container {
  margin: 10px 0;
  overflow-x: auto;
}
.set-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
}
.set-table th {
  background: var(--black2, #2C3E50);
  color: var(--ivory, #FAFAF7);
  padding: 6px 10px;
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.set-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border, #ECF0F1);
}
.set-row:nth-child(even) {
  background: var(--ivory2, #F8F9FA);
}
.set-load-input, .set-reps-input {
  width: 54px;
  padding: 4px;
  border: 1px solid var(--border, #BDC3C7);
  border-radius: 4px;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 13px;
  background: var(--ivory, #FAFAF7);
}
.set-load-input:focus, .set-reps-input:focus {
  border-color: var(--blue, #3498DB);
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.set-delta {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
}
.delta-up {
  color: #27AE60;
  background: rgba(39, 174, 96, 0.1);
}
.delta-down {
  color: #E74C3C;
  background: rgba(231, 76, 60, 0.1);
}
.delta-flat {
  color: #7F8C8D;
  background: rgba(127, 140, 141, 0.08);
}
.set-progress-badge {
  padding: 8px 12px;
  background: linear-gradient(135deg, #27AE60, #2ECC71);
  color: #fff;
  border-radius: 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
}
.set-num {
  font-weight: 700;
  color: var(--black, #0A0A09);
}

/* -------------------------------------------------------
   SET VALIDATE BUTTON
   ------------------------------------------------------- */
.set-validate-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #27AE60, #2ECC71);
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, box-shadow 0.1s;
}
.set-validate-btn:active {
  transform: scale(0.95);
}
.set-validate-btn-disabled {
  background: var(--border, #BDC3C7);
  color: var(--grey, #888);
  cursor: not-allowed;
  opacity: 0.6;
}
.set-row-validated {
  background: rgba(39, 174, 96, 0.08) !important;
}

/* -------------------------------------------------------
   REST TIMER OVERLAY — Full-screen countdown between sets
   ------------------------------------------------------- */
.rest-timer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 9, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rest-timer-card {
  text-align: center;
  padding: 32px 28px;
  max-width: 320px;
  width: 90%;
}
.rest-timer-label {
  font-family: Georgia, serif;
  font-size: 15px;
  color: #FAFAF7;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rest-timer-sublabel {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  color: rgba(250, 250, 247, 0.5);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.rest-timer-circle-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
}
.rest-timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.rest-timer-track {
  fill: none;
  stroke: rgba(250, 250, 247, 0.1);
  stroke-width: 6;
}
.rest-timer-progress {
  fill: none;
  stroke: #27AE60;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear, stroke 0.3s;
}
.rest-timer-urgent .rest-timer-progress {
  stroke: #E74C3C;
}
.rest-timer-urgent .rest-timer-time {
  color: #E74C3C !important;
  animation: timerPulse 0.5s ease-in-out infinite alternate;
}
.rest-timer-done .rest-timer-progress {
  stroke: #27AE60;
  stroke-dashoffset: 0 !important;
}
.rest-timer-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 700;
  color: #FAFAF7;
  letter-spacing: -1px;
}
.rest-timer-go {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #27AE60;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: timerPulse 0.6s ease-in-out infinite alternate;
}
@keyframes timerPulse {
  from { opacity: 0.6; transform: scale(0.96); }
  to   { opacity: 1;   transform: scale(1.04); }
}
.rest-timer-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.rest-timer-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s;
}
.rest-timer-btn:active {
  transform: scale(0.95);
}
.rest-timer-btn-add {
  background: rgba(250, 250, 247, 0.12);
  color: #FAFAF7;
  border: 1px solid rgba(250, 250, 247, 0.2);
}
.rest-timer-btn-skip {
  background: rgba(231, 76, 60, 0.15);
  color: #E74C3C;
  border: 1px solid rgba(231, 76, 60, 0.3);
}
.rest-timer-btn-go {
  background: linear-gradient(135deg, #27AE60, #2ECC71);
  color: #fff;
  padding: 14px 32px;
  font-size: 15px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

/* -------------------------------------------------------
   TRANSITION TIMER — Between exercises (blue/purple theme)
   ------------------------------------------------------- */
.rest-timer-transition .rest-timer-label {
  color: #A8DAFF;
}
.rest-timer-transition .rest-timer-sublabel {
  color: rgba(168, 218, 255, 0.6);
  font-size: 12px;
}
.rest-timer-reason {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  color: rgba(250, 250, 247, 0.35);
  letter-spacing: 0.3px;
  margin-bottom: 16px;
}
.rest-timer-progress-transition {
  stroke: #5B8DEF !important;
}
.rest-timer-transition.rest-timer-urgent .rest-timer-progress-transition {
  stroke: #E74C3C !important;
}
.rest-timer-transition.rest-timer-done .rest-timer-progress-transition {
  stroke: #5B8DEF !important;
}
.rest-timer-transition .rest-timer-go {
  color: #5B8DEF;
  font-size: 14px;
  letter-spacing: 1px;
}
.rest-timer-btn-go-transition {
  background: linear-gradient(135deg, #5B8DEF, #7C4DFF);
  color: #fff;
  padding: 14px 32px;
  font-size: 15px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}