:root{--htcc-primary:#0072ce;--htcc-primary-deep:#005fa3;--htcc-secondary:#00a86b;--htcc-secondary-light:#e6f0ff;--htcc-danger:#e74c3c;--htcc-bg:#f7f9fb;--htcc-white:#ffffff;--htcc-text:#26282c;--htcc-border:#d8dce2;--htcc-radius:8px;--htcc-spacing:1.5rem;--htcc-gap:0.6rem;--htcc-warn:#e67e22;--htcc-ok:#00a86b;--htcc-ok-bg:#e8f8f2;--htcc-warn-bg:#fff5ec;--htcc-bad-bg:#fdf0ee;--htcc-text-muted:#6b7280;--htcc-card-shadow:0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px var(--htcc-border);--htcc-radius-lg:10px;--htcc-transition:0.18s ease}.htcc-app{display:flex;flex-direction:column}.htcc-app button{cursor:pointer}.htcc-header{background:var(--htcc-white);border-bottom:1px solid var(--htcc-border);padding:1rem var(--htcc-spacing);position:sticky;top:0;z-index:100}.htcc-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.htcc-logo{display:flex;align-items:center;gap:.75rem}.htcc-logo-icon{width:40px;height:40px;flex-shrink:0}.htcc-logo-title{font-size:1.1rem!important;font-weight:700;color:var(--htcc-text)!important;line-height:1.2}.htcc-logo-sub{font-size:0.78rem!important;color:var(--htcc-text-muted)!important;font-weight:400}.htcc-ideal-legend{display:flex;gap:.75rem;flex-wrap:wrap}.htcc-legend-item{font-size:0.73rem!important;font-weight:500;padding:.25rem .6rem;border-radius:20px}.htcc-legend-ok{background:var(--htcc-ok-bg);color:var(--htcc-ok)!important}.htcc-legend-warn{background:var(--htcc-warn-bg);color:var(--htcc-warn)!important}.htcc-legend-bad{background:var(--htcc-bad-bg);color:var(--htcc-danger)!important}.htcc-main{flex:1;margin-top:1.2rem}.htcc-grid-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}.htcc-card{background:var(--htcc-white);border-radius:var(--htcc-radius-lg);box-shadow:var(--htcc-card-shadow);overflow:hidden;transition:box-shadow var(--htcc-transition);margin-block:1rem}.htcc-card:focus-within{box-shadow:0 2px 12px rgb(0 114 206 / .1),0 0 0 1px var(--htcc-border)}.htcc-card-header{display:flex;align-items:flex-start;gap:.75rem;padding:1.1rem 1.25rem .9rem;border-bottom:1px solid var(--htcc-border);background:linear-gradient(135deg,#fafbfc 0%,var(--htcc-white) 100%)}.htcc-step-badge{width:28px;height:28px;border-radius:50%;background:var(--htcc-primary);color:white!important;font-size:0.8rem!important;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.htcc-card-title{font-size:1rem!important;font-weight:600;color:var(--htcc-text)!important;line-height:1.3}.htcc-card-subtitle{font-size:0.78rem!important;color:var(--htcc-text-muted)!important;font-weight:400;margin-top:.1rem}.htcc-card-body{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:1.05rem}.htcc-field-group{display:flex;flex-direction:column;gap:.35rem}.htcc-field-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.htcc-label{font-size:0.85rem!important;font-weight:500;color:var(--htcc-text)!important;display:flex;align-items:center;gap:.35rem}.htcc-unit{font-weight:400;color:var(--htcc-text-muted)!important;font-size:0.8rem!important}.htcc-optional{font-weight:400;color:var(--htcc-text-muted)!important;font-size:0.75rem!important;font-style:italic}.htcc-ideal-badge{font-size:0.71rem!important;font-weight:500;padding:.15rem .5rem;background:var(--htcc-secondary-light);color:var(--htcc-primary)!important;border-radius:20px;white-space:nowrap}.htcc-hint{font-size:0.75rem!important;color:var(--htcc-text-muted)!important;line-height:1.4}.htcc-input{width:100%;padding:.55rem .8rem;border:1px solid var(--htcc-border)!important;border-radius:var(--htcc-radius);font-size:0.95rem!important;color:var(--htcc-text)!important;background:var(--htcc-white);transition:border-color var(--htcc-transition),box-shadow var(--htcc-transition);appearance:none;-webkit-appearance:none}.htcc-input:focus{outline:none;border-color:var(--htcc-primary)!important;box-shadow:0 0 0 3px rgb(0 114 206 / .12)}.htcc-input:invalid:not(:placeholder-shown){border-color:var(--htcc-danger)!important}.htcc-input.htcc-input-sm{padding:.45rem .65rem;font-size:0.88rem!important}.htcc-input-unit-wrap{position:relative;display:flex;align-items:center}.htcc-input-unit-wrap .htcc-input{padding-right:3rem}.htcc-input-unit{position:absolute;right:.75rem;font-size:0.78rem!important;font-weight:500;color:var(--htcc-text-muted)!important;pointer-events:none;user-select:none}.htcc-status-bar{height:4px;border-radius:2px;background:var(--htcc-border);overflow:hidden;position:relative;transition:all var(--htcc-transition)}.htcc-status-bar[data-status]::after{content:"";display:block;position:absolute;left:0;top:0;height:100%;transition:width 0.4s ease,background 0.3s ease}.htcc-status-bar[data-status="ok"]::after{background:var(--htcc-ok);width:var(--fill,60%)}.htcc-status-bar[data-status="warn"]::after{background:var(--htcc-warn);width:var(--fill,80%)}.htcc-status-bar[data-status="bad"]::after{background:var(--htcc-danger);width:var(--fill,100%)}.htcc-status-bar .htcc-status-label{display:none}.htcc-field-with-status .htcc-status-text{font-size:0.73rem!important;margin-top:.15rem}.htcc-toggle-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .85rem;background:var(--htcc-secondary-light)!important;border:1px solid #c5d8f5!important;border-radius:var(--htcc-radius);font-size:0.83rem!important;color:var(--htcc-primary)!important;font-weight:500;transition:background var(--htcc-transition),transform var(--htcc-transition);align-self:flex-start}.htcc-toggle-btn:hover{background:#d9e9ff!important}.htcc-toggle-btn:active{transform:scale(.97)}.htcc-panel{background:var(--htcc-bg);border:1px solid var(--htcc-border)!important;border-radius:var(--htcc-radius);padding:1rem;display:flex;flex-direction:column;gap:.8rem;animation:htcc-fadeIn 0.2s ease}.htcc-volcalc-tabs{display:flex;gap:.4rem;background:var(--htcc-white);border:1px solid var(--htcc-border)!important;border-radius:var(--htcc-radius);padding:3px}.htcc-tab{flex:1;padding:.35rem;border:none!important;border-radius:3px;font-size:0.8rem!important;font-weight:500;background:#fff0;color:var(--htcc-text-muted)!important;transition:all var(--htcc-transition)}.htcc-tab.htcc-tab-active{background:var(--htcc-primary);color:white!important}.htcc-tab:hover:not(.htcc-tab-active){background:var(--htcc-secondary-light);color:var(--htcc-primary)!important}.htcc-inline-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.6rem}.htcc-btn-secondary{padding:.5rem 1rem;background:var(--htcc-white)!important;border:1px solid var(--htcc-border)!important;border-radius:var(--htcc-radius);font-size:0.82rem!important;font-weight:500;color:var(--htcc-primary)!important;transition:background var(--htcc-transition);align-self:flex-start}.htcc-btn-secondary:hover{background:var(--htcc-secondary-light)!important}.htcc-vol-result{background:var(--htcc-ok-bg)!important;border:1px solid #b8ead5!important;border-radius:var(--htcc-radius);padding:.6rem .85rem;font-size:0.85rem!important;color:var(--htcc-ok)!important;font-weight:500}.htcc-temp-wrap{display:flex;gap:.5rem;align-items:center}.htcc-temp-wrap .htcc-input-unit-wrap{flex:1}.htcc-unit-toggle{display:flex;border:1px solid var(--htcc-border)!important;border-radius:var(--htcc-radius);overflow:hidden;flex-shrink:0}.htcc-unit-btn{padding:.4rem .6rem;border:none!important;background:#fff0;font-size:0.78rem!important;font-weight:500;color:var(--htcc-text-muted)!important;transition:all var(--htcc-transition)}.htcc-unit-btn.htcc-unit-btn-active{background:var(--htcc-primary);color:white!important}.htcc-radio-group{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.htcc-radio-card{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .85rem;border:1px solid var(--htcc-border)!important;border-radius:var(--htcc-radius);cursor:pointer;transition:border-color var(--htcc-transition),background var(--htcc-transition)}.htcc-radio-card:hover{border-color:var(--htcc-primary)!important;background:var(--htcc-secondary-light)}.htcc-radio-card input[type="radio"]{margin-top:2px;accent-color:var(--htcc-primary);flex-shrink:0}.htcc-radio-card input[type="radio"]:checked~.htcc-radio-content{color:var(--htcc-primary)!important}.htcc-radio-card:has(input:checked){border-color:var(--htcc-primary)!important;background:var(--htcc-secondary-light)}.htcc-radio-content{display:flex;flex-direction:column;gap:.1rem}.htcc-radio-content strong{font-size:0.84rem!important;font-weight:600;color:var(--htcc-text)!important;line-height:1.2}.htcc-radio-content span{font-size:0.72rem!important;color:var(--htcc-text-muted)!important;line-height:1.3}.htcc-info-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--htcc-border);color:var(--htcc-text-muted)!important;font-size:0.65rem!important;font-weight:700;cursor:help;flex-shrink:0;transition:background var(--htcc-transition);user-select:none}.htcc-info-tip:hover{background:var(--htcc-primary);color:white!important}.htcc-tooltip{position:fixed;z-index:9999;max-width:260px;background:#1a1d23;color:white!important;font-size:0.78rem!important;line-height:1.5;padding:.55rem .8rem;border-radius:6px;pointer-events:none;box-shadow:0 4px 16px rgb(0 0 0 / .2);animation:htcc-fadeIn 0.15s ease}.htcc-tooltip::before{content:"";position:absolute;bottom:-5px;left:12px;width:10px;height:10px;background:#1a1d23;transform:rotate(45deg);border-radius:2px}.htcc-btn-calculate{width:100%;padding:.9rem 1.5rem;background:var(--htcc-primary);color:white!important;border:none!important;border-radius:var(--htcc-radius-lg);font-size:1.02rem!important;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:background var(--htcc-transition),transform var(--htcc-transition),box-shadow var(--htcc-transition);box-shadow:0 2px 8px rgb(0 114 206 / .3);letter-spacing:.01em}.htcc-btn-calculate:hover{background:var(--htcc-primary-deep);box-shadow:0 4px 14px rgb(0 114 206 / .4);transform:translateY(-1px)}.htcc-btn-calculate:active{transform:translateY(0);box-shadow:0 1px 4px rgb(0 114 206 / .2)}.htcc-btn-calculate.htcc-calculating{opacity:.75;cursor:wait}.htcc-col-results{display:flex;flex-direction:column;gap:1rem}.htcc-placeholder{background:var(--htcc-white);border-radius:var(--htcc-radius-lg);box-shadow:var(--htcc-card-shadow);padding:3rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}.htcc-placeholder-icon{opacity:.5}.htcc-placeholder-title{font-size:1.05rem!important;font-weight:600;color:var(--htcc-text)!important}.htcc-placeholder-text{font-size:0.85rem!important;color:var(--htcc-text-muted)!important;line-height:1.6;max-width:340px}.htcc-results-panel{display:flex;flex-direction:column;gap:1rem;margin-block:1rem;animation:htcc-fadeIn 0.3s ease}.htcc-result-card{background:var(--htcc-white);border-radius:var(--htcc-radius-lg);box-shadow:var(--htcc-card-shadow);padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}.htcc-result-card-title{font-size:0.95rem!important;font-weight:600;color:var(--htcc-text)!important}.htcc-result-card-sub{font-size:0.78rem!important;color:var(--htcc-text-muted)!important;margin-top:-.4rem}.htcc-lsi-card{border-top:3px solid var(--htcc-primary)}.htcc-lsi-card.htcc-lsi-corrosive{border-top-color:var(--htcc-danger)}.htcc-lsi-card.htcc-lsi-scaling{border-top-color:var(--htcc-warn)}.htcc-lsi-card.htcc-lsi-ok{border-top-color:var(--htcc-ok)}.htcc-lsi-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.htcc-lsi-value-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}.htcc-lsi-value{font-size:2rem!important;font-weight:700;color:var(--htcc-primary)!important;line-height:1;font-variant-numeric:tabular-nums}.htcc-lsi-badge{font-size:0.72rem!important;font-weight:600;padding:.2rem .6rem;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}.htcc-lsi-badge.htcc-lsi-badge-ok{background:var(--htcc-ok-bg);color:var(--htcc-ok)!important}.htcc-lsi-badge.htcc-lsi-badge-corrosive{background:var(--htcc-bad-bg);color:var(--htcc-danger)!important}.htcc-lsi-badge.htcc-lsi-badge-scaling{background:var(--htcc-warn-bg);color:var(--htcc-warn)!important}.htcc-lsi-gauge-wrap{display:flex;flex-direction:column;gap:.3rem}.htcc-lsi-gauge{height:12px;border-radius:6px;background:linear-gradient(to right,#e74c3c 0%,#e67e22 25%,#00a86b 45%,#00a86b 55%,#e67e22 75%,#e74c3c 100%);position:relative;overflow:visible}.htcc-lsi-gauge::after{content:"";position:absolute;top:-4px;width:20px;height:20px;background:var(--htcc-white);border:3px solid var(--htcc-primary);border-radius:50%;transform:translateX(-50%);left:var(--htcc-gauge-pos,50%);transition:left 0.5s ease,border-color 0.3s ease;box-shadow:0 1px 4px rgb(0 0 0 / .2);z-index:1}.htcc-lsi-gauge-labels{display:flex;justify-content:space-between;font-size:0.68rem!important;color:var(--htcc-text-muted)!important}.htcc-lsi-explanation{font-size:0.82rem!important;color:var(--htcc-text-muted)!important;line-height:1.5;padding:.6rem .85rem;background:var(--htcc-bg);border-radius:var(--htcc-radius);border-left:3px solid var(--htcc-primary)!important}.htcc-param-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.htcc-param-cell{padding:.65rem .85rem;border-radius:var(--htcc-radius);border:1px solid var(--htcc-border)!important;display:flex;flex-direction:column;gap:.25rem;transition:border-color var(--htcc-transition)}.htcc-param-cell.htcc-param-ok{border-color:#b8ead5!important;background:var(--htcc-ok-bg)}.htcc-param-cell.htcc-param-warn{border-color:#f5d5b0!important;background:var(--htcc-warn-bg)}.htcc-param-cell.htcc-param-bad{border-color:#f5c2bc!important;background:var(--htcc-bad-bg)}.htcc-param-name{font-size:0.72rem!important;font-weight:500;color:var(--htcc-text-muted)!important;text-transform:uppercase;letter-spacing:.04em}.htcc-param-value{font-size:1.15rem!important;font-weight:700;color:var(--htcc-text)!important;font-variant-numeric:tabular-nums}.htcc-param-range{font-size:0.68rem!important;color:var(--htcc-text-muted)!important}.htcc-param-status-icon{font-size:0.78rem!important;font-weight:600}.htcc-param-ok .htcc-param-status-icon{color:var(--htcc-ok)!important}.htcc-param-warn .htcc-param-status-icon{color:var(--htcc-warn)!important}.htcc-param-bad .htcc-param-status-icon{color:var(--htcc-danger)!important}.htcc-dosage-list{display:flex;flex-direction:column;gap:.7rem}.htcc-dosage-item{display:flex;gap:.85rem;align-items:flex-start;padding:.8rem .9rem;border-radius:var(--htcc-radius);border:1px solid var(--htcc-border)!important;background:var(--htcc-bg)}.htcc-dosage-item-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1rem!important;flex-shrink:0}.htcc-dosage-body{flex:1;min-width:0}.htcc-dosage-chemical{font-size:0.85rem!important;font-weight:600;color:var(--htcc-text)!important;line-height:1.2}.htcc-dosage-amount{font-size:1.05rem!important;font-weight:700;margin:.1rem 0;line-height:1.1}.htcc-dosage-note{font-size:0.73rem!important;color:var(--htcc-text-muted)!important;line-height:1.4;margin-top:.15rem}.htcc-dosage-item.htcc-dir-up .htcc-dosage-item-icon{background:#e8f8f2}.htcc-dosage-item.htcc-dir-down .htcc-dosage-item-icon{background:var(--htcc-bad-bg)}.htcc-dosage-item.htcc-dir-sanitize .htcc-dosage-item-icon{background:var(--htcc-secondary-light)}.htcc-dosage-item.htcc-dir-up .htcc-dosage-amount{color:var(--htcc-ok)!important}.htcc-dosage-item.htcc-dir-down .htcc-dosage-amount{color:var(--htcc-danger)!important}.htcc-dosage-item.htcc-dir-sanitize .htcc-dosage-amount{color:var(--htcc-primary)!important}.htcc-all-good{display:flex;align-items:center;gap:.75rem;padding:1rem;background:var(--htcc-ok-bg);border:1px solid #b8ead5!important;border-radius:var(--htcc-radius)}.htcc-all-good p{font-size:0.85rem!important;color:var(--htcc-ok)!important;font-weight:500}.htcc-order-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0}.htcc-order-list li{display:flex;align-items:center;gap:.65rem;padding:.55rem .75rem;font-size:0.83rem!important;border-radius:var(--htcc-radius);border:1px solid var(--htcc-border)!important;background:var(--htcc-bg)}.htcc-order-num{width:22px;height:22px;border-radius:50%;background:var(--htcc-primary);color:white!important;font-size:0.7rem!important;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.htcc-order-wait{font-size:0.7rem!important;color:var(--htcc-text-muted)!important;margin-left:auto;white-space:nowrap}.htcc-safety-card{border-left:3px solid var(--htcc-warn)!important}.htcc-safety-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;padding:0}.htcc-safety-list li{font-size:0.8rem!important;color:var(--htcc-text)!important;padding-left:1.1rem;position:relative;line-height:1.4}.htcc-safety-list li::before{content:"•";position:absolute;left:0;color:var(--htcc-warn)!important;font-weight:700}.htcc-action-buttons{display:flex;flex-direction:column;gap:.6rem}.htcc-btn-action{flex:1;min-width:130px;padding:.65rem 1rem;border-radius:var(--htcc-radius);font-size:0.82rem!important;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all var(--htcc-transition)}.htcc-btn-action:hover{transform:translateY(-1px)}.htcc-btn-pdf{background:var(--htcc-primary)!important;color:var(--htcc-white)!important;border:none!important}.htcc-btn-copy{background:var(--htcc-ok)!important;color:var(--htcc-white)!important;border:1px solid var(--htcc-ok)!important}.htcc-btn-reset{background:var(--htcc-danger)!important;color:var(--htcc-white)!important;border:1px solid var(--htcc-danger)!important}.htcc-modal-overlay{position:fixed;inset:0;background:rgb(26 29 35 / .55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(2px);animation:htcc-fadeIn 0.15s ease}.htcc-modal{background:var(--htcc-white);border-radius:var(--htcc-radius-lg);padding:1.75rem;max-width:380px;width:100%;box-shadow:0 8px 40px rgb(0 0 0 / .18);animation:htcc-slideUp 0.2s ease}.htcc-modal-title{font-size:1.05rem!important;font-weight:700;color:var(--htcc-text)!important;margin-bottom:.5rem}.htcc-modal-body{font-size:0.85rem!important;color:var(--htcc-text-muted)!important;line-height:1.5;margin-bottom:1.25rem}.htcc-modal-actions{display:flex;gap:.6rem;justify-content:flex-end}.htcc-btn-danger{padding:.55rem 1.1rem;background:var(--htcc-danger)!important;color:white!important;border:none!important;border-radius:var(--htcc-radius);font-size:0.85rem!important;font-weight:600;transition:background var(--htcc-transition)}.htcc-btn-danger:hover{background:#c0392b}.htcc-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:#1a1d23;color:white!important;padding:.7rem 1.25rem;border-radius:6px;font-size:0.85rem!important;font-weight:500;z-index:2000;box-shadow:0 4px 16px rgb(0 0 0 / .2);animation:htcc-toastIn 0.25s ease,htcc-toastOut 0.3s ease 2.5s forwards;white-space:nowrap}.htcc-toast.htcc-toast-ok{background:#1a6840}.htcc-toast.htcc-toast-err{background:#8b1a1a}.htcc-input.htcc-input-error{border-color:var(--htcc-danger)!important;background:#fff8f7}.htcc-field-error{font-size:0.73rem!important;color:var(--htcc-danger)!important;display:flex;align-items:center;gap:.25rem}@keyframes htcc-fadeIn{from{opacity:0}to{opacity:1}}@keyframes htcc-slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes htcc-toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes htcc-toastOut{from{opacity:1}to{opacity:0;pointer-events:none}}@keyframes htcc-pulse{0%,100%{opacity:1}50%{opacity:.7}}@media (max-width:900px){.htcc-grid-layout{grid-template-columns:1fr}.htcc-col-results{order:2}.htcc-col-inputs{order:1}}@media (max-width:680px){.htcc-header{padding:.75rem .85rem}.htcc-ideal-legend{display:none}.htcc-logo-title{font-size:0.95rem!important}.htcc-card-body{padding:.9rem 1rem}.htcc-card-header{padding:.85rem 1rem .75rem}.htcc-radio-group{grid-template-columns:1fr 1fr}.htcc-param-grid{grid-template-columns:1fr 1fr}.htcc-action-buttons{flex-direction:column}.htcc-btn-action{flex:none;width:100%}.htcc-lsi-value{font-size:1.7rem!important}}@media (max-width:420px){.htcc-radio-group{grid-template-columns:1fr}.htcc-param-grid{grid-template-columns:1fr 1fr}.htcc-temp-wrap{flex-direction:column;align-items:flex-start}.htcc-temp-wrap .htcc-input-unit-wrap{width:100%}.htcc-logo-sub{display:none}}@media print{.htcc-action-buttons,.htcc-btn-calculate,.htcc-header{display:none!important}.htcc-card,.htcc-result-card{box-shadow:none;border:1px solid var(--htcc-border)!important}}[hidden]{display:none!important}