/* =========================================================
   HYPERVEX — QUESTIONARI: la pagina che vede chi risponde (mig. 085) · motore js/quest-core.js
   Tutto sotto .qx e solo con variabili (--accent, --txt, --card…): il coach cambia tema, colori, sfondo, font e forma dei pulsanti
   e la pagina si ridisegna al volo. Niente color-mix(): i colori trasparenti usano --accent-rgb / --txt-rgb (vale anche sugli iPhone vecchi).
   Contenitore: l'elemento che ospita .qx deve avere dimensioni (pagina pubblica: tutto lo schermo; anteprima: lo schermo del telefono finto).
   ========================================================= */
.qx{ --bg:#0A0A0D; --a1:#0A0A0D; --a2:#2A200A; --ang:160deg; --card:rgba(255,255,255,.06); --line:rgba(255,255,255,.14);
  --txt:#fff; --txt2:rgba(255,255,255,.68); --accent:#E8B54A; --ink:#1A1405; --accent-rgb:232,181,74; --txt-rgb:255,255,255;
  --fh:'Barlow Condensed',system-ui,sans-serif; --fb:'Figtree',system-ui,sans-serif;
  --r:18px; --btnr:999px; --bh:56px; --hsz:34px; --hw:800; --ov:0; --blur:34px; --glass:10px; --aur:1; --dur:1;
  position:absolute; inset:0; display:flex; flex-direction:column; color:var(--txt); font-family:var(--fb); font-size:16px; line-height:1.35;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow:hidden; background:var(--a1); }
.qx *{ box-sizing:border-box; }
.qx button{ font-family:inherit; }
.qx a{ color:inherit; }
.qx-bg{ position:absolute; inset:0; background:var(--bgfull, linear-gradient(var(--ang), var(--a1), var(--a2))); transition:background .6s ease; }
.qx-bg::before{ content:''; position:absolute; inset:-25%; opacity:var(--aur);
  background:radial-gradient(38% 30% at 18% 14%, rgba(var(--accent-rgb),.34), transparent 72%),
             radial-gradient(34% 28% at 88% 82%, rgba(var(--accent-rgb),.2), transparent 72%);
  filter:blur(var(--blur)); animation:qx-float calc(16s * var(--dur)) ease-in-out infinite alternate; }
.qx-bg::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,var(--ov)); }
@keyframes qx-float{ to{ transform:translate3d(5%,-4%,0) scale(1.1); } }

/* colonna centrata: sul telefono occupa tutto, sul computer resta stretta */
.qx-top, .qx-body, .qx-foot{ width:100%; max-width:560px; margin-left:auto; margin-right:auto; }
.qx-top{ position:relative; z-index:3; flex:none; display:flex; align-items:center; gap:12px; padding:var(--toppad, 58px) 20px 0; }
.qx-back{ width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--card);
  color:var(--txt); cursor:pointer; backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); transition:transform .15s, opacity .2s; padding:0; }
.qx-back:active{ transform:scale(.9); }
.qx-back[hidden]{ display:none; }
.qx-back svg{ width:20px; height:20px; }
.qx-prog{ flex:1; height:5px; border-radius:99px; background:var(--line); overflow:hidden; }
.qx-prog i{ display:block; height:100%; width:var(--p,0%); border-radius:99px; background:var(--accent); transition:width .55s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.65); }
.qx-cnt{ min-width:34px; text-align:right; font:800 12px var(--fb); color:var(--txt2); font-variant-numeric:tabular-nums; }

.qx-body{ position:relative; z-index:2; flex:1; min-height:0; overflow-y:auto; padding:30px 22px 18px; display:flex; flex-direction:column; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.qx-body::-webkit-scrollbar{ display:none; }
/* il corpo e' una colonna con altezza fissa: senza questo, quando il contenuto e' piu' alto (telefoni bassi come 320x568 o 375x667) i campi, le risposte e i pulsanti
   si SCHIACCIANO invece di far scorrere la pagina */
.qx-body > *{ flex-shrink:0; }
.qx-foot{ position:relative; z-index:3; flex:none; padding:10px 22px var(--botpad, 30px); display:flex; flex-direction:column; gap:8px; }
.qx-q{ margin:0 0 10px; font-family:var(--fh); font-size:var(--hsz); font-weight:var(--hw); line-height:1.06; letter-spacing:-.3px; text-wrap:balance; overflow-wrap:anywhere; }
.qx-q em{ color:var(--accent); font-style:normal; }
.qx-help{ margin:0 0 22px; color:var(--txt2); font-size:15px; font-weight:500; overflow-wrap:anywhere; }
.qx-req{ color:var(--accent); margin-left:4px; font-weight:900; }

.qx-opt{ display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px; margin:0 0 10px; border-radius:var(--r); background:var(--card);
  border:1.5px solid var(--line); color:var(--txt); font:700 16px var(--fb); text-align:left; cursor:pointer; backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass));
  transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s; overflow-wrap:anywhere; }
.qx-opt:hover{ border-color:rgba(var(--accent-rgb),.55); }
.qx-opt:active{ transform:scale(.985); }
.qx-opt .dot{ width:22px; height:22px; flex:none; border-radius:50%; border:2px solid rgba(var(--txt-rgb),.35); display:grid; place-items:center; transition:.2s; }
.qx-opt.sq .dot{ border-radius:7px; }
.qx-opt.on{ border-color:var(--accent); background:rgba(var(--accent-rgb),.17); box-shadow:0 12px 30px -16px rgba(var(--accent-rgb),.8); transform:scale(1.012); }
.qx-opt.on .dot{ border-color:var(--accent); background:var(--accent); }
.qx-opt.on .dot::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--ink); }
.qx-opt.sq.on .dot::after{ width:10px; height:6px; border-radius:0; background:none; border:solid var(--ink); border-width:0 0 2.5px 2.5px; transform:rotate(-45deg) translate(1px,-1px); }

.qx-scale{ display:flex; gap:8px; }
.qx-sc{ flex:1; height:62px; border-radius:var(--r); border:1.5px solid var(--line); background:var(--card); color:var(--txt); font:800 20px var(--fh); cursor:pointer; backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); padding:0;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s, border-color .2s, color .2s; }
.qx-sc.s10{ height:50px; font-size:16px; } .qx-scale.w{ flex-wrap:wrap; } .qx-scale.w .qx-sc{ flex:1 0 17%; }
.qx-sc.on{ background:var(--accent); border-color:var(--accent); color:var(--ink); transform:translateY(-4px) scale(1.06); box-shadow:0 14px 26px -12px rgba(var(--accent-rgb),.8); }
.qx-ends{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; font:700 12.5px var(--fb); color:var(--txt2); }

.qx-in{ display:block; width:100%; height:58px; padding:0 18px; border-radius:var(--r); background:var(--card); border:1.5px solid var(--line); color:var(--txt);
  font:600 17px var(--fb); outline:none; backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); transition:border-color .2s, box-shadow .2s; margin:0 0 12px; -webkit-appearance:none; appearance:none; }
.qx-in::placeholder{ color:rgba(var(--txt-rgb),.38); }
.qx-in:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22); }
textarea.qx-in{ height:168px; padding:16px 18px; resize:none; line-height:1.4; }
select.qx-in{ background-image:linear-gradient(45deg,transparent 50%,var(--txt2) 50%),linear-gradient(135deg,var(--txt2) 50%,transparent 50%); background-position:calc(100% - 24px) 26px, calc(100% - 18px) 26px; background-size:6px 6px; background-repeat:no-repeat; }
select.qx-in option{ color:#111; }
input.qx-in[type=date]{ min-height:58px; }
.qx-lab{ display:block; margin:0 0 7px 2px; font:800 12px var(--fb); letter-spacing:.5px; text-transform:uppercase; color:var(--txt2); }
.qx-weight{ display:flex; align-items:flex-end; gap:12px; }
.qx-weight .qx-in{ font:800 46px var(--fh); height:84px; text-align:center; flex:1 1 0; min-width:0; }   /* senza flex/min-width il campo spingeva «kg / lb» fuori dallo schermo (3 px a 390, 8 px a 320) */
.qx-unit{ display:flex; border:1.5px solid var(--line); border-radius:99px; overflow:hidden; margin-bottom:12px; background:var(--card); }
.qx-unit button{ border:0; background:none; color:var(--txt2); font:800 14px var(--fb); padding:12px 16px; cursor:pointer; }
.qx-unit button.on{ background:var(--accent); color:var(--ink); }

/* foto: una o più (fino a 4), con anteprima e «togli» */
.qx-photos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qx-photo{ display:grid; place-items:center; align-content:center; text-align:center; gap:10px; min-height:176px; padding:14px; border-radius:var(--r); border:2px dashed rgba(var(--txt-rgb),.3);
  background:var(--card); color:var(--txt2); cursor:pointer; backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); transition:.2s; font:700 14px var(--fb); }
.qx-photos > .qx-photo:only-child{ grid-column:1 / -1; min-height:240px; }
.qx-photo svg{ width:38px; height:38px; color:var(--accent); }
.qx-photo:hover{ border-color:var(--accent); }
.qx-ph{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; background:#111; border:1.5px solid var(--accent); }
.qx-ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.qx-ph.demo{ background:linear-gradient(160deg, rgba(var(--accent-rgb),.3), #101014); }
.qx-ph.demo::after{ content:''; position:absolute; left:50%; bottom:-6%; width:56%; aspect-ratio:.55; transform:translateX(-50%); border-radius:48% 48% 8% 8%/ 30% 30% 4% 4%; background:rgba(255,255,255,.14); }
.qx-ph .tag{ position:absolute; top:10px; left:10px; z-index:2; padding:5px 9px; border-radius:99px; background:rgba(0,0,0,.55); color:#fff; font:800 11px var(--fb); }
.qx-ph button{ position:absolute; top:8px; right:8px; z-index:3; width:32px; height:32px; border-radius:50%; border:0; background:rgba(0,0,0,.62); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0; }
.qx-ph button svg{ width:16px; height:16px; }
.qx-info{ padding:20px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); color:var(--txt2); font-size:15.5px; backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); overflow-wrap:anywhere; }
.qx-note{ margin:4px 2px 0; color:var(--txt2); font-size:12.5px; font-weight:600; }
.qx-note.qx-bad{ color:#ff8a8a; margin:-2px 2px 10px; font-weight:700; }
.qx-note svg{ width:13px; height:13px; vertical-align:-2px; color:var(--accent); }

.qx-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:var(--bh); border:0; border-radius:var(--btnr); background:var(--accent); color:var(--ink);
  font:800 17px var(--fb); cursor:pointer; box-shadow:0 14px 30px -14px rgba(var(--accent-rgb),.85); transition:transform .15s, box-shadow .2s, opacity .25s, filter .2s; text-decoration:none; padding:0 18px; }
.qx-btn svg{ width:20px; height:20px; }
.qx-btn:hover{ filter:brightness(1.06); } .qx-btn:active{ transform:scale(.97); }
.qx-btn:disabled{ opacity:.38; box-shadow:none; cursor:default; filter:none; transform:none; }
.qx-btn.ghost{ background:var(--card); color:var(--txt); border:1.5px solid var(--line); box-shadow:none; backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); }
/* «Apri Hypervex» (pagina pubblica) e' un LINK: senza queste due righe «.qx a{color:inherit}» (piu' forte di «.qx-btn») gli dava il colore del testo,
   cioe' bianco su oro (illeggibile) e nero su nero nei temi chiari */
.qx a.qx-btn{ color:var(--ink); }
.qx a.qx-btn.ghost{ color:var(--txt); }
.qx-skip{ height:30px; border:0; background:none; color:var(--txt2); font:700 14px var(--fb); cursor:pointer; }
.qx-pw{ margin:0; text-align:center; font:700 11px var(--fb); letter-spacing:.5px; color:var(--txt2); opacity:.85; }
.qx-pw a{ text-decoration:none; }
.qx-pw b{ color:var(--txt); font-weight:900; letter-spacing:.8px; }
.qx-pw i{ font-style:italic; font-weight:900; color:var(--accent); }

/* copertina */
/* copertina centrata in verticale: con i margini «auto» (e non con justify-content:center) un testo lungo non taglia la parte alta (avatar e titolo irraggiungibili): scorre */
.qx-cover{ justify-content:flex-start; text-align:left; padding-top:6px; }
.qx-cover > :first-child{ margin-top:auto; }
.qx-cover > :last-child{ margin-bottom:auto; }
.qx-av{ margin-left:10px; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--ink); font:800 32px var(--fh); letter-spacing:.5px; margin-bottom:26px; position:relative; flex:none; }
.qx-av img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.qx-av::after{ content:''; position:absolute; inset:-9px; border-radius:50%; border:2px solid rgba(var(--accent-rgb),.55); animation:qx-ring 2.8s ease-out infinite; }
@keyframes qx-ring{ from{ transform:scale(.88); opacity:1; } to{ transform:scale(1.28); opacity:0; } }
.qx-eyebrow{ font:800 12px var(--fb); letter-spacing:2.2px; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.qx-cover h1{ margin:0 0 14px; font-family:var(--fh); font-size:calc(var(--hsz) * 1.5); font-weight:var(--hw); line-height:.98; letter-spacing:-.6px; text-wrap:balance; overflow-wrap:anywhere; }
.qx-cover p{ margin:0 0 22px; color:var(--txt2); font-size:16.5px; overflow-wrap:anywhere; }
.qx-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.qx-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:99px; border:1px solid var(--line); background:var(--card); font:700 12.5px var(--fb); color:var(--txt2); }
.qx-chip svg{ width:15px; height:15px; color:var(--accent); }

/* contatti e fine */
.qx-chk{ display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; font-size:14px; color:var(--txt2); cursor:pointer; outline:none; }
.qx-chk:focus-visible .box{ box-shadow:0 0 0 4px rgba(var(--accent-rgb),.3); }
.qx-chk .box{ width:24px; height:24px; flex:none; border-radius:8px; border:2px solid rgba(var(--txt-rgb),.35); display:grid; place-items:center; transition:.18s; }
.qx-chk.on .box{ background:var(--accent); border-color:var(--accent); }
.qx-chk.on .box::after{ content:''; width:11px; height:6px; border:solid var(--ink); border-width:0 0 2.5px 2.5px; transform:rotate(-45deg) translate(1px,-1px); }
.qx-chk b{ color:var(--txt); }
.qx-chk a{ color:var(--txt); }
.qx-ts{ margin:4px 0 12px; min-height:65px; display:flex; justify-content:center; }
.qx-done{ align-items:stretch; }
.qx-ok{ width:92px; height:92px; margin:0 0 20px; flex:none; }
.qx-ok circle{ fill:none; stroke:var(--accent); stroke-width:4; stroke-dasharray:290; stroke-dashoffset:290; animation:qx-draw .9s .1s cubic-bezier(.3,.7,.2,1) forwards; }
.qx-ok path{ fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:qx-draw .5s .8s ease-out forwards; }
@keyframes qx-draw{ to{ stroke-dashoffset:0; } }
.qx-step{ display:flex; gap:14px; align-items:center; padding:14px 16px; margin:0 0 10px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); }
.qx-step .n{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--accent); color:var(--ink); display:grid; place-items:center; font:800 14px var(--fh); }
.qx-step.done .n{ background:rgba(var(--accent-rgb),.22); color:var(--accent); }
.qx-step b{ display:block; font-size:15px; } .qx-step span{ color:var(--txt2); font-size:13px; }
.qx-step svg{ width:18px; height:18px; }
.qx-story{ display:flex; gap:14px; align-items:center; margin-top:6px; padding:14px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); backdrop-filter:blur(var(--glass)); -webkit-backdrop-filter:blur(var(--glass)); }
.qx-story canvas{ width:92px; height:164px; flex:none; border-radius:12px; box-shadow:0 14px 30px -12px rgba(0,0,0,.7); cursor:pointer; }
.qx-story b{ display:block; font-size:15.5px; margin:0 0 4px; } .qx-story p{ margin:0 0 10px; color:var(--txt2); font-size:13px; }
.qx-story .qx-btn{ height:44px; font-size:14.5px; border-radius:calc(var(--btnr) * .8); }
/* codice del coach a fine questionario (rete di sicurezza se l'app non sa gia' di chi sei): numero grande, «Copia» a destra */
.qx-code{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; }
.qx-code span{ flex:1 1 100%; color:var(--txt2); }
.qx-code b{ font:800 22px/1 var(--fb); letter-spacing:.16em; color:var(--txt); -webkit-user-select:all; user-select:all; }
.qx-code button{ margin-left:auto; min-height:38px; padding:0 16px; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--accent); font:800 13px var(--fb); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.qx-code button:active{ transform:scale(.97); }
.qx-okrow{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.qx-okrow span{ display:inline-flex; gap:6px; align-items:center; padding:8px 12px; border-radius:99px; background:rgba(var(--accent-rgb),.16); color:var(--accent); font:800 12.5px var(--fb); }
.qx-okrow svg{ width:15px; height:15px; }
.qx-ovl{ position:absolute; inset:0; z-index:20; background:rgba(0,0,0,.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; animation:qx-up .3s both; }
.qx-ovl-in{ width:min(76%, 340px); max-height:96%; display:flex; flex-direction:column; gap:10px; }
.qx-ovl canvas{ width:100%; max-height:62vh; object-fit:contain; border-radius:22px; box-shadow:0 34px 70px -22px #000; margin-bottom:6px; }
.qx-ovl .qx-btn{ height:48px; font-size:15px; }

/* entrata a cascata */
.qx-in-r > *{ animation:qx-up .55s cubic-bezier(.2,.8,.2,1) both; }
.qx-in-r > *:nth-child(2){ animation-delay:.05s; } .qx-in-r > *:nth-child(3){ animation-delay:.1s; } .qx-in-r > *:nth-child(4){ animation-delay:.15s; }
.qx-in-r > *:nth-child(5){ animation-delay:.2s; } .qx-in-r > *:nth-child(6){ animation-delay:.25s; } .qx-in-r > *:nth-child(7){ animation-delay:.3s; }
.qx-in-l > *{ animation:qx-upl .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes qx-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes qx-upl{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
.qx[data-anim="calm"] .qx-in-r > *, .qx[data-anim="calm"] .qx-in-l > *{ animation-duration:.25s; }
.qx[data-anim="none"] *, .qx[data-anim="none"] *::before, .qx[data-anim="none"] *::after{ animation:none !important; transition:none !important; }
.qx[data-anim="none"] .qx-ok circle, .qx[data-anim="none"] .qx-ok path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce){ .qx *, .qx *::before, .qx *::after{ animation:none !important; } .qx-ok circle, .qx-ok path{ stroke-dashoffset:0; } }

/* pagina pubblica e check-in nell'app: a tutto schermo, con la zona sicura del telefono */
.qx-live{ --toppad:max(20px, env(safe-area-inset-top)); --botpad:max(22px, env(safe-area-inset-bottom)); }
@media (min-width:700px){ .qx-live{ --toppad:36px; --botpad:30px; } }

/* errore di invio sull'ultima domanda (check-in dall'app): si legge sopra il pulsante */
.qx-foot-err{ margin:0 0 10px; text-align:center; }