:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #183334;
  background: #f7faf8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; width: 22px; height: 22px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #65c8af; outline-offset: 3px; }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 82% 8%, rgba(190,227,213,.35),transparent 36%), #f7faf8; }
.page { width: min(1120px, calc(100% - 56px)); margin: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 31px 0 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #193a38; text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -.7px; }
.brand-accent { color: #259578; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: #1f806b; color: white; }
.brand-mark svg { width: 25px; height: 25px; }
.help-trigger { display: inline-flex; align-items: center; gap: 9px; background: white; border: 1px solid #dfeae6; color: #315d56; padding: 9px 15px; border-radius: 99px; font-size: 14px; font-weight: 650; box-shadow: 0 4px 16px #123d3010; }
.help-trigger:hover { border-color: #8bcbb7; }
.info-round { border: 1.8px solid currentColor; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; font-family: Georgia,serif; }
.hero { max-width: 720px; padding: 46px 0 36px; }
.eyebrow { font-size: 11px; letter-spacing: 2px; color: #308f78; font-weight: 800; }
.small-star { font-size: 15px; margin-right: 7px; }
.hero h1 {
    display: block;
    width: fit-content;
    max-width: 100%;
    font-size: clamp(18px, 5.4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.7px;
    margin: 17px 0;
    font-weight: 800;
    white-space: nowrap;
    border: none;
    outline: none;
    box-shadow: none;
}
.hero h1 span { color: #2b9a80; }
.hero p { margin: 0; max-width: 620px; color: #6d817d; font-size: 16px; line-height: 1.75; }
.content-columns { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(320px, 1fr); align-items: start; gap: 22px; }
.calculator-card, .empty-result, .result-card { border-radius: 21px; box-shadow: 0 16px 40px rgba(30,73,55,.045); }
.calculator-card { background: #fff; padding: 34px 34px 27px; border: 1px solid #e7efeb; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 29px; }
.section-heading h2 { margin: 7px 0 0; font-size: 23px; letter-spacing: -.6px; }
.section-symbol { display: grid; place-items: center; width: 41px; height: 41px; background: #e8f6ef; color: #228e6b; font-size: 24px; font-weight: 700; border-radius: 13px; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 19px; row-gap: 23px; }
.field { min-width: 0; }
.field-label { display: block; margin-bottom: 9px; font-size: 13px; color: #405c57; font-weight: 700; }
.input-wrap { position: relative; }
.input-wrap input { appearance: none; width: 100%; min-width: 0; border-radius: 11px; border: 1.5px solid #deebe5; background: #fbfdfc; color: #1c3834; padding: 14px 64px 14px 14px; min-height: 54px; font-weight: 750; font-size: 20px; transition: border-color .15s, box-shadow .15s; }
.input-wrap input:hover { border-color: #b4d8ca; }
.input-wrap input:focus { border-color: #259578; outline: 0; box-shadow: 0 0 0 3px #25957820; }
.input-wrap input::placeholder { color: #abc0b7; font-weight: 450; font-size: 15px; }
.input-suffix { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-weight: 700; font-size: 12px; color: #6b8980; white-space: nowrap; pointer-events: none; }
.btn { border: 0; border-radius: 11px; min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 800; transition: transform .15s, filter .15s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: #248e74; color: white; box-shadow: 0 8px 18px #248e7424; padding: 14px 20px; }
.btn-secondary { background: #eaf5f0; color: #1e7860; padding: 11px 16px; }
.calculate-button { width: 100%; min-height: 56px; font-size: 15px; margin-top: 32px; }
.calculate-button svg { width: 20px; height: 20px; }
.btn-arrow { margin-left: auto; font-size: 22px; font-weight: 450; }
.below-form { display: flex; align-items: center; justify-content: center; gap: 8px; color: #8ba09a; font-size: 12px; margin-top: 22px; }
.status-dot, .result-dot { width: 7px; height: 7px; border-radius: 50%; background: #3cad86; flex-shrink: 0; }
.result-column { min-width: 0; }
.empty-result { min-height: 366px; background: #eef6f0; border: 1.5px dashed #c7dfd1; text-align: center; padding: 51px 32px 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-icon { width: 86px; height: 86px; display: grid; place-items: center; background: #dbede0; color: #3eab8f; border-radius: 50%; margin-bottom: 16px; }
.empty-icon svg { width: 43px; height: 43px; }
.empty-result h2 { margin: 0 0 10px; font-size: 21px; color: #397264; letter-spacing: -.4px; line-height: 1.35; }
.empty-result p { color: #7a958b; line-height: 1.6; font-size: 13px; max-width: 250px; margin: 0; }
.side-tip { color: #779087; font-size: 12px; line-height: 1.6; padding: 22px 13px 0; display: flex; gap: 10px; }
.side-tip strong { color: #4f7e6e; display: block; margin-bottom: 2px; }
.tip-icon { color: #3ca787; font-size: 17px; }
.result-card { background: linear-gradient(144deg,#164d45,#1d7761); color: white; padding: 28px; min-height: 366px; }
.result-heading { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 800; color: #cff0e3; }
.result-dot { background: #8aebba; }
.result-label { font-size: 14px; color: #b5e1d0; margin: 20px 0 3px; }
.result-main { font-size: clamp(32px, 3.3vw, 48px); letter-spacing: -1.4px; font-weight: 850; white-space: nowrap; }
.result-main span { font-size: 17px; letter-spacing: 0; font-weight: 550; }
.result-ml { color: #c9ebdd; font-size: 14px; margin-top: 2px; }
.result-divider { height: 1px; background: #ffffff30; margin: 22px 0; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; margin: 0; }
.result-grid dt { font-size: 11px; color: #bee5d5; margin-bottom: 5px; }
.result-grid dd { margin: 0; font-size: 17px; font-weight: 800; }
.result-note { margin: 22px 0 0; padding: 12px; border-radius: 9px; background: #ffffff18; font-size: 12px; line-height: 1.6; }
.result-copy { width: 100%; margin-top: 23px; background: #e9fff4; color: #1c715b; }
.result-copy svg { width: 17px; height: 17px; }
.error-message { background: #fff1ee; color: #9b3e31; border: 1px solid #f4c8c0; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-top: 20px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 34px 0 30px; font-size: 12px; color: #94a69f; }
.text-link { background: none; border: none; color: #3f927c; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.dialog-backdrop { position: fixed; z-index: 100; inset: 0; background: #17332fc7; display: grid; place-items: center; padding: 18px; }
.dialog-panel { background: #fff; color: #223c36; border-radius: 20px; width: min(630px,100%); max-height: min(88dvh,900px); display: flex; flex-direction: column; box-shadow: 0 30px 90px #0f221b50; overflow: hidden; }
.dialog-top { display: flex; align-items: start; justify-content: space-between; padding: 27px 30px 17px; border-bottom: 1px solid #e9f0ec; }
.dialog-top h2 { margin: 6px 0 0; letter-spacing: -.5px; }
.icon-button { border: none; background: #f0f5f2; border-radius: 10px; width: 36px; height: 36px; color: #4f7468; font-weight: 800; }
.dialog-body { overflow-y: auto; padding: 5px 30px 18px; font-size: 14px; line-height: 1.75; color: #5c736a; }
.dialog-body h3 { font-size: 15px; margin: 25px 0 6px; color: #274c40; }
.dialog-body p { margin: 0 0 11px; }
.dialog-body ul { padding-left: 21px; }
.dialog-body li { margin-bottom: 7px; }
.dialog-body a { color: #207c63; }
.dialog-body .help-disclaimer { margin-top: 22px; padding: 12px 14px; background: #f2f7f4; border-radius: 10px; font-size: 12px; }
.dialog-body .help-sources { font-size: 12px; }
.dialog-bottom { display: flex; justify-content: end; padding: 16px 30px 23px; border-top: 1px solid #e9f0ec; }
.loading { min-height: 100vh; display: grid; place-items: center; color: #387f6b; }
#blazor-error-ui { background: #ffe8de; bottom: 0; box-shadow: 0 -1px 2px #0003; display: none; left: 0; padding: .7rem 1.2rem; position: fixed; right: 0; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
@media(max-width: 800px) {
  .page { width: min(650px, calc(100% - 34px)); }
  .site-header { padding: 21px 0 14px; }
  .hero { padding: 29px 0 28px; }
  .hero h1 { letter-spacing: -1.7px; }
  .content-columns { grid-template-columns: 1fr; gap: 16px; }
  .empty-result { min-height: 210px; padding: 24px; }
  .empty-icon { width: 63px; height: 63px; }
  .empty-icon svg { width: 32px; height: 32px; }
  .side-tip { padding-top: 14px; }
}
@media(max-width: 490px) {
  .page { width: calc(100% - 28px); }
  .brand { font-size: 18px; }
  .brand-mark { width: 36px; height: 36px; }
  .help-trigger { padding: 10px 12px; }
  .help-word { display: none; }
  .hero p { font-size: 14px; }
  .calculator-card { padding: 23px 18px; border-radius: 16px; }
  .section-heading h2 { font-size: 21px; }
  .fields-grid { grid-template-columns: 1fr; gap: 18px; }
  .input-wrap input { min-height: 51px; }
  .calculate-button { margin-top: 23px; }
  .site-footer { flex-direction: column; align-items: flex-start; padding-top: 27px; }
  .result-card { border-radius: 16px; }
  .dialog-top { padding: 23px 20px 15px; }
  .dialog-body { padding: 5px 20px 14px; }
  .dialog-bottom { padding: 14px 20px 20px; }
}
@media(prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; } }