:root{
  --green-ink:#0F2E28;
  --green-soft:#79A699;
  --green-light:#A8C5BB;
  --alert-yellow:#FCD34D;
  --line:#e2e8f0;
  --ink-900:#0F172A;
  --ink-700:#334155;
  --ink-500:#64748b;
  --font:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
.wrap{max-width:900px; margin:auto; padding:28px 18px; font-family:var(--font); color:var(--ink-700)}
.panel{background:linear-gradient(135deg,#0F2E28 0%, #79A699 100%); border-radius:18px; padding:18px; color:#fff}
.card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:16px}
.grid-2{display:grid; grid-template-columns:1fr; gap:14px}
.grid-3{display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px}
.grid-1{display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px}
@media(min-width:860px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr 1fr} }
.row{display:flex; gap:10px; align-items:flex-start; margin:10px 0; flex-wrap:wrap}
label{font-weight:650; font-size:14px}
.helper{font-size:12px; color:var(--ink-500)}
input, select{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:15px; background:#fff}
.result{margin-top:8px; background:linear-gradient(135deg,#79A699 0%, #0F2E28 100%); color:#fff; padding:16px; border-radius:14px; text-align:center}
.result .num{font-size:clamp(22px,5vw,36px); font-weight:900}
.result .label, .label-sm{font-weight:800; letter-spacing:.02em; margin-top:4px}
.result-sm .num{font-size:clamp(18px,4.5vw,28px)}
.note{font-size:12px; color:var(--ink-700); background:#f1f5f9; border-left:4px solid #79A699; border-radius:10px; padding:10px 12px; margin-top:6px}
.notice{margin-top:12px; padding:12px 14px; border-radius:10px; color:#0f1b2d; background:#f1f5f9; border-left:4px solid #79A699}
.notice.healthy{background:var(--green-light); border-left-color:#0F2E28;}
.notice.alert{background:var(--alert-yellow); border-left-color:#B45309;} /* amber with darker border */
.hide{display:none !important}
.divider{height:1px; background:var(--line); margin:16px 0}
.cta-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.wa{display:inline-flex; gap:10px; align-items:center; padding:12px 20px; background:var(--green-ink); color:#ffffff; font-weight:800; border-radius:999px; border:0; text-decoration:none}
.step-title{font-weight:800; color:var(--ink-900); font-size:18px; margin:0 0 8px}