:root{--ink:#19344f;--muted:#7b91aa;--teal:#009bab;--accent:#007d8f;--line:#d7e3ed;--pale:#e5f3f5;--red:#ff666d;--bg:#f3f8fa;--green:#3b9a55}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select{font:inherit;color:inherit;border:1px solid var(--line);background:white;border-radius:3px;min-height:40px;padding:8px 12px}button{cursor:pointer;touch-action:manipulation}button:hover,button.active{background:var(--pale);border-color:var(--accent)}button:focus-visible,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}.primary{background:var(--accent);color:white;border-color:var(--accent)}.primary:hover{background:#006575}.danger{color:#bb3440}input{min-width:0;width:100%}select{max-width:100%}label{display:grid;gap:7px;color:var(--muted)}h1{font-size:30px;margin:0}h2{font-size:17px;margin:0 0 16px}h3{font-size:15px;margin:0}p{line-height:1.5}header{height:58px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:10px}header strong{font-size:18px}nav{position:fixed;left:0;top:58px;bottom:0;width:180px;padding:22px 10px;display:flex;flex-direction:column;gap:8px}nav button{border:0;text-align:left;background:transparent;height:48px}nav .active{border-left:4px solid var(--accent)}main{margin-left:180px;padding:24px;max-width:2300px}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.toolbar h1{margin-right:auto}.toolbar label{font-size:12px}.toolbar input[type=date]{width:160px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{background:white;border:1px solid var(--line);padding:18px;min-width:0;position:relative;min-height:220px}.card .expand{position:absolute;right:12px;top:10px;padding:5px;min-height:32px;width:34px;font-size:21px}.card h2{padding-right:40px}.card.expanded{position:fixed;inset:70px 22px 22px 194px;z-index:10;overflow:auto;animation:grow .22s ease-out}.card.expanded .chart{height:65vh}.chart{width:100%;height:245px;display:block}.big{font-size:34px;font-weight:700;margin:12px 0}.muted{color:var(--muted);font-size:12px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px}.summary>div+div{border-left:1px solid var(--line);padding-left:18px}.summary b{display:block;font-size:25px;margin-top:12px}.income{color:var(--accent)}.expense{color:var(--red)}.positive{color:var(--green)}.account-list{max-height:116px;overflow:auto}.balance-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0}.accounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:20px}.account{padding:14px;text-align:left;min-height:112px}.account h3{margin-bottom:10px}.account .balance-row{font-size:12px}.total{background:var(--pale);border-color:var(--accent)}.donut-wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:15px}.legend{max-height:240px;overflow:auto}.legend button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;border:0;text-align:left;padding:5px;background:transparent}.legend .active{background:var(--pale)}.dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}.legend span:last-child{margin-left:auto}.table-wrap{overflow:auto;max-height:420px}.expanded .table-wrap{max-height:75vh}table{border-collapse:collapse;width:100%;font-size:13px}th{background:#eff5f8;text-align:left;font-weight:500;position:sticky;top:0}td,th{border:1px solid var(--line);padding:9px 10px}td:last-child,th:last-child{text-align:right;white-space:nowrap}tbody tr:hover{background:var(--pale)}td small{display:block;color:var(--muted)}.transactions{display:grid;gap:8px}.transaction{background:white;border:1px solid var(--line);padding:12px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.transaction button{min-height:30px;font-size:12px}.transaction small{color:var(--muted);display:block;margin-top:4px}.transaction .amount{text-align:right;font-weight:600}.pill{display:inline-block;color:var(--accent);background:var(--pale);padding:2px 6px;font-size:11px;margin-left:5px}.login{max-width:420px;margin:10vh auto;padding:28px;background:white;border:1px solid var(--line);display:grid;gap:18px}dialog{border:1px solid var(--line);padding:24px;width:min(720px,94vw);max-height:90dvh;color:var(--ink);border-radius:4px}dialog::backdrop{background:#19344f66}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-head h2{margin:0}.form{display:grid;gap:16px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.category-picker{display:grid;grid-template-columns:1fr 1.3fr;border:1px solid var(--line);min-height:250px}.category-parents{border-right:1px solid var(--line);max-height:360px;overflow:auto}.category-parents>div{display:flex;align-items:center;padding:5px}.category-parents button{border:0;text-align:left;flex:1}.category-picker input[type=checkbox]{width:18px;min-height:18px;margin:8px}.category-children{padding:12px;max-height:360px;overflow:auto}.category-children label{display:flex;align-items:center;border:1px solid var(--line);margin-bottom:8px;padding:5px;color:var(--ink)}#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);max-width:90%;padding:12px 20px;background:var(--ink);color:white;z-index:30;display:none}.empty{padding:60px 20px;text-align:center;color:var(--muted)}svg text{font-family:inherit;fill:var(--muted);font-size:11px}svg .value{fill:var(--accent);font-size:11px}svg .bar,svg .slice{cursor:pointer;transition:opacity .18s,transform .22s}.donut-animate{animation:reveal .55s ease-out}@keyframes reveal{from{opacity:.3;transform:rotate(-20deg)}to{opacity:1;transform:rotate(0)}}@keyframes grow{from{opacity:.5;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media(max-width:900px){nav{width:145px}main{margin-left:145px;padding:16px}.cards{grid-template-columns:1fr}.card.expanded{left:155px}.summary b{font-size:21px}}@media(max-width:600px){header{padding:0 15px}header strong{font-size:16px}header button{font-size:12px}nav{top:auto;bottom:0;right:0;width:auto;height:calc(62px + env(safe-area-inset-bottom));background:white;border-top:1px solid var(--line);flex-direction:row;padding:5px 8px;padding-bottom:env(safe-area-inset-bottom);z-index:20}nav button{flex:1;text-align:center;font-size:13px}nav .active{border-left:0;border-top:3px solid var(--accent)}main{margin:0;padding:16px 12px 90px}.toolbar{gap:8px}.toolbar h1{width:100%;font-size:25px}.toolbar label{flex:1}.toolbar input[type=date]{width:100%}.accounts{grid-template-columns:1fr 1fr;gap:7px}.account{padding:10px}.card{padding:14px}.card.expanded{inset:8px 8px calc(70px + env(safe-area-inset-bottom));padding:14px}.card.expanded .chart{height:52vh}.donut-wrap{grid-template-columns:1fr}.donut-wrap .chart{height:240px}.legend{max-height:190px}.summary{gap:9px}.summary>div+div{padding-left:9px}.summary b{font-size:17px}.form-row{grid-template-columns:1fr}.category-picker{grid-template-columns:1fr 1fr}.big{font-size:29px}.login{margin:8vh 12px}.transaction{font-size:13px}.chart{height:220px}dialog{padding:18px}}
[hidden]{display:none!important}.chart-scroll{overflow-x:auto;overflow-y:hidden}.toolbar label{min-width:0}.card{overflow:hidden}.summary>div{min-width:0}.summary b{overflow-wrap:anywhere}
@media(max-width:600px){.toolbar label{flex:1 1 calc(50% - 8px)}.toolbar h1{flex:1 1 100%}.toolbar select{flex:1;min-width:110px}.toolbar input[type=date]{min-width:130px}.summary{grid-template-columns:1fr;padding-top:0}.summary>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0}.summary>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}.summary b{margin:0;font-size:20px}.chart-scroll .chart{min-width:620px}.card.expanded .chart-scroll .chart{min-width:620px}.category-parents button{min-width:0;overflow-wrap:anywhere}.toolbar>input{flex:1 1 190px}}
.password-field{display:flex;min-width:0}.password-field input{flex:1;border-radius:3px 0 0 3px}.password-field button{flex-shrink:0;border-left:0;border-radius:0 3px 3px 0;color:var(--accent);min-width:88px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand img{display:block;flex-shrink:0;border-radius:7px}.summary b{white-space:nowrap;overflow-wrap:normal;font-size:clamp(14px,1.1vw,25px)}@media(max-width:600px){.summary b{font-size:20px}.brand{gap:8px}.brand img{width:30px;height:30px}header strong{font-size:15px}}
/* A shared 44px control row, including Safari's date and select controls. */
.analytics-filters{display:grid;grid-template-columns:minmax(180px,1fr) repeat(2,160px) 190px 170px;align-items:end;gap:12px}
.analytics-filters h1{align-self:center;width:auto;margin:0}
.analytics-filters label{display:grid;grid-template-rows:16px 44px;gap:7px;min-width:0;font-size:12px}
.analytics-filters input[type=date],.analytics-filters select,.analytics-filters button{box-sizing:border-box;appearance:none;-webkit-appearance:none;height:44px;min-height:44px;max-height:44px;width:100%;min-width:0;margin:0;padding:0 12px;line-height:normal;font-size:14px;border:1px solid var(--line);border-radius:3px;background-color:white;vertical-align:middle;text-align:left}
.analytics-filters input::-webkit-date-and-time-value{text-align:left;min-height:1.2em}
.analytics-filters select{padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%2319344f' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat}
.header-actions{display:flex;align-items:center;gap:10px;min-width:0}.privacy-button{height:40px;width:40px;min-height:40px;padding:8px;display:grid;place-items:center;flex-shrink:0;color:var(--accent)}.header-actions .profile-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media(max-width:1150px){.analytics-filters{grid-template-columns:repeat(4,minmax(0,1fr))}.analytics-filters h1{grid-column:1/-1;margin-bottom:6px}}
@media(max-width:600px){.analytics-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.analytics-filters h1{grid-column:1/-1}.analytics-filters label{width:100%;min-width:0}.analytics-filters input[type=date],.analytics-filters select,.analytics-filters button{width:100%;min-width:0;height:44px;font-size:16px}.header-actions{gap:6px;max-width:44%}.header-actions .profile-button{max-width:120px;padding:8px}.brand strong{font-size:13px}.brand img{width:28px;height:28px}header{gap:8px;padding:0 12px}}
/* Pull to refresh moves the content, while bottom navigation remains anchored. */
.pull-refresh{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:60px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--accent);font-size:13px;pointer-events:none;opacity:0;transform:translateY(-20px);transition:opacity .18s,transform .18s;z-index:15;background:var(--bg)}
.pull-refresh.visible{opacity:1;transform:translateY(0)}.pull-refresh-mark{position:relative;width:42px;height:42px;display:grid;place-items:center;flex-shrink:0}.pull-refresh-spinner{position:absolute;inset:0;border:0;border-radius:50%;animation:pull-spin 1.5s linear infinite;transform-origin:50% 50%;will-change:transform}.pull-refresh-spinner:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 85deg,#009bab15 150deg,#009bab66 245deg,#009bab 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))}.pull-refresh-spinner:after{content:"";position:absolute;left:50%;top:1px;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#009bab;box-shadow:0 0 8px #009bab33}
@keyframes pull-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:900px){html{overscroll-behavior-y:contain}#app>header,#app>main{transition:transform .22s ease}body.pull-active #app>header,body.pull-active #app>main{transform:translateY(var(--pull-distance,0px))}body.pull-dragging #app>header,body.pull-dragging #app>main{transition:none}}
@media(prefers-reduced-motion:reduce){.pull-refresh,#app>header,#app>main{transition:none!important}.pull-refresh-spinner{animation-duration:3s}}


#app>header{position:sticky;top:0;z-index:25;flex-shrink:0}
.profile-button{display:flex;align-items:center;gap:9px;height:40px;padding:4px 12px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--accent);color:white;font-size:12px;font-weight:600}.avatar img{width:100%;height:100%;object-fit:cover}.profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar-editor{display:flex;align-items:center;gap:16px;margin:12px 0 20px}.avatar-editor .avatar{width:72px;height:72px;font-size:24px}.avatar-editor input[hidden]{display:none}
@media(max-width:600px){.header-actions .profile-button{padding:4px 6px;gap:6px;max-width:140px}.profile-button .avatar{width:28px;height:28px}}

.avatar-crop{display:block;width:min(100%,320px);height:auto;aspect-ratio:1;margin:16px auto;border-radius:50%;border:2px solid var(--accent);background:var(--pale);touch-action:none;cursor:grab}.avatar-crop:active{cursor:grabbing}.avatar-crop-zoom{display:flex;align-items:center;gap:12px;margin:16px 0}.avatar-crop-zoom input{padding:0;accent-color:var(--accent);flex:1}.avatar-crop-zoom button{width:44px;height:44px;font-size:20px}.avatar-crop-actions{display:flex;gap:12px;justify-content:flex-end}.avatar-crop-actions button{height:44px;min-width:110px}

.avatar-editor{flex-wrap:wrap}.avatar-editor button{height:44px}

.profile-dialog{width:480px;max-width:calc(100vw - 24px)}.profile-identity{display:flex;align-items:center;gap:16px;margin:8px 0 18px}.profile-identity .avatar{width:72px;height:72px;font-size:24px}.profile-identity h3{font-size:19px;line-height:1.4}.profile-dialog .avatar-editor{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 24px}.profile-dialog .avatar-editor button{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px;font-size:13px;height:44px}.profile-dialog svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.profile-dialog .avatar-editor svg{color:var(--accent)}.profile-menu{display:grid;gap:10px}.profile-action{width:100%;display:flex;align-items:center;gap:14px;text-align:left;min-height:72px;padding:12px 14px;transition:background .15s,border-color .15s}.profile-action-icon{width:38px;height:38px;display:grid;place-items:center;background:var(--pale);color:var(--accent);flex-shrink:0;border-radius:6px}.profile-action-text{display:grid;gap:5px;min-width:0}.profile-action-text strong{font-size:14px;font-weight:600}.profile-action-text small{font-size:12px;color:var(--muted);line-height:1.4}.profile-footer{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}.profile-logout{min-height:48px;border-color:transparent;color:var(--red)}.profile-logout .profile-action-icon{background:transparent;color:inherit}.profile-logout:hover{border-color:var(--red)}
@media(max-width:420px){.profile-dialog{padding:18px}.profile-dialog .avatar-editor{grid-template-columns:1fr}.profile-identity h3{font-size:17px}.profile-action{padding:10px;gap:10px}}