:root{--bg:#f0f4f8;--surface:#fff;--border:#e2e8f0;--text:#1a202c;--text-muted:#64748b;--primary:#07c;--primary-fg:#fff;--primary-hover:#005fa3;--danger:#dc2626;--danger-fg:#fff;--ok-bg:#f0fdf4;--ok-border:#bbf7d0;--ok-text:#166534;--cl-bg:#fefce8;--cl-border:#fef08a;--acid-bg:#eff6ff;--acid-border:#bfdbfe;--nav-bg:#fff;--nav-border:#e2e8f0;--nav-active:#07c;--radius:14px;--shadow:0 1px 4px #00000014, 0 4px 16px #0000000a;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#f1f5f9;--text-muted:#94a3b8;--primary:#38bdf8;--primary-fg:#0f172a;--primary-hover:#7dd3fc;--danger:#f87171;--danger-fg:#0f172a;--ok-bg:#052e16;--ok-border:#14532d;--ok-text:#86efac;--cl-bg:#1c1507;--cl-border:#713f12;--acid-bg:#0c1a2e;--acid-border:#1e3a5f;--nav-bg:#1e293b;--nav-border:#334155;--nav-active:#38bdf8}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font);-webkit-text-size-adjust:100%;background:var(--bg);color:var(--text);font-size:16px}body{min-height:100dvh}.app{flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex}.main-content{padding-bottom:calc(80px + env(safe-area-inset-bottom));flex:1;overflow-y:auto}.page{flex-direction:column;gap:16px;padding:20px 16px;display:flex}.page-header{padding:4px 0 8px}.page-title{letter-spacing:-.02em;color:var(--text);font-size:1.75rem;font-weight:700}.page-subtitle{color:var(--text-muted);margin-top:2px;font-size:.95rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:14px;padding:20px;display:flex}.card-title{color:var(--text);font-size:1rem;font-weight:600}.body-selector{grid-template-columns:1fr 1fr;gap:12px;display:grid}.body-btn{appearance:none;border:2px solid var(--border);background:var(--surface);border-radius:var(--radius);color:var(--text);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:18px 0;font-size:1.1rem;font-weight:600;transition:border-color .15s,background .15s,color .15s;display:flex}.body-btn.active{border-color:var(--primary);background:var(--primary);color:var(--primary-fg)}.range-hints{gap:8px;display:flex}.hint{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 8px;display:flex}.hint-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:.7rem;font-weight:600}.hint-value{color:var(--primary);font-size:.85rem;font-weight:700}.field{flex-direction:column;gap:6px;display:flex}.field-label{color:var(--text-muted);font-size:.875rem;font-weight:500}.field-input{appearance:none;background:var(--bg);border:1.5px solid var(--border);width:100%;color:var(--text);-moz-appearance:textfield;border-radius:10px;padding:14px 16px;font-size:1.4rem;font-weight:600;transition:border-color .15s}.field-input::-webkit-inner-spin-button{opacity:1;height:28px}.field-input::-webkit-outer-spin-button{opacity:1;height:28px}.field-input:focus{border-color:var(--primary);outline:none}.field-input::placeholder{color:var(--text-muted);font-size:1.1rem;font-weight:400}.optional{color:var(--text-muted);font-size:.75rem;font-weight:400}.btn-row{gap:10px;margin-top:4px;display:flex}.btn{appearance:none;cursor:pointer;border:none;border-radius:10px;padding:15px 24px;font-size:1rem;font-weight:600;transition:background .15s,opacity .15s}.btn-primary{background:var(--primary);color:var(--primary-fg);flex:1}.btn-primary:active{opacity:.85}.btn-ghost{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}.btn-danger{background:var(--danger);color:var(--danger-fg)}.results{flex-direction:column;gap:16px;display:flex}.result-ok{background:var(--ok-bg);border-color:var(--ok-border);flex-direction:row;align-items:center;gap:14px}.result-ok-icon{flex-shrink:0;font-size:1.5rem}.result-ok-text{color:var(--ok-text);font-size:.9rem}.result-card{gap:6px}.result-chlorine{background:var(--cl-bg);border-color:var(--cl-border)}.result-acid{background:var(--acid-bg);border-color:var(--acid-border)}.result-header{align-items:center;gap:8px;margin-bottom:4px;display:flex}.result-icon{font-size:1.2rem}.result-name{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:.85rem;font-weight:600}.result-dose{align-items:baseline;gap:8px;display:flex}.dose-value{letter-spacing:-.03em;color:var(--text);font-size:3rem;font-weight:800;line-height:1}.dose-unit{color:var(--text-muted);font-size:1.3rem;font-weight:600}.dose-also{color:var(--text-muted);margin-top:-2px;font-size:.85rem}.result-label{color:var(--text);font-size:.9rem;font-weight:600}.result-detail{color:var(--text-muted);font-size:.8rem}.safety-card{background:#fff7ed;border-color:#fed7aa}@media (prefers-color-scheme:dark){.safety-card{background:#1c0a00;border-color:#7c2d12}}.safety-title{font-size:.9rem;font-weight:700}.safety-list{flex-direction:column;gap:6px;list-style:none;display:flex}.safety-list li:before{content:"• ";color:var(--primary);font-weight:700}.safety-list li{color:var(--text);font-size:.875rem}.param-card{gap:10px}.range-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.range-item{background:var(--bg);border-radius:8px;flex-direction:column;gap:2px;padding:10px;display:flex}.range-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:.7rem;font-weight:600}.range-value{color:var(--primary);font-size:.9rem;font-weight:700}.param-desc{color:var(--text-muted);font-size:.875rem;line-height:1.5}.param-chem{color:var(--text-muted);font-size:.8rem}.ordered-list{flex-direction:column;gap:8px;padding-left:20px;display:flex}.ordered-list li{font-size:.9rem}.chem-info{flex-direction:column;gap:16px;display:flex}.chem-row{align-items:flex-start;gap:14px;display:flex}.chem-icon{flex-shrink:0;margin-top:2px;font-size:1.4rem}.chem-note{color:var(--text-muted);margin-top:2px;font-size:.8rem;line-height:1.4}.muted{color:var(--text-muted);font-size:.875rem}.bottom-nav{background:var(--nav-bg);border-top:1px solid var(--nav-border);width:100%;max-width:480px;padding-bottom:env(safe-area-inset-bottom);z-index:100;grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-btn{appearance:none;cursor:pointer;color:var(--text-muted);background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:10px 0;transition:color .15s;display:flex}.nav-btn.active{color:var(--nav-active)}.nav-icon{font-size:1.4rem}.nav-label{text-transform:uppercase;letter-spacing:.04em;font-size:.65rem;font-weight:600}.body-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}