:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #0b0e14);
  --text: var(--tg-theme-text-color, #f6f8fb);
  --hint: var(--tg-theme-hint-color, #8f98a7);
  --card: var(--tg-theme-secondary-bg-color, #151a23);
  --accent: var(--tg-theme-button-color, #5f78ff);
  --accentText: var(--tg-theme-button-text-color, #fff);
  --line: rgba(140,150,170,.16);
  --lineStrong: rgba(140,150,170,.25);
  --green: #35d07f;
  --red: #ff6363;
  --amber: #f4b740;
  --shadow: 0 14px 38px rgba(0,0,0,.16);
  --radius: 22px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(760px 430px at 50% -190px, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;
  font-feature-settings:"tnum" 1;
}
button,input,select { font:inherit; }
button { cursor:pointer; }
.wrap { max-width:760px; margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(128px + env(safe-area-inset-bottom)); }

/* Header */
.appHeader { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:2px 0 18px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brandMark {
  width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
  border-radius:15px; color:#fff; font-size:13px; font-weight:850; letter-spacing:-.3px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
  box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 25%, transparent);
}
.brandCopy { min-width:0; }
.eyebrow { color:var(--hint); font-size:10px; letter-spacing:1.6px; font-weight:800; }
h1 { margin:1px 0 0; font-size:29px; line-height:1.02; letter-spacing:-1px; }
.subtitle { color:var(--hint); font-size:11px; margin-top:4px; }
.ghost {
  border:1px solid var(--line); width:42px; height:42px; flex:0 0 42px; border-radius:14px;
  background:color-mix(in srgb, var(--card) 92%, transparent); color:var(--text); font-size:21px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); transition:.15s ease;
}
.ghost:active { transform:rotate(24deg) scale(.94); }

/* Period tabs */
.tabs {
  display:flex; gap:5px; margin:0 0 12px; padding:4px;
  background:color-mix(in srgb, var(--card) 94%, transparent);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.tabs button,.seg button { flex:1; border:0; border-radius:11px; padding:9px 7px; background:transparent; color:var(--hint); font-weight:700; font-size:12px; transition:.14s ease; }
.tabs button.active,.seg button.active { background:var(--accent); color:var(--accentText); box-shadow:0 5px 14px color-mix(in srgb, var(--accent) 23%, transparent); }

/* Cards and top summary */
.card { background:color-mix(in srgb, var(--card) 97%, transparent); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.07); }
.hero {
  position:relative; overflow:hidden; min-height:148px; padding:21px 20px 18px;
  border-color:color-mix(in srgb, var(--accent) 25%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--card)), color-mix(in srgb, var(--card) 96%, transparent));
  box-shadow:var(--shadow);
}
.hero::after { content:""; position:absolute; width:150px; height:150px; right:-58px; top:-68px; border-radius:50%; background:color-mix(in srgb, var(--accent) 17%, transparent); filter:blur(2px); pointer-events:none; }
.heroLabel { position:relative; z-index:1; display:flex; align-items:center; gap:7px; color:var(--hint); font-size:11px; font-weight:750; letter-spacing:.3px; text-transform:uppercase; }
.heroDot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb, var(--green) 12%, transparent); }
.big { position:relative; z-index:1; font-size:39px; line-height:1.07; font-weight:820; letter-spacing:-1.7px; margin:9px 0 5px; }
.hero .muted,.hero .tiny { position:relative; z-index:1; }
.muted { color:var(--hint); font-size:13px; }
.tiny { margin-top:8px; font-size:11px; }

.stats3 { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:10px; }
.statCard { position:relative; overflow:hidden; min-height:86px; background:var(--card); border:1px solid var(--line); border-radius:17px; padding:13px 12px; box-shadow:0 8px 24px rgba(0,0,0,.055); }
.statCard::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; opacity:.85; }
.incomeCard::before { background:var(--green); }
.expenseCard::before { background:var(--red); }
.cashflowCard::before { background:var(--accent); }
.statLabel { display:flex; align-items:center; gap:4px; color:var(--hint); font-size:10px; font-weight:700; white-space:nowrap; }
.statLabel span { font-size:12px; }
.statValue { margin-top:8px; font-size:18px; line-height:1.08; font-weight:800; letter-spacing:-.4px; }
.good { color:var(--green); }
.warn { color:var(--amber); }
.bad { color:var(--red); }

/* Sections */
section { margin-top:29px; }
h2 { display:flex; align-items:center; gap:8px; margin:0 2px 11px; font-size:18px; line-height:1.2; letter-spacing:-.35px; }
.sectionIcon { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--accent); font-size:13px; font-weight:850; }
.sectionHead { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:36px; margin-bottom:10px; }
.sectionHead h2 { margin:0; }
.sectionNote { margin:-2px 2px 10px; line-height:1.45; }
.hint { color:var(--hint); font-size:10px; text-align:right; margin-bottom:12px; max-width:170px; }
.accountHint { text-align:left; max-width:none; margin:-2px 2px 10px; }
.miniBtn { min-height:36px; border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius:12px; padding:8px 12px; background:linear-gradient(180deg,color-mix(in srgb, var(--accent) 11%, var(--card)),color-mix(in srgb, var(--accent) 6%, var(--card))); color:var(--accent); font-weight:780; font-size:12px; box-shadow:0 7px 18px rgba(0,0,0,.06); transition:.12s ease; white-space:nowrap; }
.miniBtn:active { transform:scale(.96); background:color-mix(in srgb, var(--accent) 15%, var(--card)); }

/* Accounts */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.account { position:relative; min-height:88px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:15px 30px 15px 14px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.055); transition:transform .09s ease,border-color .09s ease,background .09s ease; }
.account::after { content:"›"; position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--hint); font-size:22px; font-weight:300; }
.account:active { transform:scale(.982); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); background:color-mix(in srgb, var(--accent) 5%, var(--card)); }
.account .name { color:var(--hint); font-size:11px; font-weight:650; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account .amount { font-size:20px; line-height:1.1; font-weight:800; letter-spacing:-.55px; }

/* Lists */
.list { padding:4px 14px; }
.row { padding:14px 0; border-bottom:1px solid var(--line); transition:opacity .1s ease; }
.row:last-child { border-bottom:0; }
.rowtop { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.rowtop > span { min-width:0; }
.rowtop b { white-space:nowrap; font-weight:780; }
.txRow,.debtRow,.planRow,.recurringRow,.goalRow { border-radius:12px; }
.debtRow,.planRow,.recurringRow,.goalRow { cursor:pointer; }
.debtRow:active,.planRow:active,.recurringRow:active,.goalRow:active { opacity:.68; }
.txMeta,.debtMeta,.goalMeta,.planStatus { color:var(--hint); font-size:11px; margin-top:6px; line-height:1.35; }
.planStatus.doneText { color:var(--green); }
.done { opacity:.48; text-decoration:line-through; }
.empty { color:var(--hint); padding:23px 10px; text-align:center; font-size:12px; }

/* Debt summary */
.debtSummary { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:10px; }
.debtPill { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:17px; padding:13px; }
.debtPill.asset { background:linear-gradient(135deg,color-mix(in srgb,var(--green) 8%,var(--card)),var(--card)); }
.debtPill.liability { background:linear-gradient(135deg,color-mix(in srgb,var(--red) 8%,var(--card)),var(--card)); }
.debtPill .label { font-size:10px; color:var(--hint); margin-bottom:6px; font-weight:700; }
.debtPill .value { font-size:17px; font-weight:800; letter-spacing:-.35px; }
.debtPill.asset .value,.debtAmount.asset { color:var(--green); }
.debtPill.liability .value,.debtAmount.liability { color:var(--red); }

/* Progress */
.bar { height:7px; background:rgba(127,127,127,.13); border-radius:99px; overflow:hidden; margin-top:10px; }
.fill { height:100%; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 68%,#fff)); border-radius:99px; max-width:100%; box-shadow:0 0 12px color-mix(in srgb,var(--accent) 22%,transparent); }
.recurringInactive { opacity:.5; }
.recurringBadge { font-size:10px; padding:4px 7px; border-radius:999px; background:rgba(127,127,127,.12); color:var(--hint); }
.recurringBadge.active { background:color-mix(in srgb,var(--green) 10%,transparent); color:var(--green); }

/* Buttons */
.primary,.secondaryBtn,.dangerBtn { transition:transform .1s ease,opacity .1s ease,background .1s ease; }
.primary:active,.secondaryBtn:active,.dangerBtn:active { transform:scale(.985); }
.primary { width:100%; border:0; border-radius:15px; padding:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 90%,#fff),var(--accent)); color:var(--accentText); font-weight:800; font-size:15px; margin-top:8px; box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 20%,transparent); }
.secondary { margin-top:10px; background:var(--card); color:var(--text); border:1px solid var(--lineStrong); box-shadow:none; }
.secondaryBtn { width:100%; border:1px solid var(--lineStrong); border-radius:14px; padding:14px; background:var(--card); color:var(--text); font-weight:750; font-size:15px; }
.dangerBtn { width:100%; border:1px solid color-mix(in srgb,var(--red) 40%,var(--line)); border-radius:14px; padding:13px; background:color-mix(in srgb,var(--red) 4%,transparent); color:var(--red); font-weight:750; font-size:14px; margin-top:10px; }
.primary:disabled,.secondaryBtn:disabled { opacity:.42; box-shadow:none; }

/* Forms & sheets */
.fab { position:fixed; right:max(12px, env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); width:50px; height:50px; border:1px solid color-mix(in srgb,var(--accent) 48%,#fff0); border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 90%,#fff),var(--accent)); color:var(--accentText); font-size:28px; line-height:1; box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 26%,rgba(0,0,0,.28)); z-index:5; opacity:.96; transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease; }
.fab:active { transform:scale(.90); box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.24)); }
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.56); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:flex-end; z-index:10; }
.sheet.hidden,.hidden { display:none; }
.sheetCard { position:relative; width:100%; max-width:760px; max-height:90vh; overflow:auto; margin:0 auto; background:var(--bg); border:1px solid var(--line); border-bottom:0; border-radius:27px 27px 0 0; padding:23px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -20px 60px rgba(0,0,0,.3); }
.sheetCard::before { content:""; position:absolute; top:8px; left:50%; width:38px; height:4px; transform:translateX(-50%); border-radius:99px; background:var(--lineStrong); }
.sheetHead { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:19px; letter-spacing:-.3px; }
.sheetHead button { border:0; width:34px; height:34px; border-radius:50%; background:var(--card); color:var(--hint); font-size:23px; line-height:1; }
.sheetTitle { font-size:18px; font-weight:800; margin:4px 0 10px; }
.notice,.debtDetail { color:var(--hint); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; font-size:12px; line-height:1.5; }
.debtDetail { color:var(--text); font-size:13px; }
.seg { display:flex; gap:5px; padding:4px; background:var(--card); border:1px solid var(--line); border-radius:13px; margin-bottom:14px; }
label { display:block; color:var(--hint); font-size:11px; font-weight:650; margin:13px 0; }
input,select { width:100%; margin-top:6px; border:1px solid var(--lineStrong); outline:none; border-radius:13px; padding:13px 12px; background:var(--card); color:var(--text); font-size:16px; font-weight:500; transition:border-color .12s ease,box-shadow .12s ease; }
input:focus,select:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.toggleLabel { display:flex; align-items:center; gap:9px; color:var(--text); }
.toggleLabel input { width:20px; height:20px; margin:0; }
.check { width:22px; height:22px; }
.repayActions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.repayActions .primary { margin-top:0; }
#partialRepayBox,#planExecuteBox { margin-top:10px; }
.actionTop { margin-top:10px; }
.aiBox { margin-top:10px; white-space:pre-wrap; line-height:1.5; }
.error { margin-top:20px; padding:14px; border-radius:14px; background:#7a2020; color:#fff; }


/* v20 final visual polish */
.sectionHead > * { min-width:0; }
.sectionHead h2 { flex:1 1 auto; }
.card,.account,.statCard,.debtPill { -webkit-backdrop-filter:saturate(115%); backdrop-filter:saturate(115%); }
.sheetCard { animation:sheetUp .18s ease-out; }
@keyframes sheetUp { from { transform:translateY(14px); opacity:.7; } to { transform:translateY(0); opacity:1; } }
@media(max-width:420px){
  .sectionHead { gap:8px; }
  .sectionHead h2 { font-size:17px; }
  .miniBtn { min-height:34px; padding:7px 10px; font-size:11px; }
  .fab { width:48px; height:48px; right:max(10px, env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); border-radius:16px; font-size:27px; }
}
@media(max-width:360px){
  .sectionHead h2 { font-size:16px; gap:6px; }
  .sectionIcon { width:23px; height:23px; flex-basis:23px; }
  .miniBtn { padding:7px 9px; font-size:10.5px; }
}
@media(max-width:420px){
  .wrap { padding-left:13px; padding-right:13px; }
  h1 { font-size:27px; }
  .brandMark { width:41px; height:41px; flex-basis:41px; border-radius:14px; }
  .big { font-size:34px; }
  .stats3 { gap:7px; }
  .statCard { padding:12px 9px; min-height:82px; }
  .statValue { font-size:15px; }
  .statLabel { font-size:9px; }
  .grid { grid-template-columns:1fr 1fr; gap:8px; }
  .account { padding:13px 26px 13px 12px; min-height:82px; }
  .account .amount { font-size:18px; }
  .debtSummary { gap:7px; }
  .debtPill { padding:11px; }
  .debtPill .value { font-size:15px; }
}
@media(prefers-reduced-motion:reduce){ * { scroll-behavior:auto!important; transition:none!important; } }


/* v24 multi-month plan */
.planTabs { margin:0 0 9px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.planTabs::-webkit-scrollbar { display:none; }
.planTabs button { flex:0 0 auto; min-width:78px; padding-left:11px; padding-right:11px; }
.planSummary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0 0 9px; }
.planMetric { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 9px; }
.planMetric .label { color:var(--hint); font-size:9px; font-weight:700; margin-bottom:5px; white-space:nowrap; }
.planMetric .value { font-size:14px; font-weight:820; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planMetric.income .value { color:var(--green); }
.planMetric.expense .value { color:var(--red); }
.planMetric.cashflow .value.good { color:var(--green); }
.planMetric.cashflow .value.bad { color:var(--red); }
.planFxNote { grid-column:1/-1; color:var(--hint); font-size:9px; padding:0 2px; }
@media(max-width:360px){
  .planTabs button { min-width:72px; font-size:11px; }
  .planMetric { padding:9px 7px; }
  .planMetric .value { font-size:12px; }
}


/* v26 delete recent transactions */
.txActions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.txDelete {
  width:30px; height:30px; display:grid; place-items:center; flex:0 0 30px;
  border:1px solid color-mix(in srgb,var(--red) 25%,var(--line)); border-radius:10px;
  background:color-mix(in srgb,var(--red) 5%,var(--card)); color:var(--red);
  font-size:14px; line-height:1; padding:0; opacity:.78;
}
.txDelete:active { transform:scale(.92); opacity:1; }
.txDelete:disabled { opacity:.3; }
@media(max-width:360px){ .txActions{gap:5px}.txDelete{width:28px;height:28px;flex-basis:28px;font-size:13px} }


/* v27 individual account delete */
.account{display:flex;align-items:center;gap:10px}
.accountMain{min-width:0;flex:1}
.accountDelete{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,90,90,.18);background:rgba(255,75,75,.08);font-size:15px;line-height:1;display:grid;place-items:center}
.accountDelete:active{transform:scale(.96)}