:root{
  --ink:#1B1533;
  --ink-soft:#6B6478;
  --page1:#EEF1FB;
  --page2:#F7F3FF;
  --page3:#FFF6EF;
  --surface:#FFFFFF;
  --line:#ECE8F5;
  --coral:#FF6B6B;
  --turquoise:#17C3B2;
  --amber:#FFC145;
  --violet:#7B61FF;
  --pink:#FF8FAB;
  --grad: linear-gradient(135deg, var(--violet), var(--coral));
  --radius:22px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(123,97,255,.14), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(255,107,107,.14), transparent 45%),
    linear-gradient(160deg, var(--page1) 0%, var(--page2) 45%, var(--page3) 100%);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;letter-spacing:-0.01em;}
.stage{
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
}
.kiosk{
  width:100%; max-width:460px;
  background:var(--surface);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(40,20,90,0.18);
  display:flex; flex-direction:column;
  min-height:660px;
  position:relative;
}
.panel{ padding:30px 24px 24px; flex:1; display:flex; flex-direction:column; position:relative; }

.eyebrow-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.mark{
  font-weight:800; font-size:15px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:flex; align-items:center; gap:8px;
}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);display:inline-block;}
.link-btn{
  font-size:11.5px; color:var(--ink-soft); background:none; border:none;
  text-decoration:underline; cursor:pointer; padding:4px; font-family:inherit;
}

h1.hero{font-size:32px;line-height:1.12;color:var(--ink);margin-bottom:12px;font-weight:800;}
.sub{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:24px;}

label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.field{margin-bottom:15px;}
input[type=text],input[type=email],input[type=tel]{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:13px;
  font-size:15px; font-family:inherit; background:#FBFAFE; color:var(--ink);
}
input:focus{outline:2px solid var(--violet); outline-offset:1px; border-color:var(--violet);}

.consent{
  display:flex; gap:10px; align-items:flex-start;
  background:#FBFAFE; border-radius:13px; padding:14px; margin:6px 0 22px; border:1.5px solid var(--line);
}
.consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--violet);}
.consent p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}

.btn{
  appearance:none; border:none; border-radius:14px; padding:15px 20px;
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  width:100%; text-align:center; transition:transform .12s ease, opacity .12s ease, box-shadow .15s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 10px 24px rgba(123,97,255,.35);}
.btn-primary:disabled{opacity:0.35; cursor:not-allowed; box-shadow:none;}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-row{display:flex; gap:10px; margin-top:auto; padding-top:18px;}
.btn-row .btn{flex:1;}
.foot-note{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:14px;opacity:0.85;}
.error-note{color:var(--coral);font-size:12.5px;margin:2px 0 12px;min-height:16px;}

/* progress track */
.track{display:flex;gap:5px;margin-bottom:24px;}
.seg{flex:1;display:flex;gap:3px;}
.tick{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .25s ease;}
.tick.on{background:var(--seg-color, var(--violet));}
.cat-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--seg-color, var(--violet));
  background:color-mix(in srgb, var(--seg-color, var(--violet)) 14%, white);
  padding:6px 13px; border-radius:100px; margin-bottom:16px; width:fit-content;
}
.q-count{font-size:12px;color:var(--ink-soft);margin-bottom:6px;}
h2.question{font-size:22px;line-height:1.32;margin-bottom:22px;color:var(--ink);font-weight:800;}

.options{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
.opt{
  text-align:left; background:#FBFAFE; border:1.5px solid var(--line); border-radius:15px;
  padding:15px 16px; font-size:14.5px; font-family:inherit; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt:hover{border-color:var(--seg-color, var(--violet));}
.opt.selected{
  border-color:var(--seg-color, var(--violet));
  background:color-mix(in srgb, var(--seg-color, var(--violet)) 12%, white);
}
.opt .ring{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.opt.selected .ring{border-color:var(--seg-color, var(--violet));background:var(--seg-color, var(--violet));}
.opt.selected .ring::after{content:"";width:8px;height:8px;border-radius:50%;background:white;}

/* results */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;margin:6px 0 20px;position:relative;}
.gauge-num{font-size:14px;font-weight:700;margin-top:14px;color:var(--ink-soft);}
.band-label{font-size:25px;margin:2px 0 8px;text-align:center;font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.band-desc{font-size:14px;color:var(--ink-soft);line-height:1.55;text-align:center;margin-bottom:22px;}
.catbars{display:flex;flex-direction:column;gap:14px;margin-bottom:8px;}
.catbar-top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.catbar-track{height:10px;border-radius:6px;background:var(--line);overflow:hidden;}
.catbar-fill{height:100%;border-radius:6px;width:0%;transition:width 1s cubic-bezier(.2,.8,.2,1);}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px;}
.badge{font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:100px;display:flex;align-items:center;gap:6px;
  animation:pop .35s ease backwards;}
.badge.strength{background:#E6FBF8;color:#0E9C8E;}
.badge.focus{background:#FFEFEA;color:#D1483A;}
@keyframes pop{from{transform:scale(0.6);opacity:0;}to{transform:scale(1);opacity:1;}}

/* confetti */
.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5;}
.confetti-piece{
  position:absolute; top:-12px; width:8px; height:14px; opacity:0.9; border-radius:2px;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  to{ transform:translateY(560px) rotate(540deg); opacity:0; }
}

/* report */
.report-card{background:#FBFAFE;border:1.5px solid var(--line);border-radius:18px;padding:22px 20px;margin-bottom:16px;}
.report-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:14px;}
.report-head .who{font-size:13px;color:var(--ink-soft);}
.report-head .who b{color:var(--ink);}
.report-score{text-align:right;}
.report-score .n{font-size:30px;font-weight:800;line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.report-score .l{font-size:10.5px;color:var(--ink-soft);letter-spacing:0.03em;}
.report-line{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--line);}
.report-line:last-child{border-bottom:none;}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;}
#qr-img{border:8px solid white;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,0.1);width:132px;height:132px;background:#fff;}
.countdown{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:16px;}
.countdown button{background:none;border:none;text-decoration:underline;color:var(--ink);cursor:pointer;font-size:12px;font-family:inherit;padding:0 4px;}
.toast{
  position:absolute; left:50%; bottom:18px; transform:translate(-50%,0);
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600;
  padding:10px 16px; border-radius:100px; opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.toast.show{opacity:1;}

/* staff / admin */
table{width:100%;border-collapse:collapse;font-size:12px;}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);}
th{color:var(--ink-soft);font-weight:700;font-size:11px;}
.table-wrap{overflow-x:auto;flex:1;margin-bottom:14px;-webkit-overflow-scrolling:touch;}
.stat-row{display:flex;gap:10px;margin-bottom:18px;}
.stat{flex:1;background:#FBFAFE;border:1.5px solid var(--line);border-radius:14px;padding:12px;text-align:center;}
.stat .n{font-size:22px;font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat .l{font-size:10.5px;color:var(--ink-soft);}
.band-pill{display:inline-block;padding:2px 8px;border-radius:100px;font-size:10.5px;font-weight:700;background:#EEF1FB;color:var(--violet);}