:root{font-family:Arial,Helvetica,sans-serif;color:#19202d;background:#f3f5f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;border-top:5px solid #d82335}main{max-width:930px;margin:0 auto;padding:46px 28px 28px}header{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1.5px;font-weight:700;color:#535e6d}.brand-mark{display:grid;place-items:center;width:29px;height:29px;background:#d82335;color:white;border-radius:8px;font-size:26px;letter-spacing:0}h1{font-size:clamp(32px,5vw,46px);letter-spacing:-1.8px;line-height:1.1;margin:27px 0 10px}.intro{color:#657080;font-size:17px;margin:0 0 30px}.calculator{display:grid;grid-template-columns:1fr 1fr;border-radius:22px;background:white;overflow:hidden;box-shadow:0 10px 40px #16203c09;border:1px solid #e2e6ec}.inputs{padding:32px}label,legend{display:block;font-size:14px;font-weight:700;margin-bottom:11px}.amount-field{display:flex;align-items:center;background:#f7f8fa;border:1px solid #d7dce4;border-radius:10px;padding:0 16px;gap:12px;margin-bottom:26px}.amount-field>span{font-size:19px;color:#687385}input{width:100%;min-width:0;border:0;background:transparent;font-size:30px;font-weight:700;color:#19202d;padding:15px 0;outline:none;letter-spacing:-.7px}.amount-field:focus-within{outline:3px solid #d8233533;border-color:#d82335}select{appearance:auto;width:100%;padding:14px 12px;border:1px solid #d7dce4;border-radius:10px;background:#fff;color:#19202d;font-size:16px;margin-bottom:25px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{padding:0}.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.term{background:#fff;border:1px solid #d7dce4;border-radius:9px;color:#4d5868;padding:12px 4px;font-size:14px;cursor:pointer;line-height:1.3}.term[aria-pressed="true"]{color:#b71327;background:#fff1f3;border:2px solid #d82335;padding:11px 3px;font-weight:700}.term:hover{border-color:#d82335}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d8233566;outline-offset:3px}.rate-note{display:flex;justify-content:space-between;gap:10px;margin:23px 0 0;font-size:13px;line-height:1.5;color:#687385}.rate-note strong{color:#19202d}.result{background:#192330;color:#fff;padding:36px 32px;display:flex;flex-direction:column}.result-top{font-size:12px;letter-spacing:1.8px;font-weight:700;color:#c5cdd6}.monthly{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;line-height:1.1;margin-top:22px}.currency{font-size:23px;font-weight:500}.monthly strong{font-size:clamp(44px,6vw,66px);letter-spacing:-2.5px;overflow-wrap:anywhere}.per{font-size:15px;color:#c5cdd6;white-space:nowrap}.plan{font-size:14px;color:#c5cdd6;line-height:1.5;margin:13px 0 32px}.breakdown{margin-top:auto}.breakdown>div{display:flex;justify-content:space-between;gap:15px;font-size:14px;padding:10px 0;line-height:1.5;color:#d0d8e2}.breakdown strong{color:white;text-align:right;white-space:nowrap}.breakdown .total{border-top:1px solid #ffffff2b;margin-top:10px;padding-top:19px}.rounding{font-size:12px;color:#b4bfcc;line-height:1.6;margin:24px 0 0}details{padding:20px 4px 8px;font-size:14px;color:#535e6d}summary{cursor:pointer;width:fit-content;font-weight:600}details p{line-height:1.6;margin:12px 0}footer{font-size:12px;line-height:1.6;color:#727c89;padding:16px 4px;max-width:670px}.error{color:#b71327;font-size:13px;margin:-15px 0 20px}input[aria-invalid="true"]{color:#b71327}@media(max-width:650px){main{padding:25px 18px 18px}header{font-size:11px}h1{margin-top:23px}.intro{font-size:16px;margin-bottom:22px}.calculator{grid-template-columns:1fr;border-radius:17px}.inputs{padding:23px}.result{padding:27px 23px}.monthly{margin-top:15px}.monthly strong{font-size:58px}.plan{margin-bottom:20px}.amount-field{margin-bottom:21px}select{margin-bottom:21px}.rate-note{margin-top:17px}.terms{grid-template-columns:repeat(3,1fr)}.rounding{margin-top:16px}}@media(prefers-reduced-motion:no-preference){.term{transition:background .15s,border-color .15s}}

[hidden]{display:none!important}header{justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:16px;letter-spacing:1.5px}.languages{display:flex;gap:3px;background:#e6eaf0;border-radius:8px;padding:3px}.languages button{border:0;padding:8px 10px;border-radius:6px;background:transparent;font-size:14px;color:#535e6d;cursor:pointer}.languages button[aria-pressed="true"]{background:white;color:#b71327;font-weight:700;box-shadow:0 1px 5px #0001}h1{font-size:clamp(28px,5vw,42px);letter-spacing:-1px}.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.custom-grid input{border:1px solid #d7dce4;background:#f7f8fa;border-radius:9px;font-size:22px;padding:13px 12px}.custom-grid label{line-height:1.4;min-height:40px}.custom-note{font-size:12px;line-height:1.6;color:#687385;margin:12px 0 0}#custom-error{margin:12px 0 0}input:focus-visible{outline:3px solid #d8233533}#amount:focus-visible{outline:none}.share-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0 0}.share-row button{background:#d82335;border:0;border-radius:10px;color:#fff;font-size:15px;font-weight:700;padding:13px 18px;cursor:pointer}.share-row button:disabled{opacity:.45;cursor:not-allowed}#share-status{font-size:13px;color:#535e6d}#share-fallback{flex-basis:100%;font-size:14px;letter-spacing:0;border:1px solid #d7dce4;border-radius:8px;padding:12px}html[lang="zh-Hans"] h1{letter-spacing:0}html[lang="zh-Hans"] .result-top{letter-spacing:2px}.monthly strong{font-size:clamp(30px,5.3vw,58px)}@media(max-width:650px){.monthly strong{font-size:clamp(30px,9vw,58px)}.share-row button{width:100%}.custom-grid label{min-height:0}main{padding-top:20px}}

.bank-input{display:flex;align-items:center;gap:12px;border:1px solid #d7dce4;background:#f7f8fa;border-radius:9px;padding:0 12px}.bank-input>span{font-size:14px;color:#687385}.bank-input input{font-size:22px;padding:13px 0;letter-spacing:0}.bank-input:focus-within{outline:3px solid #d8233533;border-color:#d82335}.bank-options{padding:16px 0 0}.bank-options label{margin-top:16px}.bank-options .custom-note{margin-top:8px}#bank-fields>label{margin-top:16px}.breakdown strong{white-space:normal;overflow-wrap:anywhere;max-width:58%;font-variant-numeric:tabular-nums}

/* Short, touch-friendly feedback; no hover-driven card colour changes. */
.monthly strong,.breakdown strong{font-variant-numeric:tabular-nums}
.result{position:relative;isolation:isolate;overflow:hidden}
.result::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 90% 0%,#cf415c22,transparent 65%);opacity:.65}
button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(prefers-reduced-motion:no-preference){
 header,h1,.intro,.calculator,.share-row{animation:page-arrive .42s cubic-bezier(.2,.7,.2,1) both}
 h1{animation-delay:.035s}.intro{animation-delay:.07s}.calculator{animation-delay:.10s}.share-row{animation-delay:.14s}
 button,summary{transition:transform .14s cubic-bezier(.2,.7,.2,1),box-shadow .18s,opacity .18s}
 button:not(:disabled):active,summary:active{transform:scale(.97)}
 .amount-field,.bank-input,select,.custom-grid input{transition:border-color .18s,box-shadow .18s}
 .term[aria-pressed="true"]{box-shadow:0 2px 9px #d8233514}
 .result::before{animation:ambient-glow 12s ease-in-out infinite}
}
@keyframes page-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ambient-glow{0%,100%{opacity:.4}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}