:root{
  --bg:#dedbd3;
  --bg-soft:#e8e3d7;
  --text:#111111;
  --muted:#5f5a52;
  --line:rgba(17,17,17,.08);
  --white:#ffffff;
  --black:#121212;
  --purple:#cdb2ef;
  --purple-strong:#7d5cff;
  --yellow:#dbe878;
  --yellow-strong:#f2c14d;
  --coral:#f46a3f;
  --coral-soft:#ff8a61;
  --blue:#5b6ce6;
  --cream:#f6f0e3;
  --radius-xl:34px;
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:16px;
  --shadow:0 24px 60px rgba(0,0,0,.08);
  --shadow-soft:0 12px 24px rgba(0,0,0,.06);
  --font:"Satoshi",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden}

/* Micro-interazioni globali: piccolo feedback "a molla" al tocco su
   pulsanti, pillole, tab e card cliccabili — è ciò che fa percepire
   un'interfaccia web come una vera app invece che come un sito. */
a, button{ transition:transform .12s ease, opacity .12s ease, background-color .15s ease; }
.btn:active, .pill-dark:active, .tab:active, .seg-tab:active,
.round-btn:active, .ig-icon-btn:active, .icon-danger:active,
.calendar-cell:active, .list-row:active{
  transform:scale(.96);
}
@media (prefers-reduced-motion: reduce){
  a, button, .btn, .pill-dark, .tab{ transition:none !important; }
  .btn:active, .pill-dark:active, .tab:active, .seg-tab:active,
  .round-btn:active, .ig-icon-btn:active, .icon-danger:active,
  .calendar-cell:active, .list-row:active{ transform:none; }
}

body{
  max-width:100vw;
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0)),
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.45),transparent 30%);
}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;cursor:pointer;background:none}
h1,h2,h3,p{margin:0}
svg{width:20px;height:20px;display:block}

.app-shell{
  max-width:1320px;
  margin:0 auto;
  min-height:100dvh;
  padding:env(safe-area-inset-top) 14px calc(128px + env(safe-area-inset-bottom));
}

.eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:14px 4px 20px;
  position:sticky;
  top:0;
  z-index:30;
  margin-inline:calc(50% - 50vw); /* rompe il contenitore e si estende a 100% viewport */
  width:100vw;
  padding-inline:calc(14px + (50vw - 50%)); /* mantiene il contenuto allineato come prima */
  background:linear-gradient(180deg,rgba(222,219,211,.55),rgba(222,219,211,.25),transparent);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(5px);
}

.topbar h1{
  font-size:40px;
  line-height:.98;
  font-weight:700;
  letter-spacing:-.04em;
}

.topbar-title-block{
  flex:1;
  min-width:0;
}
.topbar-title-block h1,
.topbar-title-block p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:400px){
  .topbar h1{ font-size:30px; }
}

.topbar p{
  margin-top:6px;
  color:var(--muted);
}

.topbar-actions{
  display:flex;
  gap:10px;
  flex-shrink:0;
}

.topbar-avatar{
  width:46px;
  height:46px;
  min-width:46px;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  font-weight:700;
  font-size:15px;
  align-self:center;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.topbar-avatar img{ width:100%; height:100%; object-fit:cover; }

.notif-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:#f46a3f;
  color:#fff;
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
}

/* --- Sotto-nav a segmenti (Progressi / Storico / Peso) ------------------ */
.segmented-tabs{
  display:flex;
  gap:4px;
  background:rgba(17,17,17,.05);
  padding:4px;
  border-radius:18px;
  margin-bottom:18px;
}
.seg-tab{
  flex:1;
  text-align:center;
  padding:10px 8px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}
.seg-tab.active{
  background:#111;
  color:#fff;
}

/* --- Toolbar sopra una pagina (es. link "Libreria esercizi") ----------- */
.page-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}

/* --- Header profilo con foto grande ------------------------------------ */
.profile-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 4px 22px;
  flex-wrap:wrap;
}
.profile-hero-info{
  flex:1;
  min-width:180px;
}
.profile-hero-info h2{
  overflow-wrap:break-word;
}
.avatar-upload{
  position:relative;
  width:88px;
  height:88px;
  min-width:88px;
  border-radius:50%;
  overflow:hidden;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.avatar-upload img{ width:100%; height:100%; object-fit:cover; }
.avatar-fallback{ font-size:30px; font-weight:800; }
.avatar-edit-badge{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:30px;
  height:30px;
  border-radius:50%;
  /* FIX: --accent non era mai definita (né in :root né nei temi), quindi
     il badge restava sempre viola fisso indipendentemente dal tema
     scelto. Usiamo --purple-strong, già dichiarata e coerentemente
     ridefinita in ogni tema (aurora/ocean/sunset/forest/noir). */
  background:var(--purple-strong);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid var(--bg,#f7f6f2);
}
.avatar-edit-badge svg{ width:14px; height:14px; }
.avatar-upload.is-uploading{ opacity:.6; }
.avatar-upload.is-uploading img{ filter:blur(1px); }
.profile-hero-info h2{ font-size:24px; letter-spacing:-.02em; }
.profile-hero-info p{ color:var(--muted); margin-top:2px; }
.profile-hero-info .soft-pill{ margin-top:8px; display:inline-flex; }

/* --- Scorciatoie nel profilo -------------------------------------------- */
.quick-links{ display:grid; gap:8px; }
.quick-links a.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.quick-links a.list-row span{ flex:1; font-weight:700; }

/* --- Avatar riutilizzabile (feed, commenti, liste persone) ------------- */
.avatar-bubble{
  width:36px;
  height:36px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  font-weight:800;
  flex-shrink:0;
}
.avatar-bubble img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-bubble.sz-40{ width:40px; height:40px; font-size:14px; }
.avatar-bubble.sz-32{ width:32px; height:32px; font-size:12px; }
.avatar-bubble.sz-28{ width:28px; height:28px; font-size:11px; }

/* --- Tab Feed / Persone -------------------------------------------------- */
.social-segmented{ max-width:280px; }
.seg-tab{ position:relative; }
.seg-dot{
  position:absolute;
  top:6px;
  right:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f46a3f;
}

/* --- Feed: stream in stile Instagram (coerente col tema dell'app) ------- */
.feed-stream{
  display:grid;
  gap:20px;
}

.ig-post{
  background:#fff;
  border-radius:28px;
  padding:14px;
  box-shadow:var(--shadow);
}

.ig-post-head-link{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.ig-post-who{ display:flex; flex-direction:column; min-width:0; }
.ig-post-who strong{ font-size:14px; line-height:1.2; }
.ig-post-who small{ color:var(--muted); font-size:12px; }

/* La "copertina" del post: al posto della foto di Instagram, un riquadro
   colorato con il nome della scheda e le statistiche chiave, coerente con
   le mini-panel già usate nel resto dell'app (stessi colori di tema). */
.ig-cover{
  border-radius:22px;
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:150px;
  justify-content:space-between;
}
.ig-cover-plan{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
}
.ig-cover-stats{
  display:flex;
  gap:22px;
}
.ig-cover-stats div{ display:flex; flex-direction:column; }
.ig-cover-stats strong{ font-size:20px; font-weight:800; line-height:1; }
.ig-cover-stats span{ font-size:11px; opacity:.75; margin-top:4px; text-transform:uppercase; letter-spacing:.02em; }

/* --- Foto allenamento condivisa (al posto della copertina colorata) ----- */
.ig-photo-wrap{
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:1;
}
.ig-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ig-cover-stats-under-photo{
  color:#111;
  padding:14px 4px 4px;
}
.ig-cover-stats-under-photo span{ opacity:.55; }

.ig-cover.cover-a{ background:var(--yellow); color:#171717; }
.ig-cover.cover-b{ background:var(--blue); color:#fff; }
.ig-cover.cover-c{ background:var(--coral-soft); color:#fff; }

.ig-post-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:10px;
}
.ig-icon-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  background:none;
}
.ig-icon-btn svg{ width:24px; height:24px; }
.ig-icon-btn.is-liked{ color:#f46a3f; }
.ig-icon-btn.is-liked svg path{ fill:#f46a3f; }
.ig-icon-static{ margin-left:-4px; }

.ig-like-count{
  font-size:13px;
  font-weight:800;
  margin:0 4px 4px;
}

.ig-caption{
  font-size:13px;
  margin:0 4px 6px;
  line-height:1.4;
}
.ig-caption strong{ margin-right:4px; }

.ig-comments{
  display:grid;
  gap:4px;
  margin:0 4px 8px;
}
.ig-comment-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  line-height:1.4;
}
.ig-comment-line strong{ margin-right:4px; }
.feed-comment-delete{
  color:var(--muted);
  font-size:16px;
  line-height:1;
  flex-shrink:0;
}

.ig-comment-form{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:10px;
  margin-top:2px;
  border-top:1px solid rgba(17,17,17,.06);
}
.ig-comment-form input{
  flex:1;
  min-width:0;
  min-height:38px;
  padding:0 4px;
  border:none;
  background:transparent;
  font-size:13px;
}
.ig-comment-form input:focus{ outline:none; }
.ig-send-btn{
  color:var(--blue);
  font-weight:800;
  font-size:13px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
}
.ig-send-btn svg{ width:18px; height:18px; }

.feed-empty-state{
  text-align:center;
  padding:44px 20px;
  background:#fff;
  border-radius:28px;
  box-shadow:var(--shadow);
  display:grid;
  gap:8px;
  justify-items:center;
}
.feed-empty-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(17,17,17,.05);
  display:flex;
  align-items:center;
  justify-content:center;
}
.feed-empty-icon svg{ width:24px; height:24px; }
.feed-empty-state p{ color:var(--muted); font-size:13px; max-width:280px; }
.feed-empty-state .btn{ margin-top:6px; }

@media (min-width:560px){
  .feed-stream{ max-width:520px; margin-inline:auto; }
}

/* --- Liste persone (ricerca, seguiti, follower) -------------------------- */
.people-list{ display:grid; gap:8px; margin-top:12px; }
.people-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 4px;
}
.people-row-info{ flex:1; display:flex; flex-direction:column; min-width:0; }
.people-row-info strong{ font-size:14px; }
.people-row-info small{ color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- Notifiche ----------------------------------------------------------- */
.notif-row.is-unread{
  background:rgba(125,92,255,.06);
  /* FIX: come sopra, --accent non era mai definita: sostituita con
     --purple-strong per seguire correttamente il tema attivo. */
  border-left:3px solid var(--purple-strong);
}

/* --- Calendario schede ---------------------------------------------------- */
.calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.calendar-header h2{ font-size:18px; text-transform:capitalize; }
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.calendar-weekdays{
  margin-bottom:6px;
  text-align:center;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
}
.calendar-cell{
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-radius:14px;
  background:rgba(17,17,17,.035);
  font-weight:700;
  font-size:13px;
}
.calendar-cell.is-empty{ background:transparent; }
.calendar-cell.is-today{ box-shadow:inset 0 0 0 2px #111; }
.calendar-cell.is-selected{ background:#111; color:#fff; }
.calendar-dot{
  width:6px;
  height:6px;
  border-radius:50%;
}
.dot-done{ background:#3fb56d; }
.dot-planned{ background:#f2b03d; }
.calendar-legend{
  display:flex;
  gap:16px;
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.calendar-legend span{ display:inline-flex; align-items:center; gap:6px; }
@media (max-width:520px){
  .calendar-cell{ border-radius:10px; font-size:11px; }
}

.round-btn{
  width:52px;
  height:52px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  border:1px solid rgba(17,17,17,.06);
  box-shadow:var(--shadow-soft);
}

.round-btn.dark{
  background:var(--black);
  color:var(--white);
}

.main-content{
  display:grid;
  gap:18px;
}

.hero-stack{
  display:grid;
  gap:14px;
}

.hero-card{
  position:relative;
  overflow:hidden;
  padding:26px;
  border-radius:36px;
  min-height:220px;
  box-shadow:var(--shadow);
}

.hero-purple{
  background:linear-gradient(180deg,var(--purple),var(--purple-strong));
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:min(70%,480px);
  padding-right:18px;
}

.hero-copy h2{
  font-size:36px;
  line-height:1.02;
  letter-spacing:-.05em;
  margin:10px 0 10px;
}

.hero-copy p{
  color:rgba(17,17,17,.72);
  max-width:34ch;
}

.mini-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:600;
}

.mini-badge.dark{
  background:rgba(255,255,255,.16);
  color:#fff;
}

.hero-bubble{
  position:absolute;
  right:-16px;
  bottom:-12px;
  width:136px;
  height:136px;
  background:linear-gradient(180deg,var(--yellow-strong),var(--coral-soft));
  filter:drop-shadow(0 16px 22px rgba(245,182,78,.34));
}

.flower-shape{
  border-radius:44% 56% 63% 37% / 39% 34% 66% 61%;
  transform:rotate(18deg);
}

.hero-subgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.hero-subgrid.cols-2{
  grid-template-columns:repeat(2,1fr);
}

.mini-panel{
  padding:18px;
  border-radius:28px;
  box-shadow:var(--shadow-soft);
  min-height:116px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.mini-panel span{
  font-size:13px;
  color:rgba(17,17,17,.66);
}

.mini-panel strong{
  font-size:28px;
  line-height:1.02;
  letter-spacing:-.04em;
}

.mini-yellow{background:var(--yellow)}
.mini-blue{background:var(--blue);color:#fff}
.mini-coral{background:var(--coral-soft);color:#fff}
.mini-blue span{color:rgba(255,255,255,.76)}
.mini-coral span{color:rgba(255,255,255,.76)}

.card-grid{
  display:grid;
  gap:18px;
}

.feature-panel{
  padding:20px;
  border-radius:34px;
  box-shadow:var(--shadow);
}

.white-panel{background:var(--white)}
.cream-panel{background:var(--cream)}
.yellow-panel{background:var(--yellow-strong)}
.coral-panel{background:var(--coral-soft)}
.dark-panel{background:var(--black);color:var(--white)}

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

.section-head.clean h2{
  font-size:28px;
  line-height:1.02;
  letter-spacing:-.04em;
}

.section-head.inverse h2{
  color:#fff;
}

.pill-action,
.soft-pill,
.soft-label,
.dark-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
}

.pill-action{
  background:#111;
  color:#fff;
}

.pill-action svg{width:18px;height:18px}

.soft-pill,
.soft-label{
  background:rgba(17,17,17,.06);
  color:rgba(17,17,17,.7);
}

.dark-chip{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.soft-label.is-success{
  background:#e8f7ee;
  color:#14633c;
}

.soft-label.is-warning{
  background:#fff1d6;
  color:#8a5a00;
}

.soft-label.is-neutral{
  background:rgba(17,17,17,.06);
  color:rgba(17,17,17,.72);
}

.collection-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:26px;
  margin-bottom:12px;
}

.collection-card:last-child{margin-bottom:0}

.collection-card strong,
.list-row strong{
  display:block;
  font-size:20px;
  line-height:1.06;
  letter-spacing:-.03em;
  margin-bottom:6px;
}

.collection-card p,
.list-row p{
  color:rgba(17,17,17,.62);
  margin-bottom:5px;
}

.collection-card small,
.list-row small{
  color:rgba(17,17,17,.52);
}

.list-accent-1{background:var(--purple)}
.list-accent-2{background:var(--yellow)}
.list-accent-3{background:var(--blue);color:#fff}
.list-accent-3 p,.list-accent-3 small{color:rgba(255,255,255,.76)}
.list-accent-4{background:var(--coral);color:#fff}
.list-accent-4 p,.list-accent-4 small{color:rgba(255,255,255,.78)}

.circle-action{
  width:48px;
  height:48px;
  border-radius:999px;
  background:#111;
  color:#fff;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.circle-action svg{width:18px;height:18px}

.chart-panel{
  display:flex;
  flex-direction:column;
}

.chart-wrap svg{
  width:100%;
  height:auto;
}

.colorful-chart{padding-top:8px}

.bmi-hint{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:baseline;
  gap:10px;
  color:#fff;
}
.bmi-hint span{ font-size:12px; color:rgba(255,255,255,.65); font-weight:700; }
.bmi-hint strong{ font-size:22px; }
.bmi-hint small{ font-size:12px; color:rgba(255,255,255,.75); }

.empty-inline{
  padding:18px;
  border-radius:22px;
  background:rgba(17,17,17,.05);
  color:var(--muted);
}

.inverse-empty{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.74);
}

.stack > * + *{margin-top:14px}
.stack-sm > * + *{margin-top:10px}
.stack-lg > * + *{margin-top:22px}

/* Le label dei form erano testo+campo nello stesso flusso inline: nella
   maggior parte dei casi il campo (width:100%) andava comunque a capo da
   solo, ma un input nativo come type="date" ha una larghezza intrinseca
   che su alcuni browser/OS non rispetta il 100% se resta inline — il
   risultato è il campo che sconfina oltre il pannello. Rendendo la label
   un blocco esplicito con il campo sotto, il comportamento è identico e
   prevedibile ovunque. */
.modern-form label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}
.modern-form label > input,
.modern-form label > textarea,
.modern-form label > select{
  display:block;
  width:100%;
  max-width:100%;
  margin-top:6px;
  font-size:15px;
  font-weight:400;
  color:var(--text);
  -webkit-appearance:none;
  appearance:none;
}

.modern-form input,
.modern-form textarea,
.modern-form select,
.premium-set-row input,
.premium-set-row select,
textarea{
  width:100%;
  max-width:100%;
  min-height:56px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(17,17,17,.06);
  background:#fff;
  outline:none;
}

.modern-form textarea,
textarea{
  min-height:128px;
  resize:vertical;
}

.modern-form input:focus,
.modern-form textarea:focus,
.modern-form select:focus,
.premium-set-row input:focus,
.premium-set-row select:focus,
textarea:focus{
  border-color:rgba(125,92,255,.42);
  box-shadow:0 0 0 4px rgba(125,92,255,.08);
}

.exercise-builder{display:grid}

.exercise-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.field-slot{ display:block; min-width:0; }
.field-label{
  display:block;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:4px;
}

.exercise-row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.exercise-row-num{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* --- Card esercizio nel builder scheda: sostituisce la vecchia griglia di
   8 campi impilati con una card compatta (nome + 3 chip Serie/Reps/Recupero)
   e le opzioni secondarie nascoste in un pannello a comparsa. ------------ */
.exercise-card-row{
  padding:14px;
  border-radius:26px;
  background:rgba(255,255,255,.56);
}
.exercise-card-row .exercise-row-head{
  gap:10px;
  align-items:flex-end;
  margin-bottom:12px;
}
.exercise-select-slot{ flex:1; min-width:0; }
.exercise-card-row .icon-danger{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(244,106,63,.12);
  color:var(--coral);
}

.exercise-stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:8px;
}
.stat-pill{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:10px 6px 8px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 0 rgba(17,17,17,.03), 0 4px 10px rgba(17,17,17,.05);
  border:1px solid rgba(17,17,17,.05);
  text-align:center;
}
.stat-pill-label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--muted);
}
.stat-pill input{
  width:100%;
  min-height:auto;
  padding:0;
  border:none;
  background:transparent;
  text-align:center;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}
.stat-pill input:focus{ box-shadow:none; }
.stat-pill-suffix{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
}

.exercise-advanced{
  border-radius:18px;
  background:rgba(17,17,17,.03);
  padding:2px 12px;
}
.exercise-advanced summary{
  cursor:pointer;
  padding:10px 0;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.exercise-advanced summary::-webkit-details-marker{ display:none; }
.exercise-advanced-hint{
  font-size:11px;
  font-weight:500;
  color:rgba(17,17,17,.42);
}
.exercise-advanced-body{
  display:grid;
  gap:10px;
  padding:2px 0 14px;
}
[data-theme="noir"] .exercise-card-row{ background:rgba(255,255,255,.05); }
[data-theme="noir"] .stat-pill{ background:rgba(255,255,255,.07); }
[data-theme="noir"] .exercise-advanced{ background:rgba(255,255,255,.05); }

/* --- Card scheda (pagina Schede): CTA "Avvia" ben visibile, giorni della
   settimana come pallini, azioni secondarie compatte ------------------- */
.plan-card-list{ display:grid; gap:14px; }
.plan-card{
  background:#fff;
  border-radius:26px;
  padding:16px;
  box-shadow:var(--shadow-soft);
}
.plan-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.plan-card-info{ min-width:0; }
.plan-card-info strong{ font-size:17px; }
.plan-card-info p{ color:var(--muted); font-size:13px; margin-top:2px; }

.weekday-chips{ display:flex; gap:3px; flex-shrink:0; }
.weekday-chip{
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(17,17,17,.06);
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.weekday-chip.is-active{
  background:#111;
  color:#fff;
}

.plan-card-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.plan-card-meta span{ display:inline-flex; align-items:center; gap:5px; }
.plan-card-meta svg{ width:14px; height:14px; }

.plan-card-start{ margin-bottom:10px; }
.plan-card-start .btn{ gap:8px; }
.plan-card-start svg{ width:18px; height:18px; }

.plan-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Pulsanti secondari a sola icona (Modifica/Duplica/Condividi/Archivia):
   stesso ingombro dell'icona di eliminazione ma con tono neutro, non
   d'allarme, dato che sono tutte azioni reversibili. */
.icon-btn{
  width:44px;
  height:44px;
  border-radius:16px;
  background:rgba(17,17,17,.06);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-btn svg{ width:19px; height:19px; }

/* --- Schede archiviate --------------------------------------------------- */
.archived-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:14px 0;
  font-weight:700;
  color:var(--muted);
  cursor:pointer;
  list-style:none;
}
.archived-toggle::-webkit-details-marker{ display:none; }
.archived-toggle span{ display:inline-flex; align-items:center; gap:8px; }
.archived-toggle svg{ width:16px; height:16px; }
details.archived-details[open] .archived-toggle svg:last-child{ transform:rotate(90deg); }
.archived-plan-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
  border-top:1px solid rgba(17,17,17,.06);
}
.archived-plan-row-info{ min-width:0; }
.archived-plan-row-info strong{ font-size:14px; }
.archived-plan-row-info small{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.archived-plan-row-actions{ display:flex; gap:8px; flex-shrink:0; }
@media (min-width:780px){
  /* Nella griglia compatta desktop la posizione della colonna è già
     autoesplicativa (serie/reps/riposo affiancati nell'ordine naturale),
     quindi nascondiamo le etichette visivamente mantenendole per gli
     screen reader. */
  .field-label{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
}

.colorful-row{
  padding:12px;
  border-radius:26px;
  background:rgba(255,255,255,.56);
}

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

.theme-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.theme-swatch{
  width:20px;
  height:20px;
  min-width:20px;
  border-radius:50%;
  background:conic-gradient(var(--yellow), var(--blue), var(--coral), var(--yellow));
  border:2px solid rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(17,17,17,.08);
}

.split-actions{
  justify-content:space-between;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 18px;
  border-radius:18px;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-dark{
  background:#111;
  color:#fff;
}

.btn-soft{
  background:rgba(17,17,17,.06);
  color:#111;
}

.btn-light{
  background:#fff;
  color:#111;
}

.btn-block{width:100%}

.list-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
}

.list-row:last-child{border-bottom:none}
.deluxe-row{padding-block:18px}
.compact-actions{align-items:center}

/* Su mobile una riga con testo su più righe (nome + gruppo + descrizione)
   affiancata alle azioni centrate verticalmente faceva sembrare il
   pulsante "sospeso" a metà altezza e sproporzionato. Per le righe marcate
   "mobile-stack" impiliamo testo e azioni su due righe separate, con le
   azioni allineate a sinistra e a dimensione naturale; da tablet in su
   (spazio orizzontale sufficiente) torniamo all'affiancamento in riga. */
.list-row.mobile-stack{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.list-row.mobile-stack .actions{
  justify-content:flex-start;
}

.pill-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:700;
  gap:8px;
}

.pill-dark svg{
  width:16px;
  height:16px;
}

.pill-dark-alt{
  background:rgba(17,17,17,.08);
  color:#111;
}

.icon-danger{
  width:46px;
  height:46px;
  border-radius:16px;
  background:#111;
  color:#fff;
  display:grid;
  place-items:center;
}

.add-dropset-btn{
  margin:4px 0 14px;
  font-size:13px;
}

.premium-set-row.is-extra-set{
  background:rgba(244,106,63,.08);
}
.premium-set-row.is-extra-set .set-row-extra{
  display:flex;
}

.remove-extra-set{
  width:28px;
  height:28px;
  min-height:28px;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.training-hero{
  position:relative;
  overflow:hidden;
  padding:26px;
  border-radius:36px;
  min-height:210px;
  box-shadow:var(--shadow);
}

.training-purple{
  background:linear-gradient(180deg,var(--purple-strong),var(--purple));
  color:#fff;
}

.training-hero h2{
  font-size:38px;
  line-height:1.02;
  letter-spacing:-.05em;
  margin:10px 0 8px;
}

.training-hero p{
  max-width:34ch;
  color:rgba(255,255,255,.78);
}

.training-orb{
  position:absolute;
  right:-20px;
  bottom:-12px;
  width:150px;
  height:150px;
  background:linear-gradient(180deg,var(--yellow-strong),var(--coral-soft));
  border-radius:44% 56% 40% 60% / 45% 32% 68% 55%;
  filter:blur(.2px);
}

.training-tools-panel{
  background:linear-gradient(180deg,#fff,#fbf7f1);
}

/* --- Navigazione rapida tra esercizi durante l'allenamento -------------- */
.training-quicknav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 2px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.training-quicknav::-webkit-scrollbar{ display:none; }
.training-quicknav-chip{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(17,17,17,.06);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.training-quicknav-num{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* --- Piano alimentare: navigazione tra i 7 giorni, riepilogo calorie e
   liste dei pasti con emoji ------------------------------------------- */
.meal-day-chip{
  flex-direction:column;
  gap:2px;
  padding:10px 16px;
  text-align:center;
}
.meal-day-chip.is-active{
  background:#111;
  color:#fff;
}
.meal-day-chip small{ font-size:10px; opacity:.7; }

.calorie-card{ margin-bottom:16px; }
.calorie-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.calorie-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:10px 0 4px;
}
.calorie-stat input{
  width:auto;
  max-width:200px;
  min-height:auto;
  padding:0;
  border:none;
  background:transparent;
  text-align:center;
  font-size:52px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
  color:#171717;
}
.calorie-stat input:focus{ box-shadow:none; }
.calorie-stat input::placeholder{ color:rgba(23,23,23,.35); }
.calorie-stat span{
  font-size:12px;
  font-weight:700;
  color:rgba(23,23,23,.6);
  text-transform:uppercase;
  letter-spacing:.03em;
}

.meal-section{ margin-bottom:14px; }

/* --- Piatti come chip arrotondate anziché righe piatte: più leggibili
   a colpo d'occhio e "impacchettano" meglio nomi corti/lunghi misti. ---- */
.meal-section-title{ display:flex; align-items:center; gap:10px; }
.meal-type-badge{
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:12px;
  background:rgba(17,17,17,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
}
.meal-item-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.meal-item-chip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 8px 8px 12px;
  border-radius:999px;
  background:rgba(17,17,17,.04);
  max-width:100%;
}
.meal-item-emoji{ font-size:16px; flex-shrink:0; }
.meal-item-name{ font-weight:700; font-size:13px; min-width:0; overflow-wrap:anywhere; }
.meal-item-delete{
  color:var(--muted);
  font-size:15px;
  line-height:1;
  flex-shrink:0;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(17,17,17,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* --- Form "Aggiungi piatto" nascosto dietro un toggle: 4 form sempre
   visibili appesantivano la pagina, ora si apre solo quando serve. ------ */
.meal-add-toggle{
  border-radius:18px;
  background:rgba(17,17,17,.03);
}
.meal-add-toggle summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
}
.meal-add-toggle summary::-webkit-details-marker{ display:none; }
.meal-add-toggle summary svg{ width:16px; height:16px; }
.meal-add-toggle[open] summary{ color:var(--text); }
.meal-add-toggle .meal-add-form{ padding:0 14px 14px; }
[data-theme="noir"] .meal-add-toggle{ background:rgba(255,255,255,.05); }
[data-theme="noir"] .meal-item-chip{ background:rgba(255,255,255,.07); }
[data-theme="noir"] .meal-type-badge{ background:rgba(255,255,255,.07); }
[data-theme="noir"] .meal-item-delete{ background:rgba(255,255,255,.1); }

.emoji-palette{
  display:flex;
  gap:4px;
  overflow-x:auto;
  padding-bottom:8px;
  margin-bottom:8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.emoji-palette::-webkit-scrollbar{ display:none; }
.emoji-palette-btn{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(17,17,17,.05);
  font-size:19px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.meal-add-row{
  display:flex;
  gap:8px;
}
.emoji-input{
  width:52px;
  min-height:48px;
  flex-shrink:0;
  text-align:center;
  font-size:20px;
  border-radius:16px;
  border:1px solid rgba(17,17,17,.08);
  background:#fff;
}
.meal-add-row input[name="name"]{
  flex:1;
  min-width:0;
  min-height:48px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(17,17,17,.08);
  background:#fff;
}
.meal-add-btn{
  width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  flex-shrink:0;
  border-radius:16px;
}
.meal-add-btn svg{ width:18px; height:18px; }

/* --- Barra flottante "Termina allenamento": sempre raggiungibile senza
   dover scorrere fino in fondo a un allenamento lungo ------------------- */
.training-floating-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(94px + env(safe-area-inset-bottom));
  width:min(92vw,760px);
  z-index:35;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.18));
}
.training-floating-bar .btn{ gap:8px; }
.training-floating-bar svg{ width:18px; height:18px; }

.rest-timer-box{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:26px;
  background:rgba(17,17,17,.04);
  border:1px solid rgba(17,17,17,.06);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.rest-timer-box.is-running{
  background:linear-gradient(180deg,rgba(125,92,255,.08),rgba(242,193,77,.12));
  box-shadow:0 12px 28px rgba(125,92,255,.10);
}

.rest-timer-box.is-finished{
  background:linear-gradient(180deg,rgba(220,232,129,.62),rgba(255,255,255,.92));
  box-shadow:0 12px 28px rgba(242,193,77,.18);
}

.rest-timer-value{
  font-size:40px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.05em;
}

.exercise-session-card h3{
  font-size:24px;
  line-height:1.02;
  letter-spacing:-.04em;
}

.premium-set-row{
  position:relative;
  padding:10px 12px 12px;
  border-radius:24px;
  background:rgba(17,17,17,.04);
  margin-bottom:10px;
  transition:background-color .3s ease, box-shadow .3s ease, transform .2s ease, opacity .2s ease;
  touch-action:pan-y;
}

.set-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.set-row-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.set-more-toggle{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(17,17,17,.06);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.set-more-toggle svg{ width:15px; height:15px; }
.set-more-toggle[aria-expanded="true"]{
  background:#111;
  color:#fff;
}

.set-row-main{
  display:flex;
  align-items:center;
  gap:8px;
}
.set-field{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  min-height:52px;
  border-radius:16px;
  background:#fff;
}
.set-field input{
  flex:1;
  min-width:0;
  min-height:auto;
  padding:0;
  border:none;
  background:transparent;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
}
.set-field input:focus{ box-shadow:none; }
.set-field-unit{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  flex-shrink:0;
}
.set-row-x{
  font-weight:800;
  color:rgba(17,17,17,.3);
  flex-shrink:0;
}

.set-row-extra{
  display:none;
  gap:8px;
  margin-top:8px;
}
.set-row-extra:not([hidden]){
  display:flex;
}
.set-row-extra input{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(17,17,17,.06);
  background:#fff;
  font-size:13px;
}
.set-row-extra select{
  min-height:44px;
  padding:0 10px;
  border-radius:14px;
  border:1px solid rgba(17,17,17,.06);
  background:#fff;
  font-size:12px;
  max-width:118px;
}

.premium-set-row.is-swiping{
  transition:none;
}

.premium-set-row:last-child{margin-bottom:0}

/* --- Suggerimento swipe-per-eliminare ------------------------------------ */
.swipe-hint{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-align:center;
  margin:-6px 0 14px;
}

/* --- Celebrazione "nuovo record" durante l'allenamento ------------------ */
.premium-set-row.is-new-pr{
  background:rgba(242,176,61,.14);
  box-shadow:0 0 0 2px rgba(242,176,61,.55) inset;
}
.premium-set-row.is-celebrating{
  animation:pr-bounce .5s ease;
}
.premium-set-row.is-celebrating::after{
  content:"🏆 Nuovo record!";
  position:absolute;
  top:-14px;
  right:12px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:5px 12px;
  border-radius:999px;
  white-space:nowrap;
  pointer-events:none;
  z-index:5;
  animation:pr-pop 1.3s ease forwards;
}
@keyframes pr-bounce{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}
@keyframes pr-pop{
  0%{ opacity:0; transform:translateY(6px) scale(.85); }
  18%{ opacity:1; transform:translateY(0) scale(1.05); }
  30%{ transform:scale(1); }
  78%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-8px) scale(.95); }
}
@media (prefers-reduced-motion: reduce){
  .premium-set-row.is-celebrating{ animation:none; }
  .premium-set-row.is-celebrating::after{ animation:none; opacity:1; }
}

.sub-pill{
  background:rgba(244,106,63,.14);
  color:var(--coral);
  font-weight:700;
}

.substitution-box{
  margin-top:14px;
  border-radius:20px;
  background:rgba(17,17,17,.03);
  padding:4px 14px;
}

.substitution-box summary{
  cursor:pointer;
  padding:10px 0;
  font-weight:700;
  font-size:14px;
  color:var(--muted);
  list-style:none;
}

.substitution-box summary::-webkit-details-marker{display:none}

.substitution-box summary::before{
  content:"🔁 ";
}

.substitution-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:2px 0 14px;
}

.substitution-options .btn{
  font-size:13px;
  padding:10px 16px;
}

[data-theme="noir"] .substitution-box{
  background:rgba(255,255,255,.06);
}

[data-theme="noir"] .sub-pill{
  background:rgba(244,106,63,.22);
  color:#ff9c78;
}

.final-save-card textarea{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}

.final-save-card textarea::placeholder{
  color:rgba(255,255,255,.66);
}

/* --- Toggle "Condividi nel feed" (interruttore in stile iOS) ------------ */
.share-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  cursor:pointer;
}
.share-toggle input{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.share-toggle-track{
  width:46px;
  height:28px;
  min-width:46px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  position:relative;
  transition:background-color .2s ease;
}
.share-toggle-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s ease;
}
.share-toggle input:checked + .share-toggle-track{
  background:#f2b03d;
}
.share-toggle input:checked + .share-toggle-track .share-toggle-thumb{
  transform:translateX(18px);
}
.share-toggle-label strong{
  display:block;
  font-size:14px;
  color:#fff;
}
.share-toggle-label small{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.6);
  margin-top:2px;
}

/* --- Selettore foto allenamento (quadrato, come un post Instagram) ------ */
.session-photo-picker{ margin-bottom:16px; }
.session-photo-upload{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
  max-width:220px;
  border-radius:22px;
  border:2px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.05);
  overflow:hidden;
  cursor:pointer;
}
.session-photo-upload img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.session-photo-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.7);
  font-size:12px;
  font-weight:700;
  text-align:center;
  padding:12px;
}
.session-photo-placeholder svg{ width:22px; height:22px; }

.panel-copy{
  margin-bottom:16px;
  color:rgba(17,17,17,.72);
}

.stat-line{
  display:grid;
  grid-template-columns:1.2fr .8fr .9fr;
  gap:10px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.inverse-line small{color:rgba(255,255,255,.64)}
.inverse-line span{color:#fff}
.inverse-line strong{color:#fff}

.tabbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom));
  width:min(92vw,760px);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  padding:10px;
  background:#111;
  color:#fff;
  border-radius:28px;
  box-shadow:0 18px 42px rgba(0,0,0,.2);
  z-index:40;
}

.tabbar.tabbar-6{
  grid-template-columns:repeat(6,1fr);
}

.grid-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:520px){
  .grid-2col{ grid-template-columns:1fr; }
}

.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:60px;
  padding:8px 6px;
  border-radius:22px;
  color:rgba(255,255,255,.64);
}

.tab small{font-size:11px}

.tab-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
}

.tab.active{
  background:#fff;
  color:#111;
}

.auth-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
}

.auth-card{
  width:min(100%,560px);
  padding:30px;
  position:relative;
  overflow:hidden;
  border-radius:38px;
  box-shadow:var(--shadow);
}

.auth-theme-card{background:#fff}

.auth-decoration{
  position:absolute;
  filter:blur(0);
  opacity:.95;
}

.auth-purple{
  top:-64px;
  right:-18px;
  width:188px;
  height:188px;
  background:var(--purple);
  border-radius:44% 56% 46% 54% / 41% 44% 56% 59%;
}

.auth-yellow{
  bottom:56px;
  right:-34px;
  width:128px;
  height:128px;
  background:var(--yellow-strong);
  border-radius:50% 50% 42% 58% / 53% 47% 53% 47%;
}

.auth-coral{
  bottom:-48px;
  left:-32px;
  width:132px;
  height:132px;
  background:var(--coral);
  border-radius:50% 50% 42% 58% / 53% 47% 53% 47%;
}

.brand-intro{
  display:flex;
  gap:16px;
  align-items:center;
  position:relative;
  z-index:3;
  margin-bottom:26px;
  padding-right:132px;
}

.brand-mark{
  width:64px;
  height:64px;
  border-radius:24px;
  background:#111;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:20px;
}

.brand-intro h1{
  font-size:34px;
  line-height:.98;
  letter-spacing:-.05em;
}

.brand-intro p{
  margin-top:6px;
  color:var(--muted);
}

.input-shell{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 16px;
  border-radius:18px;
  background:#f5f1ea;
  border:1px solid rgba(17,17,17,.05);
}

.input-shell input{
  border:0;
  background:transparent;
  outline:none;
  min-height:54px;
  width:100%;
}

.links-inline{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  color:var(--muted);
}

.alert{
  padding:14px 16px;
  border-radius:16px;
  background:#fff3d5;
  color:#7c5c00;
  border:1px solid #f1de98;
  position:relative;
  z-index:2;
}

.alert-success{
  background:#eaf7ef;
  color:#14633c;
  border-color:#bfe8cc;
}

/* FIX layering decorazioni sopra al testo */
.hero-card,
.training-hero,
.auth-card{
  isolation:isolate;
}

.hero-copy,
.training-hero > *:not(.training-orb),
.auth-card > *:not(.auth-decoration){
  position:relative;
  z-index:3;
}

.hero-bubble,
.training-orb,
.auth-decoration{
  z-index:1;
  pointer-events:none;
}

/* Mobile */
@media (max-width:560px){
  .brand-intro{
    align-items:flex-start;
    padding-right:96px;
  }

  .brand-intro h1{
    font-size:28px;
    max-width:9ch;
  }

  .auth-purple{
    width:156px;
    height:156px;
    top:-54px;
    right:-26px;
  }

  .auth-yellow{
    width:112px;
    height:112px;
    right:-38px;
    bottom:74px;
  }

  .auth-coral{
    width:118px;
    height:118px;
    left:-34px;
    bottom:-34px;
  }

  .collection-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .collection-card .actions,
  .list-row .actions{
    width:100%;
  }

  .pill-dark,
  .pill-dark-alt{
    flex:1 1 auto;
  }

  .rest-timer-value{
    font-size:32px;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .section-head .soft-label,
  .section-head .dark-chip,
  .section-head .soft-pill{
    align-self:flex-start;
  }
}

/* Tablet / desktop */
@media (min-width:780px){
  .app-shell{padding-inline:22px}
  .hero-stack{grid-template-columns:1.2fr .8fr}
  .hero-subgrid{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
  .hero-subgrid.cols-2{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
  .card-grid{grid-template-columns:1.03fr .97fr}
  .exercise-card-row{ max-width:560px; }
  .exercise-stat-row{ grid-template-columns:repeat(3,minmax(0,140px)); }
  .mobile-stack{flex-direction:row;align-items:center}
  .mobile-stack .actions{justify-content:flex-end}
  .training-tools-panel .actions{flex-wrap:nowrap}
}

@media (min-width:1120px){
  .topbar h1{font-size:52px}
  .hero-copy h2{font-size:48px}
  .card-grid{grid-template-columns:1.08fr .92fr}
}
/* ===================== Temi grafici (5 varianti) =====================
   Il tema attivo viene applicato tramite l'attributo data-theme sull'elemento
   <html> (impostato lato server in base a users.theme, e aggiornato all'istante
   via JS quando l'utente cambia tema dal profilo). Ogni blocco sovrascrive
   solo le custom properties: il resto del CSS le referenzia già tramite var(),
   quindi il cambio tema non richiede altro codice. */

[data-theme="aurora"]{
  /* Tema di default: valori identici a :root, presente esplicitamente per chiarezza. */
}

[data-theme="ocean"]{
  --bg:#dbe8ea;
  --bg-soft:#e6f1f2;
  --text:#0d2226;
  --muted:#4d6669;
  --purple:#a9d9e0;
  --purple-strong:#2f8fa6;
  --yellow:#bfe3d6;
  --yellow-strong:#3fb8a4;
  --coral:#ff6f5e;
  --coral-soft:#ff8f74;
  --blue:#1f6f8b;
  --cream:#eef7f6;
  --black:#0d2226;
}

[data-theme="sunset"]{
  --bg:#f5d9c9;
  --bg-soft:#fbe7da;
  --text:#301a12;
  --muted:#7a4a36;
  --purple:#f6b8a0;
  --purple-strong:#e2603a;
  --yellow:#f7d488;
  --yellow-strong:#f0a63f;
  --coral:#ff6a4d;
  --coral-soft:#ff8f6d;
  --blue:#e0567a;
  --cream:#fff1e4;
  --black:#2b140d;
}

[data-theme="forest"]{
  --bg:#dbe6d2;
  --bg-soft:#e7efdf;
  --text:#152016;
  --muted:#4c5c44;
  --purple:#b7d8a1;
  --purple-strong:#4c8b52;
  --yellow:#d7e08a;
  --yellow-strong:#8fae4b;
  --coral:#e8895a;
  --coral-soft:#eda57e;
  --blue:#3d7a5d;
  --cream:#f1f5e8;
  --black:#152016;
}

[data-theme="noir"]{
  --bg:#121212;
  --bg-soft:#1a1a1a;
  --text:#f2f2f2;
  --muted:#a3a3a3;
  --line:rgba(255,255,255,.1);
  --white:#1e1e1e;
  --black:#050505;
  --purple:#4a3f78;
  --purple-strong:#8f7bff;
  --yellow:#4a441f;
  --yellow-strong:#d9a441;
  --coral:#c65b3f;
  --coral-soft:#a34b36;
  --blue:#4854a8;
  --cream:#1c1c1c;
}

[data-theme="noir"] body{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.05),transparent 30%);
}

[data-theme="noir"] .round-btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.08);
}

[data-theme="noir"] .soft-pill,
[data-theme="noir"] .soft-label.is-neutral{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
}

[data-theme="noir"] .empty-inline{
  background:rgba(255,255,255,.06);
}

[data-theme="noir"] .list-row{
  border-bottom-color:rgba(255,255,255,.1);
}

[data-theme="noir"] .modern-form input,
[data-theme="noir"] .modern-form textarea,
[data-theme="noir"] .modern-form select,
[data-theme="noir"] .premium-set-row input,
[data-theme="noir"] textarea{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
  color:var(--text);
}

[data-theme="noir"] .input-shell{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.06);
}

[data-theme="noir"] .set-field,
[data-theme="noir"] .set-row-extra input,
[data-theme="noir"] .set-row-extra select{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.06);
}
[data-theme="noir"] .set-more-toggle{
  background:rgba(255,255,255,.08);
}
/* ==========================================================================
   AGGIUNTE: pannelli cliccabili in home, badge andamento, "ultima volta"
   ========================================================================== */

/* Rende i pannelli home (hero, statistiche, performance) navigabili come
   ci si aspetta cliccandoli, mantenendo lo stesso stile grafico di prima. */
a.panel-link{
  display:flex;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
a.hero-card.panel-link{ display:block; }
.mini-panel.panel-link{ display:flex; }
a.chart-panel.panel-link{ display:block; }

a.panel-link:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 30px rgba(17,17,17,.16);
  filter:brightness(1.02);
}
a.panel-link:active{
  transform:translateY(0) scale(.98);
}

/* Intera scheda cliccabile in "Schede attive" (home) mantenendo i pulsanti
   Edit / Avvia sopra il link "stretch" e realmente cliccabili. */
.tappable-card{ position:relative; }
.tappable-card .stretch-link{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}
.tappable-card .actions,
.tappable-card > div:not(.stretch-link){
  position:relative;
  z-index:2;
}
.tappable-card:hover{
  transform:translateY(-2px);
  transition:transform .15s ease;
}

/* Badge di variazione percentuale sul pannello Performance */
.dark-chip.chip-up{
  background:rgba(120,220,150,.22);
  color:#8CF0A8;
}
.dark-chip.chip-down{
  background:rgba(240,120,120,.22);
  color:#FF9C9C;
}
.panel-hint{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.56);
}
.inverse-empty{
  color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  text-align:center;
}

/* "Ultima volta" durante l'allenamento: mostra il carico registrato la
   sessione precedente per lo stesso esercizio, come riferimento rapido. */
.last-performance-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--purple-strong, #6a4fd6);
  background:rgba(106,79,214,.1);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:12px;
}
[data-theme="noir"] .last-performance-hint{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.set-row-hint{
  font-size:11px;
  color:rgba(17,17,17,.42);
  margin-top:-6px;
  margin-bottom:6px;
}
/* Form inline "Condividi scheda": compare sotto la riga della scheda
   quando si preme il pulsante Condividi, nascosto di default via [hidden]. */
.share-plan-form{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  width:100%;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(17,17,17,.12);
}
[data-theme="noir"] .share-plan-form{
  border-top-color:rgba(255,255,255,.14);
}
.share-plan-form input[type="email"]{
  flex:1 1 200px;
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(17,17,17,.16);
  font-size:14px;
}
[data-theme="noir"] .share-plan-form input[type="email"]{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
  color:#fff;
}

/* Mobile */
@media (max-width: 768px){
  .share-plan-form{
    flex-direction: column;
    align-items: stretch;
  }

  .share-plan-form input[type="email"]{
    width: 100%;
    flex: none;
  }

  .share-plan-form button{
    width: 100%;
  }
}









/* =========================================================
   PIANO ALIMENTARE — RESPONSIVE FIX
   ========================================================= */

/* Contenitori principali */
.meal-section,
.calorie-card,
.meal-item-chips {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Navigazione dei giorni:
   su mobile scorre orizzontalmente invece di comprimersi */
.meal-day-nav,
.training-quicknav {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.meal-day-nav::-webkit-scrollbar,
.training-quicknav::-webkit-scrollbar {
  display: none;
}

/* Ogni giorno mantiene una dimensione leggibile */
.meal-day-chip {
  flex: 0 0 auto;
  min-width: 72px;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   CARD CALORIE
   --------------------------------------------------------- */

.calorie-card {
  box-sizing: border-box;
  overflow: hidden;
}

.calorie-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   RIGHE DEI PASTI
   --------------------------------------------------------- */

.meal-item-chip {
  max-width: 100%;
  box-sizing: border-box;
}

.meal-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------
   AGGIUNTA ALIMENTO
   --------------------------------------------------------- */

.meal-add-row {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  box-sizing: border-box;
}

.meal-add-row .emoji-input {
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  box-sizing: border-box;
}

.meal-add-row input[name="name"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.meal-add-btn {
  flex: 0 0 48px;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 560px) {

  .meal-section {
    margin-bottom: 12px;
  }

  .calorie-card {
    padding: 16px;
    border-radius: 24px;
  }

  .calorie-form {
    gap: 10px;
  }

  .calorie-stat input {
    font-size: 44px;
  }

  .calorie-form .btn,
  .calorie-form button {
    width: 100%;
    min-height: 48px;
  }

  .meal-item-chip {
    padding: 10px;
    gap: 8px;
  }

  .meal-item-emoji {
    font-size: 18px;
  }

  .meal-item-name {
    font-size: 13px;
    line-height: 1.3;
  }

  .meal-item-delete {
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
  }

  .meal-add-row {
    gap: 6px;
  }

  .meal-add-row .emoji-input {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .meal-add-btn {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .meal-add-row input[name="name"] {
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------
   MOBILE MOLTO STRETTO
   --------------------------------------------------------- */

@media (max-width: 380px) {

  .meal-day-chip {
    min-width: 64px;
    padding: 9px 11px;
    font-size: 12px;
  }

  .meal-day-chip small {
    font-size: 9px;
  }

  .meal-add-row {
    gap: 5px;
  }

  .meal-add-row .emoji-input {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
  }

  .meal-add-btn {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
  }

  .meal-add-row input[name="name"] {
    font-size: 13px;
    padding-inline: 10px;
  }
}

/* ---------------------------------------------------------
   EVITA QUALSIASI OVERFLOW ORIZZONTALE
   --------------------------------------------------------- */

.meal-section *,
.calorie-card *,
.meal-item-chips * {
  max-width: 100%;
  box-sizing: border-box;
}