:root { --green:#20ad49; --ink:#333; --muted:#777; --link:#087ed1; --soft:#f5f5f5; --line:#d3d9df; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial, "Microsoft YaHei", sans-serif; font-size:16px; }
.site-header { height:48px; background:var(--green); color:#fff; }
.site-title { width:1110px; margin:0 auto; line-height:48px; font-weight:700; }
.page { width:1110px; margin:24px auto 0; }
h1 { margin:0 0 22px; color:#888; font-family:Georgia, "Noto Serif SC", serif; font-size:25px; line-height:1.1; text-align:center; font-weight:400; }
.calculator { min-height:118px; display:flex; align-items:center; gap:20px; padding:30px 70px; background:#f6f6f6; }
.field { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.first-field { margin-right:19px; }
.field label { margin-right:38px; }
.field input { width:132px; height:38px; border:1px solid var(--line); border-radius:5px; background:#fff; color:#344055; font:16px Arial, sans-serif; text-align:center; outline:none; }
.field input:focus { border-color:#7dbd91; box-shadow:0 0 0 2px rgba(32,173,73,.12); }
.calculator button { width:168px; height:45px; margin-left:3px; border:0; border-radius:4px; color:#fff; background:var(--green); font:16px "Microsoft YaHei", sans-serif; cursor:pointer; }
.calculator button:hover { background:#17933b; }
.result-section { margin-top:30px; }
.result-label { margin:0 0 19px; color:#5f6470; font-family:Georgia, "Noto Serif SC", serif; font-size:18px; }
.result { display:block; min-height:85px; padding:25px; color:#006fc1; background:#e0f1ff; font-size:29px; line-height:35px; }
.result.is-updated { animation:result-flash .55s ease-out; }
@keyframes result-flash { 0% { background:#bfe4ff; transform:scale(.995); } 100% { background:#e0f1ff; transform:scale(1); } }
.recommendations { display:grid; grid-template-columns:1fr 1fr; column-gap:95px; margin-top:47px; }
h2 { margin:0 0 8px; color:#4c4c4c; font:700 18px "Microsoft YaHei", sans-serif; }
ul { margin:0; padding:0; list-style:none; }
li { margin:0 0 16px; }
a { color:var(--link); font-size:16px; text-decoration:none; }
a:hover { text-decoration:underline; }
footer { height:92px; margin-top:72px; padding-top:34px; color:#c9c9c9; border-top:1px solid #eee; background:#f8f8f8; font-size:18px; text-align:center; }
@media (max-width: 768px) {
  body { font-size:16px; }
  .site-header { height:48px; }
  .site-title { width:auto; padding-left:24px; line-height:48px; font-size:22px; }
  .page { width:auto; margin:20px 16px 0; }
  h1 { margin-bottom:20px; font-family:"Microsoft YaHei", sans-serif; font-size:32px; font-weight:700; }
  .calculator { min-height:0; display:block; padding:20px 14px 24px; }
  .field { display:grid; grid-template-columns:minmax(0, 1fr) 28px; align-items:center; height:56px; gap:10px; }
  .first-field { grid-template-columns:72px minmax(0, 1fr) 28px; margin-right:0; }
  .field label { width:auto; margin:0; font-size:18px; }
  .field input { width:100%; height:42px; border-radius:5px; font-size:20px; }
  .field span { width:auto; font-size:18px; text-align:right; }
  .calculator button { width:100%; height:42px; margin:14px 0 0; border-radius:5px; font-size:19px; }
  .result-section { margin-top:32px; }
  .result-label { margin-bottom:18px; font-family:"Microsoft YaHei", sans-serif; font-size:18px; font-weight:700; }
  .result { min-height:68px; padding:20px; color:#344055; font-size:20px; line-height:28px; white-space:normal; }
  .recommendations { display:block; margin-top:52px; }
  .recommendation-column + .recommendation-column { margin-top:46px; }
  h2 { margin-bottom:12px; color:#666; font-size:18px; }
  li { margin-bottom:18px; }
  a { font-size:18px; line-height:1.45; }
  footer { height:88px; margin-top:44px; padding-top:42px; font-size:16px; }
}