:root {
  --primary: #5c46e8;
  --primary-dark: #4232bd;
  --primary-soft: #eeeaff;
  --mint: #20b995;
  --mint-soft: #dcf8f1;
  --expense: #ef5a6f;
  --expense-soft: #ffe8ec;
  --amber: #f3a634;
  --ink: #1d2033;
  --muted: #74788f;
  --line: #e8e8f0;
  --surface: #ffffff;
  --bg: #f6f6fb;
  --shadow: 0 16px 40px rgba(43, 39, 91, .10);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #e9e8f4; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(92,70,232,.25); outline-offset: 2px; }

.desktop-shell { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.app { width: min(100%, 430px); height: min(900px, calc(100vh - 44px)); min-height: 700px; background: var(--bg); border-radius: 34px; overflow: hidden; position: relative; box-shadow: 0 28px 80px rgba(34,30,73,.22); border: 1px solid rgba(255,255,255,.8); }

.topbar { height: 76px; padding: 18px 20px 8px; display: grid; grid-template-columns: 1fr; place-items: center; background: var(--bg); position: relative; z-index: 4; }
.avatar-button, .icon-button { border: 0; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; }
.avatar-button { background: var(--primary); color: white; font-weight: 800; font-size: 13px; }
.icon-button { background: var(--surface); box-shadow: 0 5px 18px rgba(43,39,91,.08); position: relative; }
.notification-dot { width: 8px; height: 8px; background: var(--expense); border: 2px solid white; border-radius: 50%; position: absolute; top: 9px; right: 10px; }
.brand-lockup { display: flex; justify-content: center; align-items: center; gap: 10px; }
.brand-lockup small { display: block; color: var(--muted); font-size: 11px; margin-bottom: -2px; }
.brand-lockup strong { font-size: 18px; letter-spacing: -.4px; }
.brand-mark { width: 30px; height: 30px; background: var(--primary-soft); border-radius: 11px; display: flex; gap: 3px; align-items: flex-end; justify-content: center; padding: 7px; transform: rotate(-3deg); }
.brand-mark i { width: 4px; border-radius: 5px; display: block; background: var(--primary); }
.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:11px}
.icon-bell { width: 18px; height: 19px; border: 2px solid var(--ink); border-radius: 9px 9px 5px 5px; position: relative; }
.icon-bell::before { content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); position: absolute; bottom: -6px; left: 5px; }

.screen { height: calc(100% - 162px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 28px; scrollbar-width: none; }
.screen::-webkit-scrollbar { display:none; }

.page-title { margin: 9px 2px 16px; display:flex; justify-content:space-between; align-items:flex-end; }
.page-title h1 { font-size: 27px; margin:0; letter-spacing:-.9px; }
.page-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.text-button { border:0; background:transparent; color:var(--primary); font-weight:750; padding:8px 0; }

.month-switcher { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; background:var(--surface); padding:7px; border-radius:20px; box-shadow:0 9px 25px rgba(43,39,91,.07); margin-bottom:14px; }
.month-switcher button { border:0; background:var(--primary-soft); width:38px; height:38px; border-radius:14px; color:var(--primary); font-size:24px; line-height:1; }
.month-switcher div { text-align:center; }
.month-switcher strong { display:block; font-size:15px; text-transform:capitalize; }
.month-switcher small { color:var(--muted); }

.balance-card { background:linear-gradient(145deg, #5c46e8, #735ff1); border-radius:var(--radius-xl); color:white; padding:22px; position:relative; overflow:hidden; box-shadow:0 18px 34px rgba(92,70,232,.25); margin-bottom:16px; }
.balance-card::before, .balance-card::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.09); }
.balance-card::before { width:180px;height:180px;right:-85px;top:-80px; }
.balance-card::after { width:100px;height:100px;right:35px;bottom:-65px; }
.balance-card small { opacity:.82; }
.balance-row { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.balance-main { font-size:32px; font-weight:850; letter-spacing:-1.4px; margin:4px 0 20px; }
.eye-button { width:38px;height:38px;border:0;border-radius:13px;background:rgba(255,255,255,.14);color:white; }
.eye-shape { display:inline-block;width:18px;height:12px;border:2px solid currentColor;border-radius:50% / 60%;position:relative; }
.eye-shape::after { content:"";width:4px;height:4px;background:currentColor;border-radius:50%;position:absolute;left:5px;top:2px; }
.balance-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.balance-mini { background:rgba(255,255,255,.13); padding:12px; border-radius:17px; }
.balance-mini span { display:flex;align-items:center;gap:7px;font-size:11px;opacity:.85; }
.balance-mini strong { display:block;margin-top:3px;font-size:16px; }
.dot { width:8px;height:8px;border-radius:50%;display:inline-block;background:white; }
.dot.income { background:#79f2d1; }.dot.expense{background:#ffabb6;}

.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:19px; }
.quick-card { border:0; background:var(--surface); border-radius:19px; padding:15px; text-align:left; box-shadow:0 8px 22px rgba(43,39,91,.06); display:flex;align-items:center;gap:11px; }
.quick-icon { width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:21px;background:var(--primary-soft);color:var(--primary);font-weight:800; }
.quick-card:nth-child(2) .quick-icon { background:var(--mint-soft);color:var(--mint); }
.quick-card strong { display:block;font-size:13px; }.quick-card small{color:var(--muted);font-size:10px;}

.section-head { display:flex; align-items:center; justify-content:space-between; margin:3px 2px 10px; }
.section-head h2 { font-size:17px;margin:0;letter-spacing:-.3px; }
.section-head button { border:0;background:transparent;color:var(--primary);font-size:12px;font-weight:750; }
.transaction-list { display:grid; gap:10px; }
.transaction-card { border:0; width:100%; background:var(--surface); border-radius:20px; padding:15px; display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:11px;text-align:left;box-shadow:0 7px 20px rgba(43,39,91,.055); }
.tx-icon { width:45px;height:45px;border-radius:15px;display:grid;place-items:center;font-weight:900; }
.tx-icon.income { background:var(--mint-soft);color:var(--mint); }.tx-icon.expense { background:var(--expense-soft);color:var(--expense); }
.tx-copy strong { display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px; }
.tx-copy small { color:var(--muted);font-size:11px;font-weight:650; }
.tx-value { text-align:right; }.tx-value strong{display:block;font-size:14px}.tx-value small{font-size:10px;color:var(--muted)}
.tx-value .income{color:var(--mint)}.tx-value .expense{color:var(--expense)}
.status-pill { display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px; }
.status-pill.done{background:var(--mint-soft);color:#148a70}.status-pill.pending{background:#fff2d9;color:#a86b00}.status-pill.late{background:var(--expense-soft);color:#bd334b}
.empty-state { text-align:center;padding:34px 18px;background:var(--surface);border-radius:22px;color:var(--muted); }
.empty-state div{font-size:35px;margin-bottom:8px}.empty-state strong{display:block;color:var(--ink);margin-bottom:4px}

.bottom-nav { position:absolute; left:0; right:0; bottom:0; height:86px; padding:9px 13px calc(9px + var(--safe-bottom)); background:rgba(255,255,255,.95); backdrop-filter:blur(14px); display:grid;grid-template-columns:1fr 68px 1fr 1fr;align-items:start;border-top:1px solid rgba(232,232,240,.85);z-index:10; }
.nav-item { border:0;background:transparent;color:#a0a2b1;display:flex;min-width:0;min-height:58px;padding:3px 2px 0;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;font-weight:700;line-height:1; }
.nav-item.active{color:var(--primary)}.nav-item small{display:block;position:static;font-size:10px;line-height:1.1;white-space:nowrap}.nav-icon{width:21px;height:21px;min-height:21px;flex:0 0 21px;display:block;position:relative}
.home-icon::before{content:"";position:absolute;width:15px;height:14px;border:2px solid currentColor;border-radius:4px;left:2px;bottom:1px}.home-icon::after{content:"";position:absolute;width:11px;height:11px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);left:5px;top:1px;background:white}
.calendar-icon{border:2px solid currentColor;border-radius:5px;margin-top:1px}.calendar-icon::before{content:"";position:absolute;left:-2px;right:-2px;top:4px;border-top:2px solid currentColor}.calendar-icon::after{content:"··";position:absolute;font-weight:900;letter-spacing:2px;left:3px;top:3px}
.chart-icon::before,.chart-icon::after{content:"";position:absolute;bottom:1px;border:2px solid currentColor;border-radius:3px;width:4px}.chart-icon::before{height:10px;left:2px;box-shadow:7px -5px 0 -2px white,7px -5px 0 0 currentColor,14px -10px 0 -2px white,14px -10px 0 0 currentColor}
.user-icon{border:2px solid currentColor;border-radius:50%;width:10px;height:10px;margin:1px auto}.user-icon::after{content:"";position:absolute;width:18px;height:9px;border:2px solid currentColor;border-radius:11px 11px 5px 5px;left:-6px;top:12px}
.add-main { border:0; width:58px;height:58px;border-radius:20px;background:var(--primary);margin:-28px auto 0;box-shadow:0 14px 28px rgba(92,70,232,.35);display:grid;place-items:center;transform:rotate(8deg); }
.add-main span,.add-main span::after{content:"";display:block;width:22px;height:3px;background:white;border-radius:4px}.add-main span::after{transform:rotate(90deg)}

.summary-strip { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.summary-box{background:var(--surface);padding:15px;border-radius:19px;box-shadow:0 7px 20px rgba(43,39,91,.05)}.summary-box small{display:block;color:var(--muted);font-size:10px}.summary-box strong{display:block;margin-top:4px;font-size:18px}.summary-box.receive strong{color:var(--mint)}.summary-box.pay strong{color:var(--expense)}


.report-card { background:var(--surface);border-radius:23px;padding:18px;margin-bottom:12px;box-shadow:0 7px 22px rgba(43,39,91,.055); }
.report-card h3{margin:0 0 4px;font-size:15px}.report-card>p{margin:0 0 14px;color:var(--muted);font-size:11px}
.donut-row{display:grid;grid-template-columns:124px 1fr;gap:20px;align-items:center}.donut{width:124px;height:124px;border-radius:50%;background:conic-gradient(var(--expense) 0 47%,var(--primary) 47% 72%,var(--amber) 72% 88%,var(--mint) 88% 100%);display:grid;place-items:center;position:relative}.donut::after{content:"";width:78px;height:78px;border-radius:50%;background:white;position:absolute}.donut-center{z-index:1;text-align:center}.donut-center strong{display:block;font-size:17px}.donut-center small{color:var(--muted);font-size:9px}.legend{display:grid;gap:9px}.legend-row{display:grid;grid-template-columns:9px 1fr auto;gap:8px;align-items:center;font-size:11px}.legend-row i{width:9px;height:9px;border-radius:50%}.legend-row span{color:var(--muted)}
.bars{display:grid;gap:13px}.bar-row{display:grid;grid-template-columns:90px 1fr 45px;gap:9px;align-items:center;font-size:11px}.bar-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:8px;background:#efeff5;border-radius:99px;overflow:hidden}.bar-fill{height:100%;background:var(--primary);border-radius:99px}.bar-row:nth-child(2) .bar-fill{background:var(--expense)}.bar-row:nth-child(3) .bar-fill{background:var(--amber)}.bar-row:nth-child(4) .bar-fill{background:var(--mint)}
.insight-card{background:linear-gradient(135deg,#ecf9f5,#f1efff);border:1px solid white;border-radius:22px;padding:17px;display:flex;gap:12px}.insight-icon{width:42px;height:42px;border-radius:15px;background:white;display:grid;place-items:center;font-size:21px}.insight-card strong{display:block;font-size:13px;margin-bottom:4px}.insight-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}

.profile-card { background:linear-gradient(145deg,#27223f,#413868);color:white;border-radius:26px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden}.profile-card::after{content:"";position:absolute;width:130px;height:130px;background:rgba(255,255,255,.07);border-radius:50%;right:-45px;top:-55px}.profile-person{display:flex;align-items:center;gap:13px}.profile-avatar{width:54px;height:54px;border-radius:18px;background:var(--primary);display:grid;place-items:center;font-weight:850}.profile-person h2{margin:0;font-size:18px}.profile-person p{margin:2px 0 0;opacity:.72;font-size:11px}.plan-pill{display:inline-flex;margin-top:16px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:10px;font-weight:750}
.premium-card{background:linear-gradient(135deg,#fff5dd,#fff);border:1px solid #ffe5a9;border-radius:22px;padding:17px;margin-bottom:13px}.premium-top{display:flex;gap:12px;align-items:center}.premium-icon{width:42px;height:42px;border-radius:14px;background:#ffdda0;display:grid;place-items:center;font-size:21px}.premium-card h3{margin:0;font-size:15px}.premium-card p{margin:4px 0 14px;color:var(--muted);font-size:11px;line-height:1.45}.premium-card button{width:100%;border:0;border-radius:14px;background:var(--ink);color:white;padding:12px;font-weight:800}.premium-card.active{background:var(--mint-soft);border-color:#b5ecde}.premium-card.active button{background:var(--mint)}
.settings-list{background:var(--surface);border-radius:22px;overflow:hidden}.setting-row{border:0;background:transparent;width:100%;padding:15px 16px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;text-align:left;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:0}.setting-ico{width:38px;height:38px;border-radius:13px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-weight:800}.setting-row strong{display:block;font-size:13px}.setting-row small{color:var(--muted);font-size:10px}.chevron{color:#b3b5c0;font-size:22px}


.compact-balance{margin-bottom:10px}.list-order-note{font-size:10px;color:var(--muted);font-weight:700}.profile-explainer{position:relative;z-index:1;margin:14px 0 13px!important;max-width:320px;line-height:1.5!important}.guest-card{background:linear-gradient(145deg,#302a51,#55488a)}.google-avatar{background:white;color:#4285f4}.local-avatar{background:rgba(255,255,255,.15)}.google-button,.account-secondary{position:relative;z-index:1;width:100%;border:0;border-radius:14px;padding:12px 14px;font-weight:800}.google-button{background:white;color:#30323b;box-shadow:0 6px 18px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;gap:9px}.account-secondary{background:rgba(255,255,255,.13);color:white}.google-g{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:white;color:#4285f4;font-weight:900;border:1px solid #e3e5ea}.google-g.large{width:58px;height:58px;font-size:28px}.login-visual{height:116px;background:linear-gradient(135deg,#eaf1ff,#f5f1ff);border-radius:22px;display:grid;place-items:center;margin-bottom:15px}.login-title{margin:0 0 7px;font-size:18px}.sheet-copy{color:var(--muted);font-size:12px;line-height:1.55;margin:0 0 15px}.google-button.standalone{background:white}.choice-list{display:grid;gap:8px}.choice-row{border:1px solid var(--line);background:white;border-radius:16px;padding:15px;display:flex;justify-content:space-between;align-items:center;text-align:left}.choice-row.selected{border-color:rgba(92,70,232,.35);background:var(--primary-soft);color:var(--primary)}

.overlay { position:fixed;inset:0;background:rgba(18,17,29,.5);backdrop-filter:blur(5px);z-index:30}.bottom-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,430px);max-height:88vh;overflow:auto;background:var(--bg);border-radius:28px 28px 0 0;z-index:31;padding:12px 18px calc(22px + var(--safe-bottom));box-shadow:0 -22px 55px rgba(24,22,51,.25)}.hidden{display:none!important}.sheet-handle{width:44px;height:5px;border-radius:99px;background:#d9d9e4;margin:0 auto 15px}.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.sheet-head h2{margin:0;font-size:21px}.sheet-close{border:0;background:white;width:38px;height:38px;border-radius:13px;font-size:21px;color:var(--muted)}
.segmented{display:grid;grid-template-columns:1fr 1fr;background:#e9e8f1;border-radius:16px;padding:4px;margin-bottom:13px}.segment{border:0;background:transparent;padding:11px;border-radius:13px;font-weight:800;color:var(--muted)}.segment.active.income{background:var(--mint);color:white}.segment.active.expense{background:var(--expense);color:white}
.form-grid{display:grid;gap:11px}.field{background:white;border:1px solid transparent;border-radius:17px;padding:11px 13px}.field:focus-within{border-color:rgba(92,70,232,.35)}.field label{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;margin-bottom:4px}.field input,.field select{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.option-row{display:flex;align-items:center;justify-content:space-between;background:white;padding:13px;border-radius:17px}.option-row strong{display:block;font-size:13px}.option-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.switch{width:50px;height:29px;border-radius:99px;background:#d7d8e2;border:0;padding:3px;transition:.2s}.switch::after{content:"";display:block;width:23px;height:23px;background:white;border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,.12);transition:.2s}.switch.on{background:var(--primary)}.switch.on::after{transform:translateX(21px)}
.primary-button,.secondary-button{border:0;border-radius:16px;padding:14px 16px;font-weight:850}.primary-button{width:100%;background:var(--primary);color:white;box-shadow:0 10px 22px rgba(92,70,232,.22)}.secondary-button{background:var(--primary-soft);color:var(--primary)}
.detail-hero{background:white;border-radius:22px;padding:18px;margin-bottom:12px}.detail-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;margin-bottom:12px;font-size:23px;font-weight:900}.detail-icon.income{background:var(--mint-soft);color:var(--mint)}.detail-icon.expense{background:var(--expense-soft);color:var(--expense)}.detail-hero h3{margin:0 0 4px;font-size:18px}.detail-hero .big-value{font-size:27px;font-weight:850}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.detail-box{background:var(--bg);padding:11px;border-radius:14px}.detail-box small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;font-weight:800}.detail-box strong{display:block;margin-top:3px;font-size:12px}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.danger-button{border:0;border-radius:15px;background:var(--expense-soft);color:var(--expense);font-weight:800;padding:13px}

.purchase-visual{height:130px;border-radius:23px;background:linear-gradient(135deg,#fff0c6,#efeaff);display:grid;place-items:center;margin-bottom:16px;position:relative;overflow:hidden}.purchase-visual::before,.purchase-visual::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.5)}.purchase-visual::before{width:120px;height:120px;left:-35px;top:-40px}.purchase-visual::after{width:100px;height:100px;right:-20px;bottom:-45px}.no-ads-symbol{font-size:46px;z-index:1}.purchase-list{display:grid;gap:9px;margin:12px 0 18px}.purchase-item{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:12px}.purchase-item::before{content:"✓";width:22px;height:22px;border-radius:8px;background:var(--mint-soft);color:var(--mint);font-weight:900;display:grid;place-items:center}.price-line{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}.price-line small{color:var(--muted)}.price-line strong{font-size:27px}.fine-print{font-size:9px;color:var(--muted);text-align:center;margin:11px 12px 0;line-height:1.45}

.ad-layer{position:fixed;inset:0;background:rgba(17,16,30,.75);display:grid;place-items:center;padding:20px;z-index:80;backdrop-filter:blur(7px)}.ad-card{width:min(100%,390px);background:white;border-radius:30px;overflow:hidden;position:relative;box-shadow:0 35px 80px rgba(0,0,0,.35)}.ad-label{position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.88);padding:5px 8px;border-radius:999px;font-size:8px;font-weight:850;letter-spacing:.7px;color:var(--muted)}.ad-close{position:absolute;right:14px;top:14px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:rgba(27,27,42,.65);color:white;font-weight:800}.ad-close:disabled{opacity:.65;cursor:default}.ad-visual{height:260px;background:linear-gradient(145deg,#765ff1,#3f2dbf);position:relative;display:grid;place-items:center;overflow:hidden}.ad-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}.ad-orb.one{width:220px;height:220px;right:-90px;top:-100px}.ad-orb.two{width:160px;height:160px;left:-70px;bottom:-80px}.mini-phone{width:145px;height:205px;border-radius:25px;background:#fafafe;padding:17px;box-shadow:0 20px 40px rgba(19,12,75,.35);transform:rotate(7deg);z-index:1}.mini-head{height:30px;border-radius:11px;background:var(--primary);margin-bottom:14px}.mini-line{height:13px;border-radius:7px;background:#e8e6f7;margin-bottom:8px}.mini-line.short{width:65%}.mini-chart{height:78px;border-radius:14px;background:linear-gradient(155deg,#dff7f0,#f0edff);margin-top:15px;position:relative}.mini-chart::after{content:"";position:absolute;width:75px;height:38px;border-left:4px solid var(--mint);border-bottom:4px solid var(--mint);transform:skewY(-20deg);left:18px;top:17px;border-radius:0 0 0 8px}.ad-content{padding:22px}.ad-kicker{color:var(--primary);font-weight:850;font-size:10px;text-transform:uppercase;letter-spacing:.6px}.ad-content h2{font-size:23px;line-height:1.1;letter-spacing:-.7px;margin:7px 0 9px}.ad-content p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 16px}.ad-content button{width:100%}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:90;background:#252338;color:white;padding:11px 15px;border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.23);font-size:12px;white-space:nowrap}

@media (max-width: 600px) {
  body{background:var(--bg)}.desktop-shell{padding:0;display:block}.app{width:100%;height:100dvh;min-height:620px;border-radius:0;border:0;box-shadow:none}.topbar{padding-top:max(18px, env(safe-area-inset-top))}.bottom-sheet{width:100%}
}


/* Refinamento visual v5 */
button {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
}
button:active { transform: scale(.965); }
button:disabled:active { transform: none; }

.click-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: .16;
  transform: translate(-50%, -50%) scale(0);
  animation: button-ripple .48s ease-out forwards;
  z-index: 20;
}
@keyframes button-ripple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(14); }
}

.topbar { height: 64px; padding: 13px 18px 5px; }
.brand-lockup { gap: 8px; }
.brand-lockup small { font-size: 9px; }
.brand-lockup strong { font-size: 16px; }
.brand-mark { width: 27px; height: 27px; border-radius: 9px; padding: 6px; }

.screen { height: calc(100% - 140px); padding: 2px 14px 20px; }
.page-title { margin: 3px 2px 9px; }
.page-title h1 { font-size: 21px; letter-spacing: -.55px; }
.page-title p { margin-top: 2px; font-size: 11px; line-height: 1.3; }

.month-switcher {
  grid-template-columns: 36px 1fr 36px;
  min-height: 48px;
  padding: 5px;
  border-radius: 17px;
  margin-bottom: 9px;
}
.month-switcher button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  justify-self: center;
}
.month-switcher button svg { width: 18px; height: 18px; display: block; }
.month-switcher strong { font-size: 13px; line-height: 1.15; }
.month-switcher small { display: block; margin-top: 1px; font-size: 9px; }

.summary-strip { gap: 8px; margin-bottom: 10px; }
.summary-box { padding: 10px 12px; border-radius: 16px; }
.summary-box small { font-size: 9px; }
.summary-box strong { margin-top: 2px; font-size: 15px; }

.section-head { margin: 1px 2px 7px; min-height: 20px; }
.section-head h2 { font-size: 15px; }
.transaction-list { gap: 7px; }
.transaction-card {
  border-radius: 16px;
  padding: 10px 11px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  box-shadow: 0 5px 15px rgba(43,39,91,.05);
}
.transaction-card:active { box-shadow: 0 2px 8px rgba(43,39,91,.08); }
.tx-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
.tx-copy { min-width: 0; }
.tx-copy strong { max-width: none; font-size: 13px; }
.tx-copy small { font-size: 10px; }
.tx-value strong { font-size: 13px; }
.status-pill { padding: 3px 6px; font-size: 8px; letter-spacing: .15px; }

.bottom-nav {
  height: 76px;
  padding: 7px 11px calc(7px + var(--safe-bottom));
  grid-template-columns: 1fr 64px 1fr 1fr;
}
.nav-item { min-height: 52px; padding-top: 2px; gap: 5px; }
.nav-item small { font-size: 9.5px; }
.nav-icon { width: 24px; height: 24px; min-height: 24px; flex-basis: 24px; }
.phosphor-icon { display: grid; place-items: center; color: currentColor; }
.phosphor-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.add-main {
  width: 54px;
  height: 54px;
  margin-top: -25px;
  border-radius: 18px;
  transform: rotate(5deg);
}
.add-main .phosphor-icon { width: 25px; height: 25px; transform: rotate(-5deg); }
.add-main:active { transform: rotate(5deg) scale(.9); }

/* Bottom sheets entram de baixo e saem suavemente. */
.overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s ease, visibility 0s linear .26s;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.bottom-sheet {
  opacity: 0;
  transform: translate(-50%, 105%);
  transition: transform .34s cubic-bezier(.22,.9,.28,1), opacity .2s ease;
  will-change: transform, opacity;
}
.bottom-sheet.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}
.sheet-head { margin-bottom: 12px; }
.sheet-head h2 { font-size: 19px; }
.sheet-close { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Refinamento visual v6 */
.rounded-nav-icon {
  display: grid;
  place-items: center;
  color: currentColor;
}
.rounded-nav-icon svg {
  width: 23px;
  height: 23px;
  display: block;
  overflow: visible;
}
.rounded-nav-icon svg > * {
  fill: currentColor;
  stroke: none;
}
.nav-item:not(.active) .rounded-nav-icon { opacity: .82; }
.nav-item.active .rounded-nav-icon { filter: drop-shadow(0 4px 7px rgba(92,70,232,.22)); }

/* Restaura o botão de adicionar da versão anterior. */
.add-main {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  margin: -28px auto 0;
  transform: rotate(8deg);
  box-shadow: 0 14px 28px rgba(92,70,232,.35);
}
.add-main .add-plus,
.add-main .add-plus::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  background: #fff;
  border-radius: 4px;
}
.add-main .add-plus::after { transform: rotate(90deg); }
.add-main:active { transform: rotate(8deg) scale(.94); }

/* O seletor do mês agora vem depois dos resumos. */
.summary-strip { margin-bottom: 8px; }
.month-switcher { margin-bottom: 10px; }

/* CashNote refinement */
.app-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rounded-nav-icon {
  width: 38px;
  height: 31px;
  min-height: 31px;
  flex-basis: 31px;
  border-radius: 12px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.rounded-nav-icon svg { width: 21px; height: 21px; }
.rounded-nav-icon svg > * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:not(.active) .rounded-nav-icon { opacity: 1; color: #9295a8; }
.nav-item.active .rounded-nav-icon { background: var(--primary-soft); color: var(--primary); filter: none; }
.nav-item:active .rounded-nav-icon { transform: translateY(1px); }

.tx-icon .app-icon { width: 19px; height: 19px; stroke-width: 2; }
.detail-icon .app-icon { width: 24px; height: 24px; stroke-width: 2; }
.profile-avatar .app-icon { width: 25px; height: 25px; }
.premium-icon .app-icon { width: 21px; height: 21px; stroke-width: 2; }
.insight-icon .app-icon { width: 21px; height: 21px; color: #7558d9; }
.setting-ico .app-icon { width: 19px; height: 19px; }
.chevron { display: grid; place-items: center; width: 24px; height: 30px; }
.chevron .app-icon { width: 17px; height: 17px; stroke-width: 2; }
.no-ads-symbol { color: var(--primary); }
.no-ads-symbol .app-icon { width: 52px; height: 52px; stroke-width: 1.65; }
.empty-state .empty-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 9px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); }
.empty-state .empty-icon .app-icon { width: 24px; height: 24px; }
.compact-empty { padding: 20px 14px; }

.transaction-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px;
  border-radius: 15px;
  background: #eae9f2;
}
.filter-chip {
  min-width: 0;
  border: 0;
  border-radius: 11px;
  padding: 8px 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05px;
}
.filter-chip.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(43,39,91,.08);
}
.section-head > small { color: var(--muted); font-size: 9px; font-weight: 750; }

.metric-panel {
  opacity: 0;
  animation: metric-panel-in .46s cubic-bezier(.22,.85,.28,1) forwards;
}
.metric-panel-delay { animation-delay: .07s; }
.metric-panel-delay-more { animation-delay: .14s; }
.metric-number { font-variant-numeric: tabular-nums; }
.donut { transform-origin: center; animation: donut-pop .55s cubic-bezier(.2,.9,.25,1) both; }
.bar-fill { transform: scaleX(0); transform-origin: left center; animation: grow-bar .65s .12s cubic-bezier(.22,.85,.28,1) forwards; }

@keyframes metric-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes donut-pop {
  from { opacity: .35; transform: scale(.82) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes grow-bar {
  to { transform: scaleX(1); }
}

@media (max-width: 340px) {
  .filter-chip { font-size: 9px; padding-inline: 3px; }
}
/* CashNote refinement v8 */
.entry-field-row { grid-template-columns: minmax(0, 1fr) minmax(148px, .9fr); }
.money-input-shell { display: flex; align-items: center; gap: 7px; min-height: 26px; }
.money-input-shell > span { color: var(--primary); font-size: 13px; font-weight: 850; }
.money-input-shell input { min-width: 0; font-size: 16px!important; font-weight: 750; font-variant-numeric: tabular-nums; }
.value-field:focus-within { border-color: rgba(92,70,232,.38); box-shadow: 0 0 0 3px rgba(92,70,232,.07); }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 0; }

.date-field { background: linear-gradient(145deg, #f4f1ff, #fff); border-color: rgba(92,70,232,.12); }
.date-input-shell { position: relative; display: flex; align-items: center; gap: 7px; min-height: 26px; color: var(--primary); }
.date-input-shell .app-icon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.9; }
.date-input-shell input { position: relative; min-width: 0; color: var(--ink); font-size: 12px!important; font-weight: 800; cursor: pointer; -webkit-appearance: none; appearance: none; }
.date-input-shell input::-webkit-calendar-picker-indicator { position: absolute; inset: -12px -10px -12px -30px; width: auto; height: auto; opacity: 0; cursor: pointer; }
.date-field:focus-within { border-color: rgba(92,70,232,.38); box-shadow: 0 0 0 3px rgba(92,70,232,.07); }

.setting-toggle-row { cursor: default; }
.setting-toggle-row > span:nth-child(2) { min-width: 0; }
.setting-toggle-row > .switch { justify-self: end; width: 46px; height: 27px; padding: 3px; flex: none; overflow: visible; }
.setting-toggle-row > .switch::after { width: 21px; height: 21px; }
.setting-toggle-row > .switch.on::after { transform: translateX(19px); }

.home-motion { opacity: 0; animation: home-rise .42s cubic-bezier(.22,.85,.28,1) forwards; }
.home-motion-1 { animation-delay: 0s; }
.home-motion-2 { animation-delay: .04s; }
.home-motion-3 { animation-delay: .08s; }
.home-motion-4 { animation-delay: .12s; }
.home-motion-5 { animation-delay: .16s; }
.home-list-item { opacity: 0; animation: home-card-in .42s cubic-bezier(.22,.85,.28,1) forwards; animation-delay: calc(.18s + var(--item-index, 0) * .035s); }

@keyframes home-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes home-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 360px) {
  .entry-field-row { grid-template-columns: 1fr; }
}
/* CashNote refinement v9: legibilidade móvel e sincronização */
.month-switcher {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  min-height: 60px;
  padding: 7px;
  border-radius: 19px;
}
.month-switcher button {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.month-switcher button svg { width: 21px; height: 21px; }
.month-switcher strong { font-size: 14px; }
.month-switcher small { font-size: 10.5px; }

.sync-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -1px 0 13px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
}
.sync-status > .app-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.sync-status span { min-width: 0; }
.sync-status small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 700;
}
.sync-status time { display: block; color: white; font-size: 11.5px; font-weight: 800; }

@media (max-width: 520px) {
  .brand-lockup small { font-size: 10px; }
  .brand-lockup strong { font-size: 17px; }
  .page-title p { font-size: 12px; }
  .summary-box small { font-size: 10.5px; }
  .summary-box strong { font-size: 16px; }
  .section-head > small { font-size: 10px; }
  .tx-copy small { font-size: 11px; }
  .status-pill { font-size: 9px; }
  .nav-item small { font-size: 10.5px; }
  .filter-chip { font-size: 11px; }
  .report-card > p,
  .insight-card p,
  .premium-card p,
  .profile-person p,
  .profile-explainer { font-size: 12px; }
  .legend-row,
  .bar-row { font-size: 12px; }
  .donut-center small { font-size: 10px; }
  .setting-row strong { font-size: 14px; }
  .setting-row small,
  .option-row small { font-size: 11px; }
  .field label { font-size: 10px; }
  .fine-print { font-size: 10px; }
}