:root{
  --bg: var(--tg-theme-bg-color, #0f172a);
  --text: var(--tg-theme-text-color, #ffffff);
  --hint: var(--tg-theme-hint-color, #8a94a6);
  --link: var(--tg-theme-link-color, #4aa1ff);
  --button: var(--tg-theme-button-color, #2563eb);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --surface: var(--tg-theme-secondary-bg-color, #1a2336);
  --income:#10b981; --expense:#ef4444; --transfer:#4aa1ff;
  --warn:#f59e0b; --danger:#ef4444;
  --r:16px; --r-sm:12px;
  --border: rgba(255,255,255,.08);
  --tabh: 64px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,"SF Pro Text",Roboto,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.45; min-height:100dvh; overscroll-behavior-y:none}
#app{min-height:100dvh; display:flex; flex-direction:column}
#screen{flex:1; padding:16px 16px calc(var(--tabh) + env(safe-area-inset-bottom) + 16px);
  overflow-y:auto}
.num{font-variant-numeric:tabular-nums}
h1{font-size:20px; font-weight:700; margin:0 0 4px}
h2{font-size:16px; font-weight:600; margin:20px 0 10px}
.hint{color:var(--hint); font-size:13px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:14px}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
@media (prefers-reduced-motion: no-preference){
  .anim{transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease}
}

/* segment switcher */
.segment{display:flex; gap:4px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:4px; margin-bottom:18px}
.segment button{flex:1; min-height:38px; border-radius:9px; font-size:14px; font-weight:500;
  color:var(--hint)}
.segment button.active{background:var(--button); color:var(--button-text)}

/* hero balance */
.hero{text-align:center; margin:10px 0 18px}
.hero .label{color:var(--hint); font-size:13px}
.hero .big{font-size:34px; font-weight:700; letter-spacing:-.5px; margin:2px 0}
.hero .delta{font-size:13px}
.up{color:var(--income)} .down{color:var(--expense)}

/* group mini cards */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mini{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:10px; text-align:left}
.mini .t{font-size:12px; color:var(--hint)}
.mini .v{font-size:15px; font-weight:600; margin-top:2px}

/* income/expense bars */
.bar-row{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px}
.bar-row .lab{width:64px; color:var(--hint)}
.bar{flex:1; height:8px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden}
.bar > span{display:block; height:100%; border-radius:6px}
.bar-row .val{width:78px; text-align:right; font-weight:600}
.bar-div{position:relative}
.bar-div .bar-center{position:absolute; left:50%; top:-3px; bottom:-3px; width:2px;
  background:var(--hint); opacity:.45; border-radius:2px}
.bar-div .bar-fill{position:absolute; top:0; bottom:0; border-radius:6px}

/* tx rows */
.tx{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border)}
.tx:last-child{border-bottom:none}
.tx .ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); font-size:16px; flex:none}
.tx .mid{flex:1; min-width:0}
.tx .title{font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tx .sub{font-size:12px; color:var(--hint)}
.tx .amt{font-weight:600; font-size:14px}

/* account cards (drag) */
.acc-group{margin-bottom:16px}
.acc-group h3{font-size:13px; color:var(--hint); font-weight:500; margin:0 0 8px}
.acc-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.acc{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:12px; min-height:74px; position:relative; touch-action:pan-y;
  display:flex; flex-direction:column; justify-content:space-between}
.acc .nm{font-size:13px; font-weight:600}
.acc .bl{font-size:15px; font-weight:700; margin-top:6px}
.acc.dragging{opacity:.92; box-shadow:0 12px 30px rgba(0,0,0,.45); z-index:1000;
  position:fixed; width:calc(50% - 21px)}
.acc.target{outline:2px solid var(--button); outline-offset:1px}
.acc.dimmed{opacity:.4}

/* add screen */
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; color:var(--hint); margin-bottom:6px}
.input{width:100%; min-height:48px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:12px 14px; color:var(--text); font-size:16px}
textarea.input{min-height:88px; resize:none}
.mic{width:100%; min-height:64px; border-radius:var(--r); background:var(--surface);
  border:1px dashed var(--border); display:flex; align-items:center; justify-content:center;
  gap:10px; font-weight:600; color:var(--text); user-select:none}
.mic.recording{background:rgba(239,68,68,.15); border-color:var(--expense); color:var(--expense)}
.divider{display:flex; align-items:center; gap:10px; color:var(--hint); font-size:12px; margin:16px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--border)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:40px; padding:0 14px; border-radius:20px; background:var(--surface);
  border:1px solid var(--border); font-size:14px; color:var(--text); display:flex; align-items:center}
.chip.active{background:var(--button); color:var(--button-text); border-color:var(--button)}

/* preview card */
.preview .row{display:flex; align-items:center; justify-content:space-between; padding:10px 0;
  border-bottom:1px solid var(--border)}
.preview .row:last-child{border-bottom:none}
.preview .k{color:var(--hint); font-size:13px}
.preview .v{font-weight:600; display:flex; align-items:center; gap:6px}
.preview .v .edit{color:var(--link); font-size:12px}

/* analytics */
.cat-row{display:flex; align-items:center; gap:10px; margin:8px 0; font-size:13px}
.cat-row .nm{flex:1}
.cat-row .pc{width:42px; text-align:right; color:var(--hint)}
.cat-row .amt{width:80px; text-align:right; font-weight:600}

/* list (More) */
.list-item{display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:8px; font-size:15px}
.list-item .chev{margin-left:auto; color:var(--hint)}

/* tab bar */
#tabbar{position:fixed; left:0; right:0; bottom:0; height:calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom); background:var(--surface);
  border-top:1px solid var(--border); display:flex; z-index:500}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--hint); font-size:11px; min-height:var(--tabh)}
.tab.active{color:var(--button)}
.tab.fab{position:relative}
.tab.fab .fab-btn{width:48px; height:48px; border-radius:50%; background:var(--button);
  color:var(--button-text); display:grid; place-items:center; margin-top:-18px;
  box-shadow:0 6px 16px rgba(37,99,235,.45)}
.tab svg{width:24px; height:24px}

/* bottom sheet */
.sheet-scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:900; opacity:0}
.sheet-scrim.show{opacity:1; transition:opacity .2s}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:901; background:var(--bg);
  border-radius:20px 20px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%); border-top:1px solid var(--border)}
.sheet.show{transform:translateY(0); transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sheet h2{margin-top:0}
.sheet-handle{width:40px; height:4px; border-radius:2px; background:var(--hint); opacity:.4;
  margin:0 auto 14px}
.btn-primary{width:100%; min-height:50px; border-radius:var(--r-sm); background:var(--button);
  color:var(--button-text); font-weight:600; font-size:16px; margin-top:14px}
.btn-ghost{width:100%; min-height:46px; border-radius:var(--r-sm); background:var(--surface);
  border:1px solid var(--border); color:var(--text); font-weight:500; margin-top:8px}

/* toast */
#toast-root{position:fixed; left:0; right:0; bottom:calc(var(--tabh) + 20px); z-index:1100;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{background:#000d; color:#fff; padding:10px 16px; border-radius:12px; font-size:14px;
  max-width:90%; box-shadow:0 6px 20px rgba(0,0,0,.4)}

.section-link{color:var(--link); font-size:13px; float:right; font-weight:500}
.empty{text-align:center; color:var(--hint); padding:40px 20px; font-size:14px}