:root{
  --bg:#F5FAF6; --surface:#FFFFFF; --ink:#0B0F0D; --ink-soft:#4B5563;
  --green:#22C55E; --green-dark:#15803D; --green-pale:#DCFCE7; --green-mid:#86EFAC;
  --red:#DC2626; --red-pale:#FEE2E2;
  --line:rgba(11,15,13,0.10); --line-strong:rgba(11,15,13,0.18);
  --radius:16px; --shadow:0 1px 2px rgba(11,15,13,.05), 0 10px 28px rgba(11,15,13,.08);
}
*{box-sizing:border-box;}
p{margin:0 0 1em; color:var(--ink-soft);}
.mono{font-family:'IBM Plex Mono',monospace; font-weight:500;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px 80px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.04em; color:var(--green-dark); background:var(--green-pale); padding:6px 12px; border-radius:999px; margin-bottom:16px;}
.notice{background:var(--green-pale); border:1px solid var(--green-mid); border-radius:12px; padding:14px 16px; font-size:.85rem; color:var(--green-dark); margin-bottom:20px;}
.notice code{background:rgba(11,15,13,.08); padding:2px 6px; border-radius:5px; font-family:'IBM Plex Mono',monospace;}

/* Step indicator */
.steps-bar{display:flex; align-items:center; gap:0; margin:32px 0 8px; max-width:520px;}
.step-node{display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; flex:1;}
.step-circle{width:30px; height:30px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:.78rem; font-weight:600; color:var(--ink-soft); transition:.2s;}
.step-node.active .step-circle{background:var(--ink); border-color:var(--ink); color:var(--green-mid);}
.step-node.done .step-circle{background:var(--green); border-color:var(--green); color:#fff;}
.step-label{font-size:.72rem; color:var(--ink-soft); font-weight:600;}
.step-node.active .step-label{color:var(--ink);}
.step-line{flex:1; height:2px; background:var(--line-strong); margin-top:-20px;}
.step-line.done{background:var(--green);}

.panel{display:none;}
.panel.active{display:block;}

/* Step 1: upload/camera */
.source-tabs{display:flex; gap:10px; margin-bottom:18px;}
.tab-btn{padding:10px 18px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font-weight:600; font-size:.88rem; cursor:pointer; transition:.15s;}
.tab-btn.active{background:var(--ink); color:var(--green-mid); border-color:var(--ink);}
.upload-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);}
.drop{border:1.5px dashed var(--line-strong); border-radius:14px; padding:56px 20px; text-align:center; cursor:pointer; transition:.15s;}
.drop:hover,.drop.drag{border-color:var(--green); background:var(--green-pale);}
.drop input{display:none;}
.camera-stage{position:relative; border-radius:14px; overflow:hidden; background:#000; min-height:200px;}
.camera-stage video{width:100%; display:block; transform:scaleX(-1);}
.camera-controls{display:flex; justify-content:center; gap:12px; margin-top:16px;}
.field-error{background:var(--red-pale); color:var(--red); border:1px solid rgba(220,38,38,.3); border-radius:10px; padding:10px 14px; font-size:.85rem; margin-top:12px; display:none;}
.field-error.show{display:block;}
.field-ok{background:var(--green-pale); color:var(--green-dark); border:1px solid var(--green-mid); border-radius:10px; padding:10px 14px; font-size:.85rem; margin-top:12px; display:none;}
.field-ok.show{display:block;}
.crop-shell{display:flex; flex-direction:column; align-items:center; gap:18px;}
.crop-frame{width:min(380px,90vw); height:min(380px,90vw); border-radius:16px; overflow:hidden; position:relative; background:#111; touch-action:none; box-shadow:var(--shadow); border:2px solid var(--ink);}
.crop-frame img{position:absolute; top:0; left:0; transform-origin:0 0; user-select:none; -webkit-user-drag:none; cursor:grab; max-width:none;}
.crop-frame.grabbing img{cursor:grabbing;}
.crop-guides{position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(220,252,231,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(220,252,231,.35) 1px,transparent 1px); background-size:33.33% 33.33%;}
.zoom-row{display:flex; align-items:center; gap:12px; width:min(380px,90vw);}
.zoom-row input[type=range]{flex:1; accent-color:var(--green);}
.preview-stage{position:relative; border-radius:14px; overflow:hidden; margin-bottom:16px; background:#111;}
.preview-stage img{width:100%; display:block;}
.preview-stage canvas{position:absolute; inset:0; width:100%; height:100%;}
.shot-tip{font-size:.82rem; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:16px;}
.analyzing-shell{display:flex; flex-direction:column; align-items:center; padding:60px 20px; text-align:center;}
.spinner-ring{width:64px; height:64px; border-radius:50%; border:4px solid var(--green-pale); border-top-color:var(--green); animation:spin 0.9s linear infinite; margin-bottom:24px;}
@keyframes spin{to{transform:rotate(360deg);}}
.analyzing-line{font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--ink-soft); margin-bottom:6px; opacity:0; animation:fadein .4s forwards;}
@keyframes fadein{to{opacity:1;}}
/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:.9rem; border:1px solid transparent; cursor:pointer; transition:.15s;}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-accent{background:var(--green); color:var(--ink);}
.btn-accent:hover{box-shadow:0 6px 20px rgba(34,197,94,.4);}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink);}
.btn-sm{padding:8px 16px; font-size:.8rem;}
/* Results layout */
.results-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:20px; align-items:start;}
.age-hero{ text-align:center; padding:18px 0 8px; }
.age-number{ font-family:'Fraunces',serif; font-size:4rem; font-weight:500; color:var(--ink); line-height:1; }
.age-unit{ font-size:1.1rem; color:var(--ink-soft); margin-top:4px; }
.age-range{ display:inline-block; margin-top:14px; background:var(--green-pale); color:var(--green-dark); font-family:'IBM Plex Mono',monospace; font-size:.85rem; padding:6px 14px; border-radius:999px; }
 
.callout{background:var(--green-pale); border:1px solid var(--green-mid); border-radius:12px; padding:14px 16px; font-size:.86rem; color:var(--green-dark); font-weight:500;}
.factor-list{ margin-top:14px; }
.factor-row{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.86rem; }
.factor-row:first-child{ border-top:none; }
.factor-row strong{ color:var(--ink); flex-shrink:0; width:110px; }
@media(max-width:820px){.results-grid{grid-template-columns:1fr;}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);}
.result-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.shape-badge-row{display:flex; align-items:center; gap:14px;}
.shape-pill{background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; font-weight:700; padding:8px 18px; border-radius:999px; font-size:.95rem; text-transform:capitalize;}
.confidence-text{font-weight:700; font-size:1.15rem;}
.photo-frame{border-radius:14px; overflow:hidden; position:relative; margin-bottom:14px;}
.photo-frame img{width:100%; display:block;}
.photo-frame canvas{position:absolute; inset:0; width:100%; height:100%;}
.callout{background:var(--green-pale); border:1px solid var(--green-mid); border-radius:12px; padding:14px 16px; font-size:.86rem; color:var(--green-dark); font-weight:500;}

.landmark-bar-row{margin-bottom:16px;}
.landmark-bar-row:last-child{margin-bottom:0;}
.lb-label{display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; margin-bottom:6px;}
.lb-track{height:8px; border-radius:99px; background:var(--line); overflow:hidden;}
.lb-fill{height:100%; border-radius:99px; transition:width .6s ease;}

.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px;}
.stat-chip{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
.stat-chip .stat-label{font-size:.74rem; color:var(--ink-soft); margin-bottom:4px;}
.stat-chip .stat-value{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.15rem;}

.confidence-card{background:var(--green-pale); border:1px solid var(--green-mid);}
.confidence-card .stat-value{color:var(--green-dark); font-size:1.8rem; font-family:'Fraunces',serif; font-weight:500;}

.features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:36px;}
@media(max-width:820px){.results-grid{grid-template-columns:1fr;}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.photo-pair .photo-frame{border-radius:12px; overflow:hidden; position:relative;}
.photo-pair img{width:100%; display:block;}
.photo-pair canvas{position:absolute; inset:0; width:100%; height:100%;}
.photo-pair-label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-align:center; color:var(--ink-soft); margin-top:4px;}

.type-pill{background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; font-weight:700; padding:8px 18px; border-radius:999px; font-size:.95rem; display:inline-block; margin-bottom:12px;}
.metric-row{display:flex; justify-content:space-between; font-size:.85rem; padding:9px 0; border-bottom:1px solid var(--line);}
.metric-row:last-child{border-bottom:none;}
.metric-row span:last-child{font-family:'IBM Plex Mono',monospace; color:var(--ink); font-weight:600;}
.attr-row{display:flex; justify-content:space-between; font-size:.85rem; padding:9px 0; border-bottom:1px solid var(--line);}
.attr-row:last-child{border-bottom:none;}
.attr-row span:last-child{font-weight:600; color:var(--green-dark);}
.callout{background:var(--green-pale); border:1px solid var(--green-mid); border-radius:12px; padding:14px 16px; font-size:.86rem; color:var(--green-dark); font-weight:500;}

.status{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-soft); margin-top:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ink-soft); flex-shrink:0;}
.dot.live{background:var(--green); animation:pulse 1.2s infinite;}
.dot.error{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
.pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.74rem; padding:5px 11px; border-radius:999px; background:var(--green-pale); color:var(--green-dark); margin-right:6px;}
@media(max-width:680px){.features-grid{grid-template-columns:repeat(2,1fr);}}
.feature-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-align:center;}
.feature-card .fnum{font-family:'Fraunces',serif; font-size:1.7rem; font-weight:500; color:var(--green-dark); margin-bottom:4px;}
.feature-card .flabel{font-size:.8rem; color:var(--ink-soft);}

.gender-row{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:44px; flex-wrap:wrap;}
.gender-btn{padding:9px 20px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font-weight:600; font-size:.85rem; cursor:pointer;}
.gender-btn.active{background:var(--ink); color:var(--green-mid); border-color:var(--ink);}

.rec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
@media(max-width:680px){.rec-grid{grid-template-columns:1fr;}}
.rec-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.rec-card h4{font-family:'Inter'; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--green-dark); margin-bottom:10px; font-weight:700;}
.rec-card p{font-size:.88rem; margin-bottom:0;}

.status{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-soft); margin-top:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ink-soft); flex-shrink:0;}
.dot.live{background:var(--green); animation:pulse 1.2s infinite;}
.dot.error{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
.pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.74rem; padding:5px 11px; border-radius:999px; background:var(--green-pale); color:var(--green-dark); margin-right:6px;}