/* Jane Skin Journey — flow styles. Ported 1:1 from the approved mock-up's <style> block. */
.jsj-root{
  --ink:#2b2320; --paper:#faf6f1; --card:#ffffff; --accent:#8a5a44; --accent-soft:#c9a189;
  --good:#2e7d4f; --warn:#b07a1e; --bad:#b3402e; --line:#e5dcd2;
  background:var(--paper); color:var(--ink); font-family:Georgia,'Times New Roman',serif;
  max-width:480px; margin:0 auto; padding:20px 18px 40px;
}
.jsj-root *{box-sizing:border-box;}
.jsj-root h1{font-size:1.45rem; font-weight:normal; letter-spacing:.02em; margin-bottom:4px;}
.jsj-root h2{font-size:1.15rem; font-weight:normal; margin-bottom:12px;}
.jsj-root p{line-height:1.55; margin-bottom:12px;}
.jsj-kicker{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin-bottom:6px;}
.jsj-screen{display:none;}
.jsj-screen.jsj-active{display:block; animation:jsj-fade .35s ease;}
@keyframes jsj-fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.jsj-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:14px;}
.jsj-root button.jsj-primary{display:block; width:100%; padding:15px; border:0; border-radius:10px;
  background:var(--accent); color:#fff; font-size:1.05rem; font-family:inherit; cursor:pointer;}
.jsj-root button.jsj-primary:disabled{background:var(--accent-soft); cursor:default;}
.jsj-root button.jsj-ghost{display:block; width:100%; padding:13px; margin-top:10px; border:1px solid var(--accent);
  border-radius:10px; background:transparent; color:var(--accent); font-size:.98rem; font-family:inherit; cursor:pointer;}
.jsj-small{font-size:.85rem; color:#6d5f56;}
.jsj-coach-step{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line);}
.jsj-coach-step:last-child{border-bottom:0;}
.jsj-coach-num{flex:0 0 34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:Verdana,sans-serif; font-size:.95rem;}
.jsj-shot-count{font-family:Verdana,sans-serif; font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.jsj-oval-stage{position:relative; width:100%; aspect-ratio:3/4; background:#1c1613; border-radius:14px;
  overflow:hidden; margin-bottom:14px; display:flex; align-items:center; justify-content:center;}
.jsj-oval-stage img{width:100%; height:100%; object-fit:cover;}
.jsj-oval-stage video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1);}
.jsj-meter-pill{position:absolute; top:10px; left:50%; transform:translateX(-50%); max-width:88%;
  padding:7px 14px; border-radius:999px; font-family:Verdana,sans-serif; font-size:.72rem;
  color:#fff; display:none; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.4);}
.jsj-meter-pill.jsj-green{background:var(--good);} .jsj-meter-pill.jsj-amber{background:var(--warn);}
.jsj-meter-pill.jsj-red{background:var(--bad);}
.jsj-oval-guide{position:absolute; inset:0; pointer-events:none;}
.jsj-oval-guide .jsj-hole{position:absolute; left:50%; top:47%; width:62%; height:72%;
  transform:translate(-50%,-50%); border:2.5px dashed rgba(255,255,255,.75); border-radius:50%;}
.jsj-stage-hint{position:absolute; bottom:12px; left:0; right:0; text-align:center; color:#f2e9e0;
  font-size:.85rem; text-shadow:0 1px 3px rgba(0,0,0,.7); padding:0 20px;}
.jsj-sweep{position:absolute; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,transparent,#ffd9a0,transparent); box-shadow:0 0 14px 4px rgba(255,217,160,.55);
  animation:jsj-sweep 1.6s linear infinite; display:none;}
@keyframes jsj-sweep{0%{top:4%;} 50%{top:94%;} 100%{top:4%;}}
.jsj-scanning .jsj-sweep{display:block;}
.jsj-scan-label{position:absolute; top:10px; left:0; right:0; text-align:center; color:#ffd9a0;
  font-family:Verdana,sans-serif; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; display:none;}
.jsj-scanning .jsj-scan-label{display:block;}
.jsj-verdict{border-radius:10px; padding:12px 14px; margin-bottom:12px; font-size:.92rem; display:none;}
.jsj-verdict.jsj-show{display:block;}
.jsj-verdict.jsj-good{background:#e8f3ec; border:1px solid #bcd9c6; color:var(--good);}
.jsj-verdict.jsj-warn{background:#fdf3e0; border:1px solid #eed9ad; color:var(--warn);}
.jsj-verdict.jsj-bad{background:#fbe9e5; border:1px solid #ecc3ba; color:var(--bad);}
.jsj-thumbs{display:flex; gap:10px; margin-bottom:14px;}
.jsj-thumb{flex:1; aspect-ratio:3/4; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:#1c1613; position:relative;}
.jsj-thumb img{width:100%; height:100%; object-fit:cover;}
.jsj-thumb .jsj-tag{position:absolute; bottom:0; left:0; right:0; background:rgba(28,22,19,.75); color:#f2e9e0;
  font-size:.62rem; text-align:center; padding:3px 0; font-family:Verdana,sans-serif;}
.jsj-root label.jsj-q{display:block; font-size:.95rem; margin:16px 0 6px;}
.jsj-root textarea,.jsj-root input[type=text]{width:100%; border:1px solid var(--line); border-radius:8px; padding:10px;
  font-family:inherit; font-size:.95rem; background:#fff;}
.jsj-root select{width:100%; border:1px solid var(--line); border-radius:8px; padding:10px; font-size:.95rem; background:#fff;}
.jsj-range-row{display:flex; align-items:center; gap:12px;}
.jsj-range-row input{flex:1;}
.jsj-range-val{font-family:Verdana,sans-serif; min-width:2ch; text-align:center;}
.jsj-progress{height:4px; background:var(--line); border-radius:2px; margin-bottom:18px; overflow:hidden;}
.jsj-progress>div{height:100%; background:var(--accent); width:0; transition:width .3s ease;}

/* Turn-shot countdown (TURN-SHOT-CAPTURE-SPEC-2026-09-12.md). The number is large enough to read
   at a glance and the instruction sits under it, because the customer is about to look away. */
.jsj-countdown{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:rgba(28,22,19,.55); z-index:6; text-align:center; padding:12px;}
.jsj-count-num{font-family:Verdana,sans-serif; font-size:5.5rem; line-height:1; font-weight:700;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6);}
.jsj-count-say{margin-top:10px; color:#fff; font-size:1.05rem; font-weight:700; max-width:22ch;
  text-shadow:0 1px 8px rgba(0,0,0,.7);}
.jsj-thumb{cursor:pointer;}
.jsj-thumb .jsj-redo{position:absolute; top:6px; right:6px; background:rgba(28,22,19,.85); color:#f2e9e0;
  font-family:Verdana,sans-serif; font-size:.58rem; padding:3px 6px; border-radius:20px;}