/* GymAI onboarding self-service — mobile-first. */
body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
html { scroll-padding-top: 90px; scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { html { scroll-padding-top: 140px; } }

/* ---------- header con avanzamento ---------- */
.ob-head { position: sticky; top: 0; z-index: 30; border-radius: 0; border-width: 0 0 1px; box-shadow: none; background: var(--glass-gradient), color-mix(in srgb, var(--aurora-bg) calc(var(--scrim-stickybar) * 100%), transparent); }
.ob-head__in { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 1160px; margin: 0 auto; padding: 6px var(--space-gutter) 6px 6px; min-height: 56px; }
.ob-head__back { gap: 8px; font-weight: 750; font-size: 17px; padding-left: 10px; }
.ob-head__count { flex: 1; text-align: right; }
.ob-head__proto { flex: none; }
@media (max-width: 400px) { .ob-head__brand { display: none; } }
.ob-progress { height: 3px; background: var(--glass-lite); }
.ob-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--aurora-primary), var(--aurora-brand-text)); transform-origin: left; transform: scaleX(calc(var(--p, 1) / 6)); transition: transform var(--motion-duration-slow) var(--motion-ease-out); }
.ob-steps { display: none; }
@media (min-width: 1024px) {
  .ob-steps { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 10px; counter-reset: s; }
  .ob-steps li { counter-increment: s; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; color: var(--aurora-text-muted); }
  .ob-steps li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--glass-lite); border: 1px solid var(--glass-stroke); }
  .ob-steps li.is-done::before { content: "✓"; background: var(--status-ok-bg); color: var(--status-ok); border-color: transparent; }
  .ob-steps li.is-current { color: var(--aurora-text); background: var(--glass-lite); }
  .ob-steps li.is-current::before { background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); color: #fff; border-color: transparent; }
}

/* ---------- layout ---------- */
.ob { max-width: 1160px; margin: 0 auto; padding: 18px var(--space-gutter) 24px; display: grid; gap: 32px; }
.ob-form { min-width: 0; }
.ob-preview { display: none; }
@media (min-width: 1024px) {
  .ob { grid-template-columns: minmax(0, 600px) 1fr; padding-top: 32px; align-items: start; }
  .ob-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: 140px; }
  .mini-preview { display: none !important; }
}
.phone--ob { --w: 300px; animation-duration: 9s; }
.phone__url { margin-top: auto; margin-bottom: 14px; text-align: center; color: var(--aurora-text-muted); font-size: 11px; }
.pass__qr:empty { background: #fff linear-gradient(#111 0 0) 50% 50% / 22px 22px no-repeat; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 12px #111; }
.p-courses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.p-courses li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 14px; background: var(--glass-gradient), var(--scrim-glass-color); border: 1px solid var(--glass-stroke); font-size: 12px; font-weight: 650; animation: courseIn var(--motion-duration-slow) var(--motion-ease-out) both; }
.p-courses li .num { color: var(--aurora-brand-text); font-size: 11px; font-weight: 700; }
.p-courses li b { margin-left: auto; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); }

/* ---------- step ---------- */
.step { display: flex; flex-direction: column; gap: 16px; padding: 22px 18px; border-radius: var(--radius-card); }
@media (min-width: 520px) { .step { padding: 28px; } }
.step[hidden] { display: none; }
.step__title { outline: none; }
.step__lead { margin-top: -6px; }
.js .step.is-entering { animation: stepIn var(--motion-duration-screen) var(--motion-ease-out) both; }
.js .step.is-entering.is-back { animation-name: stepInBack; }
@keyframes stepIn { from { opacity: 0; transform: translate3d(var(--motion-slide-x), 0, 0); } }
@keyframes stepInBack { from { opacity: 0; transform: translate3d(calc(var(--motion-slide-x) * -1), 0, 0); } }
.step > * { min-width: 0; }
.grid2 { display: grid; gap: 16px; }
.grid2 > *, .field { min-width: 0; }
.input select { width: 100%; text-overflow: ellipsis; }
@media (min-width: 520px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.g-logo { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1a73e8; font-weight: 800; font-size: 14px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--aurora-text-muted); font-size: var(--fs-small); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--glass-stroke); }
.input__btn { min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 6px; margin-right: -8px; font-size: 13px; font-weight: 650; color: var(--aurora-brand-text); }
.meter { height: 4px; border-radius: 99px; background: var(--glass-lite); overflow: hidden; }
.meter span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--m, 0)); background: var(--c, var(--status-bad)); transition: transform var(--motion-duration-base) var(--motion-ease-out); }
.check a { color: var(--aurora-brand-text); }
/* errore consenso Termini (fuori da .field) */
#e-tos { margin: -22px 0 0 34px; font-size: var(--fs-small); color: var(--status-bad); }
#e-tos:empty { display: none; }
.req { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--status-info-bg); color: var(--status-info); margin-left: 4px; }
.input--select select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.input--select svg { pointer-events: none; }
.input--slug input { text-align: right; }
.input--slug .affix { color: var(--aurora-text); font-weight: 600; }
.slug-status { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); min-height: 20px; }
.slug-status.ok { color: var(--status-ok); } .slug-status.bad { color: var(--status-bad); } .slug-status.wait { color: var(--aurora-text-muted); }
.slug-status svg { width: 16px; height: 16px; flex: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 14px; border-radius: var(--radius-pill); background: var(--glass-lite); border: 1px solid var(--glass-stroke); font-size: 14px; font-weight: 600; transition: transform var(--motion-duration-fast) var(--motion-ease-out), background-color var(--motion-duration-fast); }
.chip:active { transform: scale(.95); }
.chip .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--fs-small); }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.notice--info { background: var(--status-info-bg); color: #e0ecff; } .notice--info svg { color: var(--status-info); }
.notice--warn { background: var(--status-warn-bg); } .notice--warn svg { color: var(--status-warn); }

.browser { overflow: hidden; border-radius: var(--radius-md); }
.browser__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--glass-lite-stroke); }
.browser__dots { display: flex; gap: 4px; } .browser__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.browser__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgb(0 0 0 / .3); font-size: 13px; overflow: hidden; }
.browser__url > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser__url svg { width: 13px; height: 13px; flex: none; color: var(--status-ok); }
.browser__url strong { color: var(--aurora-brand-text); }
.browser__body { display: flex; align-items: center; gap: 12px; padding: 16px; }
.browser__logo, .mp__logo { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; overflow: hidden; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); box-shadow: var(--elev-glow); }
.browser__name { font-weight: 700; }
[data-mp-logo] img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }

/* anteprima compatta (mobile, passo 3) */
.mini-preview { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--aurora-bg); border: 1px solid var(--glass-stroke); transition: background-color var(--motion-duration-screen); }
.mini-preview::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; left: -30%; top: -140%; background: radial-gradient(circle, color-mix(in srgb, var(--aurora-glow-a) 70%, transparent), transparent 62%); pointer-events: none; }
.mini-preview::after { content: ""; position: absolute; width: 80%; aspect-ratio: 1; right: -30%; bottom: -150%; background: radial-gradient(circle, color-mix(in srgb, var(--aurora-glow-b) 60%, transparent), transparent 62%); pointer-events: none; }
.mini-preview > * { position: relative; z-index: 1; }
.mp__txt { flex: 1; min-width: 0; }
.mp__name { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp__sub { font-size: 12px; color: var(--aurora-brand-text); font-weight: 600; }
.mp__btn { padding: 8px 14px; border-radius: 12px; font-weight: 650; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); box-shadow: var(--elev-glow); }

.drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: var(--radius-md); border: 1.5px dashed var(--glass-stroke-hi); background: rgb(0 0 0 / .2); cursor: pointer; transition: border-color var(--motion-duration-base), background-color var(--motion-duration-base); }
.drop:hover, .drop.is-over { border-color: var(--aurora-brand-text); background: color-mix(in srgb, var(--aurora-glow-a) 10%, transparent); }
.drop:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--aurora-glow-a) 22%, transparent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop__txt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drop__txt svg { width: 24px; height: 24px; flex: none; color: var(--aurora-brand-text); }
.drop__txt strong { word-break: break-all; }
.drop__img { width: 56px; height: 56px; border-radius: 12px; background: #fff; padding: 5px; flex: none; }
.drop__img[hidden] { display: none; }
.drop__img img { width: 100%; height: 100%; object-fit: contain; }
.extracted { display: flex; flex-direction: column; gap: 8px; }
.extracted[hidden] { display: none; }

.colorset { border: 0; margin: 0; padding: 0; }
.colorset legend { padding: 0; margin-bottom: 8px; }
.color-row { display: flex; gap: 10px; align-items: center; }
.color-row[hidden] { display: none; }
.color-pick { position: relative; width: var(--control-h); height: var(--control-h); flex: none; border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--glass-stroke-hi); background: var(--pc, #4f46e5); cursor: pointer; }
.color-pick input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; }
.input--hex { flex: 1; max-width: 220px; }
.input--hex input { text-transform: lowercase; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.swatch { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; display: grid; place-items: center; transition: transform var(--motion-duration-fast) var(--motion-ease-out); }
.swatch::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); transition: transform var(--motion-duration-base) var(--motion-ease-spring); }
.swatch[aria-pressed="true"]::before { transform: scale(1.1); box-shadow: 0 0 0 3px var(--aurora-bg), 0 0 0 5px #fff; }
.swatch:active { transform: scale(var(--motion-scale-press-sm)); }

/* modelli corsi */
.tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 520px) { .tpls { grid-template-columns: repeat(3, 1fr); } }
.tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px; border-radius: var(--radius-md); background: var(--glass-lite); border: 1px solid var(--glass-stroke); text-align: left; transition: transform var(--motion-duration-fast) var(--motion-ease-out), border-color var(--motion-duration-base), background-color var(--motion-duration-base); }
.tpl:active { transform: scale(var(--motion-scale-row)); }
.tpl strong { font-size: 14px; }
.tpl span { font-size: 12px; color: var(--aurora-text-muted); }
.tpl[aria-checked="true"] { border-color: color-mix(in srgb, var(--aurora-brand-text) 80%, transparent); background: color-mix(in srgb, var(--aurora-glow-a) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-brand-text) 50%, transparent) inset; }
.courses-ed { display: flex; flex-direction: column; gap: 10px; }
.crow { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--glass-lite); border: 1px solid var(--glass-lite-stroke); animation: courseIn var(--motion-duration-slow) var(--motion-ease-out) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger)); }
.crow__top { display: flex; gap: 8px; align-items: center; }
.crow__top .input { flex: 1; min-width: 0; min-height: var(--tap-min); padding: 0 12px; }
.crow__top .input input { min-height: 42px; font-size: 15px; }
.crow__top .input--time { flex: 0 0 104px; }
.crow__del { width: var(--tap-min); height: var(--tap-min); flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--aurora-text-muted); }
.crow__del:hover { color: var(--status-bad); background: var(--status-bad-bg); }
.crow__del svg { width: 18px; height: 18px; }
.days { display: flex; flex-wrap: wrap; gap: 4px; }
.day { min-width: var(--tap-min); min-height: var(--tap-min); border-radius: 12px; font-size: 13px; font-weight: 700; background: rgb(0 0 0 / .2); border: 1px solid var(--glass-stroke); color: var(--aurora-text-muted); transition: background-color var(--motion-duration-fast), color var(--motion-duration-fast), transform var(--motion-duration-fast); }
.day:active { transform: scale(var(--motion-scale-press-sm)); }
.day[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); }
.linkish { align-self: flex-start; color: var(--aurora-brand-text); gap: 8px; }
.linkish svg { width: 18px; height: 18px; }

/* import */
.import-out { display: flex; flex-direction: column; gap: 12px; }
.import-out[hidden] { display: none; }
.map { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .map { grid-template-columns: 1fr 1fr; } }
.map label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--aurora-text-muted); }
.map .input { min-height: var(--tap-min); padding: 0 12px; } .map .input select { min-height: 42px; font-size: 15px; }
.pv { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--glass-lite-stroke); }
.pv table { border-collapse: collapse; width: 100%; font-size: 13px; }
.pv th, .pv td { padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--glass-lite-stroke); }
.pv th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--aurora-text-muted); }
.pv tr.bad td { background: var(--status-bad-bg); }
.pv td.errc { color: var(--status-bad); white-space: normal; min-width: 140px; }

/* passo finale */
.step--done { align-items: center; text-align: center; overflow: hidden; }
.done-badge svg { width: 84px; height: 84px; }
.done-badge circle { fill: var(--status-ok-bg); stroke: var(--status-ok); stroke-width: 2; transform-origin: center; animation: popIn var(--motion-duration-slow) var(--motion-ease-spring) both; }
.done-badge path { fill: none; stroke: var(--status-ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 700ms var(--motion-ease-out) 250ms forwards; }
@keyframes popIn { from { transform: scale(.2); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.url-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 12px; width: 100%; }
.url-card__url { display: flex; align-items: center; gap: 8px; min-width: 0; word-break: break-all; font-weight: 600; }
.url-card__url svg { width: 18px; height: 18px; flex: none; color: var(--aurora-brand-text); }
.url-card__url strong { color: var(--aurora-brand-text); }
.qr-box { width: 196px; height: 196px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: var(--elev-glow-strong); }
.qr-box svg { width: 100%; height: 100%; }
.done-actions { width: 100%; max-width: 380px; }
.trial, .next { width: 100%; text-align: left; }
.trial { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.trial .btn { align-self: flex-start; }
.next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.next li { display: flex; gap: 12px; align-items: flex-start; }
.next svg { width: 22px; height: 22px; flex: none; color: var(--aurora-brand-text); margin-top: 2px; }
.step--done .linkish { align-self: center; color: var(--aurora-text-muted); }

/* barra di navigazione in basso */
.ob-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; border-radius: 22px 22px 0 0; border-width: 1px 0 0; padding: 10px var(--space-gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--glass-gradient), var(--scrim-sheet-color); }
.ob-nav__in { display: flex; gap: 10px; max-width: 600px; margin: 0; }
@media (min-width: 1024px) { body { padding-bottom: 24px; } .ob-nav { position: sticky; left: auto; right: auto; bottom: 18px; margin-top: 16px; padding: 10px; border-radius: 22px; border-width: 1px; } }
.ob-nav [data-back] { flex: 0 0 auto; padding: 0 16px; }
.ob-nav [data-next] { flex: 1; }
.ob-nav [data-skip] { flex: 0 0 auto; }
.ob-nav [data-skip][hidden], .ob-nav [data-back][hidden] { display: none; }
.ob-nav .is-loading span { opacity: .6; }
body[data-step="6"] .ob-nav { display: none; }
@media (max-width: 380px) { .ob-nav [data-back] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ob-nav [data-back] { width: var(--control-h); padding: 0; } }

.toast { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 60; width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--radius-md); background: var(--glass-gradient), var(--scrim-toast-color); font-size: 14px; transform: translate3d(-50%, -20px, 0); opacity: 0; pointer-events: none; transition: transform var(--motion-duration-slow) var(--motion-ease-spring), opacity var(--motion-duration-base); }
.toast.is-on { transform: translate3d(-50%, 0, 0); opacity: 1; }

.confetti { position: fixed; top: 0; left: 0; width: 8px; height: 12px; border-radius: 2px; z-index: 70; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .p-courses li, .crow { animation: none !important; } .done-badge path { stroke-dashoffset: 0; } }