:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--paper:#FFFFFF;color-scheme:light;--note:#EFE7CF;--ink:#13352B;--ink2:#1A4536;--muted:#5C6E64;--line:rgba(19,53,43,.16);--field:#FFFFFF;
--good:#2F7A4E;--warn:#9A6A12;--bad:#9B3B2E;--chip:#F3EEDD;--btn:#13352B;--btnInk:#F7F3E8;--rule:rgba(26,69,54,.09)}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font:16px/1.55 'Open Sans','Helvetica Neue',Arial,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,.mono{font-family:Michroma,'Helvetica Neue',Arial,sans-serif;font-weight:400;letter-spacing:.01em}
h1{font-size:clamp(22px,6vw,30px);line-height:1.25;margin:.2em 0 .35em}
h2{font-size:17px;line-height:1.35;margin:28px 0 10px}
p{margin:0 0 12px}
a{color:inherit}
.wrap{max-width:640px;margin:0 auto;padding:0 18px 120px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
header.top .in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:56px}
.brand{font-family:Michroma,Arial,sans-serif;font-size:15px;flex:1}
.save{font-size:12px;color:var(--muted)}
.iconbtn{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ink);font-size:22px;cursor:pointer;border-radius:22px}
.lead{color:var(--muted);font-size:15px}
/* banknote */
.note{position:relative;margin:18px 0 8px;background:var(--note);border:2px solid var(--ink);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:96px 1fr}
.note::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 9px,var(--rule) 9px 11px);pointer-events:none}
.note .por{display:block;position:relative;z-index:1;text-decoration:none;background:url(portrait.jpg) center/cover;filter:saturate(.9);border-right:1px solid var(--line)}
.note .por span{position:absolute;left:6px;right:6px;bottom:6px;background:rgba(19,53,43,.82);color:#fff;font-size:11px;font-weight:700;text-align:center;border-radius:10px;padding:4px 2px}
.note .who{font-family:Michroma,Arial,sans-serif;font-size:13px;margin-bottom:2px;padding-right:84px;word-break:break-word}
.avatar{width:120px;height:150px;border-radius:16px;border:2px solid var(--ink);background:center/cover no-repeat var(--note);margin:8px 0 12px}
.note .body{position:relative;z-index:1;padding:16px 16px 14px}
.note .k{font-size:12px;color:var(--ink2);font-weight:700}
.note .big{font-family:Michroma,Arial,sans-serif;font-size:clamp(24px,7.5vw,36px);line-height:1.1;margin:14px 0 6px;word-break:break-word}
.note .row{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink2)}
.note .row b{font-weight:700}
.note .pct{position:absolute;right:14px;top:12px;text-align:right}
.note .pct .mono{font-size:22px;line-height:1}
.note .pct small{display:block;font-size:11px;font-weight:700;color:var(--ink2)}
/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.stat{border:1px solid var(--line);border-radius:14px;padding:12px;background:#FAF7EE}
.stat .l{font-size:12.5px;color:var(--muted)}
.stat .v{font-size:19px;font-weight:700;margin-top:2px;word-break:break-word}
.stat .s{font-size:12px;color:var(--muted)}
.good{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}
/* path */
.module{margin:22px 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.step{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);padding:14px 4px;color:var(--ink);cursor:pointer;font:inherit;min-height:64px}
.step:last-of-type{border-bottom:1px solid var(--line)}
.step .n{flex:0 0 38px;height:38px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-family:Michroma,Arial,sans-serif;font-size:14px}
.step.done .n{background:var(--ink);color:var(--paper)}
.step .t{flex:1;min-width:0}
.step .t b{display:block;font-weight:700}
.step .t span{font-size:13.5px;color:var(--muted)}
.step .go{color:var(--muted);font-size:20px}
/* forms */
label.f{display:block;margin:12px 0}
label.f>span{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
label.f>small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
input[type=text],input[type=date],select,textarea{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);color:var(--ink);font:16px 'Open Sans',Arial,sans-serif}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid color-mix(in srgb,var(--good) 55%,transparent);outline-offset:1px}
.money{position:relative}.money::before{content:"R";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;pointer-events:none}
.money input{padding-left:30px}
.line{display:grid;grid-template-columns:1fr 130px 44px;gap:8px;align-items:center;margin:8px 0}
.line.three{grid-template-columns:1fr 112px 44px}
.line .sub{grid-column:1/3;display:flex;gap:8px;margin-top:-2px}
.line .sub select{min-height:40px;font-size:14px;padding:6px 10px}
.x{min-width:44px;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}
.debt{border:1px solid var(--line);border-radius:14px;padding:10px 12px 4px;margin:10px 0;background:#FAF7EE}
.debt .hd{display:flex;gap:8px;align-items:center}
.debt .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.debt label.f{margin:8px 0}
.debt label.f>span{font-size:12.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:24px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:700 15px 'Open Sans',Arial,sans-serif;cursor:pointer}
.btn.fill{background:var(--btn);border-color:var(--btn);color:var(--btnInk)}
.btn.small{min-height:40px;padding:0 14px;font-size:14px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{min-height:38px;padding:0 14px;border-radius:19px;border:1px solid var(--line);background:var(--chip);color:var(--ink);font:600 13.5px 'Open Sans',Arial,sans-serif;cursor:pointer}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:24px;overflow:hidden;margin:6px 0}
.seg button{flex:1;min-height:46px;border:0;background:transparent;color:var(--ink);font:700 14px 'Open Sans',Arial,sans-serif;cursor:pointer;padding:0 8px}
.seg button[aria-pressed=true]{background:var(--btn);color:var(--btnInk)}
.check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.check input{width:24px;height:24px;margin:1px 0 0;flex:0 0 24px;accent-color:var(--ink)}
.check span{flex:1}
.check small{display:block;color:var(--muted);font-size:13px}
.result{margin:22px 0 10px;padding:16px;border-radius:16px;background:var(--note);border:1.5px solid var(--ink)}
.result h2{margin:0 0 8px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px}
.kv:last-child{border-bottom:0}
.kv b{text-align:right;white-space:nowrap}
.action{margin:18px 0;padding:14px 16px;border-left:4px solid var(--ink);background:#FAF7EE;border-radius:0 14px 14px 0}
.action b{display:block;margin-bottom:4px}
.msg{font-size:14px;padding:10px 12px;border-radius:12px;background:var(--field);border:1px solid var(--line);margin:10px 0}
.range{width:100%;accent-color:var(--ink);min-height:36px}
.order{counter-reset:o;list-style:none;padding:0;margin:8px 0}
.order li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.order li::before{counter-increment:o;content:counter(o);font-family:Michroma,Arial,sans-serif;font-size:12px;width:26px;flex:0 0 26px;color:var(--muted);padding-top:2px}
.order li span{flex:1}
.chart{width:100%;height:auto;display:block;margin:8px 0}
.found{margin:12px 0;border:2px solid var(--ink);border-radius:18px;padding:0 16px;background:#FAF7EE}
.found summary{list-style:none;cursor:pointer;padding:14px 0;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;min-height:56px}
.found summary::-webkit-details-marker{display:none}
.found .l{font-weight:700;font-size:14px}.found .v{font-family:Michroma,Arial,sans-serif;font-size:22px;color:var(--good);text-align:right;white-space:nowrap}
.found .s{grid-column:1/3;font-size:12.5px;color:var(--muted)}
.found[open]{padding-bottom:12px}
.efbar{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;padding:12px 14px;border:1.5px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:56px}
.efbar b{display:block}.efbar span.t{flex:1}.efbar small{color:var(--muted);font-size:12.5px}
.efbar .ic{font-size:22px}
.brandbtn{flex:1;display:flex;align-items:center;gap:6px;min-height:44px;border:0;background:transparent;color:var(--ink);font-family:Michroma,Arial,sans-serif;font-size:14px;text-align:left;cursor:pointer;padding:0 4px;min-width:0}
.brandbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof{display:flex;align-items:center;gap:12px;width:100%;padding:14px 4px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:64px}
.prof .av{flex:0 0 44px;height:44px;border-radius:50%;background:var(--note) center/cover;border:1.5px solid var(--ink);display:grid;place-items:center;font-family:Michroma,Arial,sans-serif;font-size:14px}
.prof .t{flex:1;min-width:0}.prof .t b{display:block}.prof .t span{font-size:13px;color:var(--muted)}
.prof.on .t b::after{content:" · open";font-weight:600;color:var(--good)}
.tpl{font-size:13.5px;margin:6px 0 10px}
.wallcard{margin:16px 0;padding:18px 16px 14px;border:2px solid var(--ink);border-radius:22px;background:var(--note);position:relative;overflow:hidden}
.wallcard .top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.wallcard .ttl{font-family:Michroma,Arial,sans-serif;font-size:15px}
.wallcard .mo{font-size:12.5px;color:var(--ink2);font-weight:700}
.wallcard .pc{font-family:Michroma,Arial,sans-serif;font-size:clamp(34px,11vw,52px);line-height:1}
.wallcard .dl{font-weight:700;color:var(--good);font-size:15px;margin-top:4px}
.wallcard canvas{display:block;width:100%;height:auto;border-radius:10px}
.wallcard .ft{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin-top:10px;font-weight:600}
.cheer{text-align:center;margin:18px 0 6px}
.cheer b{display:block;font-family:Michroma,Arial,sans-serif;font-weight:400;font-size:20px;margin-bottom:6px}
.foot{font-size:12px;color:var(--muted);margin-top:32px;line-height:1.5}
nav.bot{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.bot .in{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
nav.bot a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58px;text-decoration:none;font-size:12.5px;font-weight:700;color:var(--muted)}
nav.bot a[aria-current=page]{color:var(--ink)}
nav.bot a i{font-style:normal;font-size:19px;line-height:1.1}
.next{display:flex;gap:10px;margin-top:26px}
.next .btn{flex:1}
.hist{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
.hist th,.hist td{padding:8px 4px;border-bottom:1px solid var(--line);text-align:right}
.hist th:first-child,.hist td:first-child{text-align:left}
.tblwrap{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--btn);color:var(--btnInk);padding:10px 18px;border-radius:22px;font-weight:700;font-size:14px;z-index:9;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
@media (max-width:380px){.line{grid-template-columns:1fr 112px 44px}.debt .grid{grid-template-columns:1fr 1fr}.note{grid-template-columns:76px 1fr}}
/* ---------- accounts + app shell additions ---------- */
input[type=email],input[type=password]{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);color:var(--ink);font:16px 'Open Sans',Arial,sans-serif}
.authnote .big{font-size:clamp(20px,6vw,26px)}
.authform{margin:6px 0 0}
.authform .btn{margin-top:8px}
.authlinks{margin:18px 0;text-align:center;font-size:14.5px}
.authlinks a{font-weight:700}
.msg.err{border-color:var(--bad);color:var(--bad)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
body.auth nav.bot{display:none}
body.auth .wrap{padding-bottom:40px}
.update{position:fixed;left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));z-index:10;background:var(--btn);color:var(--btnInk);border:0;border-radius:22px;padding:10px 18px;font:700 14px 'Open Sans',Arial,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.update[hidden]{display:none}
@media (display-mode:standalone){header.top{padding-top:0}}

/* ---------- floating install button ---------- */
.fab{position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:8;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border-radius:24px;border:0;background:var(--btn);color:var(--btnInk);font:700 14.5px 'Open Sans',Arial,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(19,53,43,.28)}
.fab[hidden]{display:none}
body.auth .fab{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.fab.ready{animation:fabpulse 2.4s ease-in-out 3}
@keyframes fabpulse{0%,100%{box-shadow:0 6px 18px rgba(19,53,43,.28)}50%{box-shadow:0 0 0 8px rgba(19,53,43,.12),0 6px 18px rgba(19,53,43,.28)}}
@media (prefers-reduced-motion:reduce){.fab.ready{animation:none}}
.fabpop{position:fixed;right:16px;left:16px;max-width:380px;margin-left:auto;bottom:calc(132px + env(safe-area-inset-bottom,0px));z-index:9;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:18px;padding:14px 16px;box-shadow:0 12px 32px rgba(0,0,0,.18);font-size:14.5px}
.fabpop[hidden]{display:none}
body.auth .fabpop{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.isteps{margin:14px 0 2px;padding-left:22px;font-size:14.5px}
.isteps li{margin:6px 0}
.ishare{display:inline-block;width:14px;height:16px;vertical-align:-2px;border:1.6px solid currentColor;border-top:0;border-radius:0 0 3px 3px;position:relative;margin:0 2px}
.ishare::before{content:"";position:absolute;left:50%;top:-6px;width:1.6px;height:11px;background:currentColor;transform:translateX(-50%)}
.ishare::after{content:"";position:absolute;left:50%;top:-6px;width:6px;height:6px;border-left:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:translateX(-50%) rotate(45deg)}

body.auth .brandbtn b{display:none}
body.auth .brandbtn{pointer-events:none}
body:has(#installFab:not([hidden])) .wrap{padding-bottom:190px}
body:has(#installFab:not([hidden])) .toast{bottom:calc(134px + env(safe-area-inset-bottom,0px))}
body.auth:has(#installFab:not([hidden])) .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}