:root{color-scheme:light;--bg:#f6f3ed;--surface:#fffefa;--ink:#3b3329;--muted:#827566;--gold:#957542;--line:#e7dfd2;--gold-light:#eee2c9;--radius:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}main{width:min(100%,1060px);margin:auto;padding:32px 30px 25px}h1,h2,p{margin:0}h2{font-size:17px;font-weight:600;letter-spacing:.02em}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #9b793f;outline-offset:4px}button{transition:background .15s,transform .15s}button:active{transform:translateY(1px)}[hidden]{display:none!important}.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{font-family:Georgia,serif;color:var(--gold);font-size:35px}.brand h1{font-size:21px;letter-spacing:.14em;font-weight:650;display:inline-block}.brand-sub{font-size:11px;color:var(--muted);margin-left:12px;letter-spacing:.08em}.save-status{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}.save-status:before{content:"";width:5px;height:5px;border-radius:50%;background:#b29a71;flex-shrink:0}.save-status.error{color:#9d513e}.overview{display:grid;grid-template-columns:1fr 1fr;gap:16px}.principal-card{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(115deg,#e9dcc0,#f0e5ce 60%,#dcc6a1);padding:28px 30px 24px;border:1px solid #ddc9a5;display:flex;flex-direction:column;justify-content:center}.card-label{font-size:13px;font-weight:500;color:#736149}.currency{font-size:10px;letter-spacing:.15em;margin-left:8px;color:#8b775b}.principal-value{display:flex;align-items:baseline;gap:9px;margin:17px 0 21px;font-size:clamp(27px,3.7vw,42px);line-height:1.2;font-weight:550;letter-spacing:-.035em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.principal-value>span:last-child{min-width:0}.currency-symbol{font-size:.65em;font-weight:400;color:#79613d}.principal-bottom{display:flex;justify-content:space-between;font-size:11px;color:#7c694c}.summary-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:28px 24px}.metric{display:flex;flex-direction:column;gap:15px;min-width:0}.metric+.metric{border-left:1px solid var(--line);padding-left:24px;margin-left:14px}.metric strong{font-size:clamp(20px,2.7vw,28px);font-weight:550;font-variant-numeric:tabular-nums;letter-spacing:-.025em;overflow-wrap:anywhere}.metric strong>span:only-child{font-size:.6em;margin-left:2px}.small-currency{font-size:.65em;font-weight:400;margin-right:5px}.projection-card{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:25px 30px 20px;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}.projection-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.projection-heading h2{font-size:14px;color:#6f614e}.year-badge{font-size:12px;color:#866834;background:#f5eddf;border:1px solid #ecdfc6;padding:6px 11px;border-radius:7px;white-space:nowrap}#year-output{font-weight:650;font-size:15px}#years{grid-column:1;width:100%;margin:14px 0 0;height:28px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;--progress:0%;border:0;touch-action:pan-y;padding:0}#years::-webkit-slider-runnable-track{height:5px;border-radius:9px;background:linear-gradient(to right,#af8c50 var(--progress),#ece5d9 var(--progress))}#years::-webkit-slider-thumb{-webkit-appearance:none;width:23px;height:23px;border-radius:50%;margin-top:-9px;background:#fffdf8;border:5px solid #ad8950;box-shadow:0 2px 6px #79613d22}#years::-moz-range-track{height:5px;border-radius:9px;background:#ece5d9}#years::-moz-range-progress{height:5px;background:#af8c50}#years::-moz-range-thumb{height:13px;width:13px;border-radius:50%;background:#fffdf8;border:5px solid #ad8950}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:#928573;grid-column:1}.projection-result{grid-column:2;grid-row:1/4;border-left:1px solid var(--line);padding-left:36px;align-self:center;min-width:0}.result-label{font-size:12px;color:var(--muted)}.future-value{font-size:clamp(28px,3vw,36px);color:#967341;letter-spacing:-.03em;margin:9px 0 13px;font-weight:550;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.projection-breakdown{display:flex;gap:14px;font-size:11px;color:var(--muted);flex-wrap:wrap}.projection-breakdown b{font-weight:500;color:#62513b}.calculation-note{font-size:10px;color:#8a7d69;margin-top:16px;grid-column:1/-1}.projects-section{margin-top:31px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.primary-button{border:1px solid #a3885b;background:#a08452;color:#fffefa;border-radius:9px;font-size:12px;font-weight:500;padding:10px 14px;min-height:40px}.primary-button:hover{background:#8f7345}.project-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.project-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:20px;min-width:0}.project-name{display:flex;align-items:center;gap:9px;margin-bottom:18px}.project-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}.project-name input{font-weight:600;border:1px solid transparent;background:transparent;padding:5px 0;width:100%;min-width:0;font-size:16px;color:var(--ink);border-radius:3px;text-overflow:ellipsis}.project-name input:hover{border-bottom-color:var(--line)}.project-fields{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px}.field{min-width:0;display:flex;flex-direction:column;gap:8px}.field-label{font-size:11px;color:var(--muted)}.field input{width:100%;min-width:0;font-size:17px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums;border:1px solid #e9e1d4;border-radius:8px;background:#faf8f3;color:var(--ink);padding:11px 10px;appearance:textfield;-moz-appearance:textfield}.field input::-webkit-inner-spin-button,.field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field input[aria-invalid=true]{border-color:#a4543b}.field-error{font-size:11px;color:#a4543b;grid-column:1/-1}.project-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #eee8de;margin-top:17px;padding-top:9px}.project-income{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.project-income span{font-size:11px;color:var(--muted)}.project-income strong{font-size:15px;font-weight:550;color:#8f7041;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.delete{color:#8d7f6e;background:none;border:0;font-size:11px;padding:10px 0 10px 10px;min-height:38px;flex-shrink:0}.delete:hover{color:#a4543b}.project-tools{display:flex;justify-content:flex-end;margin-top:5px}.text-button{border:0;background:none;color:#958165;padding:12px 2px;font-size:11px;min-height:40px}.text-button:hover{color:#6f5430}.empty-state{text-align:center;padding:26px 20px 30px;background:#fffefa;border:1px dashed #ddd0b9;border-radius:16px}.empty-mark{font-size:35px;color:#b59865}.empty-state p{font-size:14px;margin:10px 0 8px}.empty-state span{font-size:12px;color:var(--muted)}.allocation-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:17px}.allocation-section h2{font-size:15px}.subtle{font-size:11px;color:var(--muted)}.allocation-bar{display:flex;height:9px;gap:3px;background:#f1ece3;border-radius:5px;overflow:hidden;margin:24px 0}.allocation-bar>div{min-width:0}.allocation-legend{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}.legend-item{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;min-width:0}.legend-name{display:flex;align-items:center;gap:8px;min-width:0}.legend-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-dot{height:7px;width:7px;border-radius:50%;flex-shrink:0}.legend-percent{font-variant-numeric:tabular-nums;color:var(--muted);flex-shrink:0}footer{font-size:10px;color:#948778;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:24px;line-height:1.7}footer details{text-align:right;max-width:65%}footer summary{cursor:pointer}footer details p{margin-top:8px;text-align:left}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#493e2e;color:#fffdf7;padding:13px 18px;border-radius:10px;box-shadow:0 8px 30px #31271320;display:flex;align-items:center;gap:18px;font-size:12px;z-index:5}.toast button{background:none;border:0;color:#ead3a7;font-size:12px;padding:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){main{padding:22px 20px 25px}.site-header{margin-bottom:22px}.brand-sub{display:block;margin:4px 0 0;font-size:10px;letter-spacing:.04em}.brand h1{font-size:20px}.brand-mark{font-size:32px}.overview{display:block}.principal-card{padding:24px;border-radius:18px}.principal-value{font-size:clamp(27px,8.8vw,42px);margin:15px 0 18px}.summary-card{margin-top:12px;padding:22px 20px;border-radius:18px}.metric{gap:11px}.metric+.metric{padding-left:20px;margin-left:4px}.metric strong{font-size:clamp(20px,6vw,27px)}.card-label{font-size:12px}.projection-card{display:block;margin-top:12px;padding:20px;border-radius:18px}#years{margin-top:19px}.range-labels{margin-top:3px}.projection-result{border-left:0;padding:20px 0 0;margin-top:19px;border-top:1px solid var(--line)}.future-value{font-size:clamp(27px,8vw,34px);margin-top:9px}.projection-breakdown{gap:7px 16px;font-size:11px}.calculation-note{margin-top:15px}.projects-section{margin-top:28px}.section-heading{margin-bottom:15px}.project-list{grid-template-columns:minmax(0,1fr);gap:12px}.project-card{padding:18px}.project-name{margin-bottom:15px}.project-name input{font-size:16px}.project-fields{gap:12px}.field input{font-size:17px;padding:11px 10px}.project-bottom{margin-top:15px;padding-top:7px}.project-income{gap:8px}.allocation-section{padding:20px}.allocation-legend{grid-template-columns:minmax(0,1fr);gap:15px}footer{gap:10px}.save-status{font-size:10px}}
@media(max-width:350px){main{padding:20px 14px}.principal-card{padding:21px}.summary-card{padding:20px 16px}.metric+.metric{padding-left:15px}.projection-card{padding:18px}.project-card{padding:16px}.field input{font-size:16px;padding:11px 8px}.project-fields{gap:10px}.project-income strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Local installation and backup controls */
.local-section{margin-top:17px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.local-section h2{font-size:15px}.install-button{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:12px 16px;border:1px solid #ddcaab;border-radius:10px;background:#f3ead9;color:#7d6037;font-size:14px}.install-button:hover{background:#eee0c8}.backup-actions{display:flex;align-items:center;justify-content:center;gap:20px;color:#c3b69f;margin-top:8px}.backup-actions .text-button{font-size:12px;min-height:44px}.local-dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;width:calc(100% - 32px);max-width:430px;max-height:85dvh;overflow:auto;box-shadow:0 24px 80px #3b33292b}.local-dialog::backdrop{background:#30281d66}.close-button{border:0;background:#f5f0e6;color:#806e53;border-radius:50%;height:36px;width:36px;font-size:24px;line-height:1}.install-steps{margin:22px 0;padding-left:22px;font-size:14px;line-height:1.9}.install-steps li{padding:0 0 14px 4px}.install-steps b{font-weight:600;color:#836438}.local-note{font-size:12px;color:var(--muted);line-height:1.8;margin-top:12px}.local-dialog>.primary-button{width:100%;margin-top:22px;min-height:44px}.local-section [data-state="failed"],.local-section [data-state="unsupported"]{color:#97533e}.field input.amount-input{font-variant-numeric:tabular-nums}
@media(max-width:720px){.local-section{padding:20px}.local-section .section-heading{flex-wrap:wrap;gap:8px}.local-dialog{padding:22px}.field input.amount-input{font-size:16px}}
@media(display-mode:standalone){main{padding-top:max(22px,env(safe-area-inset-top));padding-bottom:max(25px,env(safe-area-inset-bottom))}.toast{bottom:max(24px,env(safe-area-inset-bottom))}}