:root{--notte:#0E1B3D; --blu:#2448E0; --viola:#6D4AE8; --menta:#0C9467; --ambra:#D17F00; --corallo:#E2483D; --ciano:#0A8BAE; --rosa:#D6407A;
  --fondo:#F3F5F9; --carta:#fff; --testo:#0E1B3D; --testo2:#4A5675; --muto:#6B7590; --bordo:#DDE2EC;}
@media (prefers-color-scheme: dark){:root{--fondo:#0A1022; --carta:#111A33; --testo:#E8ECF6; --testo2:#B4BED6; --muto:#8590AD; --bordo:#25314F;}}
*{box-sizing:border-box;}
html,body{margin:0; background:var(--fondo); color:var(--testo); font-family:'Archivo',system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
.schermo{min-height:100vh; max-width:560px; margin:0 auto;}
.schermo[hidden]{display:none;}
.accesso-alto{position:relative; overflow:hidden; color:#fff; padding:56px 24px 64px; background:radial-gradient(120% 140% at 100% 0%, #6D4AE8 0%, transparent 55%), linear-gradient(140deg,#0E1B3D,#2448E0);}
.accesso-alto h1{font-size:36px; margin:6px 0 8px; letter-spacing:-.02em;} .accesso-alto p{margin:0; color:rgba(255,255,255,.82); line-height:1.5;}
.nome-palestra{font-weight:650; color:rgba(255,255,255,.75); font-size:14px;}
.anelli{position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; border:26px solid rgba(255,255,255,.07);}
.foglio-es{background:var(--carta); margin:-28px 14px 20px; border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:14px; position:relative; box-shadow:0 12px 30px -18px rgba(14,27,61,.4);}
label{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:14px; color:var(--testo2);}
input{font:inherit; font-size:17px; padding:13px 14px; border-radius:12px; border:1px solid var(--bordo); background:var(--fondo); color:var(--testo);}
button{font:inherit; cursor:pointer;}
.primario{background:var(--blu); color:#fff; border:0; border-radius:12px; padding:14px; font-weight:700; font-size:16px;}
.errore{color:var(--corallo); margin:0; min-height:1em; font-size:14px;}
.nota{color:var(--muto); font-size:13px; margin:0;}
/* home */
.testa{padding:22px 18px 8px; display:flex; justify-content:space-between; align-items:center;}
.testa h1{margin:0; font-size:26px; letter-spacing:-.02em;} .testa .sotto{color:var(--muto); font-size:13px;}
.esci{background:none; border:1px solid var(--bordo); color:var(--testo2); border-radius:10px; padding:7px 12px; font-size:13px;}
.tessera{margin:8px 16px 16px; border-radius:22px; padding:20px; color:#fff; background:linear-gradient(135deg,#0E1B3D,#2448E0 60%,#6D4AE8); display:grid; grid-template-columns:1fr 120px; gap:8px; box-shadow:0 18px 40px -22px #2448E0;}
.tessera .stato{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; padding:5px 10px; border-radius:99px; background:rgba(255,255,255,.15); align-self:start; justify-self:start;}
.tessera .stato i{width:8px; height:8px; border-radius:50%; background:#4FD1A0;} .tessera .stato.no i{background:#FF8C80;}
.tessera .nome{font-size:20px; font-weight:750; align-self:end;} .tessera .num{font-size:15px; letter-spacing:.12em; opacity:.85;}
.tessera .qr{grid-row:1 / 4; grid-column:2; background:#fff; border-radius:14px; padding:6px; align-self:center;} .tessera .qr svg{width:100%; height:auto; display:block;}
.schede-nav{display:flex; gap:6px; padding:0 16px 10px; overflow-x:auto;}
.schede-nav button{border:1px solid var(--bordo); background:var(--carta); color:var(--testo2); border-radius:99px; padding:8px 14px; font-weight:650; font-size:14px; white-space:nowrap;}
.schede-nav button.on{background:var(--testo); color:var(--carta); border-color:var(--testo);}
.blocco{background:var(--carta); border:1px solid var(--bordo); border-radius:18px; margin:0 16px 14px; padding:16px;}
.blocco h2{font-size:16px; margin:0 0 10px;}
.abb{border-left:5px solid var(--menta); padding:8px 12px; border-radius:10px; background:var(--fondo); margin-bottom:8px;} .abb.no{border-color:var(--corallo);} .abb.warn{border-color:var(--ambra);}
.abb b{display:block;} .abb span{font-size:13.5px; color:var(--testo2);}
.barra{height:6px; border-radius:6px; background:var(--bordo); margin-top:6px; overflow:hidden;} .barra i{display:block; height:100%; background:linear-gradient(90deg,var(--viola),var(--blu));}
.giorno{font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; color:var(--muto); margin:14px 0 6px; text-transform:capitalize;}
.lez{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; border-left:5px solid var(--c); background:color-mix(in srgb, var(--c) 10%, var(--carta)); margin-bottom:8px;}
.lez .ora{font-weight:800; color:var(--c); width:48px; font-variant-numeric:tabular-nums;} .lez .info{flex:1;} .lez .info b{display:block;} .lez .info span{font-size:13px; color:var(--testo2);}
.lez button{border:0; border-radius:10px; padding:8px 12px; font-weight:700; font-size:13px; background:var(--c); color:#fff;}
.lez button.disdici{background:transparent; color:var(--c); border:1.5px solid var(--c);}
.lez .etichetta{font-size:12px; font-weight:700; color:var(--c);}
.lez.annullata{opacity:.5;}
.es{display:grid; grid-template-columns:24px 1fr auto; gap:8px; padding:8px 0; border-bottom:1px solid var(--bordo); align-items:baseline;} .es .n{color:var(--ciano); font-weight:800;} .es .d{font-size:13px; color:var(--testo2); text-align:right;}
.vuoto{color:var(--muto); text-align:center; padding:14px; font-size:14px;}
.avviso{background:color-mix(in srgb, var(--ambra) 14%, var(--carta)); color:var(--testo); border-radius:12px; padding:10px 12px; font-size:13.5px; margin:0 16px 12px;}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--notte); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px; max-width:90vw; z-index:9;}
[data-colore="blu"]{--c:var(--blu);} [data-colore="viola"]{--c:var(--viola);} [data-colore="menta"]{--c:var(--menta);} [data-colore="ambra"]{--c:var(--ambra);} [data-colore="corallo"]{--c:var(--corallo);} [data-colore="ciano"]{--c:var(--ciano);} [data-colore="rosa"]{--c:var(--rosa);}
.abb .compreso{display:block; font-size:13px; margin-top:6px; color:var(--testo2);}
.saldo{font-size:30px; font-weight:800; color:var(--menta); margin:4px 0 8px;} .saldo.meno{color:var(--corallo);}
.mov{display:flex; justify-content:space-between; gap:8px; font-size:13.5px; padding:5px 0; border-top:1px solid var(--bordo, rgba(0,0,0,.08));} .mov .piu{color:var(--menta);} .mov .meno{color:var(--corallo);}

/* 1.9 */
.bacheca{margin:0 16px 12px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--viola) 12%, var(--carta)); border:1px solid color-mix(in srgb, var(--viola) 30%, var(--bordo)); font-size:14.5px; line-height:1.45; white-space:pre-wrap;}
.servizio{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; border:1px solid var(--bordo); border-left:5px solid var(--c); background:var(--carta); color:var(--testo); border-radius:12px; padding:10px 12px; margin-bottom:8px;}
.servizio span{font-size:13px; color:var(--testo2);} .servizio.on{background:color-mix(in srgb, var(--c) 10%, var(--carta));}
.orari{display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px;}
.orari button{display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--bordo); background:var(--fondo); color:var(--testo2); border-radius:12px; padding:9px 6px; font-size:12.5px; text-transform:capitalize;}
.orari button b{font-size:17px; color:var(--testo);}
.modulo{display:flex; flex-direction:column; gap:12px;}
select, textarea{font:inherit; font-size:16px; padding:12px 14px; border-radius:12px; border:1px solid var(--bordo); background:var(--fondo); color:var(--testo);}
label.spunta{flex-direction:row; align-items:flex-start; gap:10px; font-weight:500;} label.spunta input{width:22px; height:22px; margin:0; flex:none;}
.sottotitolo{font-size:12px; font-weight:750; letter-spacing:.06em; color:var(--muto); margin:14px 0 6px; text-transform:uppercase;}

/* animazioni degli esercizi */
.anim{position:relative; display:block; flex:none; width:64px; height:44px; border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--bordo);}
.anim img, .anim video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.anim.due img:last-child{animation:fase 1.6s steps(1) infinite;}
@keyframes fase{0%{opacity:0;} 50%{opacity:1;}}
.anim.grande{width:100%; height:auto; aspect-ratio:3/2; margin-bottom:12px;}
.anim.grande img, .anim.grande video{object-fit:contain;}
button.es{width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--bordo); color:var(--testo); font:inherit; display:flex; gap:12px; align-items:center; padding:10px 0;}
button.es .es-t{display:flex; flex-direction:column; gap:2px; min-width:0;}
.velo{position:fixed; inset:0; background:rgba(10,16,35,.55); display:flex; align-items:flex-end; justify-content:center; z-index:50;}
.foglio-es{background:var(--carta); color:var(--testo); width:min(560px,100%); max-height:92vh; overflow:auto; border-radius:20px 20px 0 0; padding:18px 18px 24px;}
.foglio-es h2{margin:0 0 4px;} .foglio-es .dati-es{color:var(--testo2); margin:0 0 10px;} .foglio-es .come{line-height:1.5;} .foglio-es button{width:100%; margin-top:10px;}
@media (prefers-reduced-motion: reduce){ .anim.due img:last-child{animation:none;} }
button.es .d{text-align:left;} button.es .n{width:24px; flex:none;}
.schede-scelta{display:flex; gap:8px; overflow-x:auto; padding:0 16px 10px; scrollbar-width:none;}
.schede-scelta button{flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:1px; border:1px solid var(--bordo); background:var(--carta); color:var(--testo); border-radius:12px; padding:8px 12px; font:inherit; font-size:14px; max-width:220px;}
.schede-scelta button span{font-size:12px; color:var(--testo2);} .schede-scelta button.on{border-color:var(--ciano); box-shadow:0 0 0 2px color-mix(in srgb, var(--ciano) 30%, transparent);}