/* ============================================================
   RunawayHair — design system
   Clinical-premium dark theme. Vanilla CSS, no framework.
   ============================================================ */
:root{
  /* surfaces */
  --bg:#0a0f16;
  --bg2:#0d141d;
  --panel:rgba(22,33,46,.72);
  --panel-solid:#16212e;
  --panel2:#1b2838;
  --glass:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.06);
  /* ink */
  --ink:#eaf1f8;
  --muted:#96a8bd;
  --faint:#6b7d93;
  /* brand */
  --accent:#4fa8ff;
  --accent2:#7b8cff;
  --teal:#35d6c0;
  --grad:linear-gradient(135deg,#4fa8ff,#7b8cff);
  --grad-teal:linear-gradient(135deg,#35d6c0,#4fa8ff);
  /* status */
  --good:#3fd08a;
  --warn:#e6b45a;
  --bad:#f0716f;
  /* metrics */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* aurora backdrop */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(79,168,255,.16), transparent 70%),
    radial-gradient(55% 40% at 92% 8%, rgba(123,140,255,.14), transparent 72%),
    radial-gradient(70% 55% at 50% 108%, rgba(53,214,192,.10), transparent 70%),
    linear-gradient(180deg,#0b1119,#0a0f16 60%);
}
img{max-width:100%}
::selection{background:rgba(79,168,255,.35)}

/* ---------- header ---------- */
header{
  padding:calc(12px + var(--sat)) 18px 12px;
  display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,rgba(10,15,22,.92),rgba(10,15,22,.55));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2);
}
header .logo{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 14px -4px rgba(79,168,255,.5)}
header .brand{display:flex;flex-direction:column;line-height:1.05}
header h1{font-size:17px;margin:0;font-weight:750;letter-spacing:-.2px}
header .brand small{font-size:10.5px;color:var(--faint);font-weight:500;letter-spacing:.2px}
header .tag{font-size:10.5px;color:var(--muted);margin-left:auto;text-align:right;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good)}

/* ---------- layout ---------- */
main{padding:16px 16px calc(96px + var(--sab));max-width:780px;margin:0 auto}
.view{display:none;animation:viewIn .34s cubic-bezier(.2,.7,.2,1)}
.view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.card.flush{padding:0;overflow:hidden}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 12px;font-weight:700}
h2.mt{margin-top:2px}
p{margin:0 0 4px}

/* ---------- buttons ---------- */
.btn{
  cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;font-family:inherit;
  transition:transform .12s,border-color .15s,background .15s,box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn:hover{border-color:rgba(79,168,255,.5)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--grad);border-color:transparent;color:#05121f;box-shadow:0 8px 22px -8px rgba(79,168,255,.6)}
.btn.accent{background:var(--grad-teal);border-color:transparent;color:#04140f}
.btn.ghost{background:var(--glass)}
.btn.danger{border-color:rgba(240,113,111,.4);color:#f4b7b6;background:rgba(240,113,111,.08)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;pointer-events:none}

.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.row.nowrap{flex-wrap:nowrap}
.spread{justify-content:space-between}
.grow{flex:1}

/* ---------- form ---------- */
label.fld{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--muted);flex:1;min-width:120px;font-weight:600}
input,select,textarea{
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:11px;font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,168,255,.18)}
input[type=range]{padding:0;background:none;border:none;-webkit-appearance:none;height:22px}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--panel2))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:#fff;margin-top:-7px;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer}
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2396a8bd' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* segmented control */
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{flex:1;border:none;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:650;padding:7px 12px;border-radius:9px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--grad);color:#05121f}

/* pills */
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{
  font-size:12px;padding:7px 13px;border-radius:22px;border:1px solid var(--line);
  color:var(--muted);cursor:pointer;white-space:nowrap;background:var(--glass);
  font-weight:600;transition:.15s;user-select:none;
}
.pill:hover{border-color:rgba(79,168,255,.4);color:var(--ink)}
.pill.on{background:var(--grad);color:#05121f;border-color:transparent;font-weight:700;box-shadow:0 6px 16px -8px rgba(79,168,255,.7)}
.pill.mini{padding:5px 10px;font-size:11px}

.muted{color:var(--muted)}
.small{font-size:12.5px}
.tiny{font-size:11px}
.hair{height:1px;background:var(--line2);margin:14px 0;border:0}

/* ---------- capture stage ---------- */
.stage{position:relative;width:100%;aspect-ratio:3/4;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.stage video,.stage .ghost,.stage canvas.overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .ghost{pointer-events:none;opacity:.45}
.stage canvas.overlay{pointer-events:none;opacity:.7;display:none;mix-blend-mode:screen}
.stage.outline canvas.overlay{display:block}
.stage.outline .ghost{display:none!important}

.grid{position:absolute;inset:0;pointer-events:none;transition:opacity .2s}
.grid.hide{opacity:0}
.grid:before,.grid:after,.grid i:before,.grid i:after{content:"";position:absolute;background:rgba(255,255,255,.28)}
.grid:before{left:33.33%;top:0;bottom:0;width:1px}.grid:after{left:66.66%;top:0;bottom:0;width:1px}
.grid i:before{top:33.33%;left:0;right:0;height:1px}.grid i:after{top:66.66%;left:0;right:0;height:1px}
.cross{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);pointer-events:none;opacity:.85}
.cross:before,.cross:after{content:"";position:absolute;background:var(--teal);box-shadow:0 0 8px rgba(53,214,192,.7)}
.cross:before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.cross:after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}

/* framing outline for scale consistency */
.frameguide{position:absolute;inset:0;pointer-events:none;display:none}
.stage.hasframe .frameguide{display:block}
.frameguide b{position:absolute;width:26px;height:26px;border:2.5px solid rgba(53,214,192,.9);filter:drop-shadow(0 0 4px rgba(53,214,192,.6))}
.frameguide b:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.frameguide b:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.frameguide b:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 6px}
.frameguide b:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 6px 0}

/* readybar + meters */
.readybar{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:8px;align-items:center;pointer-events:none}
.status{font-size:12px;font-weight:700;padding:6px 12px;border-radius:22px;background:rgba(6,12,20,.72);border:1px solid var(--line);backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:6px}
.status.ok{background:rgba(63,208,138,.16);border-color:rgba(63,208,138,.5);color:#9ff0c6}
.meters{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:7px;pointer-events:none}
.meter{flex:1;background:rgba(6,12,20,.7);border:1px solid var(--line);border-radius:11px;padding:6px 9px;backdrop-filter:blur(6px)}
.meter .lbl{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);display:flex;justify-content:space-between;font-weight:700}
.meter .lbl b{color:var(--ink);font-weight:700}
.meter .bar{height:6px;border-radius:5px;background:rgba(255,255,255,.09);margin-top:5px;overflow:hidden}
.meter .bar>span{display:block;height:100%;width:0;border-radius:5px;transition:width .18s,background .18s}

.shutterrow{display:flex;gap:10px;align-items:center;margin-top:14px}
.shutter{
  width:66px;height:66px;border-radius:50%;border:3px solid var(--line);background:var(--panel2);
  cursor:pointer;flex:0 0 auto;position:relative;transition:.15s;display:flex;align-items:center;justify-content:center;
}
.shutter:active{transform:scale(.94)}
.shutter::after{content:"";width:50px;height:50px;border-radius:50%;background:var(--grad);transition:.15s;box-shadow:0 0 0 0 rgba(79,168,255,.5)}
.shutter.ready{border-color:var(--good)}
.shutter.ready::after{background:linear-gradient(135deg,#3fd08a,#35d6c0);box-shadow:0 0 22px 2px rgba(63,208,138,.55)}

/* ---------- thumbs / journal ---------- */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.thumb{position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:#000;cursor:pointer;transition:transform .15s,border-color .15s}
.thumb:hover{transform:translateY(-2px);border-color:rgba(79,168,255,.5)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .dt{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;background:linear-gradient(180deg,transparent,rgba(6,12,20,.9));padding:14px 6px 4px;color:#dbe6f2;font-weight:600}
.thumb .rgn{position:absolute;top:5px;left:5px;font-size:9px;background:rgba(79,168,255,.9);color:#05121f;padding:2px 7px;border-radius:11px;font-weight:800}
.thumb .score{position:absolute;top:5px;right:5px;font-size:9px;font-weight:800;padding:2px 6px;border-radius:11px}

/* consistency score chips/colors */
.sc-hi{background:rgba(63,208,138,.9);color:#04140f}
.sc-mid{background:rgba(230,180,90,.9);color:#1a1204}
.sc-lo{background:rgba(240,113,111,.9);color:#1a0505}

/* ---------- compare ---------- */
.compare{position:relative;width:100%;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000;touch-action:none;box-shadow:var(--shadow)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.compare .top{clip-path:inset(0 0 0 50%)}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.6);transform:translateX(-1px)}
.compare .handle::after{content:"⟺";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;color:#0a0f16;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.compare .cap{position:absolute;bottom:8px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(6,12,20,.75);backdrop-filter:blur(4px)}
.compare .cap.a{left:8px}.compare .cap.b{right:8px}

/* ---------- treatments ---------- */
.trt{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:9px;background:var(--panel2);transition:border-color .15s}
.trt .nm{font-weight:700;font-size:14.5px}
.trt .meta{color:var(--muted);font-size:12px;margin-top:3px}
.tier{font-size:10px;font-weight:900;border-radius:6px;padding:2px 7px;color:#08111a;vertical-align:middle}
.tA{background:var(--good)}.tB{background:var(--accent)}.tC{background:var(--warn)}.tD{background:var(--bad)}
.angle-tag{display:inline-block;font-size:10px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 9px;margin-top:6px}
.streak{font-size:11px;color:var(--teal);font-weight:700}

/* adherence heat strip */
.heat{display:flex;gap:3px;margin-top:8px}
.heat i{flex:1;height:22px;border-radius:4px;background:rgba(255,255,255,.06);position:relative}
.heat i.on{background:var(--grad-teal)}
.heat i span{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--faint)}

/* library picker */
.libitem{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:12px;margin-bottom:7px;cursor:pointer;background:var(--panel2);transition:.15s}
.libitem:hover{border-color:rgba(79,168,255,.5);transform:translateX(2px)}
.libitem .nm{font-weight:650;font-size:13.5px}
.libitem .sub{font-size:11px;color:var(--muted)}
.libitem .add{margin-left:auto;color:var(--accent);font-size:20px;font-weight:400}

/* ---------- nav ---------- */
nav{
  position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;
  padding:0 8px calc(6px + var(--sab));
  background:linear-gradient(180deg,rgba(13,20,29,.7),rgba(9,14,20,.96));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line2);
}
nav button{flex:1;background:none;border:none;color:var(--faint);padding:11px 2px 8px;font-size:10px;font-weight:650;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative;transition:color .18s}
nav button.on{color:var(--accent)}
nav button.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:3px;background:var(--grad)}
nav svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- misc ---------- */
.banner{background:rgba(240,113,111,.1);border:1px solid rgba(240,113,111,.35);color:#f4c4c3;border-radius:12px;padding:11px 14px;font-size:12.5px;margin-bottom:12px}
.banner.info{background:rgba(79,168,255,.1);border-color:rgba(79,168,255,.35);color:#bcd8f5}
.empty{text-align:center;color:var(--muted);padding:30px 14px;font-size:13px}
.empty svg{width:40px;height:40px;stroke:var(--faint);fill:none;stroke-width:1.5;margin-bottom:8px;opacity:.7}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted);background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:4px 10px}

/* dialog */
dialog{background:var(--panel-solid);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);max-width:540px;width:92%;padding:0;box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(4,8,13,.7);backdrop-filter:blur(4px)}
dialog[open]{animation:dlgIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes dlgIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.dlg-img{width:100%;max-height:56vh;object-fit:contain;background:#000;border-radius:var(--radius) var(--radius) 0 0;display:block}
.dlg-body{padding:16px}
.disc{font-size:11px;color:var(--faint);border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}

/* onboarding — touch-first, large targets */
.onb{padding:24px}
.onb h3{font-size:23px;margin:0 0 10px;letter-spacing:-.3px;line-height:1.2}
.onb #onbBody{font-size:15.5px;line-height:1.55;color:var(--muted)}
.onb .steps{display:flex;gap:7px;margin:20px 0}
.onb .steps i{flex:1;height:5px;border-radius:5px;background:var(--line)}
.onb .steps i.on{background:var(--grad)}
.onb .art{width:100%;aspect-ratio:16/9;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:var(--shadow)}
.onb .art svg{width:72px;height:72px;stroke:#05121f;fill:none;stroke-width:1.6}
.onb-actions{display:flex;flex-direction:column;gap:10px}
.onb-actions .btn{width:100%;min-height:52px;font-size:16px}

/* interactive coach-mark tour */
#tour{position:fixed;inset:0;z-index:80;display:none}
#tour.on{display:block}
#tourSpot{position:absolute;left:0;top:0;width:0;height:0;border-radius:14px;
  box-shadow:0 0 0 9999px rgba(5,9,14,.74);border:2px solid var(--accent);
  transition:left .32s cubic-bezier(.2,.7,.2,1),top .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1),height .32s cubic-bezier(.2,.7,.2,1);
  pointer-events:none}
#tourPop{position:absolute;width:min(340px,calc(100vw - 28px));background:var(--panel-solid);
  border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;box-shadow:var(--shadow-lg);
  transition:left .3s,top .3s;pointer-events:auto}
#tourPop h3{margin:5px 0 7px;font-size:18px;letter-spacing:-.2px}
#tourPop p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
#tourStep{color:var(--accent);font-weight:800;letter-spacing:.6px;text-transform:uppercase;font-size:11px}
.tour-actions{display:flex;justify-content:space-between;align-items:center;margin-top:15px;gap:8px}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(84px + var(--sab));transform:translateX(-50%) translateY(20px);z-index:60;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s,transform .28s,visibility .28s;max-width:92%}
#toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* the bubble itself is interactive even though the surrounding container is click-through */
#toast .t{background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;flex-wrap:wrap;pointer-events:auto}
#toast .t.upd{border-color:rgba(79,168,255,.5)}
#toast .btn{padding:8px 14px;font-size:13.5px;min-height:40px}

/* score ring */
.ring{--v:0;width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--v)*1%), rgba(255,255,255,.08) 0);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ring i{width:34px;height:34px;border-radius:50%;background:var(--panel-solid);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-style:normal}

/* ---------- touch targets (comfortable tap size everywhere) ---------- */
.btn{min-height:46px}
.btn.sm{min-height:40px}
.pill{min-height:38px;display:inline-flex;align-items:center}
.pill.mini{min-height:32px}

/* ---------- phones: bump base readability ---------- */
@media (max-width:640px){
  body{font-size:17px}
  header h1{font-size:19px}
  dialog{width:94%}
  .onb{padding:22px 20px}
  .onb h3{font-size:22px}
  .onb #onbBody{font-size:15.5px}
  h2{font-size:13px;letter-spacing:.5px}
  .small{font-size:14.5px}
  .tiny{font-size:13px}
  .muted{font-size:inherit}
  label.fld{font-size:13.5px}
  input,select,textarea{font-size:16px}   /* 16px stops mobile zoom-on-focus */
  .btn{min-height:48px;font-size:15px}
  .btn.sm{font-size:13.5px}
  .pill{font-size:14px;padding:9px 15px}
  .pill.mini{font-size:12.5px}
  .chip{font-size:13px}
  .banner{font-size:14px}
  .trt .nm{font-size:16px}
  .trt .meta{font-size:13.5px}
  .angle-tag{font-size:12px}
  .libitem .nm{font-size:15px}
  .libitem .sub{font-size:12.5px}
  .status{font-size:13px}
  .meter .lbl{font-size:10.5px}
  .empty{font-size:14.5px}
  .disc{font-size:12.5px}
  nav button{font-size:11.5px}
  nav svg{width:24px;height:24px}
  #captureHint{font-size:14px}
  ul.small{font-size:14.5px}
}