/* GymTrack — Nero / verde neon
   Nero profondo e verde slime: il colore acceso sta solo dove c'è un dato
   (carico, primato, voce attiva), il resto è fondo.
   Mobile-first, nessun build step. */

:root {
  /* colore
     Tre segnali, non uno: lime acido = marchio e primati, smeraldo = fatto,
     ciano = superset e coda offline. Erano arancio / verde / giallo; il giallo
     è diventato ciano perché accanto al lime si confondeva. */
  --bg:          #070A07;   /* niente #000: su OLED smorza lo smear */
  --surface:     #101710;
  --surface-2:   #18211A;
  --surface-3:   #223024;
  --border:      #2E3F31;
  --border-soft: #1E2A20;
  --fg:          #F2FBF3;
  --fg-muted:    #9BAF9F;   /* 7.9:1 su --surface */
  --fg-dim:      #6F8273;
  --primary:     #C7FF3E;   /* verde slime */
  --primary-dim: #8CC400;
  --on-primary:  #0A1400;
  --accent:      #2BE87C;
  --accent-dim:  #127A45;
  --danger:      #EF4444;
  --warn:        #35E5FF;
  --ring:        #C7FF3E;

  /* spazi (density 7/10) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;
  --tap: 46px;                       /* > 44px minimo touch */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --nav-h: 66px;

  --font-head: 'Barlow Condensed', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  /* luce ambientale fissa: costa zero, dà profondità al fondo piatto */
  background-image:
    radial-gradient(60% 40% at 10% -5%,  rgba(199,255,62,.16), transparent 60%),
    radial-gradient(50% 35% at 100% 0%, rgba(43,232,124,.10),  transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4, .num { font-family: var(--font-head); letter-spacing: .2px; }
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 var(--s2); text-transform: uppercase; }
h2 { font-size: 22px; line-height: 1.2; margin: 0 0 var(--s2); }
h3 { font-size: 18px; margin: 0 0 var(--s1); }
p  { margin: 0 0 var(--s3); }
a  { color: var(--primary); }

.app { padding: calc(var(--safe-t) + var(--s4)) var(--s4) calc(var(--nav-h) + var(--safe-b) + var(--s6)); max-width: 760px; margin: 0 auto; }
.app[data-full] { padding-bottom: calc(var(--safe-b) + var(--s6)); }

/* ------------------------------------------------------------ tipografia */
.muted   { color: var(--fg-muted); }
.dim     { color: var(--fg-dim); }
.small   { font-size: 13px; }
.tiny    { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 600; }
.center  { text-align: center; }
.mono-num{ font-family: var(--font-head); font-variant-numeric: tabular-nums; font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: .8px; }

/* ---------------------------------------------------------------- layout */
.stack   { display: flex; flex-direction: column; gap: var(--s3); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s2); }
.row     { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s2); }
.mt      { margin-top: var(--s4); }
.mt-lg   { margin-top: var(--s6); }
.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.page-head .eyebrow { color: var(--primary); font-weight: 600; letter-spacing: 1.4px; font-size: 12px; text-transform: uppercase; margin-bottom: 2px; }
.page-head h1 { margin: 0; }

/* ----------------------------------------------------------------- card */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, #0B110B 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow: var(--shadow);
}
.card.flat { background: var(--surface); box-shadow: none; }
.card.tight { padding: var(--s3); }
.card + .card { margin-top: var(--s3); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }

.stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--s3); }
.stat .v { font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1; }
.stat .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--fg-muted); margin-top: 4px; }
.stat.hot .v { color: var(--primary); }
.stat.good .v { color: var(--accent); }

/* --------------------------------------------------------------- bottoni */
.btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s5);
  border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--surface-2); color: var(--fg);
  font-family: var(--font-head); font-size: 17px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: #DBFF77; }
.btn-accent  { background: var(--accent); color: #052E14; }
.btn-ghost   { background: transparent; border-color: var(--border); color: var(--fg); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger  { background: transparent; border-color: var(--danger); color: #FCA5A5; }
.btn-danger:hover { background: rgba(239,68,68,.12); }
.btn-block   { width: 100%; }
.btn-sm      { min-height: 38px; padding: 0 var(--s3); font-size: 14px; }
.btn-icon    { min-width: var(--tap); padding: 0 var(--s2); }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 17px; height: 17px; }
.icon-lg { width: 28px; height: 28px; }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r-sm);
}

/* ----------------------------------------------------------------- form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--fg-muted); letter-spacing: .3px; }
.field .hint { font-size: 12.5px; color: var(--fg-dim); }
.field .err  { font-size: 13px; color: #FCA5A5; }
input[type=text], input[type=number], input[type=password], input[type=tel], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px var(--s3);
  background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 16px;   /* 16px: evita lo zoom su iOS */
}
textarea { min-height: 130px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--fg-dim); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-muted); white-space: nowrap;
}
.chip.hot   { color: var(--primary); border-color: rgba(199,255,62,.45); background: rgba(199,255,62,.12); }
.chip.good  { color: var(--accent);  border-color: rgba(43,232,124,.45);  background: rgba(43,232,124,.12); }
.chip.warn  { color: var(--warn);    border-color: rgba(53,229,255,.4);  background: rgba(53,229,255,.10); }

/* --------------------------------------------------------------- tabbar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px var(--s2) calc(6px + var(--safe-b));
  background: rgba(9,13,9,.88);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--border-soft);
}
.tabbar a {
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; text-decoration: none; color: var(--fg-dim);
  font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  border-radius: var(--r-md); transition: color var(--dur) var(--ease);
}
.tabbar a[aria-current="page"] { color: var(--primary); }
.tabbar a[aria-current="page"] .icon { transform: translateY(-1px); }

/* --------------------------------------------------------------- login */
.login-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: var(--s6) var(--s4) calc(var(--s6) + var(--safe-b)); max-width: 460px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: var(--s3); justify-content: center; margin-bottom: var(--s7); }
.brand .mark { width: 46px; height: 46px; border-radius: 14px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; }
.brand .name { font-family: var(--font-head); font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.brand .name span { color: var(--primary); }

.profili { display: flex; gap: var(--s3); overflow-x: auto; padding: 2px 2px var(--s3); scrollbar-width: none; }
.profili::-webkit-scrollbar { display: none; }
.profilo {
  flex: none; width: 92px; padding: var(--s3) var(--s2); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.profilo:active { transform: scale(.97); }
.profilo[aria-pressed="true"] { border-color: var(--primary); background: var(--surface-2); }
.profilo .av {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--fg); font-family: var(--font-head); font-size: 20px; font-weight: 700;
}
.profilo[aria-pressed="true"] .av { background: var(--primary); color: var(--on-primary); }
.profilo .nm { font-size: 12.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pin-dots { display: flex; gap: var(--s3); justify-content: center; margin: var(--s5) 0; min-height: 20px; }
.pin-dots i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); background: transparent; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pin-dots i.on { background: var(--primary); border-color: var(--primary); transform: scale(1.12); }
.pin-dots.err i { border-color: var(--danger); }
.shake { animation: shake 380ms var(--ease); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.keypad button {
  -webkit-tap-highlight-color: transparent;
  min-height: 62px; border-radius: var(--r-lg); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--fg);
  font-family: var(--font-head); font-size: 27px; font-weight: 600;
  transition: transform 120ms var(--ease), background 120ms var(--ease);
}
.keypad button:active { transform: scale(.94); background: var(--surface-3); }
.keypad button.act { background: transparent; border-color: transparent; color: var(--fg-muted); }

/* -------------------------------------------------------- serie/steppers */
.ex-card { border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ex-card + .ex-card { margin-top: var(--s3); }
.ex-card.done { border-color: rgba(43,232,124,.45); }
/* Superset: barra ciano a sinistra + margine ridotto, cosi' gli esercizi
   di uno stesso blocco si leggono come un pezzo unico. */
.ex-card.in-gruppo { border-left: 3px solid var(--warn); }
.ex-card.in-gruppo + .ex-card.in-gruppo { margin-top: 6px; }
.in-gruppo-riga { border-left: 3px solid var(--warn); padding-left: 10px; }
.chip.super { color: var(--warn); border-color: rgba(53,229,255,.5); background: rgba(53,229,255,.12); }
/* Chip cliccabili (avvio del cronometro): stessa forma, ma si sente che si preme. */
button.chip.premi { min-height: 34px; cursor: pointer; font-family: inherit; transition: transform 140ms var(--ease), background 140ms var(--ease); }
button.chip.premi:active { transform: scale(.94); background: var(--surface-3); }
button.chip.premi.good { color: var(--accent); border-color: rgba(43,232,124,.45); background: rgba(43,232,124,.10); }
.ex-head { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-soft); }
.ex-head .t { font-family: var(--font-head); font-size: 19px; font-weight: 700; }
.ex-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.ex-note { margin-top: var(--s2); padding: var(--s2) var(--s3); border-left: 3px solid var(--primary); background: rgba(199,255,62,.08); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13.5px; color: #D9F5B0; }

.set-row { display: grid; grid-template-columns: 22px minmax(0,1fr) minmax(0,1fr) 44px; align-items: center; gap: 4px; padding: var(--s2) 10px; border-bottom: 1px solid var(--border-soft); }
.set-row:last-child { border-bottom: 0; }
.set-row .n { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--fg-dim); text-align: center; }
.set-row.ok { background: rgba(43,232,124,.07); }
.set-row.ok .n { color: var(--accent); }
.set-head { display: grid; grid-template-columns: 22px minmax(0,1fr) minmax(0,1fr) 44px; gap: 4px; padding: var(--s2) 10px 0; }
.set-head span { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--fg-dim); text-align: center; font-weight: 700; }

/* Colonne strette: con carichi tipo 12.5 il numero deve starci per intero,
   due stepper affiancati su uno schermo da 390px non perdonano. */
.stepper { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.stepper button {
  -webkit-tap-highlight-color: transparent;
  min-height: 46px; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer;
  display: grid; place-items: center; transition: background 120ms var(--ease), color 120ms var(--ease);
}
.stepper button:active { background: var(--surface-3); color: var(--primary); }
.stepper input {
  min-height: 46px; min-width: 0; width: 100%; padding: 0; text-align: center;
  background: transparent; border: 0; border-radius: 0;
  font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--fg);
  -moz-appearance: textfield; font-variant-numeric: tabular-nums;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .u { font-size: 11px; color: var(--fg-dim); }

.check-btn {
  -webkit-tap-highlight-color: transparent;
  min-height: 46px; min-width: 44px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-dim);
  display: grid; place-items: center; transition: all 150ms var(--ease);
}
.check-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #052E14; }
.check-btn:active { transform: scale(.92); }

/* ------------------------------------------------- cronometro di recupero */
.timer-pannello {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--s4) var(--s4) calc(var(--s4) + var(--safe-b));
  background: rgba(7,10,7,.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,.9);
  transform: translateY(102%);
  transition: transform 320ms var(--ease);
  display: flex; flex-direction: column; gap: var(--s3);
}
.timer-pannello.visibile { transform: none; }
.t-barra { display: flex; align-items: center; justify-content: space-between; }
.t-etichetta { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fg-muted); }

.t-quadrante { position: relative; width: 208px; height: 208px; margin: var(--s1) auto var(--s2); }
.anello { width: 100%; height: 100%; transform: rotate(-90deg); }
.anello .traccia   { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.anello .progresso {
  fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset 220ms linear, stroke 240ms var(--ease);
}
.t-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.t-cifre {
  font-family: var(--font-head); font-size: 62px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.t-sotto { font-size: 12.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; min-height: 16px; }

.timer-pannello.in-pausa .anello .progresso { stroke: var(--fg-dim); }
.timer-pannello.in-pausa .t-cifre { color: var(--fg-muted); }
.timer-pannello.finito .anello .progresso { stroke: var(--accent); }
.timer-pannello.finito .t-cifre { color: var(--accent); animation: pulsa 900ms var(--ease) infinite alternate; }
.timer-pannello.finito .t-sotto { color: var(--accent); }
@keyframes pulsa { from { opacity: .55; } to { opacity: 1; } }

.t-comandi { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--s2); }
.t-azione { font-size: 15px; padding: 0 var(--s2); }

/* Con il timer aperto la barra di navigazione sparirebbe sotto: la alziamo. */
body:has(.timer-pannello.visibile) .tabbar { transform: translateY(110%); transition: transform 300ms var(--ease); }

/* ---------------------------------------------------------------- toast */
.toasts { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + var(--s3)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: var(--s2); pointer-events: none; padding: 0 var(--s4); }
.toast {
  max-width: 460px; width: 100%; padding: var(--s3) var(--s4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow); font-size: 14.5px; font-weight: 500;
  animation: toast-in 260ms var(--ease);
}
.toast.ok   { border-color: var(--accent-dim); background: linear-gradient(180deg, #0C3320, #0A2A1A99); }
.toast.err  { border-color: #7F1D1D; background: linear-gradient(180deg, #3B1A1A, #2E1414); }
.toast.pr   { border-color: var(--primary); background: linear-gradient(180deg, #24330A, #172206); }
.toast .h   { font-family: var(--font-head); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- sheet */
.sheet-bg { position: fixed; inset: 0; z-index: 80; background: rgba(0,3,0,.72); backdrop-filter: blur(3px); animation: fade 200ms var(--ease); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  max-height: 88dvh; overflow-y: auto;
  padding: var(--s4) var(--s4) calc(var(--s6) + var(--safe-b));
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -18px 40px -18px rgba(0,0,0,.8);
  animation: up 300ms var(--ease);
}
.sheet .grip { width: 44px; height: 4px; border-radius: 999px; background: var(--border); margin: 0 auto var(--s4); }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------- record */
.rec-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.rec-row:last-child { border-bottom: 0; }
.rec-row:active { background: var(--surface-2); }
.rec-row .v { font-family: var(--font-head); font-size: 23px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.rec-row .v small { font-size: 12px; color: var(--fg-dim); font-weight: 600; }

.spark { width: 100%; height: 108px; display: block; }
.spark path.line { fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: url(#gradSpark); stroke: none; }
.spark circle { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }

/* ----------------------------------------------------------- misc/empty */
.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--fg-muted); }
.empty .icon { width: 46px; height: 46px; color: var(--fg-dim); margin-bottom: var(--s3); }
.list-sep > * + * { border-top: 1px solid var(--border-soft); }
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: var(--r-md); }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.divider { height: 1px; background: var(--border-soft); margin: var(--s4) 0; }
.code {
  font-family: var(--font-head); font-size: 21px; letter-spacing: 2.4px; font-weight: 700;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-md);
  padding: var(--s2) var(--s3); word-break: break-all;
}
.fab-row { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + var(--s2)); z-index: 20; margin-top: var(--s4); }

.reveal { animation: reveal 380ms var(--ease) backwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  .app { padding-left: var(--s6); padding-right: var(--s6); }
  h1 { font-size: 36px; }
}

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

/* Elenco numerato dei passi (guida all'installazione) */
.passi { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: var(--s2); }
.passi li { font-size: 14.5px; line-height: 1.45; color: var(--fg); }
.passi li::marker { color: var(--primary); font-family: var(--font-head); font-weight: 700; }

/* Lo sprite delle icone: nascosto via classe e non con style="", così la
   Content-Security-Policy può vietare del tutto gli stili in linea. */
.sprite { display: none; }

/* Barra "da inviare": compare solo se ci sono serie in attesa di rete. */
.offline {
  position: fixed; left: 0; right: 0; top: 0; z-index: 70;
  padding: calc(var(--safe-t) + 6px) var(--s4) 6px;
  background: var(--warn); color: #002A33;
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  letter-spacing: .5px; text-align: center; text-transform: uppercase;
}
.set-row.in-coda { background: rgba(53,229,255,.10); }
.set-row.in-coda .check-btn[aria-pressed="true"] { background: var(--warn); border-color: var(--warn); color: #002A33; }

/* Avanzamento dell'allenamento */
.avanzamento { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.avanzamento i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 420ms var(--ease); }
.ex-card.evidenzia { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(199,255,62,.22); }

/* ------------------------------------------------- tipi di misura */
/* La riga di una serie cambia forma secondo cosa c'è da registrare:
   niente colonna dei chili se i chili non c'entrano. */
.set-row .doppia, .set-head.m-reps span:nth-child(2),
.set-head.m-tempo span:nth-child(2), .set-head.m-segno span:nth-child(2) { grid-column: span 2; }
.set-row .doppia { min-width: 0; }

.chip.mini { min-height: 22px; padding: 0 8px; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; }
button.chip.premi.attivo { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.misure { display: grid; gap: var(--s2); }
.misura {
  -webkit-tap-highlight-color: transparent;
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  gap: 2px var(--s3); align-items: center; text-align: left; cursor: pointer;
  padding: var(--s3); min-height: var(--tap);
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-md);
  color: var(--fg); font-family: var(--font-body);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.misura .icon { grid-row: span 2; color: var(--fg-dim); }
.misura .n { font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.misura .d { font-size: 12.5px; color: var(--fg-muted); }
.misura.attiva { border-color: var(--primary); background: rgba(199,255,62,.10); }
.misura.attiva .icon { color: var(--primary); }
.misura:active { transform: scale(.99); }

/* =====================================================================
   Rifiniture visive
   Tre cose emerse guardando l'app su schermo piccolo: le liste lunghe
   erano piatte, i titoli di sezione si confondevano col testo, e le
   righe cliccabili non si distinguevano da quelle inerti.
   ===================================================================== */

/* Righe di elenco: più aria, e si capisce che si toccano */
.rec-row {
  gap: var(--s3); padding: var(--s3) var(--s4);
  transition: background 140ms var(--ease);
}
.rec-row:last-child { border-bottom: 0; }
.rec-row .icon { color: var(--fg-dim); flex: none; }
.rec-row:hover { background: var(--surface-2); }
.rec-row:hover .icon { color: var(--primary); }
.rec-row .v { white-space: nowrap; }

/* Titoli di sezione: una riga sopra per staccarli dal contenuto */
.card > h3:first-child, .card .stack > h3:first-child {
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--s2);
}

/* Barra in basso: la voce attiva ha una tacca, non solo il colore —
   il colore da solo non basta a chi lo distingue male. */
.tabbar a { position: relative; }
.tabbar a[aria-current="page"]::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
}

/* Intestazione di pagina più compatta: il titolo non deve mangiare
   mezzo schermo quando i nomi delle schede sono lunghi. */
.page-head h1 { font-size: 27px; overflow-wrap: anywhere; }
@media (min-width: 400px) { .page-head h1 { font-size: 30px; } }

/* Campo di ricerca con la lente, senza aggiungere markup */
input[type=text][placeholder^="Cerca"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F8273' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 19px;
  padding-left: 40px;
}

/* Elenchi lunghi: separatori più leggeri, così le righe si leggono come
   un blocco unico invece che come tante scatole */
.card.flat .rec-row { border-color: var(--border-soft); }

/* Stati vuoti dentro una card */
.empty.small { padding: var(--s6) var(--s4); font-size: 14px; }

/* ================================================================
   Superset: una card sola, divisa per giri.
   Prima ogni esercizio del blocco era una card a sé con l'etichetta
   "superset A" — due schede separate per una cosa che si esegue di
   seguito. Qui si legge come la fai: giro 1 (A, B), recupero, giro 2.
   ================================================================ */
.ss-card {
  border: 1px solid rgba(53,229,255,.42);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.ss-card + .ex-card, .ss-card + .ss-card, .ex-card + .ss-card { margin-top: var(--s3); }

.ss-testa { padding: var(--s3) var(--s4); background: rgba(53,229,255,.07); border-bottom: 1px solid rgba(53,229,255,.28); }
.ss-tag {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--warn);
  border: 1px solid rgba(53,229,255,.5); border-radius: 999px; padding: 2px 10px;
}
.ss-elenco { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.ss-voce { display: flex; align-items: flex-start; gap: var(--s3); }
.ss-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--warn); color: #002A33;
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
}
.ss-num.piccolo { width: 19px; height: 19px; font-size: 12px; }

.giro { border-bottom: 1px solid var(--border-soft); padding-bottom: var(--s2); }
.giro:last-of-type { border-bottom: 0; }
.giro-t {
  padding: var(--s3) var(--s4) 2px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-dim);
}
.ss-riga + .ss-riga { margin-top: 2px; }
.ss-riga-nome {
  display: flex; align-items: center; gap: 8px;
  padding: 6px var(--s4) 0; font-size: 13.5px; min-width: 0;
}
.ss-riga-nome .dim { margin-left: auto; flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.set-row.senza-n { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; }
.chip.mini.hot { color: var(--primary); border-color: rgba(199,255,62,.45); background: rgba(199,255,62,.12); }

/* ------------------------------------------------- gerarchia esercizi
   Le serie con il carico sono il motivo per cui esiste l'app: card piena,
   tabella, numeri grandi. Riscaldamento, mobilità e cardio sono contorno:
   card compatta, e nel caso di 'segno' una riga sola con la spunta. */
.ex-card.compatta .ex-head { padding: 10px var(--s4) 8px; }
.ex-card.compatta .ex-head .t { font-size: 16px; }
.ex-card.compatta .ex-note { font-size: 12.5px; padding: 6px 10px; }
.ex-card.compatta .set-row { padding: 4px 10px 8px; }
.ex-card.compatta { opacity: .92; }
.ex-card.compatta:focus-within, .ex-card.compatta:hover { opacity: 1; }

/* "+" discreto: occupava quanto una serie intera, ora è un tasto in coda
   allineato alla colonna della spunta. */
.piu-riga { display: flex; justify-content: flex-end; padding: 2px 10px 10px; }
.piu {
  -webkit-tap-highlight-color: transparent;
  width: 44px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px dashed var(--border); border-radius: var(--r-md);
  color: var(--fg-dim); transition: all 150ms var(--ease);
}
.piu:hover, .piu:active { color: var(--primary); border-color: var(--primary); border-style: solid; }

/* Riga unica: nome e spunta sulla stessa linea (esercizi da segnare dentro
   un superset). Prima la casella finiva sotto, con mezzo schermo vuoto. */
.set-row.in-linea { grid-template-columns: minmax(0,1fr) 44px; padding: 6px 10px; }
.set-row.in-linea .et { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }

/* ------------------------------------------- riferimenti dell'esercizio
   Le due sole cose che servono per decidere il carico: quanto hai fatto
   l'ultima volta e qual è il primato. Grandi e affiancate, leggibili
   senza mettere a fuoco. */
.rif { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: 8px; }
.rif-v { display: flex; flex-direction: column; gap: 1px; }
.rif-v .k { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; }
.rif-v .v { font-family: var(--font-head); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rif-v .v.hot { color: var(--primary); }

/* Blocchi in superset: barra ciano, e attaccati fra loro. */
.ex-card.in-gruppo { border-left: 3px solid var(--warn); }
.ex-card.in-gruppo + .ex-card.in-gruppo { margin-top: 6px; }

/* Note del trainer: due righe, il resto al tocco. Il max-height serve perché
   con il solo line-clamp la terza riga sbucava sotto per via del padding. */
.ex-note { line-height: 1.45; }
.ex-note.apribile { cursor: pointer; }
.ex-note.apribile:hover { color: #ECFFD2; }

/* =====================================================================
   Sbavature a schermo stretto (audit a 320px)
   Il telefono di riferimento è da 390px, ma sotto i 360 (iPhone SE, mini,
   e chi tiene i caratteri grandi) quattro cose si rompevano davvero.
   Sono state trovate rendendo i contenuti *reali* più lunghi della scheda
   di Davide, non con testo finto: i nomi degli esercizi arrivano a 54
   caratteri e sono loro a far saltare i conti.
   ===================================================================== */

/* 1. I chip uscivano dallo schermo.
   `white-space: nowrap` serviva ai chip corti ("rec 90s"), ma sui nomi di
   esercizio produceva una riga che sfondava il viewport a destra: il testo
   spariva e basta, senza nemmeno una barra per raggiungerlo. Ora vanno a
   capo — un chip su due righe è brutto, un chip tagliato è perso. */
.chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.chip.mini { white-space: nowrap; }   /* questi sono corti per definizione */

/* 2. Nella riga dei primati il nome si riduceva a una parola per riga.
   Il valore ("122.5 kg") non può stringersi, quindi in flexbox tutta la
   compressione cadeva sul nome, che collassava a ~60px. Ora il nome tiene
   almeno il 60% e il valore, se non ci sta, scende sotto allineato a destra. */
.rec-row { flex-wrap: wrap; }
/* `flex: 1 1 0` e non `auto`: con la base automatica il nome chiede la sua
   larghezza a riga unica (lunghissima), non ci sta accanto all'icona e va a
   capo da solo lasciando il trofeo su una riga vuota. Con la base a zero
   resta accanto all'icona ed è il valore, semmai, a scendere sotto. */
.rec-row .grow { flex: 1 1 0; min-width: 60%; }
.rec-row .v { flex: none; margin-left: auto; }

/* 3. Il titolo del foglio spingeva via la ✕.
   `align-items: center` su un titolo di cinque righe metteva la ✕ a metà
   altezza, e senza `min-width: 0` il titolo non si stringeva. Ora la ✕ sta
   in alto a destra e non si muove più. */
.sheet .row-between:first-of-type { align-items: flex-start; }
.sheet h2 { min-width: 0; overflow-wrap: anywhere; font-size: 20px; line-height: 1.2; }
.sheet .row-between > .btn { flex: none; }
/* Scorrendo fino in fondo al foglio si trascinava la pagina dietro. */
.sheet { overscroll-behavior: contain; }

/* 4. Etichette lunghe nei bottoni.
   "Azzera tutti i primati" in mezza larghezza andava su tre righe attaccate
   fra loro: il font è condensato e maiuscolo, e line-height 1.5 non c'era. */
.btn { min-width: 0; line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }
.grid-2 > .btn, .grid-3 > .btn { padding-left: var(--s3); padding-right: var(--s3); }

/* 5. I due riferimenti dell'esercizio si sfalsavano: "12.5 kg × 12" andava a
   capo e "Primato" restava su una riga sola. Il numero si adatta alla
   larghezza invece di spezzarsi. */
.rif-v .v { white-space: nowrap; font-size: clamp(15px, 4.4vw, 19px); }
.rif-v .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 6. Aree di tocco sotto i 44px.
   Il «+», la ✕ del foglio e i chip premibili erano alti 34-38px. Invece di
   ingrandirli — sono piccoli apposta, non devono competere con le serie —
   si allarga la sola zona sensibile al tocco, che è invisibile. */
.piu, .btn-sm, button.chip.premi { position: relative; }
.piu::after, .btn-sm::after, button.chip.premi::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 46px;
}

/* 7. IL PROBLEMA PEGGIORE: il carico veniva tagliato dentro lo stepper.
   Il commento più sopra dice «con carichi tipo 12.5 il numero deve starci per
   intero» — vero, ma era stato tarato su due cifre. Con 122.5 (una leg press
   qualunque) a 390px si leggeva «122.» e a 320px «1». Numeri troncati in
   un'app che serve a segnare numeri.
   Due colonne sacrificabili: i tasti −/+ passano da 40 a 36px (restano sopra
   i 44 di area sensibile grazie all'altezza di 46) e la colonna del numero
   di serie da 22 a 18. Il carattere scala con la larghezza invece di
   spezzarsi. */
.stepper { grid-template-columns: 36px minmax(0,1fr) 36px; }
.stepper input { font-size: clamp(14px, 4.3vw, 19px); }
.set-row, .set-head { grid-template-columns: 18px minmax(0,1fr) minmax(0,1fr) 44px; }
.set-row.senza-n { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; }

/* Sotto i 360px (iPhone SE e mini) la riga della serie non ha abbastanza
   larghezza nemmeno così: i tasti −/+ scendono a 30px e la spunta a 40,
   recuperando i ~20px che mancavano al carico. L'area sensibile della spunta
   resta sopra i 44px grazie alla zona invisibile qui sotto. */
@media (max-width: 360px) {
  /* Il numero della serie sparisce: la posizione nella lista lo dice gia', e
     quei 20px sono esattamente quelli che mancavano al carico. Resta nella
     riga di intestazione? No, sparisce anche li' o le colonne si sfalsano. */
  .set-row .n, .set-head span:first-child { display: none; }
  .set-row, .set-head { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; }
  .set-row.senza-n { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; }
  .set-row.in-linea { grid-template-columns: minmax(0,1fr) 40px; }
  .stepper { grid-template-columns: 28px minmax(0,1fr) 28px; }
  /* 15px fisso: il clamp qui scendeva a 14 e "122.5" restava tagliato di un
     pelo. I −/+ a 28px sono stretti ma alti 46: su uno schermo da 320 non
     esiste un modo di avere tre bersagli da 44 e un numero di 5 cifre nella
     stessa riga, e il numero conta di piu' — il valore si puo' anche digitare. */
  .stepper input { font-size: 15px; letter-spacing: -.2px; }
  .check-btn { min-width: 40px; position: relative; }
  .check-btn::after { content: ''; position: absolute; inset: 0 -3px; }
}