:root{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#102a43;background:#edf2f7;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:820px;margin:auto;padding:40px 24px 28px}header,.brand,.section-top,.actions,.ratio-row{display:flex;align-items:center}header{justify-content:space-between;gap:16px;margin-bottom:26px}.brand{gap:12px}h1{font-size:25px;line-height:1.3;margin:0}header p{margin:6px 0 0;color:#52677b;font-size:14px}.calculator{background:white;border:1px solid #d6e1eb;border-radius:20px;padding:28px;box-shadow:0 12px 38px #102a4309}.section-top{justify-content:space-between;gap:12px;margin-bottom:24px}h2{font-size:18px;margin:0}.actions{gap:8px}button{font:inherit;font-size:14px;padding:10px 14px;min-height:42px;border:1px solid #cedbe6;background:#f6f9fc;color:#183b56;border-radius:9px;cursor:pointer}button:hover{background:#e6eef5}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #3985ba;outline-offset:3px}[hidden]{display:none!important}.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.input-wrap{display:flex;align-items:center;gap:8px;border:1px solid #cbd8e4;border-radius:10px;background:white;padding:0 14px}.input-wrap:focus-within{border-color:#297db4;box-shadow:0 0 0 2px #297db41a}input{min-width:0;width:100%;padding:13px 0;font:inherit;font-size:23px;font-weight:600;color:#102a43;letter-spacing:.01em;border:0;background:transparent;outline:none;font-variant-numeric:tabular-nums}input:focus-visible{outline:none}input[aria-invalid=true]{color:#a52828}.input-wrap span{font-size:14px;color:#697f92;white-space:nowrap}.cost{max-width:100%;margin-bottom:24px}.sides{display:grid;grid-template-columns:1fr 1fr;gap:18px}.side{border-radius:12px;padding:20px;background:#f8fafc;border-top:3px solid}.gain{border-color:#d75959}.loss{border-color:#29916c}.side h3{font-size:16px;margin:0 0 18px}.gain h3{color:#ac3232}.loss h3{color:#237554}.side .field+.field{margin-top:18px}.ratio-row{gap:30px;margin-top:24px;padding-top:24px;border-top:1px solid #e2eaf1}.ratio-row .field{flex:1}.ratio-row p{flex:1;font-size:16px;line-height:1.8;color:#52677b;margin:0}.ratio-row strong{color:#102a43}#status{font-size:14px;line-height:1.6;min-height:23px;margin:20px 0 0;color:#52677b}#status.error{color:#a52828}details{margin-top:20px;background:#e4ecf4;border-radius:12px;padding:16px 20px}summary{cursor:pointer;font-size:14px;font-weight:600;min-height:24px}.help{font-size:14px;line-height:1.8;color:#40596e}.help p{margin:12px 0}footer{font-size:13px;color:#61788b;text-align:center;margin-top:24px}@media(max-width:550px){main{padding:22px 14px max(22px,env(safe-area-inset-bottom))}h1{font-size:21px}.brand img{width:32px;height:32px}.calculator{padding:18px;border-radius:16px}.section-top{flex-wrap:wrap;margin-bottom:20px}.sides{gap:10px}.side{padding:14px 10px}.input-wrap{padding:0 10px}input{font-size:20px}.ratio-row{gap:16px}.ratio-row p{font-size:14px}header{flex-wrap:wrap}button{padding:9px 12px}}@media(max-width:340px){.sides{grid-template-columns:1fr}.ratio-row{flex-direction:column;align-items:stretch}}
:is(.side) input{font-variant-numeric:tabular-nums}@media(max-width:550px){.side .input-wrap span{display:none}.side input{font-size:18px}}
:root input.calculated{color:#6b7280}