/* superfici */
.card{background:var(--s1);border:1px solid var(--b-strong);border-radius:17px;padding:16px 17px}
.card2{background:var(--s2);border:1px solid var(--b-weak);border-radius:14px;padding:14px 15px}
/* Filo di luce sul bordo alto: stacca la card dallo sfondo senza
   ombre pesanti, che su fondo scuro non si vedrebbero comunque. */
.card,.card2{position:relative}
.card::before,.card2::before{content:'';position:absolute;inset:0 0 auto;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);pointer-events:none}
.light .card::before,.light .card2::before{display:none}
.sec-head{padding:26px 18px 8px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rows{display:flex;flex-direction:column;gap:9px}

/* bottoni */
.cta{width:100%;background:var(--grad);color:#fff;font:700 19px var(--sans);letter-spacing:-.2px;padding:22px;
  border-radius:16px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--glow);
  transition:transform .12s ease,box-shadow .2s ease}
.cta:active{transform:scale(.985);box-shadow:0 2px 10px -6px rgba(255,107,61,.5)}
.cta.sm{font-size:16px;padding:18px;border-radius:14px}
.btn{background:var(--b-strong);color:var(--t2);font:500 13px var(--sans);padding:12px 16px;border-radius:11px;transition:transform .12s ease,border-color .2s ease;
  text-align:center;white-space:nowrap}
.btn.go{background:var(--grad);color:#fff;font-weight:600;box-shadow:var(--glow)}
.btn.ghost{background:none;border:1px solid var(--b-med);color:var(--t3b)}
.btn.dash{background:none;border:1px dashed var(--b-med);color:var(--dim);width:100%;padding:12px;border-radius:11px;font-family:var(--mono);font-size:12px}
.chip{font-family:var(--mono);font-size:12px;color:var(--t3b);border:1px solid var(--b-med);padding:9px 12px;border-radius:10px;background:none;white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease}
.chip.on{background:var(--b-strong);border-color:var(--b-med);color:var(--t1)}
.chip.sm{padding:6px 9px;border-radius:7px;font-size:11.5px}
.lnk{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--acc);background:none;padding:0}
.icobtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--t3);font-size:18px}

/* input */
.in{background:var(--field);border:1px solid var(--b-input);border-radius:9px;color:var(--t1);padding:0 10px;height:42px;width:100%}
.in::placeholder{color:var(--off)}
.in.mono{text-align:center;font-family:var(--mono);font-weight:600;font-size:19px}
.in.txt{font-size:16px;height:46px;padding:0 12px}
textarea.in{height:auto;padding:11px 12px;font-size:16px;resize:vertical;min-height:60px;line-height:1.45}

/* liste */
.li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--b-thin);text-align:left;width:100%;background:none}
.li:last-child{border-bottom:none}

/* empty state */
.empty{border:1px dashed var(--b-med);border-radius:13px;padding:20px 16px;text-align:center}
.empty p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.5}
.empty .lead{color:var(--t2b);font-size:14.5px;font-weight:500;margin-bottom:5px}

/* sessione */
.setrow{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;border:1px solid transparent}
.setrow.done{background:var(--done-bg);border-color:var(--done-b)}
.setrow{transition:background .18s ease,border-color .18s ease}
.setrow.pr{border-color:var(--acc)}
.setidx{width:26px;flex:none;text-align:center;font-family:var(--mono);font-weight:600;font-size:13px;color:var(--dim);background:none;padding:0}
.setrow.done .setidx{color:var(--acc)}
.ok{width:48px;height:42px;flex:none;border:1px solid var(--b-med);border-radius:9px;color:var(--off);font-size:17px;display:flex;align-items:center;justify-content:center}
.ok.on{background:var(--grad);border-color:transparent;color:#fff;animation:pop .22s ease;box-shadow:var(--glow)}
.plate-btn{width:34px;height:42px;flex:none;color:var(--dim);font-size:15px}

/* barre */
.bar{height:6px;background:var(--b-weak);border-radius:3px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--grad);border-radius:3px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.bar.thin{height:4px}

/* tab bar */
/* Sei voci invece di cinque: l'icona attiva si accende dentro una
   pastiglia colorata invece di appendere un trattino al soffitto.
   Con sei colonne il trattino sopra diventava un pettine.        */
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(13,14,17,.94);backdrop-filter:blur(18px) saturate(1.2);border-top:1px solid var(--b-weak);padding:7px 4px calc(20px + env(safe-area-inset-bottom))}
#tabbar>div{max-width:460px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--dim3);padding:3px 0}
#tabbar button{position:relative;transition:color .18s ease}
#tabbar button.on{color:var(--acc)}
#tabbar .g{transition:transform .2s cubic-bezier(.2,.9,.3,1.2),background .2s ease;
  font-size:16px;line-height:1;width:38px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill)}
#tabbar .g{position:relative;isolation:isolate}
/* La pastiglia è un velo del colore stesso: il glifo resta leggibile
   sopra, cosa che con un fondo pieno di currentColor non succede —
   sarebbero due volte lo stesso colore. */
#tabbar button.on .g::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:currentColor;opacity:.17}
.light #tabbar button.on .g::before{opacity:.13}
#tabbar button.on .g{transform:translateY(-1px) scale(1.04)}
#tabbar .t{font-size:9.5px;font-weight:600;letter-spacing:-.1px}

/* ── frecce sospese dell'allenamento ──────────────────────────
   Le frecce per cambiare esercizio stavano in cima al contenuto,
   accanto al nome: per usarle bisognava risalire tutta la pagina
   ogni volta, con il telefono in mano fra una serie e l'altra.
   Adesso stanno ferme in basso, ai due lati, dove il pollice
   arriva senza spostare la presa. In mezzo resta libero, così non
   coprono le righe delle serie.                                */
#exnav{position:fixed;left:0;right:0;bottom:calc(92px + env(safe-area-inset-bottom));
  z-index:38;pointer-events:none}
#exnav>div{max-width:460px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
#exnav button{pointer-events:auto;transition:transform .12s ease}
#exnav button:active{transform:scale(.92)}
#exnav .nv{width:56px;height:56px;border-radius:50%;font-size:27px;line-height:1;color:var(--t1);
  background:rgba(21,23,31,.88);backdrop-filter:blur(16px);border:1px solid var(--b-strong);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center}
.light #exnav .nv{background:rgba(255,255,255,.92);box-shadow:0 12px 26px -14px rgba(0,0,0,.35)}
#exnav .cnt{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--dim);
  padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(21,23,31,.8);backdrop-filter:blur(16px);border:1px solid var(--b-weak)}
.light #exnav .cnt{background:rgba(255,255,255,.88)}
/* Col recupero in corso la barra del timer occupa la fascia bassa:
   le frecce salgono sopra invece di finirci sotto. */
.inrest #exnav{bottom:calc(150px + env(safe-area-inset-bottom))}
/* E il contenuto si lascia sotto lo spazio che le frecce occupano,
   altrimenti l'ultima riga di serie finisce coperta. */
.insess #app{padding-bottom:calc(172px + env(safe-area-inset-bottom))}

/* rest bar */
#restbar{position:fixed;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));z-index:39;background:var(--rest-bg);border-top:1px solid var(--rest-b);border-bottom:1px solid var(--rest-b);animation:up .2s ease}
#restbar>div{max-width:460px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:10px calc(18px + env(safe-area-inset-right)) 10px calc(18px + env(safe-area-inset-left))}

/* sheet */
#sheetwrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
#sheetwrap .bd{position:absolute;inset:0;background:rgba(0,0,0,.62)}
#sheetwrap .sh{position:relative;width:100%;max-width:460px;background:var(--s1);border-radius:16px 16px 0 0;border-top:1px solid var(--b-strong);padding:18px 18px calc(24px + env(safe-area-inset-bottom));animation:up .2s ease;max-height:88vh;overflow-y:auto}
.sh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}

/* full screen overlay */
.full{position:fixed;inset:0;z-index:55;background:var(--bg);overflow-y:auto;animation:fade .18s ease}
.full>div{max-width:460px;margin:0 auto;padding-bottom:40px;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.full-head{position:sticky;top:0;z-index:2;background:var(--bg);
  padding:calc(16px + env(safe-area-inset-top)) 18px 10px;border-bottom:1px solid var(--b-weak)}

/* toast */
#toast{position:fixed;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));z-index:70;display:flex;justify-content:center;pointer-events:none}
#toast span{background:var(--s1);border:1px solid var(--b-strong);border-radius:11px;padding:11px 16px;font-size:13.5px;color:var(--t2);animation:up .2s ease;max-width:400px}

/* heatmap */
.heat{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;gap:3px;overflow-x:auto;padding-bottom:4px}
.heat i{width:11px;height:11px;border-radius:2px;display:block}

/* tabelle */
.tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
.tbl th{text-align:right;font-weight:500;font-size:10.5px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;padding:0 0 8px;border-bottom:1px solid var(--b-thin)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{text-align:right;padding:9px 0;border-bottom:1px solid var(--b-hair);color:var(--t2b)}