@font-face { font-family: RegionalNoto; src:url(noto-sans-sc-subset.woff2) format("woff2"); }
@font-face { font-family: RegionalNotoRatio; src:url(noto-ratio.ttf) format("truetype"); font-weight:700; }
@font-face { font-family: RegionalNotoRegion; src:url(noto-region.ttf) format("truetype"); font-weight:700; }
@font-face { font-family: RegionalNotoHint; src:url(noto-hint.ttf) format("truetype"); }
@media(max-width:760px) and (orientation:landscape){#chartModal{padding:0!important;align-items:stretch!important}#chartModal .chart-panel{width:100%!important;height:100%!important;max-height:100%!important;min-height:0!important;border-radius:0!important;grid-template-rows:48px 32px minmax(0,1fr) 32px!important}#chartModal .chart-scroll{height:100%!important;min-height:0!important;padding:8px 18px!important;overflow-x:auto!important;overflow-y:hidden!important}#chartModal .repayment-chart{height:100%!important;min-height:0!important;padding-bottom:24px!important}}
.chart-total { bottom:auto; padding:3px 4px; color:#fff; background:rgba(159,12,37,.88); border-radius:2px; font-size:11px; font-weight:700; transform:translate(-50%,50%); }
@media(max-width:760px) and (orientation:landscape){#chartModal{padding:0;align-items:stretch}#chartModal .chart-panel{width:100vw;height:100dvh;border-radius:0;grid-template-rows:48px 32px minmax(0,1fr) 32px}#chartModal .policy-head{min-height:48px}#chartModal .chart-key{padding:8px 16px 0}#chartModal .chart-scroll{min-height:0;padding:8px 18px;overflow-x:auto;overflow-y:hidden}#chartModal .repayment-chart{height:100%;min-height:0;padding-bottom:24px}#chartModal .chart-note{padding:8px 16px;font-size:11px}#chartModal .chart-bar{flex-basis:22px}#chartModal .chart-total{font-size:10px}}
.chart-bar { position:relative; }.chart-total { position:absolute; bottom:-42px; left:50%; z-index:2; color:var(--red-dark); font-size:9px; font-weight:700; line-height:1; transform:translateX(-50%) rotate(-45deg); transform-origin:center; white-space:nowrap; }
#chart[hidden] { display:none !important; }
@media (max-width:760px){html{scroll-padding-bottom:calc(132px + env(safe-area-inset-bottom))}body{min-height:100dvh;touch-action:pan-y}main{overflow-anchor:none}body::after{content:"";display:block;height:calc(112px + env(safe-area-inset-bottom))}}
.settlement-toggle { justify-self:start !important; margin-left:24px !important; }
@media(max-width:760px){.settlement-toggle { margin-left:16px !important; }}
.result-actions { display:flex; flex-wrap:wrap; gap:18px; }.result-actions .schedule { margin-top:18px; }.chart-panel { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; width:min(960px,100%); height:min(720px,100%); overflow:hidden; background:#fff; border-radius:6px; box-shadow:0 16px 40px rgba(0,0,0,.28); }.chart-key { display:flex; gap:18px; padding:14px 18px 0; color:var(--muted); font-size:13px; }.chart-key span { display:flex; align-items:center; gap:7px; }.chart-key i { width:11px; height:11px; border-radius:2px; }.principal-key { background:var(--red); }.interest-key { background:#f4b6c1; }.chart-scroll { min-height:0; overflow-x:auto; overflow-y:hidden; padding:18px; }.repayment-chart { display:flex; align-items:flex-end; gap:5px; min-width:max-content; height:100%; min-height:330px; padding:0 5px 28px; border-bottom:1px solid var(--line); }.chart-bar { display:flex; flex:0 0 18px; flex-direction:column; justify-content:flex-end; height:100%; padding:0; background:transparent; border:0; cursor:pointer; }.chart-bar:focus-visible { outline:2px solid var(--red-dark); outline-offset:3px; }.chart-bar .interest,.chart-bar .principal { width:100%; min-height:1px; transform-origin:bottom; animation:chart-rise .42s ease-out both; }.chart-bar .interest { background:#f4b6c1; }.chart-bar .principal { background:var(--red); }.chart-bar small { margin-top:7px; color:var(--muted); font-size:10px; line-height:1; transform:rotate(-45deg); transform-origin:left top; white-space:nowrap; }.chart-bar:nth-child(n+13) small { visibility:hidden; }.chart-note { margin:0; padding:12px 18px 16px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }@keyframes chart-rise { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@media(max-width:760px){.chart-panel { width:100%; height:100%; border-radius:0; }.chart-scroll { padding:16px; }.repayment-chart { min-height:360px; }.result-actions { gap:16px; }}
.settlement-toggle { grid-column:1/-1; justify-self:center; width:42px; height:42px; margin:-6px 0 0; color:var(--red-dark); background:#fff; border:1px solid #e1a3af; border-radius:50%; font-size:28px; font-weight:400; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(120,15,35,.12); }.settlement-toggle:hover { color:#fff; background:var(--red); border-color:var(--red); }
:root { --ink:#202124; --muted:#6d7278; --line:#dddfe1; --paper:#f7f7f7; --red:#c8102e; --red-dark:#9f0c25; } * { box-sizing:border-box; } html,body { max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; } body { margin:0; background:var(--paper); color:var(--ink); font-family:RegionalNoto,"Microsoft YaHei",sans-serif; } h1,h2,p { margin:0; } h1 { margin-top:4px; font-size:24px; } h2 { margin:5px 0 21px; font-size:19px; } small { color:var(--red); font-weight:700; }
header { padding:22px max(24px,calc((100% - 1100px)/2)); background:#fff; border-top:4px solid var(--red); border-bottom:1px solid var(--line); }header small,.plan-head small { font-family:RegionalNotoRegion,RegionalNoto,"Microsoft YaHei",sans-serif; }header .brand-title { display:block; color:var(--red); font-size:23px; font-weight:700; line-height:1.25; }.vehicle-tabs { position:relative; display:flex; gap:0; width:min(760px,calc(100% - 32px)); margin:18px auto 0; padding:4px; overflow:hidden; background:#f5f6f7; border:1px solid #e0e2e5; border-radius:8px; box-shadow:0 3px 12px rgba(24,31,38,.08); }.vehicle-tabs::before { content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:var(--red); border:1px solid #b60c29; border-radius:5px; box-shadow:0 3px 8px rgba(159,12,37,.26); transform:translateX(0); transition:transform .32s cubic-bezier(.2,.8,.2,1),background .25s ease,box-shadow .25s ease; }.vehicle-tabs.ev-active::before { background:#dff3e4; border-color:#b9dec3; box-shadow:0 3px 8px rgba(49,125,72,.16); transform:translateX(100%); }.vehicle-tabs button { position:relative; z-index:1; flex:1; min-height:42px; padding:0 22px; color:#6b7178; background:transparent; border:0; font-family:inherit; font-size:17px; font-weight:700; cursor:pointer; transition:color .22s ease; }.vehicle-tabs button.active { color:#fff; }.vehicle-tabs.ev-active button.active { color:#287344; }
main { width:min(1100px,calc(100% - 32px)); margin:20px auto 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }.card,.fields,label { min-width:0; }.card { padding:24px; background:#fff; border:1px solid var(--line); border-radius:6px; }.fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.model-picker,.amount-pair,.product-field { grid-column:1/-1; }.model-picker { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:16px; align-items:start; }.model-picker figure { display:grid; min-height:92px; margin:0; overflow:hidden; }.model-picker img { width:100%; height:100%; object-fit:contain; }.amount-pair { display:grid; grid-template-columns:1fr 1fr .62fr; gap:16px; }label { display:grid; gap:7px; color:#454b50; font-size:13px; font-weight:700; } input,select { width:100%; max-width:100%; min-width:0; height:44px; padding:0 11px; border:1px solid #c7cbd0; border-radius:4px; background:#fff; font:inherit; }select { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ratio-field { align-content:start; }.ratio-title,.invoice-title { display:block; white-space:nowrap; font-family:RegionalNotoRatio,RegionalNoto,"Microsoft YaHei",sans-serif; }.percent-input { display:flex; align-items:center; height:44px; border:1px solid #c7cbd0; border-radius:4px; background:#fff; overflow:hidden; }.percent-input input { height:42px; padding-right:4px; border:0; border-radius:0; text-align:center; }.percent-input b { padding:0 11px 0 4px; color:var(--muted); font-size:16px; }input:focus,select:focus { outline:3px solid #f8cbd2; border-color:var(--red); }.percent-input:focus-within { outline:3px solid #f8cbd2; border-color:var(--red); }
#hint { min-height:20px; margin:13px 0; color:var(--muted); font-family:RegionalNotoHint,RegionalNoto,"Microsoft YaHei",sans-serif; font-size:13px; }.action-row { display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:16px; }.action-row output { color:var(--red-dark); font-size:14px; font-weight:700; }#calculate,.print { min-height:44px; padding:0 20px; color:#fff; background:var(--red); border:0; border-radius:4px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }.metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.metric { min-height:90px; padding:14px; background:#fff6f7; border-left:3px solid var(--red); }.metric.alert { background:#fff0eb; border-color:#d65a32; }.metric span { display:block; color:var(--muted); font-size:12px; }.metric strong { display:block; margin-top:9px; font-size:20px; overflow-wrap:anywhere; }
dl { display:grid; grid-template-columns:130px 1fr; margin:20px 0 0; border-top:1px solid var(--line); font-size:14px; }dt,dd { margin:0; padding:10px 0; border-bottom:1px solid var(--line); }dt { color:var(--muted); }dd { font-weight:700; }.schedule,.policy-link { display:inline-block; margin-top:18px; color:var(--red-dark); font:700 14px RegionalNoto,"Microsoft YaHei",sans-serif; text-decoration:none; background:transparent; border:0; border-bottom:1px solid; cursor:pointer; }.settlement { grid-column:1/-1; }.settlement p { margin:-6px 0 2px; color:var(--muted); font-size:14px; }.settlement .metrics { margin-top:18px; }.settlement em,footer,.plan>p { display:block; margin-top:17px; color:var(--muted); font-size:12px; font-style:normal; }footer { padding:0 20px 30px; text-align:center; }.policy-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:rgba(20,24,28,.58); }.policy-modal[hidden] { display:none; }.policy-panel { display:grid; grid-template-rows:auto minmax(0,1fr); width:min(960px,100%); height:min(860px,100%); overflow:hidden; background:#fff; border-radius:6px; box-shadow:0 16px 40px rgba(0,0,0,.28); }.policy-head { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:0 14px 0 18px; border-bottom:1px solid var(--line); }.policy-head button { width:36px; height:36px; color:#43484e; background:#fff; border:1px solid var(--line); border-radius:4px; font-size:28px; line-height:1; cursor:pointer; }.policy-panel iframe { width:100%; height:100%; border:0; }
.plan { display:block; width:min(100% - 32px,1180px); margin:32px auto; }.plan-head { display:flex; justify-content:space-between; gap:20px; margin-bottom:24px; }.summary { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }.summary span { padding:10px 12px; background:#fff; border:1px solid var(--line); font-size:13px; }.summary strong { margin-left:8px; }.table-wrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:6px; }table { width:100%; min-width:760px; table-layout:fixed; border-collapse:collapse; font-size:14px; }th,td { padding:11px 14px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }th:first-child,td:first-child { width:10%; text-align:center; }th:not(:first-child),td:not(:first-child) { width:22.5%; }th { color:#fff; background:var(--red-dark); }
@media(max-width:760px){ header { padding:16px 18px; }header .brand-title { font-size:21px; }.vehicle-tabs,main { width:100%; }.vehicle-tabs { width:calc(100% - 32px); margin:10px 16px 0; padding:4px; background:#f5f6f7; }.vehicle-tabs button { flex:1; min-height:48px; padding:0; font-size:18px; }main { margin:0 auto 18px; grid-template-columns:1fr; gap:10px; }.card { padding:18px 16px; border-radius:0; border-left:0; border-right:0; }.fields { grid-template-columns:1fr; gap:13px; }.model-picker { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:13px; align-items:start; }.model-picker figure { min-height:108px; }.amount-pair { grid-template-columns:minmax(0,1fr) minmax(126px,.72fr); gap:13px; }.amount-pair>label:not(.ratio-field) { grid-column:1; }.ratio-field { grid-column:2; grid-row:1 / span 2; display:grid; grid-template-rows:auto 1fr; align-content:stretch; gap:8px; padding:12px; background:rgba(200,16,46,.08); border:1px solid rgba(200,16,46,.24); border-radius:4px; }.ratio-title { color:var(--red-dark); font-size:15px; }.percent-input { min-height:0; height:auto; border-color:rgba(200,16,46,.32); background:rgba(255,255,255,.8); }.percent-input input { height:100%; padding:0 2px 0 6px; color:var(--red-dark); font-size:25px; font-weight:700; }.percent-input b { padding:0 9px 0 3px; color:var(--red-dark); font-size:20px; font-weight:700; }label { font-size:15px; }input,select { height:50px; font-size:17px; }#hint { margin:12px 0; line-height:1.55; }.action-row output { font-size:15px; }.metrics { grid-template-columns:1fr 1fr; gap:8px; }.metric { min-height:78px; padding:12px; }.metric strong { margin-top:7px; font-size:18px; }.settlement { grid-column:auto; }.settlement p { line-height:1.55; }dl { grid-template-columns:105px 1fr; margin-top:16px; }.schedule { margin-top:16px; }.policy-modal { padding:0; }.policy-panel { width:100%; height:100%; border-radius:0; }.plan { width:100%; margin:0; padding:18px 14px; }.plan-head { align-items:flex-start; }.plan-head h1 { font-size:21px; }}@media print { body { background:#fff; }.plan { width:100%; margin:0; }.print { display:none; }}