:root{
  --purple-900:#2E1065;
  --purple-800:#4C1D95;
  --purple-700:#6D28D9;
  --purple-400:#A78BFA;
  --gold:#F5B93D;
}
html, body{ overflow-x:hidden; max-width:100%; }
body{
  -webkit-tap-highlight-color: transparent;
  background-color:#ffffff;
  background-image: linear-gradient(180deg,
    #2E1065 0%,
    #4C1D95 28%,
    #8B5CF6 55%,
    #DCD3FB 82%,
    #ffffff 100%
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 260px;
}
.opt-btn{
  display:flex; flex-direction:column; gap:2px;
  width:100%; text-align:left; padding:16px 18px;
  border:2px solid #E9E3FF; border-radius:18px;
  background:#fff; transition: all .15s ease;
  box-shadow: 0 1px 3px rgba(46,16,101,.06);
}
.opt-btn:hover{ border-color: var(--purple-700); background:#FAF8FF; }
.opt-btn.selected{ border-color: var(--purple-700); background:#F3EEFF; }
.opt-btn .main{ font-weight:700; color:#1e1033; font-size:15px; }
.opt-btn .sub{ font-weight:400; color:#7c6f9c; font-size:13px; }

.cta-btn{
  width:100%; padding:16px 20px; border-radius:18px;
  background: linear-gradient(135deg, var(--purple-700), var(--purple-900));
  color:#fff; font-weight:800; font-size:16px;
  box-shadow: 0 6px 20px rgba(76,29,149,.35);
  transition: transform .12s ease, opacity .12s ease;
}
.cta-btn:active{ transform: scale(.98); }
.cta-btn:disabled{ opacity:.4; }

.gold-btn{
  background: linear-gradient(135deg, #FFD766, var(--gold));
  color:#3a2400; box-shadow: 0 8px 24px rgba(245,185,61,.45);
}

.progress-bar-track{ height:8px; border-radius:999px; background:#EDE7FB; overflow:hidden; }
.progress-bar-fill{ height:100%; background: linear-gradient(90deg, var(--purple-700), var(--gold)); border-radius:999px; transition: width .3s ease; }

.slide-in{ animation: slideIn .28s ease both; }
@keyframes slideIn{ from{ opacity:0; transform: translateX(16px);} to{opacity:1; transform:translateX(0);} }

.top-bar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.25);
  backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,.15);
}
.top-bar-inner{ display:flex; align-items:center; gap:12px; padding:12px 16px; }
.top-bar button{ width:36px; height:36px; border-radius:999px; background:#F3EEFF; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.top-bar-track{ flex:1; height:8px; border-radius:999px; background:#EDE7FB; overflow:hidden; }
.top-bar-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--purple-900), var(--purple-700), var(--purple-400)); transition: width .4s ease; }
.top-bar-pct{ width:36px; text-align:right; font-size:12px; font-weight:800; color: var(--purple-700); }

.range-slider{ -webkit-appearance:none; width:100%; height:8px; border-radius:999px; background:#EDE7FB; }
.range-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; border-radius:999px; background:var(--purple-700); border:4px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:pointer; }
.range-slider::-moz-range-thumb{ width:28px; height:28px; border-radius:999px; background:var(--purple-700); border:4px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:pointer; }

.check-box{ width:24px; height:24px; border-radius:6px; border:2px solid #C9BEEA; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-size:14px; }
.check-box.checked{ background: var(--purple-700); border-color: var(--purple-700); }

.faq-item{ border-bottom:1px solid #EDE7FB; }

.hero-wrap{ position:relative; }
.hero-badge{
  position:absolute; left:16px; bottom:16px; background:#fff;
  border-radius:14px; padding:8px 14px; box-shadow:0 6px 20px rgba(0,0,0,.25);
  font-weight:900; color: var(--purple-900); line-height:1.1;
}

.bmi-scale{ display:flex; height:10px; border-radius:999px; overflow:hidden; }
.bmi-scale div{ flex:1; }

.ba-slider{ position:relative; width:100%; border-radius:20px; overflow:hidden; aspect-ratio:4/3; }
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-slider .overlay{ position:absolute; inset:0; height:100%; overflow:hidden; }
.ba-slider .divider{ position:absolute; top:0; bottom:0; width:3px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.4); }
.ba-slider .handle{ position:absolute; top:50%; width:36px; height:36px; border-radius:999px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%); font-size:14px; color:var(--purple-700); }