/* ===== MOBILE LAYER — Dark Glass =====
   Every rule scoped under html.m-ui so desktop CSS stays fully inert. Reuses the
   app's CSS custom properties (--bg-*, --accent, --income, --expense, …) and the
   existing modal→bottom-sheet transform in style.css. */

html.m-ui { --m-bnav-h: 64px; }

/* Per-screen M_topbar replaces the global navbar + sidebar drawer on mobile.
   Force-hide them (and the desktop sidebar) regardless of width so touch
   tablets in the 901–1024px band also get the mobile chrome. */
html.m-ui .navbar { display: none; }
html.m-ui .sidebar { display: none; }

/* Migrated screens carry their own sticky M_topbar (handles the notch inset).
   Fallback desktop-rendered screens don't, so give them top safe-area spacing. */
html.m-ui .screen:not(:has(.m-topbar)) { padding-top: env(safe-area-inset-top, 0px); }

html.m-ui .main-content {
  margin: 0;
  padding: 0 0.85rem;
  padding-bottom: calc(var(--m-bnav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}

html.m-ui .screen { padding: 0; }
html.m-ui .screen.active { animation: mFade .22s ease; }
@keyframes mFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Top bar ---- */
html.m-ui .m-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: calc(env(safe-area-inset-top, 0px) + .65rem) .15rem .6rem;
  background: linear-gradient(180deg, var(--bg-base) 70%, transparent);
  backdrop-filter: blur(8px);
}
html.m-ui .m-topbar-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; margin: 0; }
html.m-ui .m-topbar-actions { display: flex; align-items: center; gap: .4rem; }
html.m-ui .m-sync { font-size: .72rem; font-weight: 700; white-space: nowrap; align-self: center; }
html.m-ui .m-iconbtn {
  width: 40px; height: 40px; border-radius: 13px; border: 1px solid rgba(255,255,255,.07);
  background: var(--bg-surface); color: var(--text-secondary); font-size: 1.05rem;
  display: grid; place-items: center; cursor: pointer;
}
html.m-ui .m-iconbtn:active { transform: scale(.92); }

/* ---- Period bar — one segmented container, raised lighter active pill ---- */
html.m-ui .m-period { margin: 0 0 .9rem; }
html.m-ui .m-period-bar {
  display: flex; gap: .25rem; padding: .28rem; border-radius: 15px;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06);
}
html.m-ui .m-period-chip {
  flex: 1 1 0; min-width: 0; padding: .55rem .3rem; border-radius: 11px;
  font-size: .85rem; font-weight: 600; border: none; background: transparent;
  color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.m-ui .m-period-chip.active {
  background: var(--bg-elevated); color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
html.m-ui .m-period-more { flex: 0 0 auto; padding-inline: .75rem; color: var(--text-muted); }
html.m-ui .m-period-custom { margin-top: 1rem; }

/* ---- Hero ---- */
html.m-ui .m-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 1.25rem 1.3rem;
  margin-bottom: .9rem; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(59,130,246,.20), rgba(139,92,246,.10));
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.10), 0 8px 30px rgba(0,0,0,.4);
}
html.m-ui .m-hero.neg { background: linear-gradient(135deg, rgba(244,63,94,.18), rgba(139,92,246,.08)); }
html.m-ui .m-hero-ring {
  position: absolute; inset-inline-start: -34px; top: -34px; width: 130px; height: 130px;
  border-radius: 50%; border: 14px solid rgba(255,255,255,.05);
}
html.m-ui .m-hero-k { color: var(--text-secondary); font-size: .82rem; font-weight: 600; }
html.m-ui .m-hero-v { font-size: 2.4rem; font-weight: 800; letter-spacing: -1.5px; margin: .25rem 0 .35rem; }
html.m-ui .m-hero.pos .m-hero-v { color: var(--income); }
html.m-ui .m-hero.neg .m-hero-v { color: var(--expense); }
html.m-ui .m-hero-trend {
  display: inline-block; font-size: .8rem; font-weight: 700; padding: .2rem .6rem; border-radius: 9px;
}
html.m-ui .m-hero.pos .m-hero-trend { background: rgba(16,185,129,.14); color: var(--income); }
html.m-ui .m-hero.neg .m-hero-trend { background: rgba(244,63,94,.14); color: var(--expense); }
html.m-ui .m-hero-sub { color: var(--text-muted); font-size: .76rem; margin-top: .5rem; }

/* ---- Stat chips (dashboard) — 2-col grid, all visible without scrolling ---- */
html.m-ui .m-chips {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem;
}
html.m-ui .m-chip {
  padding: .75rem .85rem; border-radius: 16px;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06);
}
html.m-ui .m-chip-k { color: var(--text-muted); font-size: .72rem; font-weight: 600; }
html.m-ui .m-chip-v { font-size: 1.15rem; font-weight: 800; margin-top: .2rem; }

/* ---- Cards / sections ---- */
html.m-ui .m-card {
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06); border-radius: 18px;
  padding: 1rem; margin-bottom: 1rem; backdrop-filter: blur(14px);
}
html.m-ui .m-tx-card { padding: .35rem .65rem; }
html.m-ui .m-section-head {
  display: flex; align-items: center; justify-content: space-between; margin: .25rem .15rem .6rem;
}
html.m-ui .m-section-head h3 { font-size: .98rem; font-weight: 700; margin: 0; }
html.m-ui .m-section-head a { color: var(--accent); font-size: .82rem; font-weight: 600; }
html.m-ui .m-muted { color: var(--text-muted); }
html.m-ui .pos { color: var(--income); }
html.m-ui .neg { color: var(--expense); }
html.m-ui .m-empty-line { color: var(--text-muted); font-size: .85rem; text-align: center; padding: 1rem; }

/* ---- Chart ---- */
html.m-ui .m-card-chart { padding: .6rem .5rem .4rem; }
html.m-ui .m-chart-wrap { height: 250px; width: 100%; }
html.m-ui .m-chart-wrap canvas { width: 100% !important; }

/* ---- Category bars ---- */
html.m-ui .m-catbar + .m-catbar { margin-top: .7rem; }
html.m-ui .m-catbar-head { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .3rem; }
html.m-ui .m-catbar-track { height: 8px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
html.m-ui .m-catbar-fill { height: 100%; border-radius: 5px; }

/* ---- Account rows ---- */
html.m-ui .m-acct-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .2rem;
}
html.m-ui .m-acct-row + .m-acct-row { border-top: 1px solid rgba(255,255,255,.05); }
html.m-ui .m-acct-name { font-weight: 600; font-size: .92rem; }
html.m-ui .m-acct-bal { font-weight: 800; font-size: .98rem; }
html.m-ui .m-flow-nums { display: flex; gap: .6rem; font-weight: 700; font-size: .85rem; }

/* ---- Transaction rows ---- */
html.m-ui .m-tx-row {
  display: flex; align-items: center; gap: .7rem; padding: .65rem .35rem; cursor: pointer;
  touch-action: pan-y;
}
html.m-ui .m-tx-row + .m-tx-row { border-top: 1px solid rgba(255,255,255,.05); }
html.m-ui .m-tx-row:active { background: rgba(255,255,255,.03); }
html.m-ui .m-tx-row .tx-avatar, html.m-ui .m-tx-row .uk-avatar {
  flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center;
}
html.m-ui .m-tx-mid { flex: 1; min-width: 0; }
html.m-ui .m-tx-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.m-ui .m-tx-sub { color: var(--text-muted); font-size: .76rem; margin-top: .15rem; }
html.m-ui .m-tx-amt { font-weight: 800; font-size: 1rem; white-space: nowrap; }
html.m-ui .m-tx-check { width: 20px; height: 20px; flex: 0 0 auto; }
html.m-ui .m-badge {
  font-size: .65rem; font-weight: 700; padding: .05rem .35rem; border-radius: 6px;
  background: rgba(255,255,255,.07); color: var(--text-secondary); margin-inline-start: .25rem;
}

/* ---- Search + type chips + filter ---- */
html.m-ui .m-search-row { display: flex; gap: .5rem; margin-bottom: .7rem; }
html.m-ui .m-search {
  flex: 1; display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; border-radius: 14px;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06); color: var(--text-muted);
}
html.m-ui .m-search input { flex: 1; border: none; background: transparent; color: var(--text-primary); font-size: 16px; outline: none; }
html.m-ui .m-filter-btn {
  flex: 0 0 auto; min-width: 48px; border-radius: 14px; border: 1px solid rgba(255,255,255,.06);
  background: var(--bg-surface); color: var(--text-secondary); font-size: .9rem; font-weight: 700;
}
html.m-ui .m-filter-btn.has-active { background: var(--accent); color: #fff; border-color: transparent; }
html.m-ui .m-typechips { display: flex; gap: .45rem; overflow-x: auto; margin-bottom: .8rem; scrollbar-width: none; }
html.m-ui .m-typechips::-webkit-scrollbar { display: none; }
html.m-ui .m-chip-btn {
  flex: 0 0 auto; padding: .5rem .9rem; border-radius: 12px; font-size: .82rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.06); background: var(--bg-surface); color: var(--text-secondary);
}
html.m-ui .m-chip-btn.active { background: rgba(59,130,246,.18); color: #fff; border-color: rgba(59,130,246,.4); }

html.m-ui .m-tx-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
html.m-ui .m-sum-chip {
  flex: 0 0 auto; padding: .4rem .7rem; border-radius: 11px; font-size: .82rem; font-weight: 700;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.05);
}
html.m-ui .m-select-toolbar { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
html.m-ui .m-pagination { display: flex; justify-content: center; padding: .4rem 0 1rem; }
html.m-ui .m-loadmore {
  width: 100%; padding: .8rem; border-radius: 14px; font-weight: 700; font-size: .9rem;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.07); color: var(--accent);
}

/* hidden filter stash — pure state holder for _getFiltered(); never shown */
html.m-ui .m-stash { display: none; }
html.m-ui .m-amt-range { display: flex; gap: .5rem; }
html.m-ui .m-check { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; font-size: .92rem; }

/* filter sheet form */
html.m-ui .m-filter-form { display: flex; flex-direction: column; }
html.m-ui .m-filter-label { font-size: .8rem; color: var(--text-muted); font-weight: 600; margin: .7rem 0 .3rem; }
html.m-ui .m-filter-select {
  width: 100%; padding: .7rem .8rem; border-radius: 12px; font-size: 16px;
  border: 1px solid rgba(255,255,255,.1); background: var(--bg-elevated); color: var(--text-primary);
}

/* ---- "More" launcher sheet ---- */
html.m-ui .m-more-list { display: flex; flex-direction: column; gap: .35rem; }
html.m-ui .m-more-row {
  display: flex; align-items: center; gap: .85rem; padding: .9rem .8rem; border-radius: 14px;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.05); color: var(--text-primary);
  font-size: 1rem; font-weight: 600; text-align: start; width: 100%;
}
html.m-ui .m-more-ic { font-size: 1.3rem; }
html.m-ui .m-more-label { flex: 1; }
html.m-ui .m-more-chev { color: var(--text-muted); font-size: 1.3rem; }
html.m-ui .m-more-status {
  font-size: .8rem; font-weight: 700; color: var(--accent);
  padding: .15rem .55rem; border-radius: 9px; background: rgba(59,130,246,.14);
}
html.m-ui .m-more-status.pos { color: var(--income); background: rgba(16,185,129,.14); }

/* ===== Bottom nav (Dark Glass) + center FAB ===== */
html.m-ui .bottom-nav {
  /* Pin to the viewport bottom on ALL mobile widths — the position:fixed in
     style.css only applies under @media(max-width:900px), so touch tablets in
     the 901–1024px band (m-ui via pointer:coarse) would otherwise let the bar
     scroll up into the page. */
  position: fixed; inset-inline: 0; bottom: 0; z-index: 150;
  height: calc(var(--m-bnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(12,12,16,.82); backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-around;
}
html.m-ui .bottom-nav .bnav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(255,255,255,.32); font-size: .62rem; font-weight: 600; background: none; border: none;
}
html.m-ui .bottom-nav .bnav-item.active { color: var(--accent); }
html.m-ui .bottom-nav .bnav-item.active::before { content: none; }
html.m-ui .bnav-spacer { flex: 1; }

/* Raised center FAB: straddles the top edge of the bar, above it (nav z=150). */
html.m-ui .fab {
  display: grid; place-items: center; position: fixed; z-index: 200;
  bottom: calc(var(--m-bnav-h) + env(safe-area-inset-bottom, 0px) - 26px);
  inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto;
  width: 56px; height: 56px; border-radius: 50%; border: none; color: #fff; font-size: 1.85rem; line-height: 1;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  box-shadow: 0 8px 22px rgba(59,130,246,.5), 0 0 0 5px var(--bg-base);
}
html.m-ui .fab:active { transform: scale(.92); }

/* ===== Fallback desktop-rendered screens — native heading + spacing ===== */
html.m-ui .page-header { padding: .4rem .15rem .6rem; display: block; }
html.m-ui .page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; }
html.m-ui .page-subtitle { font-size: .78rem; display: block; margin-top: .15rem; }

/* ===== Analysis ===== */
html.m-ui .m-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
html.m-ui .m-stat {
  min-width: 0; overflow: hidden;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: .8rem .85rem;
}
html.m-ui .m-stat-label { color: var(--text-muted); font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.m-ui .m-stat-val { font-size: 1.2rem; font-weight: 800; margin-top: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 3-up variant (recurring summary) — tighter so currency values fit 3 across */
html.m-ui .m-stat-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
html.m-ui .m-stat-grid-3 .m-stat { padding: .65rem .55rem; }
html.m-ui .m-stat-grid-3 .m-stat-val { font-size: .95rem; }
html.m-ui .m-chart-tall { height: 300px; }

/* YoY — native stacked rows */
html.m-ui .m-yoy-head, html.m-ui .m-yoy-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem; align-items: center;
}
html.m-ui .m-yoy-head { font-size: .7rem; color: var(--text-muted); padding: 0 .15rem .4rem; }
html.m-ui .m-yoy-row { padding: .55rem .15rem; font-size: .85rem; font-weight: 600; }
html.m-ui .m-yoy-row + .m-yoy-row { border-top: 1px solid rgba(255,255,255,.05); }
html.m-ui .m-yoy-label { font-weight: 700; }
html.m-ui .m-yoy-prev { font-weight: 500; }
html.m-ui .m-yoy-delta { text-align: end; }

/* hidden recurring rows look dimmed */
html.m-ui .m-tx-row.m-rec-hidden { opacity: .5; }

/* ===== Property (native styling of shared markup) ===== */
html.m-ui #screen-property .card { padding: 1rem; border-radius: 16px; margin-bottom: 1rem; }
html.m-ui .prop-setup-grid { display: flex; flex-direction: column; gap: .7rem; }
html.m-ui .prop-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
html.m-ui .prop-summary-card {
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: .75rem .7rem;
}
html.m-ui .prop-summary-label { font-size: .72rem; }
html.m-ui .prop-summary-val { font-size: 1.05rem; font-weight: 800; }
html.m-ui .prop-summary-sub { font-size: .66rem; }
/* compact read cards for property payments (replaces the wide editable table) */
html.m-ui .m-prop-pay {
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06); border-radius: 14px;
  padding: .75rem .8rem; margin-bottom: .55rem; cursor: pointer;
}
html.m-ui .m-prop-pay:active { background: rgba(255,255,255,.03); }
html.m-ui .m-prop-mismatch { border-color: rgba(244,63,94,.4); }
html.m-ui .m-prop-pay-top { display: flex; align-items: center; gap: .5rem; }
html.m-ui .m-prop-pay-type { flex: 1; font-weight: 600; font-size: .9rem; }
html.m-ui .m-prop-pay-amt { font-weight: 800; font-size: 1rem; }
html.m-ui .m-prop-pay-meta { color: var(--text-muted); font-size: .76rem; margin-top: .3rem; }
html.m-ui .m-amt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* anomalies card on the native mobile dashboard */
html.m-ui .ins-anomalies {
  background: var(--bg-surface); border: 1px solid rgba(244,63,94,.28); border-radius: 18px;
  padding: 1rem; margin-bottom: 1rem; backdrop-filter: blur(14px);
}
html.m-ui .ins-anomalies .card-title { font-size: .98rem; font-weight: 700; margin-bottom: .4rem; }
html.m-ui .ins-anom-ok { min-height: 32px; }
html.m-ui .ins-anom-row { padding: .6rem 0; }

/* back bar above the mobile transactions top bar */
html.m-ui .tx-back-bar { padding: calc(env(safe-area-inset-top, 0px) + .5rem) .15rem .25rem; margin-bottom: 0; }
html.m-ui .tx-back-bar + .m-topbar { padding-top: .5rem; }
html.m-ui .tx-back-btn { background: var(--bg-surface); border: 1px solid rgba(255,255,255,.08); color: var(--text-primary); }

/* ===== Settings + Import (native polish) ===== */
/* Dark Glass tab chips instead of the underline tab bar */
html.m-ui .tabs-bar { border-bottom: none; gap: .4rem; padding-bottom: .4rem; margin-bottom: 1rem; }
html.m-ui .tab-btn {
  flex: 0 0 auto; margin-bottom: 0; border-radius: 11px; padding: .5rem .85rem;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.06); background: var(--bg-surface); color: var(--text-secondary);
}
html.m-ui .tab-btn.active { background: var(--accent); color: #fff; border-color: transparent; }
/* prevent iOS zoom on focus for the data-entry screens */
html.m-ui #screen-settings input:not([type=checkbox]):not([type=radio]):not([type=color]),
html.m-ui #screen-settings select,
html.m-ui #screen-settings textarea,
html.m-ui #screen-import select,
html.m-ui #screen-import input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  font-size: 16px;
}
/* wide tables (templates / rules / aliases / reconcile / import preview) scroll
   inside their own box instead of stretching the page sideways */
html.m-ui #screen-settings .tab-panel table,
html.m-ui #screen-import #importTable {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
}
html.m-ui #screen-import .drop-zone { border-radius: 16px; }

/* Accordion */
html.m-ui .m-acc {
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06); border-radius: 16px;
  margin-bottom: 1rem; overflow: hidden;
}
html.m-ui .m-acc-summary {
  list-style: none; cursor: pointer; padding: 1rem; font-size: .98rem; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
html.m-ui .m-acc-summary::-webkit-details-marker { display: none; }
html.m-ui .m-acc-chev { color: var(--text-muted); font-size: 1.4rem; transition: transform .2s; }
html.m-ui .m-acc[open] .m-acc-chev { transform: rotate(90deg); }
html.m-ui .m-acc-body { padding: 0 1rem 1rem; }

/* AI chat */
html.m-ui .m-chat-messages { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
html.m-ui .m-chat-input-row { display: flex; gap: .5rem; margin-top: .6rem; }
html.m-ui .m-chat-input-row input {
  flex: 1; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: var(--bg-surface);
  color: var(--text-primary); padding: .7rem .85rem; font-size: 16px;
}

/* ===== Budget (native styling of the shared markup) ===== */
html.m-ui .budget-month-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .9rem;
}
html.m-ui .budget-month-nav .btn-ghost { padding: .5rem .6rem; font-size: .82rem; white-space: nowrap; }
html.m-ui .budget-month-label { font-size: .95rem; font-weight: 700; text-align: center; }
/* stacked full-width cards so the "actual / budget" values fit on one line and
   every card aligns to the same edge (3-across was too narrow for currency) */
html.m-ui .budget-summary-grid { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
html.m-ui .budget-summary-card {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: .7rem .85rem;
}
html.m-ui .budget-summary-card .budget-label { flex: 1 1 auto; font-size: .82rem; color: var(--text-muted); }
html.m-ui .budget-summary-card .budget-val { flex: 0 0 auto; font-size: 1rem; font-weight: 800; }
html.m-ui .budget-summary-card .budget-sub { flex: 1 1 100%; font-size: .72rem; color: var(--text-muted); }
html.m-ui .budget-actions { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1.2rem; }
html.m-ui .budget-actions button { width: 100%; }
html.m-ui .budget-filterbar { display: flex; gap: .5rem; margin-bottom: 1rem; }
html.m-ui .budget-filterbar button { flex: 1; }
html.m-ui .budget-screen-heading { font-size: 1rem; font-weight: 700; margin: .4rem .15rem .6rem; }
html.m-ui .budget-screen-list-head { display: none; }
html.m-ui .budget-screen-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.05); border-radius: 14px;
  padding: .7rem .8rem; margin-bottom: .5rem;
}
html.m-ui .budget-screen-cat { flex: 1 1 auto; font-weight: 600; font-size: .9rem; }
html.m-ui .budget-screen-actual-wrap { flex: 0 0 auto; font-weight: 700; font-size: .9rem; }
html.m-ui .budget-input-wrap { flex: 0 0 auto; }
html.m-ui .budget-input { width: 84px; }
html.m-ui .budget-screen-bar-track { flex: 1 1 100%; height: 7px; border-radius: 5px; margin-top: .15rem; }

/* Feedback dock inside the mobile topbar: neutralize the desktop absolute
   positioning and collapse to icon-only buttons. */
html.m-ui .m-topbar-actions .feedback-dock { position: static; }
html.m-ui .m-topbar-actions .fb-label { display: none; }