:root{
  --bg:#F4F6F5; --card:#FFFFFF; --ink:#15252B; --sub:#5B6E74;
  --accent:#0E7C66; --accent-ink:#FFFFFF; --accent-soft:#E2F1ED;
  --line:#DDE5E3; --warn:#B45309;
  --flat:#B4530A; --low:#B48A09; --high:#0E5C7C; --ok:#0E7C66;
  --shadow:0 4px 18px rgba(21,37,43,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1A1D; --card:#18262B; --ink:#E8EFEE; --sub:#93A7AB;
    --accent:#2FA98F; --accent-ink:#07211B; --accent-soft:#173B34;
    --line:#27393E; --warn:#E0A85C;
    --flat:#E08B4A; --low:#D9B84A; --high:#5CB4D9; --ok:#2FA98F;
    --shadow:0 4px 18px rgba(0,0,0,.35); color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Assistant',system-ui,sans-serif;font-size:16px;line-height:1.55}
.app{max-width:440px;margin:0 auto;padding:0 16px 32px}
h1,h2,.brand{font-family:'Suez One','Assistant',serif;font-weight:400;text-wrap:balance}
h1{font-size:26px;margin:8px 0 4px}
h2{font-size:24px;margin:8px 0 4px}
.sub{color:var(--sub);margin:0 0 16px}
.topbar{display:flex;align-items:center;gap:10px;padding:14px 0 10px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:5}
.brand{font-size:20px;color:var(--accent)}
.brand small{font-family:'Assistant';font-size:12px;color:var(--sub);display:block;margin-top:-2px}
.progress{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .4s}
.step-label{font-size:12px;color:var(--sub);white-space:nowrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin-bottom:12px}
.screen{display:none;flex-direction:column;gap:12px}
.screen.on{display:flex}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:15px;font:700 17px 'Assistant';cursor:pointer;background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn:disabled{opacity:.45;cursor:default}
.choices{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.choice{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:13px 15px;text-align:right;font:600 16px 'Assistant';color:var(--ink);cursor:pointer;position:relative}
.choice.sel{border-color:var(--accent);background:var(--accent-soft)}
.choice.sel::after{content:"✓";position:absolute;left:14px;color:var(--accent);font-weight:700}
.qnum{font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.05em}
.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 'Assistant';background:var(--card);color:var(--ink);width:100%}
.setup{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.setup .n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;flex:none}
.scanbox{position:relative;border-radius:14px;overflow:hidden;background:#0B1416;aspect-ratio:3/4;max-width:100%}
.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:12px;pointer-events:none;color:#DFF3EE;font-size:13px}
.hud .tag{background:rgba(14,124,102,.85);border-radius:8px;padding:4px 10px;align-self:flex-start;font-weight:700}
.dist{align-self:flex-start;border-radius:999px;padding:5px 14px;font-weight:700;font-size:14px;margin-top:6px;color:#fff;background:#5B6E74}
.dist.good{background:var(--ok)}
.dist.warn{background:#B45309}
#replay,#skelReplay{max-width:100%;border-radius:12px;background:#0B1416;margin:10px auto 4px;display:block}
.verify{color:var(--accent);font-weight:600}
.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)}
.hud .angles{display:flex;gap:8px}
.hud .ang{background:rgba(8,18,16,.72);border:1px solid rgba(47,169,143,.5);border-radius:8px;padding:6px 10px;font-variant-numeric:tabular-nums}
.hud .ang b{display:block;font-size:16px}
.instruction{position:absolute;inset-inline:12px;bottom:52px;text-align:center;pointer-events:none;
  font:800 44px/1.2 'Assistant';color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.9);transition:opacity .3s}
.gauge{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.gauge i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.hint{background:var(--accent-soft);border-radius:10px;padding:10px 14px;font-weight:600}
.res-foot{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--card);margin-bottom:10px}
.res-head{display:flex;justify-content:space-between;align-items:center}
.pill{border-radius:999px;padding:4px 12px;font-weight:700;font-size:14px;color:#fff}
.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}
.explain{background:var(--accent-soft);border-radius:10px;padding:10px 12px;font-size:14px}
.price{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0}
.price b{font-size:26px}
.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:4px;background:var(--ink);border:2px solid var(--card)}
.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}
.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}
.note{font-size:12.5px;color:var(--sub);background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
.center{text-align:center}
.small{font-size:13px;color:var(--sub)}
.paygrid{display:flex;flex-direction:column;gap:10px}
.okball{width:74px;height:74px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:36px;margin:10px auto}

/* ---- report dramatization ---- */
.ana{list-style:none;padding:0;margin:14px 0;text-align:right;min-height:120px}
.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}
@media (prefers-reduced-motion: no-preference){
  .res-foot{opacity:0;transform:translateY(14px);animation:cardIn .5s forwards}
  .res-foot .pill{transform:scale(1.6);opacity:0;animation:stampIn .35s .45s forwards}
  #replayCard,#skelCard{opacity:0;animation:fadeIn .6s .9s forwards}
  .gtrack u{transition:right .9s cubic-bezier(.2,.8,.3,1)}
}
@keyframes cardIn{to{opacity:1;transform:none}}
@keyframes stampIn{to{transform:scale(1);opacity:1}}
@keyframes fadeIn{to{opacity:1}}

/* ---- official report viewer ---- */
.reportView[hidden]{display:none}
.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}

/* ---- official report, mirroring the sample PDF ---- */
.orp{background:#F2F5F4;border-radius:14px;overflow:hidden;margin-bottom:12px;color:#15252B;box-shadow:var(--shadow)}
.orp-head{background:#0D3B36;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;gap:10px}
.orp-brand{font-family:'Suez One','Assistant',serif;color:#4FE3C1;font-size:22px;white-space:nowrap}
.orp-meta{color:#BFD9D4;font-size:11.5px;line-height:1.5;text-align:left;direction:rtl}
.orp-body{padding:16px}
.orp-title{font-family:'Suez One','Assistant',serif;font-weight:400;font-size:28px;margin:2px 0 2px}
.orp-who{color:#5B6E74;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:#E4F4EE;color:#0E7C66;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:#0E7C66;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 #0E7C66;color:#0E7C66;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}