/* WSG Counter — stessi colori e font del sito West Side Gym (Archivo, JetBrains Mono: SIL OFL, ospitati qui) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-italic-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jetbrains-mono-normal-latin.woff2) format('woff2')}
:root{
  --ink:#070d14; --ink-2:#0c1621; --navy:#13283b; --pink:#e2668f; --blue:#3a7db5;
  --chalk:#f2efe8; --muted:#8a9aab; --line:rgba(242,239,232,.14);
  --display:"Archivo",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--ink);color-scheme:dark}
body{min-height:100dvh;background:radial-gradient(90% 50% at 50% 0%,rgba(58,125,181,.22),transparent 70%),var(--ink);color:var(--chalk);font-family:var(--display);-webkit-font-smoothing:antialiased;line-height:1.4;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.app{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 12px) max(16px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 20px) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px}

[hidden]{display:none!important}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.top img{border-radius:8px;flex:none}
.brand{font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:.02em;font-size:20px;white-space:nowrap}
.brand b{color:var(--blue)}
.tabs{flex:1 0 100%;display:flex;border:1px solid var(--line);padding:3px;gap:3px;border-radius:12px}
.tabs button{flex:1;border:0;background:none;color:var(--muted);font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:11px 8px;border-radius:9px}
.tabs button[aria-selected=true]{background:var(--chalk);color:var(--ink)}

.stage{border:1px solid var(--line);border-radius:16px;background:radial-gradient(70% 55% at 50% 62%,rgba(226,102,143,.13),transparent 70%),linear-gradient(170deg,var(--navy),var(--ink));padding:18px 16px 16px}
.total{font-weight:900;font-stretch:125%;font-style:italic;font-size:clamp(64px,22vw,104px);line-height:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
.total small{font:400 14px var(--mono);letter-spacing:.3em;color:var(--muted);margin-left:8px;font-style:normal}
.sub{font:600 12px var(--mono);letter-spacing:.14em;color:var(--muted);margin-top:10px;text-transform:uppercase}
.bar{display:block;width:100%;height:auto;margin:10px 0 6px;overflow:visible}
.bar .pl{animation:in .28s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes in{from{transform:translateX(70px);opacity:0}}
@media (prefers-reduced-motion:reduce){.bar .pl{animation:none}}

.list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.list li{display:flex;align-items:baseline;gap:7px;white-space:nowrap;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:rgba(242,239,232,.03)}
.list li i{flex:none;align-self:center;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.list li b{font:600 14px var(--mono);color:var(--muted)}
.list li strong{font-weight:900;font-stretch:115%;font-size:24px;font-variant-numeric:tabular-nums;line-height:1}
.list li span{font:600 11px var(--mono);color:var(--muted)}
.list li.empty{grid-column:1/-1;justify-content:center;font:600 12px var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.warn{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(242,194,48,.12);border:1px solid rgba(242,194,48,.4);color:#f6d873;font-size:14px}

.pane{display:flex;flex-direction:column;gap:10px}
.lbl{font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.kg-row{display:flex;gap:8px}
.kg-row input{flex:1;min-width:0;height:64px;border-radius:12px;background:rgba(242,239,232,.05);border:1.5px solid var(--line);color:#fff;font:900 32px var(--display);font-stretch:115%;text-align:center;outline:none;-webkit-user-select:text;user-select:text}
.kg-row input:focus{border-color:var(--blue)}
.step{width:64px;height:64px;flex:none;border-radius:12px;border:1.5px solid var(--line);background:rgba(242,239,232,.05);font-size:30px;font-weight:700}
.step:active,.quick button:active,.pads button:active,.ghost:active{transform:scale(.96)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick button,.ghost{height:46px;border-radius:10px;border:1px solid var(--line);background:none;font:600 15px var(--mono);color:var(--chalk)}

.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pads button{aspect-ratio:1;border-radius:50%;border:3px solid rgba(7,13,20,.9);box-shadow:0 0 0 1.5px rgba(255,255,255,.25);font-weight:900;font-stretch:115%;font-size:clamp(16px,5vw,22px);display:grid;place-items:center;line-height:1}
.pads button:disabled{opacity:.18}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.opts{border:1px solid var(--line);border-radius:14px;padding:0 14px}
.opts summary{list-style:none;padding:14px 0;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;display:flex;gap:10px;align-items:center;cursor:pointer}
.opts summary::-webkit-details-marker{display:none}
.opts summary::after{content:"+";margin-left:auto;font-size:20px;line-height:1;transition:transform .25s}
.opts[open] summary::after{transform:rotate(45deg)}
.opts summary span{color:var(--muted);font-weight:400;letter-spacing:.06em;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt{display:flex;flex-direction:column;gap:8px;padding-bottom:16px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;color:var(--muted);font:600 13px var(--mono);padding:11px 6px;border-radius:7px}
.seg button.on{background:var(--chalk);color:var(--ink)}
.avail{display:flex;flex-wrap:wrap;gap:8px}
.avail button{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:none;font:600 13px var(--mono);color:var(--muted)}
.avail button i{width:12px;height:12px;border-radius:50%;opacity:.35}
.avail button.on{color:#fff;border-color:rgba(242,239,232,.45)}
.avail button.on i{opacity:1}
.foot{text-align:center;font:400 10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-top:4px}