:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #172b45; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { max-width: 1440px; margin: 0 auto; padding: 38px 36px 28px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(27px, 3vw, 35px); letter-spacing: -.035em; line-height: 1.25; }
.page-header p { margin-top: 10px; color: #617189; font-size: 15px; }
.privacy-note { color: #47765f; background: #eaf6ee; border: 1px solid #ccebd7; padding: 8px 12px; border-radius: 100px; font-size: 12px; white-space: nowrap; }
.layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(350px, .9fr); gap: 24px; align-items: start; }
.inputs { display: grid; gap: 22px; min-width: 0; }
.panel, .summary { background: #fff; border: 1px solid #e1e8f0; border-radius: 20px; box-shadow: 0 10px 36px rgba(27, 54, 84, .045); }
.panel { padding: 26px 28px 28px; }
.panel-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
.section-number { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 10px; background: #e9f0fa; color: #295985; font-size: 12px; font-weight: 800; }
.panel-heading h2 { font-size: 19px; line-height: 1.55; }
.panel-heading p { margin-top: 2px; color: #7d8a9a; font-size: 13px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: grid; gap: 8px; min-width: 0; color: #35475e; font-size: 13px; font-weight: 650; }
.field-wide { grid-column: 1 / -1; }
.field small { color: #9ba8b6; font-size: 12px; font-weight: 400; }
input, select { width: 100%; height: 43px; border: 1px solid #dce5ee; border-radius: 9px; outline: none; padding: 0 13px; background: #fff; color: #17304c; font: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: #4175ad; box-shadow: 0 0 0 3px rgba(65, 117, 173, .13); }
input::placeholder { color: #a9b5c2; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.input-unit { position: relative; }
.input-unit input { padding-right: 38px; font-variant-numeric: tabular-nums; }
.input-unit em { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: #8a9aaa; pointer-events: none; }
.panel-note { margin-top: 22px; padding: 12px 14px; border-radius: 9px; background: #f4f8fd; color: #667c97; font-size: 12px; line-height: 1.65; }
.paired-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-top: 22px; margin-top: 22px; border-top: 1px solid #edf0f4; }
.rate-heading, .rate-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 112px; gap: 12px; align-items: center; }
.rate-heading { color: #94a2b1; font-size: 12px; padding: 0 0 11px; }
.rate-row { min-height: 61px; border-top: 1px solid #edf0f4; }
.rate-row label { color: #35475e; font-size: 13px; font-weight: 650; }
.rate-row input, .rate-row select { height: 38px; }
.summary { position: sticky; top: 24px; padding: 27px; }
.summary-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.summary h2 { font-size: 20px; }
.summary-top p { margin-top: 6px; font-size: 12px; color: #8d9baa; }
.status { display: inline-block; white-space: nowrap; border-radius: 100px; padding: 6px 9px; background: #f2f4f7; color: #748397; font-size: 11px; font-weight: 700; }
.status.ready { background: #eaf6ee; color: #40845c; }
.status.invalid { background: #fff2ec; color: #ad5c35; }
.error { min-height: 21px; margin-top: 14px; color: #a44a32; font-size: 12px; }
.result-primary { margin-top: 8px; border-radius: 15px; padding: 21px 22px; color: #fff; background: #224e78; }
.result-primary span, .result-primary small { display: block; color: #d8e5f0; font-size: 12px; }
.result-primary strong { display: block; margin: 10px 0 4px; font-size: clamp(28px, 3vw, 36px); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.03em; overflow-wrap: anywhere; }
.result-primary.negative { background: #9a4b46; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }
.result-grid > div { min-width: 0; border: 1px solid #e8edf3; border-radius: 12px; padding: 15px 14px; }
.result-grid span, .result-grid small { display: block; color: #7a8b9d; font-size: 11px; }
.result-grid strong { display: block; margin: 7px 0 2px; font-size: 19px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.formula-note { display: grid; gap: 5px; margin: 19px 0; padding: 14px 15px; background: #f4f8fd; border-radius: 10px; line-height: 1.6; }
.formula-note strong { color: #315c87; font-size: 12px; }
.formula-note span { color: #6e8299; font-size: 12px; }
.details { border-top: 1px solid #e8edf3; padding-top: 16px; }
.details summary { cursor: pointer; color: #2c5f92; font-size: 13px; font-weight: 700; }
.details dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 8px; margin: 18px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.details dt { color: #74879b; }
.details dd { margin: 0; color: #263b53; text-align: right; font-weight: 650; }
footer { margin-top: 26px; text-align: center; color: #9aa8b8; font-size: 12px; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } .summary { position: static; grid-row: 1; } .inputs { grid-row: 2; } }
@media (max-width: 600px) { .page { padding: 20px 14px; } .page-header { display: block; } .page-header p { line-height: 1.6; } .privacy-note { display: inline-block; margin-top: 13px; } .panel, .summary { border-radius: 15px; } .panel { padding: 20px 17px; } .summary { padding: 20px 17px; } .field-grid, .paired-field { grid-template-columns: 1fr; gap: 16px; } .field-wide { grid-column: auto; } .rate-heading, .rate-row { grid-template-columns: minmax(0, 1fr) 84px 88px; gap: 7px; } .rate-row label { font-size: 12px; } .rate-row select { padding: 0 6px; font-size: 12px; } .rate-row input { padding-left: 7px; } .rate-row .input-unit em { right: 8px; } .result-grid strong { font-size: 17px; } }