:root{
  --ink:#0F2E1D; --ink2:#2F5A44; --ink3:#6B8577;
  --g1:#0E7A4B; --g2:#17A468; --g3:#23B26D; --mint:#E9F8EE; --line:#CFE8D7;
  --gold1:#FFE27A; --gold2:#F5A623; --red:#B93A1B; --red2:#E5533A;
  --card:#fff; --shadow:0 10px 28px rgba(18,122,74,.14);
  --bg:radial-gradient(circle at 92% 0%,rgba(255,226,122,.6),transparent 42%),radial-gradient(circle at 0% 38%,rgba(126,217,87,.28),transparent 46%),linear-gradient(165deg,#E6F8EC 0%,#F4FBEE 55%,#FFF5D6 100%);
  --head:'Baloo 2',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#F4FBEE}
body{font-family:var(--body);color:var(--ink);font-size:16px;background:var(--bg) fixed;line-height:1.35}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3{margin:0}
#app{min-height:100vh}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100vh}
.side{display:none}
.page{width:100%;max-width:520px;margin:0 auto;min-height:100vh;padding:20px 16px 130px;display:flex;flex-direction:column;gap:14px;position:relative}
.page.plain{padding-bottom:28px}
.page.center{align-items:center;text-align:center}
.page>*{animation:rise .5s ease-out backwards}
.page>*:nth-child(2){animation-delay:.05s}.page>*:nth-child(3){animation-delay:.1s}.page>*:nth-child(4){animation-delay:.15s}.page>*:nth-child(5){animation-delay:.2s}.page>*:nth-child(6){animation-delay:.25s}.page>*:nth-child(n+7){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes glow{0%,100%{box-shadow:0 8px 18px rgba(245,166,35,.35)}50%{box-shadow:0 8px 28px rgba(245,166,35,.65)}}
@keyframes shine{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:none}}
@keyframes fall{0%{opacity:0;transform:translateY(0)}8%{opacity:1}85%{opacity:.95}100%{opacity:0;transform:translateY(105vh)}}
@keyframes spin{from{transform:rotate(-35deg) rotateY(0)}to{transform:rotate(40deg) rotateY(160deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.mascot{animation:bob 3.2s ease-in-out infinite;transform-origin:center bottom;display:block}

@media(min-width:900px){
  .shell{gap:0}
  .side{display:flex;flex-direction:column;gap:6px;width:250px;flex:none;position:sticky;top:0;height:100vh;padding:24px 16px;background:linear-gradient(180deg,#042A1E 0%,#07503A 55%,#0B6B55 100%);color:#fff}
  .side .logo{font-family:var(--head);font-weight:800;font-size:30px;line-height:1}
  .side .logo small{display:block;font-family:var(--body);font-weight:500;font-size:13px;opacity:.8;margin:2px 0 18px}
  .side a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:14px;text-decoration:none;font-weight:700;color:rgba(255,255,255,.88)}
  .side a:hover{background:rgba(255,255,255,.1)}
  .side a.on{background:rgba(255,255,255,.18);color:#fff}
  .side .grow{flex:1}
  .main{flex:1;min-width:0}
  .page{max-width:760px;padding-bottom:60px}
  .tabbar,.fab{display:none!important}
  .page.auth{max-width:440px;justify-content:center}
}

/* ---------- type ---------- */
.title{font-family:var(--head);font-weight:800;font-size:30px;line-height:1.1;background:linear-gradient(90deg,var(--g1),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.title.big{font-size:34px}
.sub{font-weight:700;font-size:15px;color:var(--ink2);line-height:1.45}
.h2{font-family:var(--head);font-weight:700;font-size:19px}
.muted{font-weight:500;font-size:13px;color:var(--ink2)}
.small{font-size:12.5px;line-height:1.4;color:var(--ink2);font-weight:500}
.center-text{text-align:center}
.head-row{display:flex;align-items:center;gap:12px}
.head-row .t{font-family:var(--head);font-weight:800;font-size:28px;line-height:1.1}
.back{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:var(--shadow);text-decoration:none;border:0;flex:none;cursor:pointer}
.brand{font-family:var(--head);font-weight:800;font-size:34px;line-height:1;background:linear-gradient(90deg,var(--g1),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:22px;padding:12px 14px;box-shadow:var(--shadow)}
.card.pad{padding:16px}
.mint{background:linear-gradient(135deg,#C4F0D2,#FFF0B0);border-radius:22px;padding:14px;box-shadow:var(--shadow)}
.note{display:flex;gap:10px;align-items:center;background:var(--mint);border-radius:20px;padding:12px 14px;text-align:left}
.note .e{font-size:20px}
.note.warn{background:#FFF1EE}
.note.yellow{background:#FFF8DB}
.hero{color:#fff;position:relative;overflow:hidden;border-radius:28px;padding:18px;background:radial-gradient(120% 95% at 100% 0%,rgba(255,214,102,.30),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(52,211,153,.22),transparent 60%),linear-gradient(135deg,#042A1E 0%,#07503A 38%,#0E7A4B 74%,#1AAE6F 100%);box-shadow:0 18px 40px rgba(6,60,40,.34),inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,226,122,.20)}
.hero::before{content:"";position:absolute;right:-30px;top:-46px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,122,.42),rgba(255,201,60,.12) 45%,transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);background-size:260% 100%;animation:shine 9s ease-in-out infinite;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .lbl{font-weight:700;font-size:14px}
.hero .num{font-family:var(--head);font-weight:800;font-size:44px;line-height:1.05}
.tiles{display:flex;gap:10px}
.tile{flex:1;border-radius:20px;padding:12px;min-width:0}
.tile .l{font-weight:700;font-size:13px}
.tile .n{font-family:var(--head);font-weight:800;font-size:28px;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.tile.g{background:#DFF5E6;color:#0E5A38}.tile.r{background:#FFE3DC;color:#8A2A12}

/* ---------- rows ---------- */
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border-radius:20px;box-shadow:var(--shadow);text-decoration:none;color:inherit;border:0;width:100%;text-align:left;cursor:pointer;min-height:56px}
.row .ic{width:44px;height:44px;border-radius:14px;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:22px}
.row .tx{flex:1;min-width:0}
.row .nm{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .ds{font-weight:500;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.row .am{font-family:var(--head);font-weight:700;font-size:18px;white-space:nowrap}
.row .am.neg{color:var(--red)}.row .am.pos{color:var(--g1)}
.row .go{color:var(--g1);flex:none;display:flex}
.chip{display:inline-block;margin-top:3px;padding:2px 10px;border-radius:999px;font-weight:700;font-size:12px}
.chip.late{background:#FFE3DC;color:#8A2A12}.chip.soon{background:#FFF0B0;color:#7A5200}.chip.ok{background:#DFF5E6;color:#0E5A38}.chip.info{background:#E0ECFF;color:#1F4FA0}
.bar{height:10px;background:#E3F1E6;border-radius:6px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#2FBF7A,#0E8A57);border-radius:6px;transition:width .6s ease}
.sect{display:flex;align-items:center;justify-content:space-between}
.sect a,.linkbtn{color:#0E6B42;font-weight:700;font-size:14px;text-decoration:none;background:none;border:0;cursor:pointer;min-height:36px}
.date-h{font-weight:700;font-size:13px;color:var(--ink2);margin-top:4px}

/* ---------- forms ---------- */
form{display:flex;flex-direction:column;gap:12px}
label.f{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:13px;color:var(--ink2);text-align:left;width:100%}
.in,select.in{min-height:48px;border:2px solid var(--line);border-radius:16px;padding:0 14px;font:700 16px var(--body);color:var(--ink);background:#fff;width:100%;outline:none}
textarea.in{padding:12px 14px;min-height:96px;resize:none}
.in:focus{border-color:var(--g2);box-shadow:0 0 0 4px rgba(23,164,104,.15)}
.in.err{border-color:var(--red2);background:#FFF5F2}
.err-t{display:flex;gap:6px;font-weight:700;font-size:13px;color:var(--red);line-height:1.35}
.err-t:empty{display:none}
.amount{background:#fff;border-radius:24px;padding:14px 16px;box-shadow:var(--shadow)}
.amount .in{border:0;font:800 44px var(--head);padding:0;min-height:56px;box-shadow:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{border:0;border-radius:18px;background:linear-gradient(135deg,var(--gold1),var(--gold2));color:#2B1B00;font:700 16px var(--body);box-shadow:0 8px 18px rgba(0,0,0,.2);min-height:52px;width:100%;cursor:pointer;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn[disabled]{background:#D9E6DD;color:#7E9487;box-shadow:none;cursor:not-allowed}
.btn.out{background:#fff;border:2px solid var(--line);box-shadow:none;color:var(--ink);min-height:50px}
.btn.green{background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;box-shadow:none}
.btn.red{background:linear-gradient(135deg,#E5533A,#B93A1B);color:#fff;box-shadow:0 8px 18px rgba(185,58,27,.3)}
.btn.redout{background:#fff;border:2px solid #F2A593;color:var(--red);box-shadow:none}
.btn.sm{min-height:40px;width:auto;border-radius:14px;font-size:14px;padding:0 14px}
.link{min-height:44px;display:flex;align-items:center;justify-content:center;color:#0E6B42;font-weight:700;font-size:15px;background:none;border:0;cursor:pointer;text-decoration:underline;width:100%}
.check{display:flex;gap:10px;align-items:flex-start;text-align:left;font-weight:500;font-size:13.5px;line-height:1.45;color:var(--ink2);cursor:pointer}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .bx{width:24px;height:24px;border-radius:8px;background:#fff;border:2px solid var(--g2);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800}
.check input:checked+.bx{background:linear-gradient(135deg,var(--g2),var(--g1))}
.check input:checked+.bx::after{content:"✓"}
.check input:focus-visible+.bx{box-shadow:0 0 0 4px rgba(23,164,104,.25)}
.check a{color:#0E6B42;font-weight:700}
.tog{position:relative;width:52px;height:30px;flex:none}
.tog input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.tog i{position:absolute;inset:0;border-radius:999px;background:#D6E2DA;transition:background .2s}
.tog i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
.tog input:checked+i{background:linear-gradient(135deg,var(--g2),var(--g1))}
.tog input:checked+i::after{transform:translateX(22px)}
.setrow{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-radius:20px;min-height:52px;text-decoration:none;color:inherit;border:0;width:100%;text-align:left;cursor:pointer}
.setrow .ic{width:40px;height:40px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:20px}
.setrow .tx{flex:1;min-width:0}.setrow .nm{font-weight:700;font-size:15px}.setrow .ds{font-weight:500;font-size:13px;color:var(--ink2)}
.pwbar{display:flex;gap:6px}.pwbar i{flex:1;height:8px;border-radius:6px;background:#E3F1E6}.pwbar i.on{background:linear-gradient(90deg,#2FBF7A,#0E8A57)}
.rule{display:flex;gap:8px;align-items:center;font-weight:700;font-size:13px;color:var(--ink3)}
.rule b{width:20px;height:20px;border-radius:50%;background:#E3EBE6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.rule.ok{color:var(--g1)}.rule.ok b{background:linear-gradient(135deg,var(--g2),var(--g1))}

/* ---------- nav ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:0 16px 12px;pointer-events:none}
.tabbar nav{pointer-events:auto;max-width:488px;margin:0 auto;display:flex;gap:4px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-radius:26px;padding:6px;box-shadow:var(--shadow)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border-radius:18px;text-decoration:none;font-weight:700;font-size:12px;color:#4A6A58}
.tabbar a.on{color:#fff;background:linear-gradient(135deg,var(--g2),var(--g1))}
.fab{position:fixed;z-index:21;right:max(22px,calc(50% - 238px));bottom:86px;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--gold1),var(--gold2));color:#2B1B00;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(0,0,0,.25);animation:glow 2.8s ease-in-out infinite;text-decoration:none}

/* ---------- reaction toast, banners, modal ---------- */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;width:min(92vw,440px);background:#fff;border-radius:26px;padding:12px 16px 12px 8px;display:flex;gap:6px;align-items:center;box-shadow:0 18px 44px rgba(6,60,40,.32);animation:slideUp .35s ease-out}
.toast .tt{font-family:var(--head);font-weight:800;font-size:18px;line-height:1.1}
.toast .tm{font-weight:500;font-size:14px;line-height:1.4;margin-top:2px}
.toast.out{opacity:0;transform:translateX(-50%) translateY(20px);transition:all .3s}
.banner{position:sticky;top:0;z-index:50;padding:8px 14px;text-align:center;font-weight:700;font-size:13px}
.banner.off{background:#FFF8DB;color:#7A5200}
.banner.demo{background:#E9F8EE;color:#0E5A38}
.overlay{position:fixed;inset:0;z-index:70;background:rgba(15,46,29,.45);display:flex;align-items:flex-end;justify-content:center;animation:rise .2s}
.sheet{background:#fff;width:100%;max-width:520px;border-radius:28px 28px 0 0;padding:20px 16px 24px;display:flex;flex-direction:column;gap:12px;max-height:92vh;overflow:auto}
@media(min-width:900px){.overlay{align-items:center}.sheet{border-radius:28px}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:65;overflow:hidden}
.cf{position:absolute;top:-40px;opacity:0;animation:fall 4.5s ease-in 0s 1 both}
.cf>div{animation:spin 1.8s ease-in-out infinite alternate}
.coin{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3A8,#FFC93C 55%,#E39B10);border:1.5px solid #E39B10;color:#A86A00;font:800 11px var(--head);display:flex;align-items:center;justify-content:center;line-height:1}
.billf{width:34px;height:18px;border-radius:4px;border:1.5px solid #2E9A55;display:flex;align-items:center;justify-content:center;color:#fff;font:800 10px var(--head);box-shadow:0 3px 6px rgba(18,122,74,.25)}

/* ---------- intro ---------- */
.intro{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px 36px;background:radial-gradient(circle at 80% 8%,rgba(255,226,122,.75),transparent 45%),radial-gradient(circle at 5% 55%,rgba(126,217,87,.35),transparent 50%),linear-gradient(165deg,#D9F6E3 0%,#F1FBEA 55%,#FFF1C2 100%)}
.intro .in-wrap{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;flex:1;position:relative;z-index:1}
.intro .halo{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,122,.7),transparent 70%);animation:breathe 4s ease-in-out infinite}
.intro .masw{margin-top:9vh;position:relative;animation:pop .8s cubic-bezier(.2,1.4,.4,1) backwards}
.intro .l1,.intro .l2,.intro .l3,.intro .l4{animation:rise .7s ease-out backwards}
.intro .l1{animation-delay:.5s;font-family:var(--head);font-weight:800;font-size:40px;line-height:1.1;margin-top:30px;background:linear-gradient(90deg,var(--g1),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro .l2{animation-delay:1.2s;font-family:var(--head);font-weight:700;font-size:22px;margin-top:6px;color:#14573A}
.intro .l3{animation-delay:1.9s;font-weight:500;font-size:16px;line-height:1.5;color:var(--ink2);margin-top:16px;max-width:320px}
.intro .l4{animation-delay:2.6s;margin-top:auto;padding-top:30px;width:100%;display:flex;flex-direction:column;gap:6px;align-items:center}
.sp{position:absolute;animation:twinkle 3s ease-in-out infinite}

/* ---------- legal ---------- */
.legal h3{font-family:var(--head);font-weight:800;font-size:18px;color:var(--g1);margin-bottom:4px}
.legal p{margin:6px 0 0;font-weight:500;font-size:14px;line-height:1.55}
.legal p.li{padding-left:14px;text-indent:-10px;margin-top:3px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.cf{display:none}}

/* password eye */
.pw{position:relative;display:block}.pw .in{padding-right:52px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;color:var(--ink2);border-radius:12px;display:grid;place-items:center;cursor:pointer}
.eye:focus-visible{outline:3px solid rgba(23,164,104,.4)}
.eye[aria-pressed=true]{color:var(--g1)}
/* expenses */
.mrow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mnav{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:18px;padding:6px;box-shadow:var(--shadow)}
.mnav a,.mnav span.d{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:var(--g1);font-weight:800}
.mnav span.d{opacity:.3}.mnav b{font:800 17px var(--head)}