:root{
  --bg:#F6F8FB; --card:#FFFFFF; --ink:#0C1114; --sub:#5B6672;
  --accent:#2E6BE6; --accent-hi:#4F86F0; --accent-ink:#FFFFFF; --accent-soft:#EAF1FF;
  --line:rgba(12,17,20,.09); --warn:#B45309;
  --flat:#C25A12; --low:#B48A09; --high:#1F55C4; --ok:#1A7F4B;
  --shadow:0 6px 24px rgba(12,17,20,.06);
  color-scheme:light;
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Heebo',system-ui,sans-serif;font-size:16px;line-height:1.55;
  background-image:radial-gradient(600px 300px at 50% -80px, var(--accent-soft), transparent 70%);background-repeat:no-repeat}
.app{max-width:440px;margin:0 auto;padding:0 18px calc(28px + env(safe-area-inset-bottom))}
h1,h2{font-family:'Heebo',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:30px;margin:10px 0 6px;line-height:1.18}
h2{font-size:24px;margin:8px 0 4px}
.sub{color:var(--sub);margin:0 0 14px}

/* top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:14px 0 10px;position:sticky;top:0;padding-top:calc(14px + env(safe-area-inset-top,0px));background:linear-gradient(var(--bg) 78%,transparent);z-index:5}
.brand{display:flex;flex-direction:column;gap:2px}
.brand img{height:31px;margin-bottom:-5px;width:auto;display:block}
.brand small{font-family:'Heebo';font-size:11px;color:var(--sub);display:block;letter-spacing:.02em}
.progress{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hi));border-radius:3px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.step-label{font-size:12px;color:var(--sub);white-space:nowrap;font-weight:600}

/* screens + motion */
.screen{display:none;flex-direction:column;gap:12px}
.screen.on{display:flex;animation:in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.screen.on{animation:none}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:12px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:16px;font:700 17px 'Heebo';cursor:pointer;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--accent-ink);
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s}
.btn:active{transform:scale(.975);box-shadow:0 3px 8px color-mix(in srgb, var(--accent) 30%, transparent)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.linkish{background:none;border:0;color:var(--sub);font:600 13px 'Heebo';text-decoration:underline;cursor:pointer;padding:6px}

/* intro */
.hero-badges{display:flex;gap:8px;justify-content:center;margin:4px 0 14px;flex-wrap:wrap}
.hero-badges span{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:6px 13px;font-weight:700;font-size:13.5px}

/* quiz */
.qnum{font-size:13px;color:var(--accent);font-weight:800;letter-spacing:.06em}
.choices{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.choice{border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:15px 16px;text-align:right;font:600 16px 'Heebo';color:var(--ink);cursor:pointer;position:relative;
  transition:border-color .15s, background .15s, transform .1s}
.choice:active{transform:scale(.98)}
.choice.sel{border-color:var(--accent);background:var(--accent-soft)}
.choice.sel::after{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:13px;font-weight:800;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(-50%) scale(.4)}to{transform:translateY(-50%) scale(1)}}

/* setup steps */
.setup{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.setup .n{width:30px;height:30px;border-radius:10px;background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--accent-ink);display:grid;place-items:center;font-weight:800;flex:none;font-size:15px}

/* scan */
.scanbox{position:relative;border-radius:22px;overflow:hidden;background:#0B1416;aspect-ratio:3/4;max-width:100%;
  outline:3px solid transparent;outline-offset:-3px;transition:outline-color .3s}
.scanbox.rec{outline-color:var(--accent);animation:breathe 2s ease-in-out infinite}
@keyframes breathe{50%{outline-color:color-mix(in srgb, var(--accent) 35%, transparent)}}
.scanbox video,.scanbox canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px;pointer-events:none;color:#DFF3EE;font-size:13px}
.hud .tag{background:rgba(8,18,16,.66);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 13px;align-self:flex-start;font-weight:700}
.hud .tag.rec::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF5A4E;margin-left:7px;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.dist{align-self:flex-start;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13.5px;margin-top:8px;color:#fff;background:rgba(91,110,116,.85);backdrop-filter:blur(6px);transition:background .25s}
.dist.good{background:var(--ok)}
.dist.warn{background:#C2410C}
.hud .angles{display:flex;gap:8px}
.hud .ang{background:rgba(8,18,16,.72);backdrop-filter:blur(6px);border:1px solid rgba(47,169,143,.45);border-radius:12px;padding:7px 11px;font-variant-numeric:tabular-nums}
.hud .ang b{display:block;font-size:15px;margin-top:1px}
.instruction{position:absolute;inset-inline:14px;bottom:16px;text-align:center;pointer-events:none;
  background:rgba(8,18,16,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:14px 16px;font:800 24px/1.25 'Heebo';color:#fff;transition:opacity .3s}
.instruction:empty{opacity:0}
.gauge{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.gauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hi));transition:width .25s}
.hint{background:var(--accent-soft);border-radius:12px;padding:11px 14px;font-weight:600;font-size:14.5px}

/* results */
.res-foot{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--card);margin-bottom:10px;box-shadow:var(--shadow)}
.res-head{display:flex;justify-content:space-between;align-items:center}
.pill{border-radius:999px;padding:5px 14px;font-weight:800;font-size:14px;color:#fff}
.plain{margin:2px 0 8px;font-size:15.5px}
.gaugebox{margin:6px 0 10px}
.glabel{display:flex;justify-content:space-between;font-size:13px;color:var(--sub)}
.glabel b{color:var(--ink);font-variant-numeric:tabular-nums}
.gtrack{position:relative;height:10px;border-radius:5px;margin:6px 0 2px;background:var(--line)}
.gtrack i{position:absolute;top:0;height:100%;opacity:.75}
.gtrack u{position:absolute;top:-4px;width:14px;height:18px;border-radius:5px;background:var(--ink);border:2px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.gends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub)}
details.small summary{cursor:pointer;color:var(--accent);font-weight:600}
.explain{background:var(--accent-soft);border-radius:12px;padding:11px 13px;font-size:13.5px}
#replay{max-width:100%;border-radius:16px;background:#0B1416;margin:10px auto 4px;display:block}
.verify{color:var(--accent);font-weight:600}
.price{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0}
.price b{font-size:28px}
.paygrid{display:flex;flex-direction:column;gap:10px}
.okball{width:78px;height:78px;border-radius:50%;background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--accent-ink);display:grid;place-items:center;font-size:38px;margin:12px auto;animation:pop2 .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop2{from{transform:scale(.3);opacity:0}}
.note{font-size:12.5px;color:var(--sub);background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:9px 13px}
.center{text-align:center}
.small{font-size:13px;color:var(--sub)}

/* height meter (sensor placement stage, merged from upstream) */
.hmeter{position:absolute;left:10px;top:15%;bottom:15%;width:34px;display:flex;flex-direction:column;align-items:center}
.hmeter::before{content:'';position:absolute;top:18px;bottom:18px;width:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.hmeter .htop,.hmeter .hbot{font-size:10px;color:#DFF3EE;opacity:.8}
.hmeter .htop{margin-bottom:auto}
.hmeter i{position:absolute;width:24px;height:24px;border-radius:8px;background:#FFD166;border:3px solid #fff;transition:top .15s}
.hmeter i.ok{background:var(--ok)}

/* 3D model callouts (anchored to the frame, fade while the user rotates) */
.mvwrap{position:relative}
.callout{position:absolute;background:rgba(8,18,16,.85);color:#DFF3EE;border:1px solid rgba(62,198,176,.6);
  border-radius:12px;padding:7px 11px;font:600 12px 'Heebo';backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;transition:opacity .35s}
.callout b{color:#3ec6b0;font-size:14px}
.callout.warn{border-color:#E4574B}
.callout.warn b{color:#FF8A7E}
.callout::after{content:'';position:absolute;width:26px;height:2px;background:rgba(62,198,176,.55)}
.co-heel{top:42%;right:4%}.co-heel::after{left:-26px;top:50%}
.co-arch{bottom:5%;left:44%}.co-arch::after{right:40%;top:-14px;transform:rotate(90deg)}
.co-toe{top:52%;left:4%}.co-toe::after{right:-26px;top:50%}
.mvwrap.moving .callout{opacity:0}


/* merged from upstream (report/toast) */
.rowgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
label.f{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px;color:var(--sub)}
input.t{border:1.5px solid var(--line);border-radius:10px;padding:11px;font:600 17px 'Heebo';background:var(--card);color:var(--ink);width:100%}
.metric{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px dashed var(--line);padding:5px 0}
.metric b{font-variant-numeric:tabular-nums}
.metric .dev{color:var(--warn);font-weight:700}
.metric .norm{color:var(--ok);font-weight:700}
.evgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ev{margin:0}
.ev img{width:100%;border-radius:10px;display:block}
.ev figcaption{font-size:12px;color:var(--sub);margin-top:4px;text-align:center}
.ana li{opacity:0;transform:translateY(6px);transition:all .35s;font-size:15px;padding:4px 0;color:var(--sub)}
.ana li.on{opacity:1;transform:none;color:var(--ink)}
.ana li::before{content:'✓ ';color:var(--accent);font-weight:700}
  #replayCard,#skelCard{opacity:0;animation:fadeIn .6s .9s forwards}
.reportView{position:fixed;inset:0;background:rgba(8,16,18,.92);z-index:50;display:flex;flex-direction:column;align-items:center;padding:16px;overflow:auto}
.reportView img{max-width:min(100%,440px);border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.rvBtns{display:flex;gap:10px;width:min(100%,440px);margin-top:12px}
.rvBtns .btn{flex:1}
.orp-head{background:#0C1114;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;gap:10px}
.orp-brand{display:flex;align-items:center}
.orp-brand img{height:31px;width:auto;display:block}
.orp-meta{color:#B9C6E4;font-size:11.5px;line-height:1.5;text-align:left;direction:rtl}
.orp-body{padding:16px}
.orp-title{font-family:'Heebo',system-ui,sans-serif;font-weight:800;font-size:28px;margin:2px 0 2px}
.orp-who{color:#5B6672;margin:0 0 14px;font-size:15px}
.orp-card{background:#fff;border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(21,37,43,.06)}
.orp-card h3{margin:0 0 10px;font-size:17px}
.orp-feet{display:flex;justify-content:center;gap:26px}
.orp-feet figure{margin:0;text-align:center}
.orp-feet svg{width:86px;height:190px;display:block;margin:0 auto}
.orp-feet figcaption{font-size:12.5px;color:#5B6E74;margin-top:4px}
.orp-legend{display:flex;justify-content:center;gap:14px;font-size:12px;color:#5B6E74;margin-top:10px}
.orp-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-left:5px;vertical-align:-1px}
.orp-chip{display:inline-block;background:#EAF1FF;color:#1F55C4;font-weight:700;border-radius:999px;padding:5px 14px;font-size:14.5px;margin-bottom:12px}
.orp-slider{position:relative;height:12px;border-radius:6px;background:linear-gradient(to right,#E2574C,#79C99E 50%,#4FA3E3);margin:4px 2px 6px}
.orp-slider i{position:absolute;top:-5px;width:22px;height:22px;border-radius:50%;background:#15252B;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.orp-sliderlbl{display:flex;justify-content:space-between;font-size:11.5px;color:#5B6E74;margin-bottom:8px}
.orp-clsline{font-size:14px;color:#5B6E74;margin:0}
.orp-finds{margin:0;padding:0;list-style:none;counter-reset:f}
.orp-finds li{counter-increment:f;position:relative;padding-right:38px;margin-bottom:12px;font-size:14px;color:#5B6E74}
.orp-finds li b{display:block;color:#15252B;font-size:15px}
.orp-finds li::before{content:counter(f);position:absolute;right:0;top:2px;width:26px;height:26px;border-radius:50%;background:#15252B;color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}
.orp-chain{margin:0;padding:0;list-style:none;counter-reset:ch}
.orp-chain li{counter-increment:ch;padding-right:28px;position:relative;margin-bottom:7px;font-size:14.5px}
.orp-chain li::before{content:counter(ch);position:absolute;right:0;color:#C0392B;font-weight:800}
.orp-chainnote{color:#1F55C4;font-weight:600;font-size:13.5px;margin:10px 0 0}
.orp-reco{background:#0D3B36;color:#DFF3EE;border-radius:14px;padding:14px 16px;font-size:14.5px;margin-bottom:12px}
.orp-reco b{color:#4FE3C1}
.orp-sign{display:flex;align-items:center;gap:14px;font-size:13px;color:#5B6E74}
.orp-sign b{color:#15252B}
.orp-stamp{border:3px solid #2E6BE6;color:#1F55C4;border-radius:12px;padding:8px 14px;font-weight:800;text-align:center;transform:rotate(-4deg);flex:none}
.orp-stamp small{display:block;font-weight:600;font-size:10.5px}
.orp-foot{background:#0D3B36;color:#BFD9D4;font-size:11px;text-align:center;padding:10px 14px}
.orp-chainwrap{display:flex;align-items:center;gap:14px}
.orp-anat{width:96px;flex:none;height:auto}

/* rear camera: no mirror */
.scanbox.rear video,.scanbox.rear canvas{transform:none}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* questionnaire: Rubik sans-serif throughout */
#s-quiz,#s-quiz h1,#s-quiz h2,#s-quiz .btn,#s-quiz .choice,#s-quiz .qnum,#s-quiz .sub{font-family:'Rubik','Heebo',system-ui,sans-serif}
#s-quiz h2{font-weight:700}
#s-quiz .qnum{font-weight:700}

/* setup instruction slides */
.setup.illrow{display:block}
.setup-line{display:flex;align-items:center;gap:10px}
.setup img.ill,.setup video.ill{display:block;width:100%;border-radius:14px;margin-top:10px;box-shadow:0 3px 14px rgba(21,37,43,.10)}
.ferr{min-height:1.2em;margin:4px 0 0;color:#B3261E;font-size:13px;font-weight:600}
/* ---- clinical splash (no ring): logo, medical staff, approval line, short loading bar ---- */
.splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);padding:24px;
  animation:splash-out .45s ease 2.05s forwards;cursor:pointer}
.splash.gone{animation:splash-out .25s ease forwards}
.splash-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:320px}
.splash-logo{height:40px;width:auto;margin-bottom:26px;opacity:0;animation:fade-up .5s ease .05s forwards}
.splash-icon{width:78px;height:auto;fill:#2E6BE6;opacity:0;transform:scale(.6);animation:icon-pop .55s cubic-bezier(.2,1.4,.4,1) .25s forwards;filter:drop-shadow(0 10px 18px rgba(46,107,230,.25))}
.splash-t{margin:16px 0 0;font:800 24px 'Heebo';color:var(--ink);opacity:0;animation:fade-up .45s ease .6s forwards}
.splash-s{margin:0;font:600 15px 'Heebo';color:var(--sub);opacity:0;animation:fade-up .45s ease .8s forwards}
.splash-bar{width:180px;height:4px;border-radius:4px;background:#E3E8EF;overflow:hidden;margin-top:22px;opacity:0;animation:fade-up .3s ease .9s forwards}
.splash-bar i{display:block;height:100%;width:0;background:#2E6BE6;border-radius:4px;animation:bar-fill 1.05s ease-in-out 1s forwards}
@keyframes icon-pop{to{opacity:1;transform:scale(1)}}
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bar-fill{to{width:100%}}
@keyframes splash-out{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.splash{animation-delay:1.2s}.splash *{animation-duration:.01s!important;animation-delay:0s!important}}
/* persistent approval line on the intro card */
.clin{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px;border-radius:999px;background:#EAF1FF;color:#1F55C4;font:700 13px 'Heebo'}
.clin-icon{width:15px;height:auto;fill:#2E6BE6;flex:none}
@media (max-width:420px){.clin{font-size:12px;padding:5px 10px;gap:6px;white-space:nowrap}.clin-icon{width:11px}}
/* v81 splash: 3D caduceus, exactly 3 s (timed by the inline script); CSS safety-net hide at 3.6 s */
.splash{animation:splash-out .3s ease 3.6s forwards;cursor:default;transition:opacity .3s ease}
.splash.fade{opacity:0}
.splash.gone{visibility:hidden;pointer-events:none}
.cad-stage{width:150px;height:178px;perspective:760px;touch-action:none;cursor:grab;margin:2px 0 4px;opacity:0;animation:icon-pop .5s cubic-bezier(.2,1.3,.4,1) .15s forwards}
.cad-stage:active{cursor:grabbing}
.cad{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.cad-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(calc(var(--z) * 0.9px - 5px));fill:#163F99}
.cad-l:last-child{fill:#2E6BE6;filter:drop-shadow(0 0 .5px rgba(255,255,255,.35))}
.cad-l:nth-last-child(2){fill:#255BD0}
.splash-bar i{animation:bar-fill 2.55s linear .15s forwards}
.cad-stage{width:140px;height:184px}
.splash-status{margin:12px 0 0;font:600 15px 'Heebo';color:var(--sub);min-height:1.4em;opacity:0;animation:fade-up .4s ease .5s forwards;transition:opacity .18s ease}
.splash-status.swap{opacity:0 !important}

/* v84: splash text visible from frame 1 (no fade dependency) */
.splash-t,.splash-bar,.splash-status{opacity:1 !important;animation:none !important;transform:none !important}

/* v85: real-3D caduceus (WebGL raymarched badge) over the CSS-layer fallback */
.cad-stage{position:relative}
.cad-gl{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden;pointer-events:none}
.cad-gl.on{visibility:visible}