:root{color-scheme:dark;--bg:#0B1220;--surface:#14283C;--accent:#58E2C4;--text:#edf6fa;--muted:#adbfce;--border:#30495c;--danger:#ff929b;--radius:20px;--nav-height:88px}
html[data-theme=gold]{--bg:#0E0E0E;--surface:#1A1A1A;--accent:#E8BD65;--text:#faf4e8;--muted:#c4bbb0;--border:#484139}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block:24px 160px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Noto Sans TC",sans-serif}#shell{width:100%;max-width:660px;min-width:0;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
main,#view,section,form,details,label,.card,.row>*{min-width:0;max-width:100%}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px}header>div{min-width:0}small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}header small{letter-spacing:1.3px}h1{font-size:21px;line-height:1.3;margin:4px 0}h1 span{color:var(--accent);font-size:10px;margin-left:8px}h2{font-size:23px;line-height:1.35;margin:0 0 16px;letter-spacing:-.4px}h3{font-size:16px;margin:0 0 12px}p{margin:8px 0 16px;line-height:1.65}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.page-heading h2{margin:4px 0 0}.page-heading .eyebrow{margin:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;overflow-wrap:anywhere}.hero{padding:22px;background:linear-gradient(125deg,var(--surface),var(--bg))}.hero-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.eyebrow{font-size:13px;color:var(--muted)}.pill{color:var(--accent);font-size:11px;border:1px solid var(--border);border-radius:20px;padding:4px 8px}.money{font-size:clamp(30px,9vw,44px);font-weight:700;letter-spacing:-1.5px;line-height:1.2;font-variant-numeric:tabular-nums;margin:14px 0}.hero-caption{font-size:13px;color:var(--muted);margin:0 0 14px}.accent{color:var(--accent)}.danger{color:var(--danger)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid .money{font-size:clamp(20px,5.7vw,28px);letter-spacing:-.8px;margin:10px 0 0}.monthly .card{padding:16px}.safe-breakdown{border-top:1px solid var(--border);margin:8px 0 0}.safe-breakdown summary{font-size:13px;color:var(--muted)}.safe-breakdown .row{padding:8px 0}.safe-breakdown small{margin-left:5px}.asset-total{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:12px;font-size:13px}.asset-total span{color:var(--muted)}.row{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.row:last-child{border:0}.row>button{flex-shrink:0}.bill-row>strong{white-space:nowrap}.status{display:inline-block;font-size:12px;color:var(--accent);margin-top:4px}.status.danger{color:var(--danger)}.muted,.hint{color:var(--muted);line-height:1.65}.hint{font-size:12px;margin:4px 0 12px}.tag{font-size:12px;color:var(--accent)}.welcome h3{font-size:22px;margin:10px 0}
button,input,select,textarea{font:inherit}button{min-height:44px;min-width:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:10px 14px;cursor:pointer}button.primary{background:var(--accent);color:var(--bg);font-weight:700;width:100%;margin:4px 0 0}button:disabled{opacity:.55;cursor:wait}.quiet{font-size:12px;flex-shrink:0}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#profileButton{border-radius:50%;padding:0;width:46px;height:46px;flex-shrink:0;overflow:hidden;border:2px solid var(--border)}#avatar{width:100%;height:100%;object-fit:cover}input,select,textarea{display:block;font-size:16px;min-width:0;max-width:100%;width:100%;min-height:46px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--bg);padding:10px 12px;margin:6px 0 12px;scroll-margin-block:24px 160px}input[type=date],input[type=datetime-local]{-webkit-appearance:none;min-width:0;width:100%;text-align:left}input::-webkit-date-and-time-value{text-align:left}input[type=checkbox]{display:inline-block;width:22px;min-height:22px;margin:0;flex-shrink:0;accent-color:var(--accent)}label{display:block;color:var(--muted);font-size:13px}.inline{display:flex;align-items:center;gap:8px;min-height:44px}.inline input{margin:0}.row label.inline{flex-shrink:0;font-size:12px}form>.hint{margin-top:-4px}input[type=file]{padding:9px;overflow:hidden}input::file-selector-button{max-width:100%;font:inherit}input[type=range]{padding:0;accent-color:var(--accent);border:0;background:transparent}
nav{position:fixed;z-index:4;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,660px);display:grid;grid-template-columns:1fr 1fr 76px 2fr;align-items:center;min-height:var(--nav-height);background:var(--surface);border:1px solid var(--border);border-radius:22px 22px 0 0;padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}nav button{border:0;font-size:23px;line-height:1.1;background:transparent;min-width:44px;padding:7px 2px;justify-self:stretch}nav button span{display:block;font-size:11px;margin-top:6px;color:var(--muted)}nav button.active,nav button.active span{color:var(--accent)}nav .add{position:relative;justify-self:center;background:var(--accent);color:var(--bg);border:5px solid var(--bg);border-radius:50%;width:66px;height:66px;transform:translateY(-16px);font-size:34px;line-height:1;padding:0}nav .add span{position:absolute;inset:auto -10px -20px;font-size:11px;margin:0;color:var(--accent)}.keyboard-open nav{display:none}.keyboard-open #shell{padding-bottom:32px}
footer{font-size:11px;color:var(--muted);margin-top:24px;text-align:center;line-height:1.7}progress{width:100%;height:8px;accent-color:var(--accent)}#notice{position:sticky;top:max(8px,env(safe-area-inset-top));z-index:5;background:var(--surface);color:var(--accent);border-radius:12px;font-size:14px}#notice:not(:empty){border:1px solid var(--accent);padding:12px;margin-bottom:14px}#privacy{position:fixed;inset:0;z-index:100;background:var(--bg);text-align:center;padding-top:30vh}body.locked #shell{visibility:hidden}a{color:var(--accent);display:inline-block;min-height:44px;padding:12px 0}details{margin-bottom:12px}summary{min-height:44px;cursor:pointer;padding:12px 0;font-size:14px}details>summary{list-style-position:inside}.settings-group{padding:0 18px}.settings-group>summary{padding:16px 0}.settings-group>summary strong{font-size:16px}.settings-group>summary .hint{display:block;margin:3px 0 0 18px}.group-content{padding:0 0 16px}.group-content>details{border-top:1px solid var(--border);margin-top:12px}.group-content>details>summary{font-weight:600}.empty{padding:10px 0;color:var(--muted);line-height:1.7}.logout{width:100%;margin:4px 0 16px}#avatarPreview{display:block;width:180px;height:180px;max-width:100%;border-radius:50%;border:2px solid var(--accent);margin:16px auto;aspect-ratio:1;object-fit:cover}.actions{display:flex;gap:10px}.actions>button{flex:1}.actions>button.primary{margin:0}#login{margin-top:32px}#login h2{margin:16px 0}[hidden]{display:none!important}
@media(min-width:600px){#shell{padding-left:24px;padding-right:24px}.card{padding:22px}.settings-group{padding:0 22px}}
@media(max-width:360px){#shell{padding-left:12px;padding-right:12px}.card{padding:15px}.settings-group{padding:0 15px}.pill{font-size:10px}.hero{padding:18px}.grid{gap:8px}.row{gap:8px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s} .card{animation:appear .16s ease-out}@keyframes appear{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}}
.upload-label{position:relative;display:flex;justify-content:center;align-items:center;min-height:48px;border:1px dashed var(--accent);border-radius:12px;color:var(--accent);cursor:pointer;padding:12px;margin:12px 0}.upload-label input[type=file]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.upload-label:focus-within{outline:2px solid var(--accent);outline-offset:3px}

.password-editing nav{display:none}.password-editing #shell{padding-bottom:32px}#passwordForm button{scroll-margin-block:24px 48px}