:root{color-scheme:light;--page:#f3f4f6;--surface:#fff;--text:#000;--muted:#000;--line:#e7ece8;--green:#197659;--green-dark:#145e47;--green-pale:#edf7f1;--red:#b94149;--red-pale:#fdf0f0;--radius:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:#000;font-size:14px;line-height:1.5}
button,input,select{font:inherit}
button,input,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
button:focus-visible,summary:focus-visible{outline:3px solid #79b99c;outline-offset:4px}
[hidden]{display:none!important}
.page-shell{max-width:1280px;padding:0 36px;margin:0 auto}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 0 28px}
.eyebrow{display:block;color:#000;font-size:10px;font-weight:700;letter-spacing:2.3px;line-height:1.2;margin-bottom:9px}
.eyebrow span{padding:0 5px;color:#000}
h1,h2,h3,p{margin:0}
h1{font-size:27px;font-weight:650;letter-spacing:-.6px;line-height:1.3}
.header-actions{display:flex;align-items:center;gap:10px}
.button{border:1px solid transparent;border-radius:9px;min-height:40px;padding:9px 17px;font-size:12px;font-weight:600;line-height:1.5;transition:background .15s,border-color .15s,box-shadow .15s}
.button-secondary{background:#fff;border-color:#dce4dd;color:#000}
.button-secondary:hover{background:#f7faf7;border-color:#b8cdbf}
.button-quiet{background:transparent;color:#000}
.button-quiet:hover{background:#e8eeea;color:#000}
.button-primary{background:#e5e7eb;border-color:#d1d5db;color:#000;box-shadow:0 3px 8px #00000008}
.button-primary:hover{background:#d1d5db}
.calculator-layout{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:24px;align-items:start}
.input-stack{display:grid;gap:20px;min-width:0}
.form-card,.result-card{background:var(--surface);border:1px solid #e2e9e3;border-radius:var(--radius);box-shadow:0 2px 5px #233c2b02}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 18px;border-bottom:1px solid var(--line)}
.section-title{display:flex;align-items:center;gap:10px}
.section-title h2,.result-heading h2{font-size:15px;font-weight:650;letter-spacing:-.15px}
.step-number{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #dfe9e2;border-radius:8px;color:#000;background:#f4f8f4;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.section-currency{color:#000;font-size:10px;font-weight:600;letter-spacing:.5px;white-space:nowrap}
.card-content{padding:22px 24px 20px}
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-third{grid-column:span 4}
.field-half{grid-column:span 6}
.field>span:first-child,.field>label{font-size:12px;font-weight:550;color:#000;line-height:1.5}
.field small{font-size:10px;color:#000;font-weight:400;margin-left:3px;white-space:nowrap}
input,select{width:100%;height:43px;min-width:0;border:1px solid #dce4dd;border-radius:8px;background:#fff;color:#000;padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s;line-height:1.4}
input{font-size:14px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
input::placeholder{color:#000;font-size:12px;opacity:1}
input:hover,select:hover{border-color:#b8c9bd}
input:focus,select:focus{border-color:#539873;box-shadow:0 0 0 3px #2e835d12}
input[aria-invalid=true]{border-color:#cd7378;background:#fffafa}
select{appearance:none;-webkit-appearance:none;cursor:pointer;font-size:12px;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%237a8d7f' fill='none' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.input-with-unit{display:block;position:relative;min-width:0}
.input-with-unit input{padding-right:48px}
.input-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#000;font-size:10px;font-weight:500;pointer-events:none;line-height:1}
.compound-input{display:flex;min-width:0;isolation:isolate}
.compound-input input{flex:1;min-width:0;border-radius:8px 0 0 8px;border-right-color:transparent}
.compound-input input:focus{z-index:1;border-right-color:#539873}
.compound-input select{flex:0 0 112px;border-radius:0 8px 8px 0;font-size:11px;background-color:#f8faf8;padding-left:10px}
.advanced-fields{margin-top:20px;border-top:1px solid var(--line)}
.advanced-fields summary,.formula-details summary{list-style:none;display:flex;align-items:center;cursor:pointer;user-select:none;position:relative}
.advanced-fields summary::-webkit-details-marker,.formula-details summary::-webkit-details-marker{display:none}
.advanced-fields summary{padding:16px 0 0;color:#000;font-size:11px;font-weight:500;gap:7px}
.advanced-fields summary>span{font-size:10px;font-weight:400;color:#000}
.advanced-fields summary:after,.formula-details summary:after{content:"";position:absolute;right:2px;width:6px;height:6px;border-right:1.4px solid #96a499;border-bottom:1.4px solid #96a499;transform:rotate(45deg);top:calc(50% + 5px);transition:transform .15s}
.advanced-fields[open] summary:after{transform:rotate(225deg);top:calc(50% + 8px)}
.advanced-grid{padding-top:19px;gap:16px}
.field-help{font-size:10px;color:#000;line-height:1.8;margin-top:12px}
.purchase-preview{display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:8px;background:#f6f8f5;color:#000;padding:12px 14px;margin-top:18px;font-size:11px}
.purchase-preview>span:last-child{display:flex;align-items:baseline;gap:7px}
.purchase-preview strong{color:#000;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.purchase-preview small{font-size:10px;color:#000}
.transfer-help{margin-top:12px}
.transfer-advanced{margin-top:16px}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-2px;padding:0 2px}
.form-actions>span{font-size:10px;color:#000}
.form-actions .button{min-width:144px;min-height:43px;padding:11px 25px;font-size:13px;letter-spacing:.3px}
.results-panel{position:sticky;top:24px;min-width:0}
.result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:23px 24px 21px;border-bottom:1px solid var(--line)}
.text-button{border:0;padding:0;background:transparent;color:#000;font-size:11px;line-height:1.5}
.text-button:hover{color:#000}
.text-button:disabled{color:#000}
.result-body{padding:20px 22px 21px}
.result-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:335px;text-align:center}
.empty-number{display:block;color:#000;font-size:42px;font-weight:300;line-height:1;margin-bottom:20px}
.result-empty p{color:#000;font-size:12px;line-height:1.9}
.profit-card{padding:19px 18px 20px;background:var(--green-pale);border:1px solid #e0eee3;border-radius:11px;color:#000}
.profit-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;font-weight:500}
.status-chip{border-radius:5px;font-size:9px;line-height:1.6;padding:2px 7px;font-weight:600;background:#d9eddf;color:#000}
.profit-total{display:flex;align-items:baseline;gap:8px;margin-top:10px;min-width:0}
.profit-total strong{font-size:38px;font-weight:620;letter-spacing:-1.2px;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.profit-total>span{font-size:11px;color:#000;font-weight:500}
.profit-card.is-negative{color:#000;background:var(--red-pale);border-color:#f0dfe0}
.profit-card.is-negative .status-chip{background:#f5dfe0;color:#000}
.profit-card.is-negative .profit-total>span{color:#000}
.profit-card.is-neutral{color:#000;background:#f2f5f2;border-color:#e4ebe5}
.profit-card.is-neutral .status-chip{background:#e3eae4;color:#000}
.profit-card.is-neutral .profit-total>span{color:#000}
dl{margin:0}
dt,dd{margin:0}
.result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;padding:23px 1px 22px}
.result-metrics dt{display:flex;flex-wrap:wrap;gap:3px 6px;align-items:baseline;font-size:10px;color:#000;line-height:1.6}
.result-metrics small{font-size:9px;font-weight:400;color:#000;white-space:nowrap}
.result-metrics dd{color:#000;font-size:17px;font-weight:600;line-height:1.4;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.result-metrics .metric-wide{grid-column:1/-1}
.result-metrics .metric-average{padding:11px 12px;background:#f7f9f6;border-radius:7px}
.result-metrics .metric-average dt{font-size:10px}
.result-metrics .metric-average dd{font-size:14px;font-weight:550;letter-spacing:.1px;margin-top:4px}
.breakdown-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;margin-bottom:10px}
.breakdown-heading h3{font-size:11px;font-weight:550;color:#000}
.breakdown-heading>span{font-size:9px;color:#000}
.breakdown-list{display:grid;gap:10px}
.breakdown-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:11px}
.breakdown-list dt{color:#000;line-height:1.6}
.breakdown-list dd{color:#000;font-weight:550;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
.formula-details{padding:16px 24px;border-top:1px solid var(--line)}
.formula-details summary{color:#000;font-size:10px;font-weight:500;padding-right:20px}
.formula-details summary:after{top:3px}
.formula-details[open] summary:after{top:6px;transform:rotate(225deg)}
.formula-details p{font-size:10px;color:#000;line-height:1.9;margin-top:12px;overflow-wrap:anywhere}
.result-note{text-align:center;font-size:10px;line-height:1.8;color:#000;margin-top:13px;padding:0 6px}
.page-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:30px 2px 27px;color:#000;font-size:10px}
.page-footer>span:last-child{font-size:9px;color:#000}
.page-footer>span:last-child span{margin:0 8px;color:#000}
.message-dialog{color:#000;background:var(--surface);width:min(420px,calc(100% - 40px));max-height:85dvh;overflow:auto;border:1px solid #e2e9e3;border-radius:16px;box-shadow:0 24px 100px #14362033;padding:26px}
.message-dialog::backdrop{background:#18372552;backdrop-filter:blur(3px)}
.message-dialog h2{font-size:17px;font-weight:650}
.message-dialog p{margin:13px 0 23px;white-space:pre-line;color:#000;font-size:13px;line-height:1.9;overflow-wrap:anywhere}
.message-dialog .button{display:block;min-width:100px;margin-left:auto}
@media(min-width:1400px){.page-shell{padding-left:32px;padding-right:32px}.page-header{padding-top:46px}.calculator-layout{grid-template-columns:minmax(0,1fr) 382px;gap:28px}.form-grid{column-gap:20px}.card-content{padding-left:26px;padding-right:26px}.section-heading{padding-left:26px;padding-right:26px}}
@media(max-width:1099px){.page-shell{padding:0 24px}.calculator-layout{grid-template-columns:minmax(0,1fr) 330px;gap:18px}.section-heading{padding:18px 20px}.card-content{padding:20px}.form-grid{gap:18px 12px}.field-third{grid-column:span 6}.field-third:last-child{grid-column:1/-1}.advanced-grid .field-third:last-child{grid-column:1/-1}.field-half{grid-column:span 6}.result-heading{padding:21px 20px}.result-body{padding:18px}.compound-input select{flex-basis:103px;font-size:10px}.compound-input input{padding-left:10px}.profit-total strong{font-size:35px}}
@media(max-width:820px){.page-shell{max-width:720px;padding:0 22px}.page-header{padding:28px 0 24px}.calculator-layout{grid-template-columns:1fr;gap:24px}.input-stack{gap:17px}.results-panel{position:static}.section-heading{padding:18px 22px}.card-content{padding:20px 22px}.form-grid{column-gap:16px}.field-third{grid-column:span 4}.field-third:last-child{grid-column:span 4}.advanced-grid .field-third:last-child{grid-column:span 4}.compound-input select{flex-basis:112px;font-size:11px}.result-heading{padding:20px 22px}.result-body{padding:20px 22px}.result-empty{min-height:190px}.profit-total strong{font-size:40px}.result-metrics{column-gap:24px}.result-metrics .metric-average{grid-column:1/-1}.result-metrics .metric-average dd{font-size:15px}.result-note{margin-top:10px}.page-footer{padding-top:24px;padding-bottom:24px}}
@media(max-width:540px){.page-shell{padding:0 16px}.page-header{padding:25px 0 23px;gap:14px;align-items:flex-end}.eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:8px}h1{font-size:22px;letter-spacing:-.5px}.header-actions{gap:2px}.header-actions .button{padding:7px 9px;font-size:10px;min-height:33px;border-radius:7px}.section-heading{padding:17px 18px}.section-title{gap:9px}.section-title h2,.result-heading h2{font-size:14px}.step-number{width:24px;height:24px;font-size:9px;border-radius:7px}.section-currency{font-size:9px}.card-content{padding:19px 18px 18px}.form-grid{gap:17px 13px}.field-third{grid-column:span 6}.field-third:last-child{grid-column:1/-1}.advanced-grid .field-third:last-child{grid-column:1/-1}.field-half{grid-column:1/-1}.field>span:first-child,.field>label{font-size:11px}.field{gap:7px}.field small{font-size:9px}input,select{height:44px}select{font-size:12px}.compound-input select{flex-basis:122px;font-size:11px}.field-help{font-size:10px;margin-top:11px}.advanced-fields{margin-top:18px}.advanced-fields summary{font-size:10px;padding-top:14px}.advanced-fields summary>span{font-size:9px}.purchase-preview{padding:11px 12px;margin-top:16px}.transfer-advanced{margin-top:15px}.form-actions{gap:12px;padding:0 1px}.form-actions>span{font-size:9px}.form-actions .button{min-width:128px;min-height:43px;padding-left:20px;padding-right:20px;font-size:12px}.results-panel{margin-top:0}.result-heading{padding:19px 20px}.result-body{padding:19px 20px}.profit-card{padding:18px}.profit-total strong{font-size:38px}.result-metrics{gap:19px 20px;padding-top:22px}.result-metrics dd{font-size:18px}.result-metrics .metric-average dd{font-size:14px}.formula-details{padding:16px 20px}.page-footer{padding-top:24px;align-items:flex-start;gap:14px;font-size:9px}.page-footer>span:last-child{font-size:8px}.page-footer>span:last-child span{margin:0 4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
