.calc-page { margin: 35px 0 70px; }
.calc-equipment { margin: 0 0 26px; padding: 18px; border: 1px solid #dbe3d3; border-radius: 10px; background: #f7f9f3; min-width: 0; }
.calc-equipment legend { padding: 0 6px; font-size: 13px; font-weight: 650; }
.calc-equipment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc-equipment label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 8px; }
.calc-equipment select { width: 100%; min-width: 0; border: 1px solid #cdd8c4; background: #fff; padding: 11px 9px; border-radius: 6px; color: #263526; font: inherit; font-size: 13px; }
.calc-equipment select:focus-visible { outline: 3px solid #95b945; outline-offset: 2px; }
.calc-scale-detail { padding: 16px; background: #24332b; border: 1px solid #465947; border-radius: 10px; margin: 0 0 22px; color: #c5d1c9; }
.calc-scale-detail > strong { display: block; font-size: 12px; margin-bottom: 12px; }
.calc-scale-detail svg { display: block; width: 100%; }
.calc-scale-detail svg text { font-size: 13px; font-family: inherit; stroke: none; }
.calc-scale-detail svg .calc-detail-midpoint { color: #b8f300; stroke-width: 2; font-weight: 750; }
.calc-scale-detail p { font-size: 12px; line-height: 1.6; margin: 10px 0 8px; }
.calc-scale-detail small { display: block; font-size: 11px; line-height: 1.6; color: #9eafa1; }
@media(max-width: 520px) { .calc-equipment-fields { grid-template-columns: 1fr; } }
.calc-save-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.calc-save-actions .btn { flex: 1; justify-content: center; }
.calc-save-actions .btn.outline { color: #eff5e9; border-color: #6b7c6d; }
.calc-save-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.calc-save-status { color: #bccbbd; font-size: 12px; line-height: 1.65; min-height: 40px; margin: 14px 0 0; }
.cheat-sheet { margin: 32px 0; padding: 28px; border: 1px solid #d4dec8; border-top: 4px solid #b8f300; background: #fff; border-radius: 14px; }
.cheat-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cheat-heading h2 { font-size: clamp(23px, 3vw, 32px); margin: 9px 0 11px; }
.cheat-heading p { color: #5b695d; font-size: 14px; max-width: 650px; margin: 0; }
.cheat-heading > .btn, .cheat-heading > a { flex-shrink: 0; }
.cheat-empty { margin-top: 22px; background: #f4f6ef; padding: 21px; font-size: 14px; color: #54614f; border-radius: 8px; }
.cheat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.cheat-card { padding: 22px; background: #f6f8f2; border: 1px solid #dee6d5; border-radius: 10px; min-width: 0; }
.cheat-card-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cheat-card-title h3 { font-size: 20px; margin: 0; }
.cheat-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 21px 0; }
.cheat-metrics dt { color: #61715a; font-size: 11px; }
.cheat-metrics dd { margin: 2px 0 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.cheat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 17px; }
.cheat-actions .remove { margin-left: auto; font-size: 12px; }
.cheat-warning { padding: 12px 15px; background: #fff2d7; color: #6d5320; border-radius: 6px; font-size: 13px; }
.cheat-cart-entries { margin-top: 24px; border-top: 1px solid #e1e7da; }
.cheat-cart-entry { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 19px 0; border-bottom: 1px solid #e1e7da; }
.cheat-cart-entry > div:first-child { display: grid; gap: 3px; }
.cheat-cart-entry > div:last-child { text-align: right; }
.cheat-cart-entry p { margin: 5px 0; }
.cheat-ready, .cheat-missing { display: block; font-size: 12px; margin-bottom: 4px; }
.cheat-ready { color: #4b641e; }
.cheat-missing { color: #806432; }
.cheat-footnote { margin: 20px 0 0; }
.cheat-download-status { margin: 10px 0 0; font-size: 13px; color: #486037; }
@media(max-width: 760px) {
  .cheat-heading { align-items: start; flex-direction: column; gap: 15px; }
  .cheat-sheet { padding: 22px 18px; }
  .cheat-cards { grid-template-columns: 1fr; }
  .calc-save-actions { flex-direction: column; }
}
@media(max-width: 420px) {
  .cheat-cart-entry { flex-direction: column; gap: 12px; }
  .cheat-cart-entry > div:last-child { text-align: left; }
}
.calc-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 35px; }
.calc-intro h1 { margin: 13px 0 15px; font-size: clamp(34px, 4vw, 53px); line-height: 1.1; }
.calc-intro h1 > span { color: #718d28; }
.calc-intro p { max-width: 620px; color: #5c685f; font-size: 16px; margin: 0; }
.calc-mode { white-space: nowrap; font-size: 11px; letter-spacing: .025em; padding: 9px 13px; border: 1px solid #d1dace; border-radius: 30px; color: #536649; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.calc-input-panel { padding: 30px 32px 20px; background: #fff; border: 1px solid #dce2d7; border-radius: 18px; }
.calc-panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.calc-panel-title h2 { font-size: 22px; margin: 0; }
.calc-reset { border: 0; background: #f0f3eb; border-radius: 6px; font: inherit; font-size: 12px; padding: 7px 12px; color: #55644b; cursor: pointer; }
.calc-reset:hover { background: #e3ebd7; }
.calc-capacity { border: 0; padding: 0; margin: 0 0 27px; min-width: 0; }
.calc-capacity legend, .calc-field > label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; letter-spacing: 0; color: #25322a; margin-bottom: 11px; }
.calc-step { color: #708154; font-size: 10px; letter-spacing: .025em; border: 1px solid #dbe3d2; background: #f6f8f2; border-radius: 4px; width: 24px; height: 24px; display: inline-grid; place-items: center; flex-shrink: 0; }
.calc-capacity-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.calc-capacity-options label { position: relative; cursor: pointer; min-width: 0; }
.calc-capacity-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.calc-capacity-options input + span { padding: 14px 7px 12px; border: 1px solid #dbe2d5; background: #fbfcf9; border-radius: 9px; display: flex; align-items: center; flex-direction: column; color: #627459; }
.calc-capacity-options input:checked + span { background: #eff7df; border-color: #86ab3b; color: #283c15; box-shadow: inset 0 0 0 1px #86ab3b; }
.calc-capacity-options input:focus-visible + span { outline: 3px solid #638723; outline-offset: 3px; }
.calc-capacity-options svg { width: 90%; max-width: 95px; height: 24px; margin-bottom: 10px; }
.calc-capacity-options strong { color: #263620; font-size: 16px; font-weight: 650; }
.calc-capacity-options small { font-size: 10px; margin-top: 1px; }
.calc-page .calc-help { font-size: 11px; line-height: 1.65; color: #67725f; margin: 8px 0 0; }
.calc-field { margin-bottom: 23px; }
.calc-optional { font-size: 10px; font-weight: 400; color: #657360; margin-left: auto; }
.calc-field input, .calc-field select { width: 100%; min-height: 49px; border: 1px solid #cbd5c4; border-radius: 8px; background: #fff; color: #17271c; padding: 12px 14px; font: inherit; font-size: 14px; box-sizing: border-box; }
.calc-field input:focus, .calc-field select:focus { outline: 2px solid #8daf4d; outline-offset: 2px; border-color: #648837; }
.calc-field input[aria-invalid="true"] { border-color: #a54c3f; }
.calc-input-unit { position: relative; }
.calc-input-unit input { padding-right: 55px; }
.calc-input-unit > span { position: absolute; right: 17px; top: 13px; font-size: 13px; font-weight: 550; color: #637357; pointer-events: none; }
.calc-target-row { display: grid; grid-template-columns: minmax(0,1fr) 89px; gap: 9px; }
.calc-field-error { display: block; font-size: 11px; line-height: 1.6; color: #963e30; margin-top: 5px; }
.calc-field-error:empty { display: none; }
.calc-privacy { border-top: 1px solid #e6ebdf; padding-top: 18px; color: #6b7962; font-size: 10px; line-height: 1.6; margin: 26px 0 0; }
.calc-privacy > span { font-size: 15px; margin-right: 4px; }
.calc-output-panel { background: #111c19; color: #f4f8f0; padding: 30px 34px 28px; border: 1px solid #2e4235; border-radius: 18px; overflow: hidden; position: sticky; top: 101px; }
.calc-result-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.calc-result-top .eyebrow { color: #abb9a6; font-size: 10px; }
.calc-state { font-size: 10px; padding: 5px 9px; background: #26312b; color: #bcc8b5; border-radius: 30px; }
.calc-state.is-ready { color: #c3f267; background: #2d421f; }
.calc-state.is-alert { color: #f4d29b; background: #473825; }
.calc-output-panel h2 { font-size: 25px; letter-spacing: -.025em; margin: 22px 0 21px; }
.calc-main-number { margin: 0 0 12px; }
.calc-main-number > span { display: block; font-size: clamp(38px,5vw,65px); font-weight: 650; letter-spacing: -.045em; line-height: 1.05; overflow-wrap: anywhere; }
.calc-main-number small { display: block; color: #9fac9b; font-size: 12px; margin-top: 10px; }
.calc-main-number.calc-pending > span { color: #66805d; }
.calc-mark-result { display: flex; align-items: center; gap: 13px; margin-top: 21px; }
.calc-mark-result > strong { color: #b8f300; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.calc-mark-result > span { font-size: 12px; color: #d8e3d1; }
.calc-mark-result small { display: block; font-size: 10px; color: #9ead98; margin-top: 2px; }
.calc-syringe { display: block; width: calc(100% + 18px); max-width: none; height: auto; margin: 3px -9px 0; overflow: visible; }
.calc-scale-marks text { font-family: inherit; font-size: 13px; font-weight: 500; stroke: none; }
.calc-fit { margin: -1px 0 24px; font-size: 11px; color: #bccbae; }
.calc-fit > span { color: #b8f300; margin-right: 6px; }
.calc-result-message { padding: 16px 18px; border: 1px solid #324b35; border-radius: 9px; background: #1c2a20; margin: 6px 0 22px; }
.calc-result-message strong { font-size: 13px; font-weight: 550; color: #e2eddb; }
.calc-result-message p { font-size: 12px; line-height: 1.7; margin: 6px 0 0; color: #aebfa4; }
.calc-result-message.calc-alert { border-color: #796448; background: #302c22; }
.calc-result-message.calc-alert strong { color: #f8dba5; }
.calc-result-message.calc-alert p { color: #deccb0; }
.calc-results-grid, .calc-empty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 23px; border-top: 1px solid #35412f; }
.calc-results-grid > div { min-width: 0; }
.calc-results-grid span, .calc-empty-grid > span { font-size: 11px; color: #a1b195; }
.calc-results-grid strong, .calc-empty-grid b { display: block; font-size: 26px; font-weight: 550; letter-spacing: -.025em; line-height: 1.35; margin-top: 9px; overflow-wrap: anywhere; }
.calc-results-grid strong small { font-size: 12px; letter-spacing: 0; font-weight: 400; }
.calc-results-grid p { margin: 6px 0 0; font-size: 10px; color: #9bab8f; line-height: 1.65; }
.calc-rounding { margin-top: 24px; border-left: 2px solid #617945; padding-left: 12px; }
.calc-rounding strong { font-size: 11px; color: #c5d0b8; font-weight: 600; }
.calc-rounding p { font-size: 10px; color: #a4b296; line-height: 1.7; margin: 5px 0 0; }
.calc-working { margin-top: 22px; padding-top: 15px; border-top: 1px solid #35412f; }
.calc-working summary { font-size: 11px; color: #c4d2b8; cursor: pointer; }
.calc-working > div { margin-top: 15px; }
.calc-working p { font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; color: #c1d0b4; margin: 8px 0; }
.calc-scope { display: flex; align-items: start; gap: 13px; background: #eaf0e1; border: 1px solid #d8e2cb; border-radius: 10px; padding: 18px 23px; margin-top: 24px; color: #526348; }
.calc-scope > span { width: 19px; height: 19px; border: 1px solid #81986a; border-radius: 50%; text-align: center; line-height: 18px; font-family: Georgia,serif; font-size: 12px; flex-shrink: 0; margin-top: 3px; }
.calc-scope p { margin: 0; font-size: 12px; line-height: 1.8; }
.calc-method { border-top: 1px solid #d7dfce; border-bottom: 1px solid #d7dfce; margin-top: 37px; }
.calc-method > summary { cursor: pointer; padding: 23px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.calc-method > summary::-webkit-details-marker { display: none; }
.calc-method > summary > :last-child { color: #6c8647; font-size: 26px; font-weight: 400; }
.calc-method[open] > summary > :last-child { transform: rotate(45deg); }
.calc-method-body { padding-bottom: 28px; }
.calc-method-body > p { color: #5d6b53; font-size: 13px; max-width: 990px; line-height: 1.8; margin: 17px 0; }
.calc-equations { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.calc-equations > div { background: #fff; padding: 18px; border: 1px solid #dfe6d7; border-radius: 8px; }
.calc-equations span { font-size: 10px; font-weight: 650; color: #697f4d; }
.calc-equations p { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: #2e4025; }
.calc-sources { margin-top: 23px; border-top: 1px solid #d7dfce; padding-top: 20px; font-size: 12px; color: #5d6b53; }
.calc-sources strong { font-weight: 650; color: #3d5132; }
.calc-sources ul { margin: 12px 0 0; padding-left: 18px; }
.calc-sources li { margin: 8px 0; line-height: 1.8; }
.calc-sources a { text-decoration: underline; text-underline-offset: 3px; color: #3f611d; }
.calc-primer { margin: 0 0 30px; border: 1px solid #cfddc0; border-left: 5px solid #a8df00; border-radius: 14px; background: #fff; overflow: hidden; }
.calc-primer > summary { padding: 25px 30px; font-size: clamp(22px, 3vw, 29px); line-height: 1.3; }
.calc-primer > summary small { display: block; margin-bottom: 7px; font-size: 10px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: #657a4b; font-weight: 650; }
.calc-primer > .calc-method-body { padding: 0 30px 24px; }
.calc-primer .calc-primer-lead { margin-top: 0; font-size: 15px; color: #344831; }
.calc-unit-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 22px 0; }
.calc-unit-cards article { padding: 22px; background: #f4f7ee; border: 1px solid #e0e7d6; border-radius: 10px; }
.calc-unit-symbol { display: block; font-size: 27px; font-weight: 750; letter-spacing: -.035em; color: #476322; }
.calc-unit-cards h3 { font-size: 16px; margin: 9px 0 12px; line-height: 1.45; letter-spacing: -.02em; }
.calc-unit-cards p { margin: 0 0 14px; font-size: 13px; color: #54614e; line-height: 1.7; }
.calc-unit-cards small { display: block; font-size: 11px; color: #486025; font-weight: 650; line-height: 1.6; }
.calc-primer-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; padding: 20px; border: 1px solid #dce5d2; border-radius: 10px; }
.calc-primer-flow strong, .calc-primer-flow span { display: block; text-align: center; line-height: 1.6; }
.calc-primer-flow strong { font-size: 12px; }
.calc-primer-flow span { font-size: 10px; color: #697b58; margin-top: 4px; }
.calc-primer-flow > b { color: #66872f; font-size: 22px; }
.calc-technical { border-top: 1px solid #e0e7d6; margin-top: 20px; padding-top: 17px; }
.calc-technical > summary { font-size: 13px; font-weight: 650; color: #506d32; cursor: pointer; }
.calc-technical .calc-equations { margin-top: 18px; }
.calc-technical > p { color: #5d6b53; font-size: 12px; line-height: 1.8; margin: 17px 0; }
.calc-input-step { border-top: 1px solid #e4eadc; margin-top: 22px; padding-top: 22px; }
.calc-input-step h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; line-height: 1.5; letter-spacing: -.02em; margin: 0 0 21px; }
.calc-input-step .calc-step { flex-shrink: 0; margin-right: 0; }
.calc-key-help { padding: 10px 12px; border-left: 2px solid #a8ce67; background: #f5f8ef; border-radius: 0 5px 5px 0; }
.calc-field[hidden] { display: none; }
@media (max-width: 760px) { .calc-primer > summary { padding: 22px; } .calc-primer > .calc-method-body { padding: 0 22px 20px; } .calc-unit-cards { grid-template-columns: 1fr; gap: 10px; } .calc-unit-cards article { padding: 18px; } .calc-primer-flow { grid-template-columns: 1fr; gap: 5px; } .calc-primer-flow > b { text-align: center; } .calc-primer-flow strong { font-size: 14px; } .calc-primer-flow span { font-size: 12px; } }
@media (max-width: 950px) { .calc-input-panel, .calc-output-panel { padding: 25px; } .calc-layout { gap: 18px; } .calc-equations { grid-template-columns: repeat(2,minmax(0,1fr)); } .calc-mode { display: none; } }
@media (max-width: 760px) { .calc-layout { grid-template-columns: 1fr; } .calc-output-panel { position: static; } .calc-intro { margin-bottom: 26px; } .calc-page { margin-top: 25px; } .calc-intro h1 { font-size: clamp(32px,7vw,45px); } .calc-intro p { font-size: 14px; } .calc-main-number > span { font-size: 53px; } .calc-syringe { max-width: 580px; margin-left: auto; margin-right: auto; width: 100%; } }
@media (max-width: 420px) { .calc-input-panel, .calc-output-panel { padding: 23px 19px; border-radius: 13px; } .calc-capacity-options { gap: 6px; } .calc-capacity-options strong { font-size: 14px; } .calc-capacity-options small { font-size: 9px; } .calc-field > label, .calc-capacity legend { font-size: 12px; } .calc-optional { font-size: 9px; } .calc-scope { padding: 17px; } .calc-scope p { font-size: 11px; } .calc-main-number > span { font-size: 46px; } .calc-results-grid { gap: 15px; } .calc-results-grid strong { font-size: 24px; } .calc-equations { grid-template-columns: 1fr; } .calc-method > summary { font-size: 17px; } }