@import url("shared-page-base.css");

#healthyAppHost.utility-shell{width:min(760px,100%)!important;display:block!important;border-radius:22px!important;overflow:hidden!important;background:var(--surface)!important;border:1px solid var(--line)!important}
#healthyApp{padding:22px;color:var(--text)}
#healthyApp *{box-sizing:border-box}
#healthyApp [hidden]{display:none!important}
#healthyApp input::-webkit-inner-spin-button,#healthyApp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#healthyApp input[type=number]{-moz-appearance:textfield;appearance:textfield}
.hw-fields{display:grid;grid-template-columns:1.2fr .65fr 1fr;gap:12px}
.hw-control label{display:block;margin:0 0 6px;color:var(--muted);font-size:12px;font-weight:800}
.hw-pill{height:52px;display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface3)}
.hw-pill input,.hw-pill select{min-width:0;border:0!important;outline:0!important;background:transparent!important;color:var(--text)!important}
.hw-pill input{width:100%;font-size:25px!important;font-weight:800}
.hw-pill input.hw-preset{color:var(--muted)!important;opacity:.58}
.hw-pill select{width:70px;color:var(--muted)!important}
.hw-feet{display:flex;align-items:center;gap:4px;flex:1}
.hw-feet input{width:50%}
.hw-button{width:100%;min-height:52px;margin-top:16px;border:0;border-radius:14px;background:linear-gradient(110deg,#55d6ff,#8b7cff);color:#07101f;font-size:15px;font-weight:900}
.hw-error{margin:10px 0 0;color:var(--bad);font-size:12px}
.hw-result{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.hw-meter{text-align:center}
.hw-title{margin:0 0 10px;font-size:18px;letter-spacing:.08em;text-transform:uppercase}
.hw-gauge{position:relative;max-width:430px;margin:auto}
.hw-gauge svg{display:block;width:100%}
.hw-track{fill:none;stroke:var(--line);stroke-width:34;stroke-linecap:round}
.hw-low,.hw-good,.hw-high{fill:none;stroke-width:27}
.hw-low{stroke:#38bdf8}
.hw-good{stroke:#22c55e}
.hw-high{stroke:#a78bfa}
.hw-needle{filter:drop-shadow(0 4px 7px rgba(0,0,0,.35))}
.hw-needle path{fill:var(--text)}
.hw-needle circle{fill:var(--surface);stroke:#22c55e;stroke-width:6}
.hw-range{margin-top:-9px;font-size:clamp(28px,6vw,43px);font-weight:900;letter-spacing:-.05em}
.hw-range-sub{color:var(--muted);font-size:12px}
.hw-cards{display:grid;gap:9px}
.hw-card{padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface3)}
.hw-card span,.hw-card strong{display:block}
.hw-card span{color:var(--muted);font-size:11px}
.hw-card strong{margin-top:3px;font-size:18px}
.hw-note{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.healthy-guide .page-jumps{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 28px}
.healthy-guide .page-jumps a{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:750}
.healthy-guide .page-jumps a:hover,.healthy-guide .page-jumps a:focus-visible{border-color:var(--accent);color:var(--accent)}
.healthy-guide section{scroll-margin-top:92px}
.healthy-guide .guide-callout{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.healthy-guide .guide-steps{display:grid;gap:10px;padding-left:22px}
.healthy-guide .guide-steps li{padding-left:5px}
.healthy-guide .formula-box{padding:18px;border-left:4px solid var(--accent);border-radius:0 14px 14px 0;background:var(--surface)}
.healthy-guide table{width:100%;border-collapse:collapse}
.healthy-guide th,.healthy-guide td{padding:11px;border:1px solid var(--line);text-align:left}
.healthy-guide th{background:var(--surface3)}
@media(max-width:620px){#healthyApp{padding:15px}
.hw-fields,.hw-result{grid-template-columns:1fr}
.hw-gauge{max-width:390px}
}