:root {
  color-scheme: light;
  --ink: #20322e;
  --muted: #62736e;
  --paper: #f3f6f1;
  --panel: #ffffff;
  --line: #dce6df;
  --green: #246b57;
  --green-dark: #184f40;
  --mint: #e9f4ed;
  --amber: #8d4b00;
  --amber-bg: #fff3d7;
  --red: #86669d;
  --shadow: 0 16px 48px rgba(31, 58, 48, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}
body.gate-open { overflow: hidden; }
body.weight-guard-open { overflow: hidden; }

button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.topbar {
  min-height: 68px;
  padding: 12px max(24px, calc((100% - 1000px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: .96rem;
  font-weight: 750;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--green);
  border-radius: 11px 11px 11px 4px;
  font-family: Georgia, serif;
  font-size: 1.15rem;
}

.phase-tag {
  padding: 6px 10px;
  color: var(--green-dark);
  background: var(--mint);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 750;
  white-space: nowrap;
}

.page-shell { width: min(100% - 40px, 880px); margin: 0 auto; padding: 42px 0 56px; }
.intro { max-width: 700px; margin: 0 0 24px; }
.eyebrow, .gate-eyebrow { margin: 0 0 7px; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
.intro h1 { max-width: 680px; margin-bottom: 9px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.07; letter-spacing: -.055em; }
.intro-copy { max-width: 640px; margin: 0; color: var(--muted); font-size: 1.02rem; }
.language-note { max-width: 660px; padding-top: 12px; margin: 0; color: var(--muted); font-size: .79rem; }
.language-note span[lang="es"] { display: inline-block; margin-top: 3px; }

.wip-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px 12px;
  padding: 14px 16px;
  margin: 0 0 12px;
  color: #4d3b62;
  background: #f5f0fa;
  border: 1px solid #ded1e9;
  border-radius: 14px;
}
.wip-label { padding: 4px 8px; color: #45345a; background: #e9def2; border-radius: 999px; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.wip-copy p { margin: 0; font-size: .84rem; }
.wip-copy p + p { margin-top: 7px; color: #625270; }
.gate-wip { padding: 10px 12px; margin-bottom: 12px; }
.gate-wip .wip-copy p { font-size: .76rem; }
.language-note span[lang="es"], .wip-copy p[lang="es"] { font-style: normal; }

.safety-banner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  margin: 0 0 12px;
  color: #58350b;
  background: var(--amber-bg);
  border: 1px solid #efdba7;
  border-radius: 14px;
}
.safety-banner p { margin: 0; font-size: .9rem; }
.safety-banner p + p { margin-top: 8px; }
.safety-banner strong { font-weight: 800; }
.safety-icon { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; color: white; background: var(--amber); border-radius: 50%; font-size: .85rem; font-weight: 900; }

.full-safety { margin: 0 0 22px; padding: 0 16px; color: #694710; background: #fffaf0; border: 1px solid #efe1bd; border-radius: 12px; }
.full-safety summary { padding: 12px 0; color: #6f470c; font-size: .86rem; font-weight: 750; cursor: pointer; }
.warning-language-toggle { padding: 0 0 9px; color: var(--green-dark); background: transparent; border: 0; font-size: .79rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.warning-language-toggle:focus-visible { outline: 3px solid #8fbea9; outline-offset: 2px; }
.gate-language-toggle { align-self: flex-start; padding-bottom: 8px; }
.warning-copy { overflow-wrap: anywhere; font-size: .83rem; line-height: 1.55; }
.warning-copy p { margin: 0 0 .75rem; white-space: pre-wrap; }
.warning-section + .warning-section { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #ead8b9; }
.warning-section-title { margin: 0 0 .6rem; color: #58350b; font-size: .95rem; font-weight: 800; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.warning-points { margin: 0 0 .75rem; padding-inline-start: 1.7rem; }
.warning-points li { padding-inline-start: .2rem; white-space: pre-wrap; }
.warning-points li + li { margin-top: .65rem; }
.warning-points li::marker { font-weight: 800; }
.full-safety .warning-copy { max-height: 460px; overflow: auto; padding: 0 0 15px; margin: 0; }

.calculator-panel, .results { padding: clamp(20px, 4vw, 34px); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.panel-heading, .results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-heading { margin-bottom: 19px; }
.panel-heading h2, .results-heading h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.035em; }
.required-note { padding-top: 17px; color: var(--muted); font-size: .77rem; }
.required-mark, .required-note span { color: var(--red); font-weight: 800; }
.optional-note { margin-left: 5px; color: var(--muted); font-size: .76rem; font-weight: 500; }

.form-section { min-width: 0; padding: 0; margin: 0; border: 0; }
.form-section + .form-section { padding-top: 24px; margin-top: 25px; border-top: 1px solid var(--line); }
.form-section legend { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 17px; font-size: 1.05rem; font-weight: 800; }
.step-number { width: 28px; height: 28px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 50%; font-size: .8rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 18px; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font-size: .85rem; font-weight: 730; }
.field input, .field select, .joined-input select {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  background: white;
  border: 1px solid #cbd8d0;
  border-radius: 10px;
  outline: none;
}
.field input::placeholder { color: #87958f; }
.field input:focus, .field select:focus, .joined-input select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,107,87,.13); }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: .76rem; }
.field-error { margin: 6px 0 0; color: var(--red); font-size: .8rem; font-weight: 650; }

.joined-input { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(145px, 205px); }
.joined-input input { border-radius: 10px 0 0 10px; }
.joined-input select { border-left: 0; border-radius: 0 10px 10px 0; }
.weight-input { grid-template-columns: minmax(100px, 1fr) 138px; }
.joined-input.package-amount-input { grid-template-columns: minmax(90px, 1fr) 82px; }
.joined-input.package-amount-input input { border-radius: 10px 0 0 10px; }
.joined-input.package-amount-input select {
  border-left: 0;
  border-top: 1px solid #cbd8d0;
  border-radius: 0 10px 10px 0;
}
.package-fixed-unit {
  display: grid;
  place-items: center;
  min-height: 46px;
  color: var(--ink);
  background: #f5f8f6;
  border: 1px solid #cbd8d0;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  font-weight: 700;
}
.custom-volume { max-width: 320px; margin-top: 12px; }

.autocomplete-wrap { position: relative; }
.suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  padding: 5px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(32,50,46,.16);
}
.suggestions button { display: block; width: 100%; padding: 9px 10px; color: var(--ink); text-align: left; background: transparent; border: 0; border-radius: 7px; font-size: .85rem; }
.suggestions button:hover, .suggestions button[aria-selected="true"] { background: var(--mint); }
.suggestion-count { padding: 7px 10px 5px; color: var(--muted); font-size: .72rem; }

.scope-note { display: grid; gap: 3px; padding: 13px 15px; margin-top: 24px; color: #385148; background: #f0f6f2; border-left: 3px solid var(--green); border-radius: 6px 11px 11px 6px; font-size: .8rem; }
.scope-note strong { font-size: .81rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 18px; margin-top: 23px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 48px; padding: 12px 18px; color: white; background: var(--green); border: 0; border-radius: 10px; font-size: .88rem; font-weight: 780; transition: background .15s ease, transform .15s ease; }
.primary-button:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); }
.primary-button:focus-visible, .text-button:focus-visible { outline: 3px solid #8fbea9; outline-offset: 2px; }
.primary-button:disabled { cursor: not-allowed; opacity: .55; }
.action-note { margin: 0; color: var(--muted); font-size: .77rem; }

.results { margin-top: 26px; }
.results-heading { align-items: flex-end; margin-bottom: 16px; }
.results-heading h2 { margin-bottom: 4px; }
.results-summary { margin: 0; color: var(--muted); font-size: .85rem; }
.text-button { padding: 8px 0; color: var(--green-dark); background: transparent; border: 0; font-size: .83rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.entered-details { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 17px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.detail-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: #425a51; background: #f2f6f3; border: 1px solid #e1eae4; border-radius: 999px; font-size: .76rem; }
.detail-chip strong { color: var(--ink); font-weight: 750; }
.results-weight-disclaimer, .unverified-weight-warning { padding: 12px 14px; color: #6b351d; background: #fff1df; border: 1px solid #e6b879; border-left: 4px solid #b86c20; border-radius: 9px; font-size: .82rem; line-height: 1.5; }
.results-weight-disclaimer { margin: 0 0 16px; }
.results-weight-disclaimer strong { display: block; margin-bottom: 3px; }
.results-product-notice { color: var(--green-dark); background: #eef7f2; border-color: #d6e9dd; border-left-color: var(--green-dark); }
.unverified-weight-warning { margin: 0 0 12px; font-weight: 700; }
.result-list { display: grid; gap: 15px; }
.result-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.result-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 17px 12px; background: #fbfcfb; }
.result-card-head h3 { margin: 0 0 5px; font-size: 1rem; line-height: 1.35; }
.table-tag { color: var(--muted); font-size: .72rem; }
.species-pill, .route-pill { flex: 0 0 auto; max-width: 45%; padding: 5px 9px; color: var(--green-dark); background: var(--mint); border-radius: 999px; font-size: .72rem; font-weight: 760; text-align: center; }
.result-body { padding: 16px 17px 17px; }
.source-dose-label { margin: 0 0 4px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.source-dose { margin: 0 0 12px; font-size: 1rem; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.result-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0 0 14px; }
.meta-item { min-width: 0; }
.meta-item dt { margin-bottom: 3px; color: var(--muted); font-size: .69rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.meta-item dd { margin: 0; font-size: .83rem; overflow-wrap: anywhere; }
.comments { padding: 11px 12px; margin: 0 0 13px; color: #44574f; background: #f6f8f6; border-radius: 9px; font-size: .8rem; }
.comments strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: .73rem; }
.comments p { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.comments .comment-source-issue { margin-bottom: 9px; color: #79401c; font-weight: 700; }
.source-row-issue { padding: 9px 11px; margin: 0 0 12px; color: #79401c; background: #fff3df; border-left: 3px solid #d99d3e; border-radius: 6px; font-size: .79rem; font-weight: 750; }
.comment-source { margin-top: 9px; padding-top: 8px; border-top: 1px solid #d9e4dc; }
.comment-source summary { width: fit-content; color: var(--green-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.comment-source .comment-original { margin-top: 8px; }
.calculation { padding: 15px; margin-top: 14px; background: #eef7f2; border: 1px solid #d6e9dd; border-radius: 12px; }
.injection-calculation { border-color: #9fc7ae; }
.injection-professional { padding: 12px 14px; margin: 0 0 13px; color: #663b16; background: #fff1da; border-left: 4px solid #d88b26; border-radius: 8px; font-size: .85rem; font-weight: 760; line-height: 1.5; }
.injection-amount { margin: 12px 0; }
.injection-route-note { margin: 12px 0; color: #42584f; font-size: .8rem; line-height: 1.5; }
.calculation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.calculation-heading h4 { margin: 0; font-size: .9rem; }
.weight-share { color: var(--muted); font-size: .74rem; text-align: right; }
.calculation-explanation { margin: 0 0 12px; color: #42584f; font-size: .78rem; }
.dose-equations { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.dose-equation { min-width: 0; padding: 10px; background: white; border: 1px solid #dce9e0; border-radius: 9px; }
.dose-equation-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: .67rem; font-weight: 750; text-transform: uppercase; }
.dose-equation strong { display: block; color: var(--green-dark); font-size: 1.04rem; overflow-wrap: anywhere; }
.dose-equation small { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.calculation-note { margin: 10px 0 0; color: #5b6e65; font-size: .72rem; }
.product-conversion { padding-top: 14px; margin-top: 14px; border-top: 1px solid #d6e9dd; }
.product-conversion h5 { margin: 0 0 6px; font-size: .85rem; }
.product-intro { margin: 0 0 10px; color: #42584f; font-size: .78rem; }
.product-equations { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.product-amount { display: grid; gap: 4px; padding: 12px; background: #fff; border: 1px solid #dce9e0; border-radius: 9px; }
.product-amount strong { color: var(--green-dark); font-size: 1.05rem; }
.product-amount small { color: var(--muted); font-size: .72rem; }
.small-volume-note { padding: 8px 10px; margin: 9px 0 0; color: #604a27; background: #fff6e6; border-radius: 7px; font-size: .73rem; }
.preparation-math { padding: clamp(16px, 3vw, 23px); margin-top: 21px; background: linear-gradient(145deg, #f9fffb, #edf8f3); border: 2px solid #8cbea3; border-radius: 15px; box-shadow: 0 6px 18px rgba(27, 84, 55, .09); }
.preparation-math summary { color: var(--green-dark); cursor: pointer; }
.preparation-heading { display: flex; align-items: center; gap: 12px; }
.preparation-heading h6 { margin: 0; font-size: clamp(1rem, 2.4vw, 1.16rem); font-weight: 800; line-height: 1.35; }
.preparation-icon { flex: 0 0 auto; width: 31px; height: 31px; color: var(--green-dark); stroke-width: 1.9; }
.preparation-math summary:focus-visible { outline: 3px solid #8fbea9; outline-offset: 3px; }
.preparation-warning { padding: 13px 15px; margin: 17px 0 14px; color: #604a27; background: #fff6e6; border-left: 4px solid #d99d3e; border-radius: 8px; font-size: .82rem; line-height: 1.5; }
.preparation-specific-note, .package-context { margin: 8px 0 12px; color: #42584f; font-size: .79rem; line-height: 1.5; }
.mixture-list { display: grid; gap: 8px; }
.mixture-option { display: grid; gap: 5px; min-width: 0; padding: 13px 15px; background: #fff; border: 1px solid #cfe2d5; border-radius: 10px; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.mixture-option strong { color: var(--ink); }
.mixture-volume { color: var(--green-dark); font-weight: 750; }
.mixture-caution { color: #8d4b00; }
.preparation-sources { margin: 11px 0 0; color: var(--muted); font-size: .7rem; }
.preparation-sources a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.softgel-mixing-note { padding: 13px 15px; margin: 16px 0 0; color: #604a27; background: #fff6e6; border-left: 4px solid #d99d3e; border-radius: 8px; font-size: .82rem; line-height: 1.5; }
.application-guidance { padding: 15px 17px; margin: 14px 0; background: #f1faf5; border: 1px solid #c9e3d3; border-radius: 11px; }
.application-guidance h4 { margin: 0 0 9px; color: var(--green-dark); font-size: .95rem; }
.application-guidance p { margin: 6px 0; font-size: .8rem; line-height: 1.5; }
.application-guidance .application-hygiene { padding-top: 8px; border-top: 1px solid #d4e7da; }
.not-calculated { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-top: 12px; color: #5c563f; background: #fff8e8; border: 1px solid #f1e5c8; border-radius: 9px; font-size: .76rem; }
.source-reference { padding-top: 11px; margin: 14px 0 0; color: var(--muted); border-top: 1px solid #edf1ee; font-size: .71rem; }
.no-results { padding: 24px; color: var(--muted); text-align: center; background: #f7f9f7; border: 1px dashed #cbd8d0; border-radius: 13px; }
.no-results strong { display: block; margin-bottom: 5px; color: var(--ink); }
.page-footer { max-width: 720px; padding: 20px 4px 0; margin: 0 auto; color: var(--muted); font-size: .73rem; text-align: center; }
.page-footer p { margin: 0; }

.warning-gate { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(22, 34, 30, .78); backdrop-filter: blur(4px); }
.gate-panel { display: flex; flex-direction: column; width: min(100%, 800px); max-height: min(92vh, 940px); overflow-y: auto; padding: clamp(20px, 4vw, 34px); background: #fffdf8; border: 1px solid #f0d89e; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.gate-eyebrow { color: var(--amber); }
.gate-panel h1 { margin: 0 0 8px; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.16; letter-spacing: -.04em; }
.gate-lede { margin: 0 0 14px; color: #594b34; font-size: .86rem; }
.gate-warning-scroll { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 14px; color: #533d1e; background: #fff7e6; border: 1px solid #f0dfbd; border-radius: 10px; font-size: .79rem; }
.acknowledgement { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0 12px; color: var(--ink); font-size: .83rem; font-weight: 700; cursor: pointer; }
.acknowledgement input { flex: 0 0 auto; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--green); }
.gate-button { align-self: flex-start; }

.weight-guard-dialog {
  position: fixed;
  top: var(--weight-guard-center-y, 50%);
  left: 50%;
  width: min(540px, calc(100% - 28px));
  max-height: min(calc(var(--weight-guard-visible-height, 100vh) - 24px), calc(100vh - 24px));
  padding: clamp(18px, 4vw, 28px);
  margin: 0;
  overflow: auto;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid #eac889;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%);
}
.weight-guard-dialog::backdrop { background: rgba(22, 34, 30, .78); backdrop-filter: blur(4px); }
.weight-guard-eyebrow { margin: 0 0 5px; color: var(--amber); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.weight-guard-dialog h2 { margin: 0 0 16px; font-size: clamp(1.45rem, 4vw, 1.9rem); line-height: 1.2; }
.weight-guard-dialog p { overflow-wrap: anywhere; }
.weight-guard-range { margin: 0 0 10px; font-size: 1.02rem; font-weight: 750; }
.weight-guard-entered { margin: 0 0 14px; padding: 10px 12px; color: #6a2f24; background: #fff0e9; border: 1px solid #e8c3b3; border-radius: 9px; font-weight: 750; }
.weight-guard-info .weight-guard-entered { color: var(--green-dark); background: #eef7f2; border-color: #d6e9dd; }
#weightGuardExplanation { margin: 0 0 10px; font-size: .86rem; }
.weight-guard-coverage { margin: 0 0 8px; color: var(--muted); font-size: .76rem; }
.weight-guard-source { display: inline-block; margin: 0 14px 18px 0; color: var(--green-dark); font-size: .78rem; font-weight: 700; text-underline-offset: 3px; }
.weight-guard-source[hidden] { display: none; }
.weight-range-unavailable { color: #8a5213; font-weight: 700; }
.weight-guard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.weight-guard-actions button { min-height: 44px; padding: 10px 14px; border-radius: 9px; font-size: .85rem; font-weight: 750; }
.weight-guard-change { color: var(--green-dark); background: white; border: 1px solid var(--green); }
.weight-guard-info .weight-guard-change { color: white; background: var(--green); }
.weight-guard-change:hover { filter: brightness(.94); }
.weight-guard-actions button:focus-visible { outline: 3px solid #8fbea9; outline-offset: 2px; }

@media (max-width: 640px) {
  .wip-banner { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wip-label { justify-self: start; }
  .topbar { padding-inline: 18px; }
  .brand { font-size: .82rem; }
  .phase-tag { font-size: .68rem; }
  .page-shell { width: min(100% - 28px, 880px); padding-top: 30px; }
  .field-grid { grid-template-columns: 1fr; gap: 17px; }
  .field-wide { grid-column: auto; }
  .panel-heading h2, .results-heading h2 { font-size: 1.3rem; }
  .results-heading { align-items: flex-start; }
  .result-card-head { padding: 14px 13px 11px; }
  .result-body { padding: 14px 13px; }
  .result-meta { gap: 10px; }
  .dose-equations { grid-template-columns: 1fr; }
  .dose-equation { display: grid; grid-template-columns: minmax(80px, .8fr) 1fr; column-gap: 9px; align-items: baseline; }
  .dose-equation-label { grid-row: span 2; margin: 0; }
  .dose-equation small { margin-top: 0; }
  .weight-share { max-width: 45%; }
}

@media (max-width: 390px) {
  .topbar { align-items: flex-start; }
  .brand { max-width: 185px; line-height: 1.2; }
  .phase-tag { white-space: normal; text-align: center; }
  .page-shell { width: min(100% - 12px, 880px); }
  .calculator-panel, .results { padding: 12px; border-radius: 14px; }
  .result-card-head { flex-direction: column; gap: 5px; padding: 11px; }
  .species-pill { max-width: 100%; }
  .result-body { padding: 10px; }
  .result-meta { grid-template-columns: 1fr; }
  .calculation { padding: 10px; }
  .calculation-heading { display: block; }
  .weight-share { display: block; max-width: none; margin-top: 3px; text-align: left; }
  .dose-equation { display: block; }
  .dose-equation-label { display: block; margin-bottom: 4px; }
  .preparation-math { padding: 13px; }
  .preparation-icon { width: 27px; height: 27px; }
  .joined-input, .weight-input { grid-template-columns: 1fr; }
  .joined-input input { border-radius: 10px 10px 0 0; }
  .joined-input select { border-left: 1px solid #cbd8d0; border-top: 0; border-radius: 0 0 10px 10px; }
  .form-actions .primary-button { width: 100%; }
  .results-heading { display: block; }
  .text-button { margin-top: 8px; }
  .weight-guard-actions { flex-direction: column; }
  .weight-guard-actions button { width: 100%; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #403b39;
  --muted: #665f6c;
  --paper: #f6f2f8;
  --panel: #fffcff;
  --line: #d9cadd;
  --green: #246b57;
  --green-dark: #184f40;
  --mint: #e9f2f0;
  --mint-border: #d1e2dd;
  --mint-hover: #d0e5da;
  --amber: #94600b;
  --amber-bg: #fff3d7;
  --warning-ink: #523a1e;
  --warning-border: #efd89c;
  --red: #86669d;
  --focus: #a78abd;
  --focus-halo: rgb(167 138 189 / .19);
  --wip-bg: #f1edf8;
  --wip-border: #d8cfe9;
  --highlight-lilac: #e5d7ef;
  --aqua-bg: #e9f2f0;
  --butter-bg: #f7f0df;
  --shadow: 0 16px 48px rgba(54, 58, 91, 0.08);
}

:root[data-theme="light"] .topbar { background: rgb(255 252 255 / .94); }
:root[data-theme="light"] .wip-banner,
:root[data-theme="light"] .full-safety { color: var(--ink); }
:root[data-theme="light"] .safety-banner {
  color: var(--warning-ink);
  background: var(--amber-bg);
  border-color: var(--warning-border);
}
:root[data-theme="light"] .wip-banner { background: var(--wip-bg); border-color: var(--wip-border); }
:root[data-theme="light"] .full-safety { background: #fffaf0; border-color: var(--warning-border); }
:root[data-theme="light"] .wip-label { color: #68608a; background: var(--highlight-lilac); }
:root[data-theme="light"] .wip-copy p + p { color: var(--muted); }
:root[data-theme="light"] .full-safety summary,
:root[data-theme="light"] .warning-section-title,
:root[data-theme="light"] .warning-language-toggle { color: var(--amber); }
:root[data-theme="light"] .warning-section + .warning-section { border-top-color: var(--warning-border); }
:root[data-theme="light"] .warning-language-toggle:focus-visible,
:root[data-theme="light"] .primary-button:focus-visible,
:root[data-theme="light"] .text-button:focus-visible,
:root[data-theme="light"] .preparation-math summary:focus-visible,
:root[data-theme="light"] .weight-guard-actions button:focus-visible { outline-color: var(--focus); }
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .joined-input select {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}
:root[data-theme="light"] .field input::placeholder { color: var(--muted); }
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field select:focus,
:root[data-theme="light"] .joined-input select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
:root[data-theme="light"] .joined-input.package-amount-input select,
:root[data-theme="light"] .package-fixed-unit { border-color: var(--line); }
:root[data-theme="light"] .package-fixed-unit,
:root[data-theme="light"] .suggestions,
:root[data-theme="light"] .dose-equation,
:root[data-theme="light"] .product-amount,
:root[data-theme="light"] .mixture-option {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}
:root[data-theme="light"] .suggestions { box-shadow: 0 12px 28px rgba(54, 58, 91, .16); }
:root[data-theme="light"] .suggestions button:hover,
:root[data-theme="light"] .suggestions button[aria-selected="true"] { background: var(--mint-hover); }
:root[data-theme="light"] .scope-note,
:root[data-theme="light"] .application-guidance {
  color: var(--ink);
  background: var(--aqua-bg);
  border-color: var(--mint-border);
}
:root[data-theme="light"] .detail-chip {
  color: #655e7d;
  background: var(--wip-bg);
  border-color: var(--wip-border);
}
:root[data-theme="light"] .comments {
  color: var(--ink);
  background: var(--wip-bg);
  border-color: var(--wip-border);
}
:root[data-theme="light"] .calculation {
  color: var(--ink);
  background: var(--wip-bg);
  border-color: var(--wip-border);
}
:root[data-theme="light"] .not-calculated {
  color: #665333;
  background: var(--butter-bg);
  border-color: #eadbb9;
}
:root[data-theme="light"] .results-weight-disclaimer,
:root[data-theme="light"] .unverified-weight-warning,
:root[data-theme="light"] .injection-professional,
:root[data-theme="light"] .small-volume-note,
:root[data-theme="light"] .preparation-warning,
:root[data-theme="light"] .softgel-mixing-note,
:root[data-theme="light"] .source-row-issue,
:root[data-theme="light"] .weight-guard-entered,
:root[data-theme="light"] .gate-warning-scroll {
  color: var(--warning-ink);
  background: var(--amber-bg);
  border-color: var(--warning-border);
}
:root[data-theme="light"] .results-weight-disclaimer,
:root[data-theme="light"] .unverified-weight-warning { border-left-color: var(--amber); }
:root[data-theme="light"] .results-product-notice {
  color: var(--green-dark);
  background: var(--mint);
  border-color: var(--mint-border);
  border-left-color: var(--green-dark);
}
:root[data-theme="light"] .injection-route-note,
:root[data-theme="light"] .calculation-explanation,
:root[data-theme="light"] .product-intro,
:root[data-theme="light"] .preparation-specific-note,
:root[data-theme="light"] .package-context { color: var(--ink); }
:root[data-theme="light"] .comments .comment-source-issue,
:root[data-theme="light"] .weight-range-unavailable,
:root[data-theme="light"] .mixture-caution { color: var(--green-dark); }
:root[data-theme="light"] .calculation-note { color: var(--muted); }
:root[data-theme="light"] .no-results { background: var(--panel); border-color: var(--line); }
:root[data-theme="light"] .injection-professional,
:root[data-theme="light"] .preparation-warning,
:root[data-theme="light"] .softgel-mixing-note,
:root[data-theme="light"] .source-row-issue { border-left-color: var(--amber); }
:root[data-theme="light"] .result-card-head,
:root[data-theme="light"] .weight-guard-dialog,
:root[data-theme="light"] .gate-panel { background: var(--panel); }
:root[data-theme="light"] .comment-source,
:root[data-theme="light"] .source-reference,
:root[data-theme="light"] .product-conversion,
:root[data-theme="light"] .application-guidance .application-hygiene { border-color: var(--line); }
:root[data-theme="light"] .injection-calculation { border-color: var(--green); }
:root[data-theme="light"] .preparation-math {
  background: var(--wip-bg);
  border-color: var(--wip-border);
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .warning-gate,
:root[data-theme="light"] .weight-guard-dialog::backdrop { background: rgba(40, 38, 50, .72); }
:root[data-theme="light"] .gate-lede { color: var(--muted); }
:root[data-theme="light"] .weight-guard-info .weight-guard-entered { background: var(--mint); border-color: var(--line); }
:root[data-theme="light"] .weight-guard-change { background: var(--panel); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #d6d2e8;
  --muted: #b4aec8;
  --paper: #1e1e2e;
  --panel: #343244;
  --line: #4c485f;
  --green: #c6b1e5;
  --green-dark: #d4c2ee;
  --mint: #484662;
  --amber: #e6c77f;
  --amber-bg: #443d34;
  --warning-ink: #f1e6ce;
  --warning-border: #6b5c40;
  --red: #c6b1e5;
  --focus: #c6b1e5;
  --focus-halo: rgb(198 177 229 / .22);
  --wip-bg: #484662;
  --wip-border: #73708f;
  --highlight-lilac: #46445f;
  --aqua-bg: #3c3b53;
  --butter-bg: #423d34;
  --shadow: 0 16px 48px rgba(0, 0, 0, .26);
}

:root[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .topbar { background: rgb(24 24 37 / .94); }
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .safety-icon,
:root[data-theme="dark"] .step-number,
:root[data-theme="dark"] .primary-button,
:root[data-theme="dark"] .weight-guard-info .weight-guard-change {
  color: var(--paper);
}
:root[data-theme="dark"] .wip-banner {
  color: #dedcf0;
  background: var(--wip-bg);
  border-color: var(--wip-border);
}
:root[data-theme="dark"] .safety-banner {
  color: var(--warning-ink);
  background: var(--amber-bg);
  border-color: var(--warning-border);
}
:root[data-theme="dark"] .full-safety {
  color: #e7e0ef;
  background: #3c3b53;
  border-color: #5e5d7b;
}
:root[data-theme="dark"] .wip-label { color: #e8dff5; background: var(--highlight-lilac); }
:root[data-theme="dark"] .wip-copy p + p { color: #c9c3dd; }
:root[data-theme="dark"] .full-safety summary,
:root[data-theme="dark"] .warning-section-title,
:root[data-theme="dark"] .warning-language-toggle { color: var(--amber); }
:root[data-theme="dark"] .warning-section + .warning-section { border-top-color: var(--warning-border); }
:root[data-theme="dark"] .warning-language-toggle:focus-visible,
:root[data-theme="dark"] .primary-button:focus-visible,
:root[data-theme="dark"] .text-button:focus-visible,
:root[data-theme="dark"] .preparation-math summary:focus-visible,
:root[data-theme="dark"] .weight-guard-actions button:focus-visible {
  outline-color: var(--focus);
}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .joined-input select {
  color: var(--ink);
  background: #292b3b;
  border-color: var(--line);
}
:root[data-theme="dark"] .field input::placeholder { color: #aaa4bd; }
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field select:focus,
:root[data-theme="dark"] .joined-input select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
:root[data-theme="dark"] .joined-input.package-amount-input select,
:root[data-theme="dark"] .package-fixed-unit { border-color: var(--line); }
:root[data-theme="dark"] .package-fixed-unit,
:root[data-theme="dark"] .suggestions,
:root[data-theme="dark"] .dose-equation,
:root[data-theme="dark"] .product-amount,
:root[data-theme="dark"] .mixture-option {
  color: var(--ink);
  background: #292b3b;
  border-color: var(--line);
}
:root[data-theme="dark"] .suggestions { box-shadow: 0 12px 28px rgb(0 0 0 / .34); }
:root[data-theme="dark"] .suggestions button:hover,
:root[data-theme="dark"] .suggestions button[aria-selected="true"] { background: var(--mint); }
:root[data-theme="dark"] .scope-note,
:root[data-theme="dark"] .application-guidance {
  color: #d6d2e8;
  background: var(--aqua-bg);
  border-color: #5e5d7b;
}
:root[data-theme="dark"] .detail-chip {
  color: #e5def3;
  background: var(--wip-bg);
  border-color: var(--wip-border);
}
:root[data-theme="dark"] .comments {
  color: var(--ink);
  background: var(--wip-bg);
  border-color: var(--wip-border);
}
:root[data-theme="dark"] .calculation {
  color: #e1dcef;
  background: var(--wip-bg);
  border-color: var(--wip-border);
}
:root[data-theme="dark"] .not-calculated {
  color: #f1e6ce;
  background: var(--butter-bg);
  border-color: var(--warning-border);
}
:root[data-theme="dark"] .no-results {
  color: var(--muted);
  background: #292b3b;
  border-color: var(--line);
}
:root[data-theme="dark"] .scope-note,
:root[data-theme="dark"] .comments,
:root[data-theme="dark"] .injection-route-note,
:root[data-theme="dark"] .calculation-explanation,
:root[data-theme="dark"] .product-intro,
:root[data-theme="dark"] .preparation-specific-note,
:root[data-theme="dark"] .package-context { color: var(--ink); }
:root[data-theme="dark"] .results-weight-disclaimer,
:root[data-theme="dark"] .unverified-weight-warning,
:root[data-theme="dark"] .injection-professional,
:root[data-theme="dark"] .small-volume-note,
:root[data-theme="dark"] .preparation-warning,
:root[data-theme="dark"] .softgel-mixing-note,
:root[data-theme="dark"] .source-row-issue,
:root[data-theme="dark"] .weight-guard-entered,
:root[data-theme="dark"] .gate-warning-scroll {
  color: var(--warning-ink);
  background: var(--amber-bg);
  border-color: var(--warning-border);
}
:root[data-theme="dark"] .results-weight-disclaimer,
:root[data-theme="dark"] .unverified-weight-warning { border-left-color: var(--green); }
:root[data-theme="dark"] .results-product-notice {
  color: var(--green-dark);
  background: var(--mint);
  border-color: var(--line);
  border-left-color: var(--green-dark);
}
:root[data-theme="dark"] .injection-professional,
:root[data-theme="dark"] .preparation-warning,
:root[data-theme="dark"] .softgel-mixing-note { border-left-color: var(--green); }
:root[data-theme="dark"] .source-row-issue { border-left-color: var(--green); }
:root[data-theme="dark"] .result-card-head { background: #292b3b; }
:root[data-theme="dark"] .comment-source-issue,
:root[data-theme="dark"] .weight-range-unavailable,
:root[data-theme="dark"] .mixture-caution { color: #c5bdf0; }
:root[data-theme="dark"] .comment-source,
:root[data-theme="dark"] .source-reference,
:root[data-theme="dark"] .product-conversion,
:root[data-theme="dark"] .application-guidance .application-hygiene { border-color: var(--line); }
:root[data-theme="dark"] .injection-calculation { border-color: #7773a2; }
:root[data-theme="dark"] .preparation-math {
  background: var(--wip-bg);
  border-color: var(--wip-border);
  box-shadow: 0 6px 18px rgb(0 0 0 / .22);
}
:root[data-theme="dark"] .weight-guard-dialog,
:root[data-theme="dark"] .gate-panel {
  color: var(--ink);
  background: #313244;
  border-color: #62617f;
}
:root[data-theme="dark"] .warning-gate,
:root[data-theme="dark"] .weight-guard-dialog::backdrop { background: rgb(12 12 20 / .82); }
:root[data-theme="dark"] .gate-lede { color: #c3c7df; }
:root[data-theme="dark"] .gate-warning-scroll {
  color: var(--warning-ink);
  background: var(--amber-bg);
  border-color: var(--warning-border);
}
:root[data-theme="dark"] .weight-guard-info .weight-guard-entered {
  color: #d9d7ef;
  background: var(--aqua-bg);
  border-color: #5e5d7b;
}
:root[data-theme="dark"] .weight-guard-change {
  color: var(--green-dark);
  background: #292b3b;
  border-color: var(--green);
}
:root[data-theme="dark"] .weight-guard-info .weight-guard-change {
  color: var(--paper);
  background: var(--green);
}
:root[data-theme="dark"] .weight-guard-actions button:hover { filter: brightness(1.08); }