/* A single overview, then the user's existing filters and category ledger. */
body.ux-r311 #page-wallet:not(.hidden) { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:14px!important; align-items:stretch!important; }
body.ux-r311 #page-wallet #walletMobileHero {
  display:block!important; margin:0!important; padding:16px!important;
  border:1px solid var(--border)!important; border-radius:var(--r-lg)!important;
  background:linear-gradient(125deg,var(--primary-dim),var(--surface2) 70%)!important;
}
body.ux-r311 #page-wallet .wallet-overview-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
body.ux-r311 #page-wallet .wallet-overview-head span { font-size:12px; color:var(--muted); }
body.ux-r311 #page-wallet .wallet-overview-head h2 { margin:3px 0 0; font-size:18px; line-height:1.25; font-weight:750; }
body.ux-r311 #page-wallet .wallet-overview-icon { display:grid; place-items:center; width:38px; height:38px; color:var(--primary-light)!important; }
body.ux-r311 #page-wallet .wallet-overview-icon svg { width:25px; height:25px; }
body.ux-r311 #page-wallet .wallet-balance { display:grid; gap:4px; }
body.ux-r311 #page-wallet .wallet-balance > span { font-size:13px; color:var(--muted); }
body.ux-r311 #page-wallet .wallet-balance > strong { font-size:clamp(23px,6.5vw,34px); line-height:1.2; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
body.ux-r311 #page-wallet .wallet-balance small { color:var(--muted); font-size:11px; line-height:1.5; }
body.ux-r311 #page-wallet .wallet-flow { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
body.ux-r311 #page-wallet .wallet-flow > div { display:grid; flex:1 1 140px; gap:6px; min-width:max-content; max-width:100%; }
body.ux-r311 #page-wallet .wallet-flow > div > span { color:var(--muted); font-size:12px; }
body.ux-r311 #page-wallet .wallet-flow strong { font-size:clamp(14px,4vw,20px); line-height:1.3; font-variant-numeric:tabular-nums; }
body.ux-r311 #page-wallet .wallet-pending-note { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding-top:9px; margin-top:12px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
body.ux-r311 #page-wallet .wallet-basis { font-size:11px; color:var(--muted); margin:12px 0 0; }
body.ux-r311 #page-wallet #walletStats { display:block!important; margin:0!important; }
body.ux-r311 #page-wallet #walletStats:empty { display:none!important; }
body.ux-r311 #page-wallet .wallet-accounting > summary { color:var(--muted); font-size:13px; cursor:pointer; padding:12px 4px; min-height:44px; }
body.ux-r311 #page-wallet .wallet-accounting-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:10px; }
body.ux-r311 #page-wallet .wallet-accounting-grid .wallet-kpi { display:block!important; min-height:0!important; padding:14px!important; border-radius:var(--r)!important; }
body.ux-r311 #page-wallet .wallet-kpi-icon { display:none!important; }
body.ux-r311 #page-wallet .wallet-kpi-copy b { font-size:18px!important; margin:6px 0!important; }
body.ux-r311 #page-wallet .wallet-kpi-copy small { font-size:11px!important; }
body.ux-r311 #page-wallet .tools-row { display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:10px!important; padding:0!important; margin:4px 0 0!important; border:0!important; background:none!important; box-shadow:none!important; }
body.ux-r311 #page-wallet .wallet-search { display:flex; align-items:center; flex:1 1 200px; gap:10px; padding:0 12px; min-width:0; min-height:48px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface2); }
body.ux-r311 #page-wallet .wallet-search svg { width:19px; height:19px; flex:none; color:var(--muted); }
body.ux-r311 #page-wallet #searchTx { min-width:0!important; width:100%!important; height:46px!important; margin:0!important; padding:8px 0!important; border:0!important; border-radius:0!important; background:transparent!important; font-size:14px!important; }
body.ux-r311 #page-wallet .wallet-organize { flex:0 0 auto; min-width:0; }
body.ux-r311 #page-wallet .wallet-organize[open] { flex:1 1 100%; }
body.ux-r311 #page-wallet .wallet-organize > summary { color:var(--primary-light); font-size:13px; min-height:44px; padding:12px 4px; cursor:pointer; }
body.ux-r311 #page-wallet .wallet-organize-content { display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); }
body.ux-r311 #page-wallet .wallet-organize-content > label { font-size:12px; color:var(--muted); }
body.ux-r311 #page-wallet #sortTx { width:100%!important; min-width:0!important; font-size:13px!important; min-height:44px!important; padding:10px 34px 10px 12px!important; }
body.ux-r311 #page-wallet .wallet-tool-actions { display:flex!important; gap:10px!important; width:auto!important; }
body.ux-r311 #page-wallet .wallet-tool-actions button { flex:1; min-width:0!important; min-height:44px!important; padding:10px 16px!important; font-size:13px!important; border-radius:var(--r-sm)!important; }
body.ux-r311 #page-wallet .filter-row { display:flex!important; flex-wrap:nowrap!important; gap:6px!important; overflow-x:auto!important; padding:0 0 7px!important; margin:0!important; border:0!important; background:none!important; box-shadow:none!important; scrollbar-width:thin; }
body.ux-r311 #page-wallet .wallet-quick-title { display:none!important; }
body.ux-r311 #page-wallet .filter-row button { flex:0 0 auto!important; width:auto!important; min-height:42px!important; padding:10px 16px!important; font-size:13px!important; line-height:1.4!important; border-color:transparent!important; border-radius:var(--r-sm)!important; }
body.ux-r311 #page-wallet #walletTotal { display:block!important; margin:0!important; padding:3px 0 12px!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--border)!important; border-radius:0!important; }
body.ux-r311 #page-wallet .wallet-total-main { display:flex!important; flex-wrap:wrap!important; gap:6px 16px; align-items:center; justify-content:space-between; }
body.ux-r311 #page-wallet .wallet-total-main > span { font-size:12px!important; font-weight:400!important; color:var(--muted)!important; }
body.ux-r311 #page-wallet .wallet-total-main > strong { font-size:17px!important; }
body.ux-r311 #page-wallet .wallet-plan-note { flex-basis:100%; }
body.ux-r311 #page-wallet .wallet-mobile-list-head { display:flex!important; gap:10px; justify-content:space-between; align-items:center; margin:5px 0 12px!important; }
body.ux-r311 #page-wallet .wallet-mobile-list-head b { font-size:15px!important; }
body.ux-r311 #page-wallet .wallet-mobile-list-head span { font-size:11px!important; color:var(--muted); text-align:right; }
body.ux-r311 #page-wallet .cat-group { margin:0 0 12px!important; border:1px solid var(--border)!important; border-radius:var(--r)!important; background:var(--surface2)!important; box-shadow:none!important; overflow:hidden; }
body.ux-r311 #page-wallet .cat-head { padding:12px 14px!important; gap:10px!important; background:transparent!important; border:0!important; min-height:62px!important; }
body.ux-r311 #page-wallet .cat-head > div { min-width:0; }
body.ux-r311 #page-wallet .cat-head b { font-size:14px!important; line-height:1.4!important; overflow-wrap:anywhere; }
body.ux-r311 #page-wallet .cat-head small { font-size:11px!important; color:var(--muted)!important; }
body.ux-r311 #page-wallet .cat-total { gap:6px!important; font-size:14px!important; }
body.ux-r311 #page-wallet .cat-toggle-btn { min-width:40px!important; width:40px!important; height:40px!important; padding:10px!important; border:0!important; background:transparent!important; }
body.ux-r311 #page-wallet .cat-body { padding:0 14px!important; }
body.ux-r311 #page-wallet .tx-item { display:grid!important; grid-template-columns:32px minmax(0,1fr); gap:7px 10px!important; padding:14px 0!important; margin:0!important; border:0!important; border-top:1px solid var(--border)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; min-width:0; }
body.ux-r311 #page-wallet .tx-item > :first-child:not(.tx-mid) { grid-column:1; grid-row:1 / span 2; align-self:start; }
body.ux-r311 #page-wallet .tx-mid { grid-column:2; min-width:0; }
body.ux-r311 #page-wallet .tx-title { font-size:14px!important; line-height:1.4!important; white-space:normal!important; overflow-wrap:anywhere; }
body.ux-r311 #page-wallet .tx-meta { display:flex!important; flex-wrap:wrap!important; gap:4px 8px!important; font-size:11px!important; line-height:1.5!important; }
body.ux-r311 #page-wallet .tx-meta .tag { display:none!important; }
body.ux-r311 #page-wallet .tx-value { grid-column:2; font-size:16px!important; text-align:left!important; margin:0!important; font-variant-numeric:tabular-nums; }
body.ux-r311 #page-wallet .tx-item.paid { opacity:1!important; }
body.ux-r311 #page-wallet .tx-item.paid :is(.tx-mid,.tx-value) { opacity:.9!important; }
body.ux-r311 #page-wallet .wallet-status { color:var(--muted); }
body.ux-r311 #page-wallet .wallet-status.pending { color:var(--yellow); }
body.ux-r311 #page-wallet .tx-actions { grid-column:2; }
body.ux-r311 #page-wallet .wallet-start p,body.ux-r311 #page-wallet .wallet-empty-state p { font-size:13px; line-height:1.6; color:var(--muted); margin:7px 0 0; }
body.ux-r311 #page-wallet .wallet-empty-state { display:grid; justify-items:center; text-align:center; padding:30px 16px; }
body.ux-r311 #page-wallet .wallet-empty-state > span { color:var(--primary-light); margin-bottom:12px; }
body.ux-r311 #page-wallet .wallet-empty-state svg { width:26px; height:26px; }
body.ux-r311 #page-wallet .wallet-empty-state b { font-size:15px; }
body.ux-r311 #page-wallet summary:focus-visible { outline:2px solid var(--primary-light); outline-offset:2px; border-radius:var(--r-sm); }
@media(min-width:600px) {
  body.ux-r311 #page-wallet .wallet-flow { max-width:520px; }
  body.ux-r311 #page-wallet .tx-item { grid-template-columns:36px minmax(0,1fr) auto; align-items:center; }
  body.ux-r311 #page-wallet .tx-value { grid-column:3; grid-row:1; text-align:right!important; }
}
@media(max-width:359px) {
  body.ux-r311 #page-wallet #walletMobileHero { padding:16px!important; }
  body.ux-r311 #page-wallet .wallet-flow { grid-template-columns:1fr; gap:12px; }
  body.ux-r311 #page-wallet .wallet-flow > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; }
  body.ux-r311 #page-wallet .cat-head { flex-wrap:wrap; }
  body.ux-r311 #page-wallet .cat-total { margin-left:auto; }
}
@media(prefers-reduced-motion:no-preference) {
  body.ux-r311 #page-wallet .filter-row button { transition:background-color .15s,color .15s; }
}

body.ux-r311 #page-wallet .wallet-balance strong[data-tone="income"] { color:var(--income); }
body.ux-r311 #page-wallet .wallet-balance strong[data-tone="warning"] { color:var(--warning,var(--yellow)); }
body.ux-r311 #page-wallet .wallet-balance strong[data-tone="expense"] { color:var(--expense); }