:root {
  /* ---- M6 design tokens (fonte di verità: nero, oro metallico, rosso fiamma) ---- */
  --ink: #08080A;        /* fondo app (nero vero, OLED) */
  --steel: #131318;      /* superficie card */
  --steel-2: #1A1A21;    /* campi input, superficie alternativa */
  --edge: rgba(255, 255, 255, 0.08);  /* filetti */
  --gold-hi: #F2D479;
  --gold: #C9A227;
  --gold-lo: #8A6B12;    /* oro metallico (stop del gradiente) */
  --flame: #FF2E3B;
  --flame-glow: rgba(255, 46, 59, 0.45);  /* rosso azione */
  /* Gradiente dedicato per superfici CTA con testo bianco sopra: ogni stop
     garantisce >= 4.5:1 di contrasto WCAG AA col bianco (verificato).
     Non toccare --flame/--flame-glow: restano vividi per l'accento senza testo
     (glow timer riposo, barre progresso, sottolineatura tab attiva). */
  --flame-cta: linear-gradient(160deg, #E4232F, #D0141F 55%, #A50E18);
  --chalk: #F5F3EF;
  --dim: #9A9AA2;        /* testi */
  --radius: 16px;
  --nav-h: 64px;

  /* ---- alias di compatibilità: i componenti Home/Programma/Catalogo/Player/
     Progressi vengono rifiniti nei Task 2-3 del piano M6; nel frattempo
     restano legati a questi alias così ereditano subito nero/oro/rosso senza
     rischiare stili "spezzati". Niente colori marroni residui: solo alias
     verso i token canonici sopra. ---- */
  --bg: var(--ink);
  --surface: var(--steel);
  --surface-alt: var(--steel-2);
  --border: var(--edge);
  --gold-soft: rgba(201, 162, 39, 0.14);
  --red: var(--flame);
  --red-soft: rgba(255, 46, 59, 0.16);
  --text: var(--chalk);
  --text-dim: var(--dim);
  --green: #3DDC84;
  --green-soft: rgba(61, 220, 132, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

#app { min-height: 100vh; }

h1, h2, h3, p { margin: 0 0 0.6em; }

/* Titoli di schermata e card: corsivo pesante maiuscolo, come il logo. */
h1,
.greeting,
.card-title {
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

button {
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid var(--edge);
  background: var(--steel-2);
  color: var(--chalk);
  border-radius: var(--radius);
  padding: 0.7em 1em;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button:hover { border-color: var(--gold); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:active { transform: scale(0.985); }

button.primary {
  background: var(--flame-cta);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 30px var(--flame-glow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
button.primary:hover { filter: brightness(1.06); }
button.primary:active { transform: scale(0.985); }
button.primary:disabled { box-shadow: none; }

button.ghost {
  background: transparent;
  border-color: var(--edge);
  color: var(--chalk);
}

button.link {
  background: none;
  border: none;
  color: var(--gold);
  padding: 0.3em 0;
  text-decoration: underline;
}

.full { width: 100%; box-sizing: border-box; }

.btn-link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  background: var(--flame-cta);
  color: #fff;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-radius: var(--radius);
  padding: 0.7em 1.2em;
  margin-top: 0.6em;
  box-shadow: 0 8px 30px var(--flame-glow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-link:hover { filter: brightness(1.06); }
.btn-link:active { transform: scale(0.985); }

input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.7em 0.8em;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  background: var(--steel-2);
  color: var(--chalk);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}
textarea { resize: vertical; min-height: 4em; }

label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.35em;
}

.field { margin-bottom: 1em; }

.form-error {
  background: var(--red-soft);
  color: #ff9a9a;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 0.7em 0.9em;
  margin-bottom: 1em;
  font-size: 0.9rem;
}

.form-success {
  background: var(--green-soft);
  color: #a9e7bd;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 0.7em 0.9em;
  margin-bottom: 1em;
  font-size: 0.9rem;
}

/* ---------------------------- Schermate auth ---------------------------- */

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 390px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%), var(--steel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 28px 22px;
}

.auth-card h1 {
  font-size: 1.4rem;
  text-align: center;
}

.auth-brand {
  display: block;
  width: auto;
  max-width: 210px;
  height: auto;
  margin: 0 auto 1.4em;
}

.auth-links {
  text-align: center;
  margin-top: 1em;
}

.auth-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.4em;
}

/* ------------------------------ App shell ------------------------------- */

.app-shell {
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + 16px);
}

.app-header {
  padding: 20px 16px 8px;
}

.app-main {
  padding: 0 16px 16px;
  max-width: 560px;
  margin: 0 auto;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nav-h);
  background: rgba(8, 8, 10, 0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--edge);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 10;
}

.bottom-nav button {
  position: relative;
  flex: 1;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--dim);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
}

.bottom-nav button .nav-icon {
  width: 24px;
  height: 24px;
  display: block;
  margin-bottom: 4px;
}

.bottom-nav button.active {
  color: var(--gold-hi);
}

.bottom-nav button.active .nav-icon {
  stroke-width: 1.9;
}

/* Durante il tour la barra diventa un riferimento visivo, non un secondo
   controllo: emerge solo l'icona della sezione raccontata nel passo attivo. */
.bottom-nav.guide-mode {
  z-index: 82;
}
.bottom-nav.guide-mode .bottom-nav-indicator {
  opacity: 0 !important;
}
.bottom-nav.guide-mode button {
  opacity: .07;
  pointer-events: none;
}
.bottom-nav.guide-mode button.guide-target {
  opacity: 1;
  color: var(--gold-hi);
}
.bottom-nav.guide-mode button.guide-target > span:last-child {
  opacity: .28;
}
.bottom-nav.guide-mode button.guide-target .nav-icon {
  stroke-width: 2.15;
  filter: drop-shadow(0 0 7px rgba(242, 212, 121, .82));
  transform: scale(1.14);
}

/* Saetta: unica traccia assoluta larga 1/5 della nav (una "corsia" per tab),
   che scorre sotto la tab attiva. Si muove SOLO con transform (mai left/
   width in loop): trasla di N * 100% della propria larghezza = N tab, quindi
   nessun ricalcolo serve al resize (tutto in percentuale). La barretta rossa
   vera e propria è lo pseudo-elemento centrato dentro la corsia. */
.bottom-nav-indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20%;
  height: 3px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateX(calc(var(--nav-i, 0) * 100%));
}

.bottom-nav-indicator::after {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--flame);
  box-shadow: 0 0 10px 1px var(--flame-glow);
  transform: skewX(-16deg);
}

/* --------------------------------- Home ---------------------------------- */

.greeting { font-size: 1.5rem; }
.greeting-sub { color: var(--text-dim); margin-bottom: 1.2em; }

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%), var(--steel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}

.card-label {
  color: var(--gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3em;
}

.card-title { font-size: 1.2rem; margin-bottom: 0.2em; }
.card-sub { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1em; }

/* Card programma: copertina a tutta larghezza edge-to-edge (niente padding
   della .card attorno all'immagine), titolo in oro metallico sopra lo scrim,
   chip e barra "saetta" sotto in un blocco con padding proprio. */
.home-program-card { padding: 0; overflow: hidden; }

.home-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--steel-2);
}

.home-cover-wrap .home-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* Placeholder senza copertina: mai un'icona di immagine rotta, un blocco
   scuro con l'iniziale del programma in oro. */
.home-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--steel-2);
  color: var(--gold);
  font-size: 2.6rem;
  font-weight: 800;
}

.home-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(8, 8, 10, 0.88) 100%);
  pointer-events: none;
}

/* Titolo del programma sopra l'immagine: oro metallico via background-clip:text. */
.home-cover-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.3rem;
  line-height: 1.15;
  background: linear-gradient(103deg, var(--gold-lo), var(--gold-hi) 38%, var(--gold) 60%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.home-cover-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.home-progress { padding: 10px 16px 16px; }

/* Barra "saetta": l'intera barra (traccia + riempimento) è inclinata,
   il riempimento cresce in percentuale settimana corrente / totale settimane. */
.home-progress-swoosh {
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  transform: skewX(-16deg);
}

/* Riempimento via transform:scaleX() (mai width, per animare solo
   transform/opacity): l'elemento è sempre largo il 100%, il "riempimento"
   visivo è dato dallo scaleX applicato da app.js con transform-origin
   left. La transizione .8s vive nel blocco prefers-reduced-motion:
   no-preference più sotto. */
.home-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #B3121D, var(--flame));
  box-shadow: 0 0 16px var(--flame-glow);
  transform-origin: left;
}

.badge-gold {
  display: inline-block;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  padding: 0.25em 0.8em;
  font-size: 0.78rem;
  font-weight: 600;
}

/* -------------------------- Free Session pass --------------------------- */

.free-session-pass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(242, 212, 121, .42);
  border-radius: calc(var(--radius) + 3px);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 46, 59, .17), transparent 34%),
    linear-gradient(145deg, rgba(201, 162, 39, .12), transparent 48%),
    var(--steel);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, .3),
    0 0 28px rgba(201, 162, 39, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.free-session-pass::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  bottom: -80%;
  left: -55%;
  width: 48%;
  opacity: .4;
  transform: translateX(0) rotate(13deg);
  background: radial-gradient(ellipse, rgba(242, 212, 121, .22), transparent 66%);
  pointer-events: none;
}

.free-session-pass.expired,
.free-session-pass.revoked {
  border-color: rgba(255, 255, 255, .13);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 46, 59, .09), transparent 34%),
    linear-gradient(145deg, rgba(154, 154, 162, .08), transparent 48%),
    var(--steel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.free-session-pass-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.free-session-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.free-session-pass h2 {
  max-width: 21ch;
  margin: 0;
  font-size: clamp(1.24rem, 5vw, 1.7rem);
  font-style: italic;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.free-session-pass > p {
  max-width: 56ch;
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: .88rem;
}

.free-session-week-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(201, 162, 39, .48);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(201, 162, 39, .1);
  color: var(--gold-hi);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .06em;
  white-space: nowrap;
}

.free-session-weekline {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 15px;
}

.free-session-weekline > span {
  min-width: 0;
  padding: 7px 2px 6px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: var(--dim);
  text-align: center;
}

.free-session-weekline b,
.free-session-weekline small {
  display: block;
}

.free-session-weekline b {
  font-size: .75rem;
  line-height: 1;
}

.free-session-weekline small {
  overflow: hidden;
  margin-top: 4px;
  font-size: .46rem;
  line-height: 1;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.free-session-weekline > span.done {
  border-color: rgba(201, 162, 39, .28);
  background: rgba(201, 162, 39, .09);
  color: var(--gold-hi);
}

.free-session-weekline > span.relationship {
  border-style: dashed;
}

.free-session-weekline > span.contact {
  border-color: rgba(255, 46, 59, .58);
  border-style: dashed;
  background: rgba(255, 46, 59, .055);
}

.free-session-weekline > span.current {
  border-color: var(--gold-hi);
  background: linear-gradient(155deg, rgba(242, 212, 121, .24), rgba(201, 162, 39, .08));
  color: var(--chalk);
  box-shadow: 0 0 18px rgba(242, 212, 121, .16);
  transform: translateY(-2px);
}

.free-session-contact-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 14px;
  color: var(--text-dim);
  line-height: 1.35;
}

.free-session-contact-note > span {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--flame);
  box-shadow: 0 0 10px rgba(255, 46, 59, .56);
}

.free-session-contact-note small {
  font-size: .69rem;
}

.free-session-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.free-session-dates > span {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 11px;
  background: rgba(0, 0, 0, .18);
}

.free-session-dates small,
.free-session-dates b {
  display: block;
}

.free-session-dates small {
  margin-bottom: 2px;
  color: var(--dim);
  font-size: .67rem;
}

.free-session-dates b {
  font-size: .82rem;
}

.free-session-actions {
  display: flex;
  align-items: stretch;
  gap: 9px;
  margin-top: 12px;
}

.free-session-actions > * {
  flex: 1 1 0;
  margin-top: 0;
}

.free-session-pass.compact {
  padding: 16px;
}

.free-session-pass.compact h2 {
  font-size: 1.14rem;
}

.free-session-pass.compact > p {
  margin-bottom: 12px;
  font-size: .8rem;
}

.free-session-pass.compact .free-session-weekline {
  margin-bottom: 11px;
}

.showroom-lock-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(255, 46, 59, .25);
  border-radius: calc(var(--radius) + 2px);
  background:
    radial-gradient(circle at 100% 100%, rgba(255, 46, 59, .12), transparent 44%),
    var(--steel);
}

.showroom-lock-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(201, 162, 39, .34);
  border-radius: 50%;
  background: rgba(201, 162, 39, .1);
  color: var(--gold-hi);
  font-size: 1.25rem;
  transform: rotate(180deg);
}

.showroom-lock-panel h2 {
  margin-bottom: 5px;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.14;
  text-transform: uppercase;
}

.showroom-lock-panel p {
  margin: 0;
  color: var(--dim);
  font-size: .85rem;
}

.showroom-lock-panel .btn-link {
  grid-column: 1 / -1;
  margin: 0;
}

.archive-program-heading {
  margin: 20px 0 12px;
}

.accordion-week.archived {
  background: rgba(19, 19, 24, .74);
}

.accordion-day.archived .accordion-day-header {
  background: rgba(26, 26, 33, .7);
}

.archive-progression {
  padding: 13px 16px;
  border-bottom: 1px solid var(--edge);
  color: var(--gold-hi);
  font-size: .8rem;
}

.archive-strategy-line,
.archive-exercise-row {
  display: grid;
  grid-template-columns: minmax(96px, .36fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.archive-strategy-line:last-child,
.archive-exercise-row:last-child {
  border-bottom: 0;
}

.archive-strategy-line strong,
.archive-exercise-row strong {
  font-size: .8rem;
}

.archive-strategy-line span,
.archive-exercise-row span {
  color: var(--dim);
  font-size: .78rem;
}

.showroom-readonly-note,
.showroom-progress-banner {
  border: 1px solid rgba(201, 162, 39, .18);
  border-radius: 12px;
  background: rgba(201, 162, 39, .055);
}

.showroom-readonly-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  color: var(--gold-hi);
}

.showroom-readonly-note > span {
  flex: 0 0 auto;
  transform: rotate(180deg);
}

.showroom-readonly-note p {
  margin: 0;
  color: var(--dim);
  font-size: .76rem;
}

.showroom-progress-banner {
  margin-bottom: 14px;
  padding: 15px 16px;
}

.showroom-progress-banner strong {
  display: block;
  font-size: 1rem;
}

.showroom-progress-banner p {
  margin: 6px 0 0;
  color: var(--dim);
  font-size: .8rem;
}

.empty-state {
  text-align: center;
  padding: 40px 16px;
}
.empty-state .card-title { margin-top: 0.6em; }

/* ------------------------------- Programma -------------------------------- */

.accordion-week {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--surface);
}

.accordion-week.current {
  border-color: rgba(201, 162, 39, 0.78);
  box-shadow: 0 10px 28px rgba(201, 162, 39, 0.1), inset 0 0 0 1px rgba(242, 212, 121, 0.1);
}

.accordion-week.current::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: -28%;
  width: 24%;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff1a8 50%, transparent);
  opacity: 0.9;
  filter: blur(0.4px) drop-shadow(0 0 4px rgba(242, 212, 121, 0.72));
}

.accordion-week-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: none;
  border-radius: 0;
  font-weight: 600;
  text-align: left;
}

.accordion-week-header.current {
  color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.14), transparent 75%), var(--surface);
  box-shadow: inset 3px 0 0 var(--gold);
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 1.04rem;
}

.week-current-heading {
  display: grid;
  gap: 2px;
}

.week-current-kicker {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.week-current-title {
  font-size: 1.08rem;
  font-weight: 800;
}

.accordion-week-body {
  border-top: 1px solid var(--border);
}

.accordion-day {
  border-bottom: 1px solid var(--border);
}
.accordion-day:last-child { border-bottom: none; }

.accordion-day-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-alt);
  border: none;
  border-radius: 0;
  text-align: left;
}

.accordion-day-body { padding: 8px 16px 16px; }

.exercise-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.exercise-card:last-child { border-bottom: none; }

.exercise-name {
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.3em;
}

.exercise-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 0.88rem;
  margin-bottom: 0.4em;
}

.program-frequency-card {
  display: grid;
  gap: 5px;
  margin: 12px 0 16px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, var(--border));
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(209, 167, 44, 0.12), rgba(20, 20, 25, 0.9) 65%);
}

.program-frequency-card strong {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}

.program-frequency-card span {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.45;
}

.day-start-workout {
  margin-top: 10px;
}

.day-start-hint {
  margin: 7px 2px 5px;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}

.exercise-info-disclosure {
  margin: 9px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.018);
}

.exercise-info-toggle {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: left;
}

.exercise-info-indicator {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 1.18rem;
  line-height: 1;
}

.exercise-info-panel {
  display: grid;
  gap: 10px;
  padding: 11px 12px 13px;
  border-top: 1px solid var(--border);
}

.exercise-info-row {
  display: grid;
  gap: 3px;
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.48;
}

.exercise-info-row strong {
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exercise-info-row.warning strong {
  color: #efae7d;
}

.exercise-video {
  display: inline-block;
  color: var(--gold);
  font-size: 0.88rem;
  margin-bottom: 0.4em;
}

.exercise-video.pending {
  color: var(--text-dim);
  border-color: var(--border);
  background: transparent;
  pointer-events: none;
}

/* Player video inline (M8): contenitore 16/9 per YouTube/Vimeo (miniatura +
   play → iframe al tocco) e per il <video> nativo dei file diretti. Sfondo
   nero fisso cosi non "salta" mentre la miniatura carica o se manca. */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  background: #000;
  margin-bottom: 0.6em;
}

.video-embed-thumb,
.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Blocco scuro col solo play, usato per Vimeo (nessuna miniatura senza
   chiamata API) e come fallback se la miniatura YouTube non carica. */
.video-embed-dark {
  background: radial-gradient(circle at center, #1a1a1a, #000 75%);
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flame-cta);
  box-shadow: 0 8px 24px var(--flame-glow);
  color: #fff;
}
.video-play svg { width: 22px; height: 22px; margin-left: 3px; }
.video-play:hover { filter: brightness(1.06); }
.video-play:active { transform: translate(-50%, -50%) scale(.94); }

/* Tendina video (M9): il video non è più aperto di default nella scheda
   esercizio/tutorial — un pulsante in evidenza a tutta larghezza (stessa
   superficie/bordo/raggio delle altre card) sostituisce la vecchia miniatura
   sempre visibile; il cliente decide se aprirla. */
.video-disclosure { margin-bottom: 0.6em; }

.video-disclosure-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.7em 0.9em;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--steel-2);
  color: var(--chalk);
  text-align: left;
}
.video-disclosure-toggle:hover { border-color: var(--gold); }
.video-disclosure-toggle:active { transform: scale(0.99); }

.video-disclosure-play {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flame-cta);
  color: #fff;
  box-shadow: 0 4px 14px var(--flame-glow);
}
.video-disclosure-play svg { width: 14px; height: 14px; margin-left: 2px; }

.video-disclosure-label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
}

.video-disclosure-indicator {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}

.video-disclosure-panel {
  margin-top: 8px;
}

.exercise-detail-line {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.45;
}

.exercise-detail-line.warning { color: #f0bd8a; }

.exercise-technique {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--flame);
  background: rgba(255, 46, 59, 0.08);
  color: var(--chalk);
  font-size: 0.84rem;
  line-height: 1.4;
}

.day-strategy {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border-left: 2px solid var(--gold);
  background: var(--surface-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.day-strategy div { display: grid; gap: 2px; }
.day-strategy strong { color: var(--gold); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.day-strategy span { color: var(--text-dim); font-size: 0.84rem; }

.exercise-coach-note {
  color: var(--text-dim);
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 0.5em;
}

.exercise-my-note label { margin-bottom: 0.2em; }
.exercise-my-note textarea { font-size: 0.9rem; min-height: 3em; }
.exercise-my-note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.4em;
}
.exercise-my-note-status { font-size: 0.8rem; color: var(--text-dim); }
.exercise-my-note-status.ok { color: var(--green); }

/* ------------------------------ Catalogo -------------------------------- */

.catalog-section { margin-top: 24px; }

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

.catalog-category-filter {
  max-width: 170px;
  padding: 0.55em 0.7em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}

.catalog-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.catalog-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(135px, 38%) 1fr;
  min-height: 92px;
}

.catalog-card.locked { cursor: pointer; }

.catalog-cover,
.catalog-cover-wrap,
.catalog-cover-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

.catalog-cover-wrap { position: relative; overflow: hidden; }
.catalog-cover-wrap .catalog-cover { position: absolute; inset: 0; }
.catalog-cover-wrap .catalog-cover-placeholder { position: absolute; inset: 0; }

.catalog-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  color: var(--gold);
  font-size: 1.8rem;
  font-weight: 700;
}

.catalog-card-body { padding: 12px 14px; align-self: center; }

.catalog-card-name {
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 0.88rem;
  margin-bottom: 0.35em;
}

.catalog-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-badge {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}

.catalog-category-badge {
  color: var(--gold);
}

.catalog-empty {
  padding: 16px 0;
}

/* Badge "Attivo" (posseduto): oro metallico, in overlay top-left sulla
   copertina, non più nella riga meta. */
.catalog-badge-owned {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: linear-gradient(103deg, var(--gold-lo), var(--gold-hi) 38%, var(--gold) 60%, var(--gold-lo));
  color: #1A1611;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.2em 0.7em;
  font-size: 0.68rem;
}

.catalog-lock {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.62);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.catalog-lock-icon { font-size: 1.7rem; }

/* Pillola rossa "Acquista" dentro l'overlay lucchetto delle tessere non possedute. */
.catalog-unlock-pill {
  display: inline-block;
  background: var(--flame-cta);
  color: #fff;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-radius: 999px;
  padding: 0.32em 0.9em;
  font-size: 0.7rem;
  box-shadow: 0 6px 18px var(--flame-glow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* --------------------------------- Extra ----------------------------------- */

/* .catalog-card è pensata per un <a>: le card "Extra" sono <button> (nessuna
   navigazione a URL, solo un cambio di route interno), serve solo un reset
   dei default UA di padding/font/cursor — bordo, sfondo e radius arrivano
   già da .catalog-card. */
button.oneoff-card {
  width: 100%;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* Etichette di sezione Extra ("Workout singoli", categorie, "Tutorial"):
   oro + filetto sfumato che si dissolve verso destra, sotto il testo. */
.section-label {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.section-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}

/* ------------------------------- Tutorial ----------------------------------- */

.search-box { max-width: 320px; margin: 8px 0 12px; }

.tutorial-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tutorial-chip {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
}

.tutorial-chip.active {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
}

.tutorial-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tutorial-card {
  display: block;
  min-height: 0;
  padding: 14px 16px;
  border-left: 2px solid var(--gold-lo);
}

.tutorial-card.featured {
  border-left-color: var(--gold);
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.1), transparent 48%), var(--surface);
}

.tutorial-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.tutorial-toggle:hover { border-color: transparent; }

.tutorial-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tutorial-featured-label {
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.tutorial-card .catalog-card-name {
  max-width: 100%;
  font-size: 0.96rem;
  line-height: 1.24;
  margin-bottom: 0;
}

.tutorial-meta {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.tutorial-chevron {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 1.25rem;
  line-height: 1;
  padding-top: 2px;
}

.tutorial-detail[hidden] { display: none; }

.tutorial-description {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0.7em 0 0;
  max-width: none;
}

.tutorial-takeaway {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: var(--surface-alt);
  color: var(--text-dim);
  font-size: 0.84rem;
}

.tutorial-takeaway strong {
  color: var(--gold);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tutorial-video-link {
  display: inline-block;
  margin-top: 0.5em;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.tutorial-video-link:hover { text-decoration: underline; }

/* -------------------------------- Profilo --------------------------------- */

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-guide-button {
  min-height: 36px;
  padding: 5px 10px 5px 6px;
  border-color: rgba(201, 162, 39, .34);
  border-radius: 999px;
  background: rgba(201, 162, 39, .08);
  color: var(--gold-hi);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .03em;
}

.profile-guide-mark {
  width: 23px;
  height: 23px;
  border: 1px solid rgba(255, 46, 59, .5);
  border-radius: 50%;
  background: rgba(255, 46, 59, .12);
  color: var(--chalk);
  display: grid;
  place-items: center;
  font-size: .74rem;
  font-weight: 900;
}

.profile-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.profile-row:last-child { border-bottom: none; }
.profile-row-label { flex: 0 0 auto; color: var(--text-dim); }
.profile-row > :last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.profile-data-card.guide-profile-active .field,
.profile-data-card.guide-profile-active .exercise-my-note-actions {
  opacity: .28;
  transition: opacity 180ms ease;
}
.profile-data-card.guide-profile-active .guide-field-target {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.profile-data-card.guide-profile-active .guide-field-target label {
  color: var(--gold-hi);
  font-weight: 750;
}
.profile-data-card.guide-profile-active .guide-field-target input,
.profile-data-card.guide-profile-active .guide-field-target select {
  border-color: var(--gold-hi);
  box-shadow:
    0 0 0 3px rgba(201, 162, 39, .18),
    0 0 24px rgba(242, 212, 121, .2);
}
.profile-data-card.guide-profile-active button.guide-save-target {
  opacity: 1;
  outline: 2px solid var(--gold-hi);
  outline-offset: 4px;
  box-shadow:
    0 8px 30px var(--flame-glow),
    0 0 25px rgba(242, 212, 121, .28);
}

/* ---------------------------- Tour guidato ------------------------------- */

.guide-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
  overscroll-behavior: contain;
}

.guide-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 5, .7);
  backdrop-filter: blur(3px);
}

.guide-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  margin-bottom: calc(var(--nav-h) + 4px + env(safe-area-inset-bottom, 0px));
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 46, 59, .42);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 46, 59, .13), transparent 35%),
    radial-gradient(circle at 8% 100%, rgba(201, 162, 39, .13), transparent 38%),
    #121217;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .56);
}

.guide-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--flame) 42%, var(--gold-hi) 74%, transparent);
}

.guide-topline,
.guide-route,
.guide-actions {
  display: flex;
  align-items: center;
}

.guide-topline { justify-content: space-between; gap: 14px; }
.guide-route {
  min-width: 0;
  gap: 9px;
  color: var(--gold-hi);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.guide-route-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 162, 39, .34);
  border-radius: 50%;
  background: rgba(201, 162, 39, .1);
}
.guide-route-icon .nav-icon { width: 18px; height: 18px; }

.guide-skip {
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: .76rem;
}
.guide-skip:hover { border-color: transparent; color: var(--chalk); }

.guide-progress {
  height: 3px;
  margin: 17px 0 15px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}
.guide-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--flame), var(--gold-hi));
  transform: scaleX(var(--guide-progress, .2));
  transform-origin: left;
}

.guide-step-label {
  margin-bottom: 5px;
  color: var(--gold);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .14em;
}

.guide-card h2 {
  margin: 0 0 8px;
  color: var(--chalk);
  font-size: clamp(1.45rem, 7vw, 1.85rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.guide-card > p {
  margin: 0;
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.48;
}

.guide-actions {
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
}
.guide-back {
  padding: 9px 4px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
}
.guide-back:hover { border-color: transparent; color: var(--chalk); }
.guide-action-spacer { width: 72px; }
.guide-next { min-width: 108px; padding-block: .65em; }

.guide-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 19px;
}

.guide-dont-show {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  color: var(--text-dim);
  font-size: .72rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
.guide-dont-show input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--gold);
}

.guide-save-hint {
  align-self: center;
  color: var(--gold-hi);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
}

/* Nelle ultime tappe il fumetto diventa compatto e non oscura né blocca il
   form: il cliente può compilare davvero il campo illuminato sotto di lui. */
.guide-layer.guide-profile-step {
  align-items: flex-start;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  pointer-events: none;
}
.guide-profile-step .guide-scrim {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.guide-profile-step .guide-card {
  width: min(100%, 390px);
  margin-bottom: 0;
  padding: 14px 16px;
  border-radius: 18px;
  pointer-events: auto;
}
.guide-profile-step .guide-route-icon {
  width: 28px;
  height: 28px;
}
.guide-profile-step .guide-progress {
  margin: 10px 0 9px;
}
.guide-profile-step .guide-step-label {
  margin-bottom: 3px;
  font-size: .6rem;
}
.guide-profile-step .guide-card h2 {
  margin-bottom: 5px;
  font-size: 1.12rem;
}
.guide-profile-step .guide-card > p {
  font-size: .78rem;
  line-height: 1.34;
}
.guide-profile-step .guide-footer {
  margin-top: 10px;
}
.guide-profile-step .guide-back {
  padding-block: 5px;
  font-size: .74rem;
}
.guide-profile-step .guide-next {
  min-width: 86px;
  padding-block: .5em;
  font-size: .78rem;
}

@media (max-width: 350px) {
  .guide-layer { padding: 10px; }
  .guide-card { padding: 17px; }
  .guide-card > p { font-size: .84rem; }
  .guide-footer { grid-template-columns: 1fr; gap: 8px; }
  .guide-actions { justify-content: flex-end; }
  .guide-profile-step .guide-card { padding: 12px 14px; }
  .guide-profile-step .guide-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .guide-profile-step .guide-action-spacer { width: 0; }
}

/* --------------------------- Player allenamento ---------------------------- */

.exercise-nav-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}

.exercise-nav-pill {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--text-dim);
}

.exercise-nav-pill.active {
  border-color: var(--gold);
  color: var(--gold);
}

.exercise-nav-pill.done {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green);
}

/* Chip oro "Esercizio N / M" + volume corrente, nell'intestazione del player. */
.player-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.5em;
}

.set-rows { margin-top: 12px; }

.set-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: none; }

.set-row-num {
  flex: 0 0 64px;
  color: var(--text-dim);
  font-size: 0.85rem;
  padding-bottom: 0.7em;
}

.set-row-field { flex: 1; margin-bottom: 0; }
.set-row-field label { margin-bottom: 0.2em; }
.set-row-field input { background: var(--steel-2); }

.set-row-done {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0 0 0.5em;
  color: var(--text);
  font-size: 0.85rem;
}
.set-row-done input { width: auto; }

/* Contenitore della checkbox: solo posizionamento, ospita il "pop" e l'anello
   dorato ::after al completamento (vedi @keyframes mf-check-pop/mf-check-ring
   nel blocco prefers-reduced-motion:no-preference più sotto). */
.set-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Serie completata = "traguardo": campi e spunta passano in oro. */
.set-row.done .set-row-field input {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold-hi);
}
.set-row.done .set-row-done {
  color: var(--gold);
}
.set-row.done .set-row-done input[type="checkbox"] {
  accent-color: var(--gold);
}

.player-nav {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}
.player-nav button { flex: 1; }

/* Timer di recupero: card con bordo rosso tenue e alone radiale rosso sopra
   il fondo --steel; il numero enorme corsivo in oro metallico "premia" la
   pausa, mentre la barra "saetta" (inclinata come le altre della M6) drena
   da piena a vuota man mano che il recupero scorre. */
.rest-timer {
  position: relative;
  background: radial-gradient(90% 140% at 50% 0%, rgba(255, 46, 59, 0.16), transparent 70%) var(--steel);
  border: 1px solid rgba(255, 46, 59, 0.35);
  border-radius: var(--radius);
  padding: 22px 18px 18px;
  margin-bottom: 16px;
  text-align: center;
}

.rest-timer-label {
  color: var(--flame);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  margin-bottom: 0.3em;
}

.rest-timer-count {
  font-size: 3.6rem;
  line-height: 1;
  font-style: italic;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6em;
  background: linear-gradient(103deg, var(--gold-lo), var(--gold-hi) 38%, var(--gold) 60%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Ultimi 5 secondi del recupero: passaggio dell'oro al rosso --flame. È un
   cambio di COLORE (non di movimento), quindi vive qui fuori dal blocco
   prefers-reduced-motion:no-preference: deve restare attivo anche con
   "reduce", dove è l'unico segnale di urgenza rimasto (il pulse via
   transform vive invece dentro quel blocco, vedi più sotto). */
.rest-timer-count.urgent {
  background: none;
  -webkit-text-fill-color: var(--flame);
  color: var(--flame);
}

.rest-timer-progress {
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transform: skewX(-16deg);
  margin-bottom: 16px;
}

/* Riempimento via transform:scaleX() (mai width, vedi .home-progress-fill
   sopra per lo stesso pattern): l'elemento resta sempre largo il 100%, il
   drenaggio è dato dallo scaleX applicato da app.js con transform-origin
   left. L'animazione (keyframes mf-rest-drain, con animation-delay negativo
   impostato da app.js/restTimerPanel) vive nel blocco prefers-reduced-motion:
   no-preference più sotto; con reduce, app.js applica invece uno scaleX()
   statico senza animazione. */
.rest-timer-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #B3121D, var(--flame));
  box-shadow: 0 0 16px var(--flame-glow);
  transform-origin: left;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1em;
}
.summary-stat-value { font-size: 1.8rem; font-weight: 700; color: var(--gold); }
.summary-stat-label { color: var(--text-dim); font-size: 0.85rem; }

.summary-resume { margin-top: 10px; }

/* Conferma esplicita prima di chiudere una seduta. Il foglio resta molto
   compatto: rosso solo sull'azione irreversibile percepita, oro per orientare
   lo sguardo senza confonderlo con una card premio. */
.workout-finish-scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(2, 2, 5, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.workout-finish-dialog {
  width: min(100%, 520px);
  margin: 0 auto max(8px, env(safe-area-inset-bottom));
  padding: 22px 20px 20px;
  border: 1px solid rgba(242, 212, 121, .38);
  border-radius: calc(var(--radius) + 5px);
  background:
    linear-gradient(90deg, var(--gold), rgba(242, 212, 121, .28)) top / 100% 2px no-repeat,
    radial-gradient(circle at 100% 0%, rgba(255, 46, 59, .13), transparent 42%),
    var(--steel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 26px rgba(201, 162, 39, .08);
}

.workout-finish-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.workout-finish-dialog h2 {
  max-width: 21ch;
  margin-bottom: 10px;
  color: var(--chalk);
  font-size: clamp(1.28rem, 6vw, 1.72rem);
  font-style: italic;
  line-height: 1.08;
  text-transform: uppercase;
}

.workout-finish-dialog p {
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.48;
}

.workout-finish-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
}

/* ------------------------------- Progressi ---------------------------------- */

.progress-overview {
  background: radial-gradient(110% 120% at 100% 0%, rgba(201, 162, 39, 0.12), transparent 54%), var(--surface);
}

.progress-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.progress-overview-head p { margin: 0; font-size: 0.82rem; }

.progress-range {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
}

.progress-range-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.32em 0.62em;
  color: var(--text-dim);
  background: transparent;
  font-size: 0.72rem;
}

.progress-range-btn:hover { border-color: transparent; }
.progress-range-btn.active {
  color: #1a1611;
  background: var(--gold);
  font-weight: 800;
}

.progress-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.progress-kpi {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(8, 8, 10, 0.26);
}

.progress-kpi-primary { border-color: rgba(201, 162, 39, 0.5); }
.progress-kpi-value {
  overflow: hidden;
  color: var(--chalk);
  font-size: 1.35rem;
  font-weight: 800;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-kpi-primary .progress-kpi-value { color: var(--gold-hi); }
.progress-kpi-label {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.progress-kpi-note {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.6em;
}
.cal-header-title { font-weight: 600; }
.cal-nav-btn {
  flex: 0 0 auto;
  padding: 0.35em 0.9em;
  line-height: 1;
}

.cal-counter {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.6em;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  text-align: center;
}
.cal-weekday {
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
}

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

.cal-cell {
  aspect-ratio: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
}
.cal-cell-empty {
  background: transparent;
  border-color: transparent;
}
.cal-cell:disabled { opacity: 1; cursor: default; }
.cal-cell-done {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
}
.cal-cell-done::after {
  content: "✓";
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 0.55rem;
  color: var(--gold);
}
.cal-cell-selected {
  background: var(--gold);
  color: #1a1611;
}
.cal-cell-selected::after { color: #1a1611; }

/* Giorno odierno: bordo oro, indipendentemente dallo stato allenato/selezionato. */
.cal-cell-today {
  border-color: var(--gold);
}

.cal-day-panel {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.cal-day-panel-title {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.4em;
}

.cal-workout-list { margin-bottom: 4px; }
.cal-workout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.cal-workout-row:last-child { border-bottom: none; }
.cal-workout-day { font-weight: 600; }
.cal-workout-volume { color: var(--gold); font-weight: 600; }

.cal-detail {
  margin-top: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.cal-detail-title { font-weight: 600; margin-bottom: 0.4em; }
.cal-detail-set-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.85rem;
}
.cal-detail-set-name { color: var(--text-dim); }

.line-chart {
  width: 100%;
  height: auto;
  display: block;
  margin: 8px 0 4px;
}

.chart-axis { stroke: var(--border); stroke-width: 1; }

/* Regola semantica M6: rosso = azione/movimento (carichi = sforzo in corso),
   oro = identità/traguardo (peso corporeo, misurazioni). */
.chart-line { fill: none; stroke: var(--gold); stroke-width: 2; }
.chart-point { fill: var(--gold); }

.chart-line-flame { fill: none; stroke: var(--flame); stroke-width: 2; }
.chart-point-flame { fill: var(--flame); }
/* Punto finale del grafico carichi: luminoso, per far risaltare il dato più recente. */
.chart-point-end {
  fill: var(--flame);
  filter: drop-shadow(0 0 5px var(--flame-glow));
}

.chart-axis-label { fill: var(--text-dim); font-size: 8px; }
.chart-empty-text { fill: var(--text-dim); font-size: 10px; }

.chart-best {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 0.4em;
}

.metric-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 0.6em;
}
/* Toggle Peso / % Massa grassa come segmenti: attivo = fondo oro tenue, testo oro. */
.metric-segment {
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4em 0.6em;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.metric-segment.active {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

.metric-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0.4em;
}
.metric-input-row input { flex: 1 1 120px; }
.metric-input-row button { flex: 0 0 auto; }

.transformation-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.transformation-item {
  flex: 1;
  text-align: center;
}
.transformation-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.transformation-date {
  font-size: 0.8rem;
  margin-top: 0.4em;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.photo-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  cursor: pointer;
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 10, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}
.photo-viewer img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radius);
  object-fit: contain;
}
.photo-viewer-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.workout-history-list { margin-top: 4px; }
.workout-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.workout-history-row:last-child { border-bottom: none; }
.workout-history-main { min-width: 0; }
.workout-history-day { font-weight: 600; }
.workout-history-sets {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: .72rem;
}
.workout-history-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  margin-left: 12px;
}
.workout-history-volume { color: var(--gold); font-weight: 600; }
.workout-history-resume {
  padding: .42em .72em;
  border-color: rgba(201, 162, 39, .35);
  border-radius: 999px;
  background: rgba(201, 162, 39, .07);
  color: var(--gold-hi);
  font-size: .72rem;
}

.text-dim { color: var(--text-dim); }
.text-center { text-align: center; }

.spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--text-dim);
}

/* Scheletri di caricamento (M7 Task 2): al posto del testo "Caricamento…",
   2-3 blocchi dimensionati come il contenuto atteso (vedi skeletonBlock/
   skeletonGroup in app.js e le classi -cover/-chart/-row/-text/-square
   applicate caso per caso). Il box qui sotto vale sempre, anche con
   animazioni ridotte; lo shimmer che scorre vive nel blocco
   prefers-reduced-motion:no-preference più in basso. */
.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-alt);
  height: 14px;
}

.skeleton-cover { width: 100%; aspect-ratio: 4 / 3; height: auto; }
.skeleton-square { width: 100%; aspect-ratio: 1; height: auto; }
.skeleton-chart { height: 140px; }
.skeleton-row { height: 52px; }
.skeleton-text { height: 14px; width: 70%; }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 1em;
}
.checkbox-field input { width: auto; margin-top: 0.2em; }
.checkbox-field label { margin: 0; color: var(--text); font-size: 0.9rem; }

.consent-text {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin-bottom: 1.2em;
}

/* ----------------------------- Coaching premium ----------------------------- */

.coaching-entry-card {
  --coaching-lap-duration: 4.8s;
  --coaching-beam-opacity: 1;
  width: 100%;
  min-height: 132px;
  margin: 0 0 16px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 46, 59, .42);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 50%, rgba(201, 162, 39, .18), transparent 34%),
    linear-gradient(120deg, #17171d, #0e0e12 68%);
  color: var(--chalk);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .28),
    0 0 22px rgba(255, 46, 59, .08);
}
.coaching-entry-card.active {
  border-color: rgba(255, 46, 59, .52);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .3),
    0 0 26px rgba(255, 46, 59, .12);
}
.coaching-entry-card.locked {
  --coaching-lap-duration: 7.2s;
  --coaching-beam-opacity: .62;
  border-color: rgba(255, 46, 59, .24);
}
.coaching-entry-signal { display: grid; justify-items: center; align-items: center; height: 72px; }
.coaching-signal-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 18px rgba(201, 162, 39, .75);
}
.coaching-signal-line {
  width: 2px; height: 48px;
  background: linear-gradient(var(--gold), rgba(201, 162, 39, 0));
}
.coaching-entry-kicker, .coaching-hero-kicker, .coaching-lock-kicker {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}
.coaching-entry-title {
  margin-top: 4px;
  font-size: clamp(28px, 8vw, 40px);
  line-height: .98;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}
.coaching-entry-copy { min-width: 0; }
.coaching-entry-sub { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.coaching-entry-action { display: grid; justify-items: end; gap: 12px; }
.coaching-live-pill {
  padding: 5px 8px; border-radius: 999px;
  background: rgba(201, 162, 39, .14); color: var(--gold-hi);
  border: 1px solid rgba(201, 162, 39, .34); font-size: 10px; font-weight: 800; letter-spacing: .12em;
}
.coaching-lock-mark, .coaching-lock-icon {
  color: var(--gold); font-size: 30px; line-height: 1; transform: rotate(180deg);
}
.coaching-entry-arrow { color: var(--chalk); font-size: 22px; }

.coaching-page-header { display: flex; align-items: center; gap: 14px; }
.coaching-back {
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--steel); color: var(--chalk); font-size: 22px;
}
.coaching-locked-panel {
  --coaching-lap-duration: 7.2s;
  --coaching-beam-opacity: .58;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 46, 59, .25);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(27, 27, 34, .98), rgba(9, 9, 12, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .36);
}
.coaching-lock-hero { padding: 34px 24px 26px; position: relative; }
.coaching-lock-hero::after {
  content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%;
  right: -94px; top: -96px; border: 1px solid rgba(201, 162, 39, .22);
  box-shadow: 0 0 55px rgba(201, 162, 39, .08);
}
.coaching-lock-hero h1 { margin: 13px 0 12px; max-width: 470px; font-size: clamp(34px, 10vw, 58px); line-height: .96; }
.coaching-lock-hero p { color: var(--muted); line-height: 1.55; max-width: 560px; }
.coaching-package-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.coaching-package-tile {
  padding: 17px 10px 14px;
  text-align: center;
  border-right: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.coaching-package-tile:last-child { border-right: 0; }
.coaching-package-tile strong { display: block; color: var(--chalk); font-size: 12px; }
.coaching-package-tile span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.coaching-package-tile small { display: block; margin-top: 8px; color: var(--gold); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.coaching-package-tile:active { transform: scale(.97); background: rgba(201, 162, 39, .08); }
.coaching-package-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.coaching-unlock-cta { margin: 22px; text-align: center; }

.coaching-hub { display: grid; gap: 16px; }
.coaching-hero-card {
  --coaching-lap-duration: 5.4s;
  --coaching-beam-opacity: .88;
  min-height: 226px;
  padding: 27px 24px;
  border-radius: 26px;
  border: 1px solid rgba(255, 46, 59, .38);
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 46, 59, .14), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(201, 162, 39, .16), transparent 38%),
    #111116;
  position: relative;
  overflow: hidden;
}
.coaching-hero-card h1 { margin: 18px 0 6px; font-size: clamp(42px, 12vw, 66px); line-height: .92; text-transform: uppercase; font-style: italic; }
.coaching-hero-card > p { color: var(--muted); }
.coaching-connection { display: flex; align-items: center; gap: 9px; margin-bottom: 32px; }
.coaching-connection-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 18px var(--flame-glow); }
.coaching-connection-line { width: 64px; height: 1px; background: linear-gradient(90deg, var(--flame), var(--gold)); }
.coaching-connection-name { color: var(--chalk); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.coaching-trainer-note { color: var(--chalk); font-size: 17px; line-height: 1.55; white-space: pre-wrap; }
.coaching-trainer-note.empty { color: var(--muted); font-size: 14px; }
.coaching-next-workout { margin-top: 10px; }

.coaching-catalog-card {
  --coaching-lap-duration: 5.8s;
  --coaching-beam-opacity: .82;
  margin: 14px 0 18px;
  width: 100%;
  text-align: left;
  border-color: rgba(255, 46, 59, .32);
  box-shadow: 0 0 20px rgba(255, 46, 59, .07);
}
.coaching-catalog-card.locked {
  --coaching-lap-duration: 7.2s;
  --coaching-beam-opacity: .56;
}
.coaching-catalog-visual {
  min-height: 112px;
  display: grid; place-items: center; position: relative;
  color: var(--gold-hi);
  background: radial-gradient(circle, rgba(201, 162, 39, .2), transparent 64%), #111116;
}
.coaching-catalog-visual .nav-icon { width: 46px; height: 46px; }
.coaching-catalog-lock { position: absolute; right: 12px; top: 10px; color: var(--gold); font-size: 22px; transform: rotate(180deg); }
.coaching-catalog-card.locked::after { border-radius: inherit; }

@media (max-width: 430px) {
  .free-session-pass {
    padding: 16px 14px;
  }
  .free-session-pass-head {
    display: grid;
    gap: 9px;
  }
  .free-session-week-badge {
    justify-self: start;
  }
  .free-session-weekline {
    gap: 3px;
  }
  .free-session-weekline > span {
    padding-inline: 1px;
    border-radius: 6px;
  }
  .free-session-weekline small {
    font-size: .4rem;
    letter-spacing: 0;
  }
  .workout-finish-actions {
    grid-template-columns: 1fr;
  }
  .free-session-dates,
  .free-session-actions {
    grid-template-columns: 1fr;
  }
  .free-session-actions {
    display: grid;
  }
  .archive-strategy-line,
  .archive-exercise-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .coaching-entry-card {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "signal copy"
      "signal action";
    column-gap: 12px;
    row-gap: 10px;
    padding: 20px 16px;
  }
  .coaching-entry-signal {
    grid-area: signal;
    height: 100%;
    min-height: 82px;
  }
  .coaching-entry-copy { grid-area: copy; }
  .coaching-entry-title { font-size: clamp(28px, 9vw, 36px); }
  .coaching-entry-action {
    grid-area: action;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}

@media (min-width: 640px) {
  .app-main { padding-top: 8px; }
}

/* Micro-animazioni M6 (Task 2): entrata schermata e press su card/tessera.
   Vivono esclusivamente qui dentro, per non animare mai quando l'utente
   preferisce movimento ridotto (nessun bisogno di "annullarle" più sotto). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mf-free-pass-glow {
    from { transform: translateX(0) rotate(13deg); opacity: .22; }
    48%, 62% { opacity: .48; }
    to { transform: translateX(340%) rotate(13deg); opacity: .18; }
  }
  .free-session-pass::after {
    animation: mf-free-pass-glow 8s ease-in-out infinite;
  }

  @keyframes mf-guide-nav-blink {
    0%, 100% {
      opacity: .48;
      transform: scale(1.04);
      filter: drop-shadow(0 0 3px rgba(242, 212, 121, .38));
    }
    50% {
      opacity: 1;
      transform: scale(1.24);
      filter: drop-shadow(0 0 11px rgba(242, 212, 121, 1));
    }
  }
  .bottom-nav.guide-mode button.guide-target .nav-icon {
    animation: mf-guide-nav-blink 1.15s ease-in-out infinite;
  }

  @keyframes mf-guide-card-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes mf-guide-scrim-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .guide-card { animation: mf-guide-card-in 240ms ease-out both; }
  .guide-scrim { animation: mf-guide-scrim-in 180ms ease-out both; }
  .guide-progress span { transition: transform 260ms ease; }

  /* Firma Coaching: una scintilla rosso-fiamma con testa oro percorre il
     perimetro reale delle card. Il motion-path la tiene sul bordo: nessun
     gradiente o lama luminosa attraversa il contenuto. Se il browser non
     supporta offset-path resta semplicemente il bordo rosso statico. */
  @supports (offset-path: inset(1px round 20px)) {
    @keyframes mf-coaching-border-lap {
      from { offset-distance: 0%; }
      to { offset-distance: 100%; }
    }

    .coaching-entry-card::before,
    .coaching-catalog-card::before,
    .coaching-hero-card::before,
    .coaching-locked-panel::before {
      content: "";
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      width: 62px;
      height: 4px;
      border-radius: 999px;
      background:
        radial-gradient(ellipse at 88% 50%,
          rgba(242, 212, 121, .72) 0 8%,
          rgba(255, 46, 59, .42) 18%,
          rgba(255, 46, 59, .12) 42%,
          transparent 72%),
        linear-gradient(90deg,
          transparent 0%,
          rgba(255, 46, 59, .18) 28%,
          var(--flame) 76%,
          var(--gold-hi) 100%) center / 100% 2px no-repeat;
      opacity: var(--coaching-beam-opacity, .8);
      pointer-events: none;
      offset-path: inset(1px round 23px);
      offset-anchor: 100% 50%;
      offset-rotate: auto;
      animation: mf-coaching-border-lap var(--coaching-lap-duration, 5.8s) linear infinite;
    }

    .coaching-catalog-card::before { offset-path: inset(1px round 15px); }
    .coaching-hero-card::before,
    .coaching-locked-panel::before { offset-path: inset(1px round 25px); }
  }

  @keyframes mf-coaching-signal {
    0%, 100% { transform: scale(.82); opacity: .72; }
    50% { transform: scale(1.18); opacity: 1; }
  }
  .coaching-entry-card.active .coaching-signal-dot,
  .coaching-connection-dot {
    animation: mf-coaching-signal 2.4s ease-in-out infinite;
  }

  .accordion-week.current::before {
    animation: current-week-sheen 4.8s linear infinite;
  }

  @keyframes current-week-sheen {
    0% { transform: translateX(0); }
    100% { transform: translateX(540%); }
  }

  @keyframes mf-screen-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .screen-enter { animation: mf-screen-enter 160ms ease both; }

  .card, .catalog-card {
    transition: transform 120ms ease;
  }
  .card:active, .catalog-card:active { transform: scale(0.985); }

  /* M7 Task 1: saetta della bottom nav che scorre da una tab all'altra
     invece di apparire di colpo (solo transform, mai left/width in loop). */
  .bottom-nav-indicator {
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  }

  /* Pressione dell'icona di tab: leggero "schiacciamento" al tocco. */
  .bottom-nav button .nav-icon {
    transition: transform 100ms ease;
  }
  .bottom-nav button:active .nav-icon {
    transform: scale(.94);
  }

  /* Ingresso a cascata delle card di ogni schermata: i figli diretti di
     .app-main marcati "enter" (vedi appMain() in app.js) entrano in
     sequenza leggendo il ritardo dalla variabile CSS --enter-i (indice,
     max 5 poi 0 per non allungare troppo le liste lunghe). */
  @keyframes mf-card-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .app-main > .enter {
    animation: mf-card-enter 260ms ease-out both;
    animation-delay: calc(var(--enter-i, 0) * 45ms);
  }

  /* Lampo dorato al completamento di una serie (320ms, "traguardo"). */
  @keyframes mf-gold-flash {
    0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
    35% { box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  }
  .set-row.flash .set-row-field input,
  .set-row.flash .set-row-done {
    animation: mf-gold-flash 320ms ease;
  }

  /* M7 Task 2: la saetta di avanzamento della Home si riempie con una
     transizione su transform (mai width, vedi .home-progress-fill sopra
     per il transform-origin e lo scaleX applicato da app.js). */
  .home-progress-fill {
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
  }

  /* M7 Task 2: copertine "cinematografiche" — zoom impercettibile
     all'ingresso della schermata, dentro un contenitore overflow:hidden
     (.home-cover-wrap/.catalog-cover-wrap). */
  @keyframes mf-cover-zoom {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
  }
  .home-cover-wrap .home-cover,
  .catalog-cover-wrap .catalog-cover {
    animation: mf-cover-zoom 900ms ease-out both;
  }

  /* M7 Task 2: le linee dei grafici Progressi si disegnano da sole
     (stroke-dashoffset animato via app.js/renderLineChart, transizione
     dichiarata qui) e i punti compaiono dopo con un piccolo scale-in. */
  .chart-line, .chart-line-flame {
    transition: stroke-dashoffset 800ms ease-out;
  }
  @keyframes mf-chart-point-in {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  .chart-point, .chart-point-flame {
    transform-box: fill-box;
    transform-origin: center;
    animation: mf-chart-point-in 220ms ease-out both;
    animation-delay: 800ms;
  }

  /* M7 Task 2: shimmer diagonale in loop sugli scheletri di caricamento
     (vedi .skeleton/.skeleton-group sopra, fuori da questo blocco perché
     la forma del box deve restare visibile anche con animazioni ridotte). */
  @keyframes mf-skeleton-shimmer {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(201, 162, 39, 0.18) 50%, transparent 70%);
    animation: mf-skeleton-shimmer 1.4s ease-in-out infinite;
  }

  /* M7 Task 3: la barra "saetta" del timer di recupero drena in modo
     continuo tramite una keyframe (transform:scaleX(1)→scaleX(0)) applicata
     da app.js/restTimerPanel con un animation-delay NEGATIVO pari al tempo
     già trascorso. Questa tecnica è immune alla ricreazione del nodo: render()
     ricrea .rest-timer-progress-fill da zero ad ogni tick di startRestTimer,
     ma un delay negativo fa nascere il nodo già "avanzato" alla posizione
     corretta e prosegue ad animare da lì, senza bisogno di una CSS transition
     (che non avrebbe un valore "prima" da cui interpolare su un nodo nuovo) né
     di rAF. NB: qui manca deliberatamente il respiro dell'alone rosso della
     card durante il recupero previsto dal brief — è l'accessorio tolto nella
     passata finale di equilibrio (vedi report/commit): con due stati già
     animati sulla stessa card (drenaggio continuo + urgenza negli ultimi 5s),
     un terzo strato "ambientale" a bassa frequenza per l'intera durata del
     recupero (spesso 60-180s, molte volte a sessione) stancava più di quanto
     aggiungesse; l'alone resta acceso e fermo, così il pulsare dell'urgenza
     spicca per contrasto invece di competere con un'altra animazione già in
     corso. */
  @keyframes mf-rest-drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
  }

  /* Ultimi 5 secondi del recupero: il numero pulsa più deciso (vedi
     .rest-timer-count.urgent in restTimerPanel). Il passaggio al rosso
     --flame è un cambio di COLORE, non di movimento: vive fuori da questo
     blocco (subito sotto .rest-timer-count base) così resta attivo anche
     con prefers-reduced-motion:reduce, dove serve come unico segnale di
     urgenza rimasto. Qui dentro resta solo il pulse (scale), puramente
     motion. */
  @keyframes mf-rest-urgent-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
  }
  .rest-timer-count.urgent {
    animation: mf-rest-urgent-pulse 1s ease-in-out infinite;
  }

  /* Al termine del recupero, un breve lampo dell'intera card (vedi
     state.rest.ended/.rest-timer.end-flash in app.js). */
  @keyframes mf-rest-end-flash {
    0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
    30% { box-shadow: 0 0 34px 10px rgba(201, 162, 39, 0.65); }
    100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  }
  .rest-timer.end-flash {
    animation: mf-rest-end-flash 420ms ease;
  }

  /* Serie completata: oltre al lampo dorato già esistente (mf-gold-flash
     sopra), la spunta fa un "pop" e un anello dorato si espande e svanisce
     dal suo ::after (vedi .set-check in setRow()). */
  @keyframes mf-check-pop {
    0% { transform: scale(.8); }
    55% { transform: scale(1.12); }
    100% { transform: scale(1); }
  }
  .set-row.flash .set-check {
    animation: mf-check-pop 260ms ease;
  }
  @keyframes mf-check-ring {
    0% { transform: scale(0); opacity: .5; }
    100% { transform: scale(1.8); opacity: 0; }
  }
  .set-row.flash .set-check::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    animation: mf-check-ring 420ms ease-out;
    pointer-events: none;
  }

  /* Firma metallica: riflesso dorato diagonale che attraversa ogni card
     bloccata del catalogo ogni ~4.5s (35.56% di 4.5s = i 1.6s della corsa
     -120%→120%, il resto del ciclo resta fuori scena); animation-delay
     sfalsato per card via --lock-i (vedi catalogCard/app.js) così non
     riflettono la luce tutte insieme. Solo .locked, mai sulle card owned. */
  @keyframes mf-lock-shimmer {
    0% { transform: translateX(-120%); }
    35.56% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
  }
  .catalog-card.locked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(201, 162, 39, 0.12) 50%, transparent 60%);
    pointer-events: none;
    animation: mf-lock-shimmer 4.5s ease-in-out infinite;
    animation-delay: calc(var(--lock-i, 0) * 0.7s);
  }

  /* Pulsante "Inizia allenamento" della Home: unico primary con un alone che
     respira molto lentamente (mai su tutti i pulsanti primary, vedi brief).
     box-shadow è una proprietà di paint: animarla forza un repaint ad ogni
     frame per tutto il tempo in cui la Home resta montata. Per restare su
     proprietà composited (regola del progetto: solo transform/opacity nei
     loop infiniti), l'alone vive in un ::after assoluto (inset:0, stessa
     border-radius del pulsante, pointer-events:none, dietro al contenuto)
     con un box-shadow STATICO; si anima solo la sua opacity tra .55 e 1.
     Il box-shadow del pulsante stesso (button.primary, sopra) resta fisso. */
  @keyframes mf-cta-breathe {
    from { opacity: 0.55; }
    to { opacity: 1; }
  }
  .cta-breathe {
    position: relative;
  }
  .cta-breathe::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    box-shadow: 0 10px 38px var(--flame-glow);
    pointer-events: none;
    z-index: -1;
    animation: mf-cta-breathe 3s ease-in-out infinite alternate;
  }

  /* M8: micro-transizione miniatura → iframe/video quando il cliente tocca
     il play su .video-embed (vedi videoPlayer in app.js). Solo qui dentro:
     con prefers-reduced-motion: reduce l'iframe/video appare già a opacità
     piena, senza dissolvenza. */
  @keyframes mf-video-embed-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .video-embed iframe,
  .video-embed video {
    animation: mf-video-embed-in 220ms ease both;
  }

  /* M9: apertura della tendina video (.video-disclosure-panel viene aggiunto
     al DOM solo quando aperta, vedi videoDisclosure in app.js — nessuno
     stato "chiuso" da nascondere via CSS, quindi basta animare l'ingresso).
     Con prefers-reduced-motion: reduce questa regola non esiste affatto (sta
     solo qui dentro no-preference), quindi il pannello compare subito nel
     suo stato finale, senza alcuna dissolvenza/traslazione. */
  @keyframes mf-video-disclosure-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .video-disclosure-panel {
    animation: mf-video-disclosure-in 220ms ease both;
  }
}

/* Rispetta la preferenza di sistema: disattiva ogni animazione/transizione
   (incluse quelle introdotte nei Task 2-3 del restyling M6). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}