:root { --ink:#071d3a; --blue:#0b4f9c; --orange:#1677d2; --paper:#eef6ff; --line:#c3d7ed; }
* { box-sizing:border-box; } body { margin:0; background:linear-gradient(135deg,#e3f0ff,#f8fbff); color:var(--ink); font:16px/1.55 "Microsoft YaHei",sans-serif; } main { max-width:980px; margin:auto; padding:54px 24px; } .hero { max-width:760px; } .eyebrow,.section-title span { letter-spacing:.14em; color:var(--blue); font-size:.74rem; font-weight:700; } h1 { font-size:clamp(2.5rem,7vw,5.5rem); line-height:1.02; margin:.2rem 0 1rem; } h1 em { color:var(--orange); font-style:normal; } .calculator { margin-top:42px; background:white; padding:30px; border-top:7px solid var(--blue); box-shadow:0 18px 50px #0b4f9c22; } h2 { margin:.2rem 0 1rem; } form { display:grid; grid-template-columns:1fr 1fr auto 1fr 1fr; gap:14px; align-items:end; } label { font-weight:700; } select { width:100%; display:block; border:1px solid var(--line); border-radius:0; padding:13px; margin-top:6px; font:inherit; background:#fff; } select:disabled { color:#8190a0; background:#f0f6fb; } button { cursor:pointer; border:0; font:inherit; } #swap { background:#e3f0ff; color:var(--blue); height:47px; width:47px; font-size:1.35rem; } .submit { grid-column:1/-1; background:var(--orange); color:#fff; padding:14px; font-weight:700; margin-top:8px; } .error { color:#b4233c; font-weight:700; } #result { margin-top:28px; border-top:1px solid var(--line); padding-top:22px; } .result-head { display:flex; justify-content:space-between; align-items:baseline; } .result-head strong { font-size:1.4rem; } .fare-grid,.schemes { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; } .fare-card { padding:18px; color:#fff; } .fare-card p { margin:0; font-weight:700; } .fare-card strong { display:block; font-size:3.5rem; line-height:1.1; } .fare-card small { font-size:1rem; margin-left:4px; } .current { background:#5d89b0; } .one { background:var(--blue); } .two { background:#123969; } .difference { color:var(--orange); font-weight:700; } .route { border-top:1px solid var(--line); padding-top:14px; } .route div { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; } .route i { color:var(--orange); font-style:normal; } .precision { font-size:.85rem; color:#53687d; } .warning { border-left:3px solid var(--orange); padding-left:9px; } .proposal-notes { margin-top:34px; } .note-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .note-card { padding:24px; background:#fff; border-top:4px solid var(--blue); box-shadow:0 10px 28px #0b4f9c14; } .note-card:nth-child(2) { border-top-color:#1677d2; } .note-card h3 { font-size:1.05rem; margin:.4rem 0 1rem; } .note-card p { margin:.6rem 0; } .impact { color:#0b4f9c; font-weight:700; border-top:1px solid var(--line); padding-top:12px; } .schemes article { padding:24px; background:#e8f3ff; } .schemes article:nth-child(2) { background:#dcecff; } .schemes article:last-child { background:#cfe5ff; } footer { margin-top:28px; padding:18px 0; border-top:1px solid var(--line); color:#41566d; font-size:.9rem; } footer p { margin:.25rem 0; } select:focus-visible,button:focus-visible { outline:3px solid #75b7f6; outline-offset:2px; } @media (max-width:760px) { main { padding:32px 16px; } .calculator { padding:20px; } form,.fare-grid,.schemes,.note-grid { grid-template-columns:1fr; } #swap { grid-row:3; justify-self:center; transform:rotate(90deg); } .submit { grid-column:auto; } }