:root { --bg:#edf2ee; --panel:#fffefa; --ink:#1b2925; --muted:#60716a; --line:#ccd8cf; --accent:#176b63; --gold:#b88718; --red:#bb583f; --good:#23734a; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(135deg,rgba(23,107,99,.10),transparent 30%),linear-gradient(230deg,rgba(184,135,24,.12),transparent 28%),var(--bg); }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.45rem,2.7vw,2.25rem); } h2 { font-size:1.1rem; margin-bottom:.3rem; } h3 { font-size:1rem; margin-bottom:.6rem; } p,.section-heading p,.legend,small { color:var(--muted); line-height:1.5; }
.topbar { position:sticky; z-index:5; top:0; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem clamp(1rem,4vw,2.4rem); border-bottom:1px solid var(--line); background:rgba(237,242,238,.92); backdrop-filter:blur(12px); }
.eyebrow { margin-bottom:.15rem; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:0; text-transform:uppercase; }.top-actions,.history-actions { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:flex-end; }
.shell { width:min(1420px,calc(100% - 2rem)); margin:1rem auto 4rem; }.panel { padding:clamp(1rem,2vw,1.35rem); margin-bottom:1rem; border:1px solid var(--line); border-radius:8px; background:rgba(255,254,250,.96); box-shadow:0 16px 40px rgba(31,48,40,.08); }
.intro { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.intro p { margin-bottom:0; max-width:760px; }.score { min-width:132px; padding:.65rem .8rem; border-radius:7px; background:#173b36; color:#fffbe9; text-align:right; }.score span { display:block; color:#c2d6cc; font-size:.75rem; font-weight:800; text-transform:uppercase; }.score strong { display:block; margin-top:.15rem; font-size:1.1rem; }
.grid { display:grid; gap:1rem; }.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } label { display:grid; gap:.34rem; color:var(--muted); font-size:.9rem; font-weight:700; } input,select,textarea { width:100%; min-height:40px; padding:.5rem .65rem; border:1px solid #bdcbbf; border-radius:6px; background:#fffdf6; color:var(--ink); font:inherit; } textarea { resize:vertical; min-height:78px; } input:focus,select:focus,textarea:focus,button:focus-visible { outline:3px solid rgba(23,107,99,.25); outline-offset:2px; }.check { display:flex; align-items:center; gap:.5rem; padding-top:1.4rem; }.check input { width:auto; min-height:auto; }
button { min-height:40px; padding:.5rem .75rem; border:1px solid var(--line); border-radius:6px; background:#fffdf6; color:var(--ink); font:inherit; font-weight:800; cursor:pointer; }.primary { border-color:var(--accent); background:var(--accent); color:white; }.secondary:hover,button:hover { border-color:var(--accent); }.session-panel label:last-child { margin-top:.75rem; }
.section-heading { margin-bottom:1rem; }.section-heading p { margin-bottom:0; }.row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }.legend { font-size:.85rem; }
.measurement-guide { border-left:4px solid var(--accent); }.guide-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); gap:1rem; }.guide-grid ol { margin:0; padding-left:1.3rem; }.guide-grid li { margin:.45rem 0; color:var(--muted); line-height:1.45; }.measurement-notes { padding:.9rem; border:1px solid #d9c67e; border-radius:7px; background:#fff8e4; }.measurement-notes p { margin:.45rem 0 0; font-size:.9rem; }
.diagram { width:min(420px,100%); margin:0 0 1rem; padding:.7rem; border:1px solid var(--line); border-radius:6px; background:white; }.diagram img { display:block; width:100%; height:auto; }.diagram figcaption { margin-top:.45rem; color:var(--muted); text-align:center; font-size:.82rem; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:7px; } table { width:100%; border-collapse:collapse; min-width:840px; } th,td { padding:.58rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } th { background:#e7eee7; color:#3d514a; font-size:.78rem; letter-spacing:0; text-transform:uppercase; } td input { min-width:80px; min-height:34px; padding:.35rem .5rem; }
.metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }.metrics>div { padding:.75rem; border:1px solid var(--line); border-radius:7px; background:#fffdf6; }.metrics span,.metrics small { display:block; }.metrics span { color:var(--muted); font-size:.82rem; font-weight:700; }.metrics strong { display:block; margin:.2rem 0; font-size:1.25rem; }.advice { min-height:48px; margin-top:.85rem; padding:.75rem; border-left:4px solid var(--gold); background:#fff8e4; color:#4f4b32; line-height:1.45; }
.tool { padding:1rem; border:1px solid var(--line); border-radius:7px; background:#fffdf6; }.tool label:not(.check) { margin-top:.65rem; }.tool code { display:block; min-height:80px; margin-top:.8rem; padding:.7rem; overflow-x:auto; border-radius:6px; background:#173b36; color:#f7f1d9; white-space:pre-wrap; font: .82rem/1.45 "Cascadia Mono",Consolas,monospace; }.tool p { margin:.75rem 0 0; }.tool p strong { color:var(--ink); }.tool-note { min-height:44px; font-size:.88rem; }.copy-code { width:100%; margin-top:.65rem; }.emergency-note { margin-top:1rem; padding:.85rem 1rem; border:1px solid #d9a898; border-left:4px solid var(--red); border-radius:7px; background:#fff0eb; color:#6d2c20; line-height:1.45; }
.empty { padding:2rem; border:1px dashed #aebdaf; border-radius:7px; color:var(--muted); text-align:center; }.summary { margin-bottom:1rem; padding:.75rem; border:1px solid var(--line); border-radius:6px; background:#f4f8f3; font-weight:700; }.charts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }.charts>div { min-width:0; }.chart { min-height:220px; border:1px solid var(--line); border-radius:7px; background:#fffdf6; }.chart svg { display:block; width:100%; height:auto; }.gridline { stroke:#d7e0d7; }.axis { fill:var(--muted); font-size:10px; }.line { stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#toast { position:fixed; right:18px; bottom:18px; z-index:10; max-width:min(400px,calc(100vw - 36px)); padding:.7rem .85rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); box-shadow:0 14px 32px rgba(0,0,0,.18); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .16s,transform .16s; } #toast.show { opacity:1; transform:translateY(0); } #toast.error { border-color:var(--red); color:var(--red); }
@media (max-width:900px) { .grid.two,.grid.three,.charts,.guide-grid { grid-template-columns:1fr; } }.history { margin-bottom:0; } @media (max-width:620px) { .topbar,.intro,.row { display:block; }.top-actions,.history-actions { justify-content:flex-start; margin-top:.8rem; }.form-grid,.metrics { grid-template-columns:1fr; }.score { display:inline-block; margin-top:.8rem; text-align:left; }.shell { width:min(100% - 1rem,1420px); }.check { padding-top:0; } }