:root{--primary-color:#2c3e50;--secondary-color:#3498db;--background-color:#f5f6fa;--border-color:#ddd;--text-color:#333}body{background-color:var(--background-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;margin:0;padding:0}header{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:1rem 0}header h1{color:var(--primary-color);font-size:1.5rem;margin:0;padding:0 1rem;text-align:center}.main-nav{background:var(--primary-color);margin-top:1rem;padding:.5rem;text-align:center}.main-nav a{border-radius:4px;color:#fff;display:inline-block;margin:0 .25rem;padding:.5rem 1.5rem;text-decoration:none}.main-nav a.active,.main-nav a:hover{background:hsla(0,0%,100%,.2)}.calculator-container{background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin:1rem auto;max-width:800px;padding:1.5rem}.button-group{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.option-btn{background:#fff;border:2px solid var(--border-color);border-radius:6px;color:var(--primary-color);cursor:pointer;font-size:.95rem;font-weight:500;min-width:80px;padding:.6rem 1.2rem;text-align:center;transition:all .2s ease}.option-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.option-btn:hover:not(.active){background:rgba(44,62,80,.05);border-color:var(--primary-color)}.input-group{margin-bottom:1.5rem}.input-group label{color:var(--primary-color);display:block;font-weight:500;margin-bottom:.5rem}.syringe-visual{border:2px solid var(--border-color);border-radius:8px;box-shadow:inset 0 2px 4px rgba(0,0,0,.05);height:100px;margin:1.5rem 0;padding:20px 40px}.syringe-scale,.syringe-visual{background:#fff;position:relative;width:100%}.syringe-scale{align-items:flex-end;border-top:2px solid var(--border-color);display:flex;height:60px}.syringe-scale:before{background:var(--primary-color);content:"";height:2px}.scale-marks,.syringe-scale:before{bottom:0;left:0;position:absolute;right:0}.scale-marks{display:flex;height:40px;justify-content:space-between}.scale-mark{background:var(--primary-color);height:10px;position:relative;width:1px}.scale-mark.major{height:20px}.scale-mark.major:after{bottom:-25px;color:var(--primary-color);content:attr(data-value);font-size:12px;left:50%;position:absolute;transform:translateX(-50%)}.syringe-marker{background:var(--secondary-color);border-radius:2px;bottom:0;height:40px;position:absolute;transition:left .3s ease;width:3px}.syringe-marker:after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--secondary-color);content:"";left:50%;position:absolute;top:-5px;transform:translateX(-50%)}.result-display{background:#f8f9fa;border:1px solid var(--border-color);border-radius:8px;margin-top:2rem;padding:1.5rem;text-align:center}.dose-instruction{color:var(--primary-color);font-size:1.2rem;font-weight:500;margin:1rem 0}.dose-instruction span{color:var(--secondary-color);font-weight:600}footer{color:#666;margin-top:2rem;padding:1rem;text-align:center}.footer-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.footer-nav a{color:var(--secondary-color);text-decoration:none;white-space:nowrap}@media (max-width:768px){footer{padding:1rem .5rem}footer p{font-size:14px;margin:.5rem 0}.footer-nav{gap:.5rem}.footer-nav a{font-size:14px;padding:.25rem .5rem}}@media (max-width:480px){.footer-nav{flex-direction:row;gap:1rem;justify-content:center}}@media (max-width:768px){.calculator-container{margin:.5rem;padding:1rem}.dose-options,.syringe-options,.vial-options,.water-options{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}.custom-input-wrapper,.other-text{align-items:center;display:flex;grid-column:1/-1;justify-content:center;width:100%}.custom-input-wrapper{margin:0 auto;max-width:200px}.dose-btn,.syringe-btn,.vial-btn,.water-btn{font-size:16px;padding:10px;width:100%}.custom-input{font-size:16px;max-width:120px;padding:8px;width:100%}.input-group label{font-size:16px;margin-bottom:10px}.scale-container{margin:1rem auto;padding:1rem}.result-text{font-size:14px;padding:0 10px}}@media (max-width:480px){.dose-options,.syringe-options,.vial-options,.water-options{grid-template-columns:1fr}header h1{font-size:1.2rem}.main-nav a{font-size:14px;padding:.5rem 1rem}}.dose-options button,.syringe-options button,.vial-options button,.water-options button{composes:option-btn}.input-with-unit{align-items:center;display:flex;gap:.5rem}.input-with-unit input{width:100px}.input-with-unit input,.input-with-unit select{border:1px solid var(--border-color);border-radius:4px;font-size:1rem;padding:.5rem}.input-with-unit select{background:#fff}textarea{border:1px solid var(--border-color);border-radius:4px;font-size:1rem;height:100px;margin:.5rem 0;padding:.5rem;resize:vertical;width:100%}.calculate-btn{background:var(--secondary-color);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;margin:0;padding:.8rem 1.5rem;transition:opacity .3s ease}.calculate-btn:hover{opacity:.9}.reset-btn{background:#e74c3c;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;padding:.8rem 1.5rem;transition:opacity .3s ease}.reset-btn:hover{opacity:.9}.calculator-buttons{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.scale-container{margin:2rem auto;max-width:600px;padding:2rem}.ruler{height:100px;margin:20px 0;position:relative;width:100%}.ruler-line{background:#000;height:2px;top:50%}#ruler-marks,.ruler-line{left:0;position:absolute;right:0}#ruler-marks{bottom:0;top:0}#ruler-marks .mark{background:#000;bottom:50%;position:absolute;width:1px}#ruler-marks .mark.major{height:20px}#ruler-marks .mark.minor{height:10px}#ruler-marks .mark.major:after{bottom:-25px;content:attr(data-value);font-size:14px;left:50%;position:absolute;transform:translateX(-50%)}.marker{height:40px;top:10%;width:2px}.marker,.marker:after{background:#007bff;position:absolute;transform:translateX(-50%)}.marker:after{border-radius:50%;content:"";height:8px;left:50%;top:-5px;width:8px}.result-text{color:#333;font-size:16px;margin-top:2rem;text-align:center}.result-text strong{color:#007bff;font-weight:500}.dose-btn,.syringe-btn,.vial-btn,.water-btn{min-width:60px;padding:6px 12px}.dose-btn.active,.syringe-btn.active,.vial-btn.active,.water-btn.active{background-color:var(--secondary-color);border-color:var(--secondary-color);color:#fff}.dose-btn:hover,.syringe-btn:hover,.vial-btn:hover,.water-btn:hover{background-color:#f8f9fa}.dose-btn.active:hover,.syringe-btn.active:hover,.vial-btn.active:hover,.water-btn.active:hover{background-color:#2980b9}.custom-input-wrapper{display:inline-flex}.custom-input{padding:6px 8px;width:60px}.custom-input:focus{border-color:var(--secondary-color);box-shadow:0 0 0 2px rgba(52,152,219,.2);outline:none}.unit{color:var(--text-color);font-size:14px}.dose-options,.vial-options,.water-options{align-items:center;display:flex;flex-wrap:nowrap;gap:8px}.other-text{color:var(--text-color);font-size:14px;margin:0 4px;white-space:nowrap}.custom-input-wrapper.active .custom-input{background-color:#fff;border-color:var(--secondary-color)}.dose-options,.syringe-options,.vial-options,.water-options{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.dose-btn,.syringe-btn,.vial-btn,.water-btn{background-color:#fff;border:1px solid var(--border-color);border-radius:4px;color:var(--primary-color);cursor:pointer;flex:1 1 auto;font-size:14px;margin:0;min-width:80px;padding:8px 12px;text-align:center;transition:all .3s ease}.custom-input-wrapper{align-items:center;display:flex;flex:1 1 auto;gap:4px;max-width:160px;min-width:120px}.custom-input{border:1px solid var(--border-color);border-radius:4px;font-size:14px;padding:8px;width:100%}@media (max-width:768px){.calculator-container{margin:.5rem;padding:1rem}.input-group{margin-bottom:20px}.input-group label{display:block;font-size:16px;margin-bottom:10px}.dose-options,.syringe-options,.vial-options,.water-options{flex-direction:column;width:100%}.dose-btn,.syringe-btn,.vial-btn,.water-btn{font-size:16px;margin:0;min-width:100%;padding:12px;width:100%}.other-text{margin:8px 0;text-align:center;width:100%}.custom-input-wrapper{justify-content:center;max-width:100%;width:100%}.custom-input{font-size:16px;max-width:200px;padding:12px}.scale-container{margin:1rem 0;padding:1rem}.result-text{font-size:14px;margin-top:1rem;padding:0 10px}}@media (max-width:480px){header h1{font-size:1.2rem;padding:.5rem}.main-nav{flex-direction:column;gap:8px}.main-nav a{font-size:14px;padding:10px;width:100%}.custom-input{max-width:150px}}