/* Warm ArusKas UI, based on the approved four-screen visual concept. */
html[data-theme="light"], body[data-theme="light"] {
  --green: #b65337;
  --green2: #93422c;
  --app-bg: #efe4d9;
  --screen-bg: #f7efe8;
  --card: #fffcf8;
  --card-glass: #fffcf8;
  --surface: #fffcf8;
  --surface2: #f8ede3;
  --surface3: #f3e5d8;
  --line: #eadbd0;
  --ink: #352821;
  --muted: #766c67;
  --button-bg: #f8ebdf;
  --button-ink: #4b342a;
  --hover: #fbf3eb;
  --selected: #fae7db;
  --accent-soft: #fae5d8;
  --expense: #ad4e34;
  --panel-text: #66554a;
  --chart-bg: #fffcf8;
  --chart-inner: #fffcf8;
  --chart-label: #746862;
  --chart-value: #352821;
  --dropdown-bg: #fffcf8;
  --shadow: 0 12px 34px rgba(117, 65, 43, .09);
  --olive: #60774f;
  --income: #3f704b;
  --income-soft: #e8f2e8;
  --expense-soft: #fae8dd;
}
html[data-theme="dark"], body[data-theme="dark"] {
  --green: #db8a68;
  --green2: #e7a488;
  --app-bg: #1b1715;
  --screen-bg: #211b18;
  --card: #302620;
  --card-glass: #302620;
  --surface: #362b25;
  --surface2: #3a2e27;
  --surface3: #49352b;
  --line: #584238;
  --ink: #fff5ed;
  --muted: #c5ada1;
  --button-bg: #49352b;
  --button-ink: #fff0e4;
  --hover: #44342c;
  --selected: #573a2d;
  --accent-soft: #553829;
  --expense: #eea285;
  --chart-bg: #302620;
  --chart-inner: #302620;
  --chart-label: #c5ada1;
  --chart-value: #fff5ed;
  --dropdown-bg: #302620;
  --olive: #acc397;
  --income: #add5aa;
  --income-soft: #273e31;
  --expense-soft: #513328;
}
body { background: var(--app-bg) !important; }
.screen { background: var(--screen-bg) !important; padding-inline: 16px !important; }
.phone { box-shadow: 0 24px 64px rgba(63, 36, 24, .18); }
.topbar { align-items: center !important; margin-bottom: 5px; gap: 12px; }
.topbar > div { flex: 1; min-width: 0; text-align: left !important; }
.topbar.report-centered > div,
.topbar.report-centered .title,
.topbar.report-centered .subtitle { text-align: left !important; }
.topbar .title { color: var(--ink); font-size: clamp(29px, 6vw, 34px); font-weight: 850; letter-spacing: -.055em; line-height: 1.05; }
.topbar .subtitle { display: block; margin-top: 7px; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.topbar .icon-btn { background: transparent !important; color: var(--ink) !important; font-size: 25px; }
.topbar .back-btn.visible { width: 32px; flex: 0 0 32px; }
.card:not(.balance), .list, .dialog-card, .sheet { border-radius: 22px; box-shadow: 0 7px 26px rgba(118, 70, 46, .055); }
.card:not(.balance):not(.report-period-card), .list, .dialog-card, .sheet { background: var(--card-glass) !important; border-color: var(--line) !important; }
.text-btn { color: var(--green2) !important; font-weight: 800; min-height: 38px; }
.primary { background: var(--green) !important; color: #fff !important; border-radius: 15px; }
.ghost { border-radius: 15px; }
.input, .search, input, select, textarea { border-radius: 15px; border-color: var(--line) !important; background: var(--surface) !important; color: var(--ink) !important; }
.input:focus, .search:focus, input:focus, select:focus, textarea:focus { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(182, 83, 55, .14) !important; }
.income { color: var(--olive) !important; }
.expense { color: var(--expense) !important; }
.category-svg { display: block; width: 26px; height: 26px; object-fit: contain; filter: brightness(0) saturate(100%) invert(24%) sepia(22%) saturate(626%) hue-rotate(330deg) brightness(89%); }
html[data-theme="dark"] .category-svg { filter: brightness(0) invert(94%) sepia(10%) saturate(350%) hue-rotate(340deg); }
.icon .category-svg, .cat-icon .category-svg { margin: 0; }
.icon { background: #f7e6d9; border-radius: 50% !important; }

/* One visual family for the four destinations; plus is an unlabeled action. */
.nav { background: var(--card-glass) !important; border-top: 1px solid var(--line) !important; box-shadow: 0 -5px 18px rgba(102, 64, 44, .06) !important; }
.nav button { color: var(--muted) !important; border-radius: 17px; }
.nav button .nav-label { color: var(--muted) !important; font-weight: 650 !important; }
.nav .nav-svg-wrap { width: 34px; height: 32px; }
.nav .nav-svg { width: 23px; height: 23px; stroke-width: 2.15; }
.nav button.active:not(.add) { background: var(--accent-soft) !important; color: var(--green2) !important; }
.nav button.active .nav-svg-wrap { background: transparent !important; transform: none; }
.nav button.active .nav-svg { stroke: var(--green2) !important; stroke-width: 2.3; transform: none; }
.nav button.active .nav-label { color: var(--green2) !important; font-weight: 850 !important; }
.nav .add { width: 58px !important; height: 58px !important; min-height: 58px !important; border-radius: 50% !important; background: linear-gradient(150deg,#c76543,#9d402a) !important; box-shadow: 0 8px 19px rgba(147, 63, 38, .26) !important; color: #fff !important; transform: translateY(-16px) !important; }
.nav .add .nav-add-svg { width: 29px; height: 29px; }

/* The balance card keeps the only stitched edge in the interface. */
.balance { position: relative; overflow: hidden; margin-top: 15px; padding: 27px 25px 24px !important; border: 0 !important; border-radius: 24px !important; color: #fff; background: linear-gradient(140deg, #c76b49, #a5462e 84%) !important; box-shadow: 0 14px 30px rgba(139, 58, 35, .17) !important; }
.balance::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(255, 240, 224, .72); border-radius: 17px; pointer-events: none; }
.balance > * { position: relative; z-index: 1; }
.balance .row { font-size: 13px; color: #fff8f0; }
.balance #homePeriod { opacity: .86; font-size: 11px; }
.balance h2 { margin: 13px 0 17px; font-size: clamp(30px, 7.5vw, 40px); line-height: 1.08; letter-spacing: -.05em; }
.balance .grid2 { margin-top: 0 !important; border-top: 1px solid rgba(255,255,255,.29); padding-top: 16px; gap: 14px; }
.balance .grid2 > div + div { border-left: 1px solid rgba(255,255,255,.25); padding-left: 14px; }
.balance .grid2 small { color: #fff5ed; font-size: 11px; }
.balance .grid2 strong { margin-top: 3px; font-size: clamp(14px, 3.8vw, 18px); white-space: nowrap; }

/* Input stays directly below balance, with actions reachable as full-size buttons. */
.home-quick { padding: 19px 18px !important; margin-top: 15px; }
.home-quick .row strong { font-size: 19px; letter-spacing: -.035em; }
.home-quick .row .text-btn { font-size: 11px; }
.home-quick .input-row { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr); align-items: stretch !important; gap: 9px !important; margin-top: 12px; }
.home-quick #quickInput { grid-column: 1 / -1; width: 100% !important; height: 51px !important; min-width: 0 !important; padding-inline: 15px; font-size: 13px; }
.home-quick .quick-tool { width: 100% !important; min-width: 0 !important; height: 60px !important; min-height: 60px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px !important; border-radius: 15px !important; background: var(--button-bg) !important; color: var(--ink) !important; font-size: 12px !important; }
.home-quick .quick-tool img { width: 23px; height: 23px; filter: brightness(0) saturate(100%) invert(43%) sepia(66%) saturate(565%) hue-rotate(337deg) brightness(94%); }
.home-quick .primary { width: 100%; min-width: 0; min-height: 60px !important; padding: 0 8px !important; font-size: 14px; white-space: nowrap; }
.home-quick .primary span { font-size: 22px; vertical-align: -1px; margin-right: 4px; font-weight: 400; }
.home-quick .quick-tool:active, .home-quick .primary:active, .nav button:active { transform: scale(.97); }

/* Home spending and transactions. */
.page[data-page="home"] .section-head { margin: 18px 4px 8px; }
.page[data-page="home"] .section-head h3 { font-size: 18px; line-height: 1.2; letter-spacing: -.035em; }
#homeCategories.cat-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 0; padding: 6px 14px; background: var(--card-glass); border: 1px solid var(--line); border-radius: 22px; }
#homeCategories .cat-card { width: 100%; min-height: 76px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; text-align: left; }
#homeCategories .cat-card + .cat-card { border-top: 1px solid var(--line); }
#homeCategories .cat-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
#homeCategories .cat-info { min-width: 0; }
#homeCategories .cat-info strong { font-size: 13.5px; font-weight: 750; }
#homeCategories .cat-card small { color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
#homeCategories .cat-bar { display: block; width: 100%; height: 7px; margin-top: 9px; border-radius: 99px; overflow: hidden; background: #eee4dc; }
#homeCategories .cat-bar i { display: block; width: var(--bar); height: 100%; background: #cd7655; border-radius: inherit; }
#homeTxList { padding: 5px 13px; }
#homeTxList .tx-item, #txList .tx-item { grid-template-columns: 46px minmax(0,1fr) auto; min-height: 72px; gap: 10px; padding: 9px 2px; }
#homeTxList .tx-item + .tx-item { border-top: 1px solid var(--line); border-radius: 0; }
.tx-item .icon { width: 44px; height: 44px; border-radius: 50% !important; }
.tx-item .tx-title { font-size: 13.5px; font-weight: 750; }
.tx-item .tx-meta { font-size: 11.5px; line-height: 1.3; }
.tx-item .amount { color: var(--ink) !important; font-size: 12px; font-weight: 800; }
.tx-item .amount.income { color: var(--olive) !important; }
#budgetContainer { padding: 17px !important; margin-bottom: 10px; }
#budgetContainer .row strong { font-size: 17px !important; }
#budgetPocketList .icon { border-radius: 50% !important; }

/* Transaction period, search, filters and grouped history. */
.page[data-page="transactions"] .tx-period-card,
.page[data-page="transactions"] .tx-filter-card { padding: 15px !important; }
.period-tabs { background: var(--button-bg) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px !important; }
.period-tabs button { border-radius: 12px !important; min-height: 38px; color: var(--muted) !important; }
.period-tabs button.active { background: var(--green) !important; color: #fff !important; box-shadow: none !important; }
.period-control { margin-top: 13px; gap: 8px; }
.period-control:not(.range-active) .range-box { display: none !important; }
.period-control.range-active .range-box { display: grid !important; }
.period-step { min-width: 43px; min-height: 43px; border-radius: 14px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--green2) !important; font-size: 24px; }
.period-main .select-shell .fancy-select { min-height: 43px; border-radius: 14px; }
.tx-filter-card .search { height: 48px; font-size: 13px; }
.tx-seg-type { border-radius: 16px !important; background: var(--button-bg) !important; }
.tx-seg-type button { min-height: 40px; border-radius: 13px !important; }
.tx-seg-type button.active { background: var(--green) !important; color: #fff !important; }
.tx-source-chips { justify-content: flex-start; }
.tx-source-chips button { min-height: 34px; border-radius: 12px; }
.tx-source-chips button.active { border-color: var(--green) !important; background: var(--accent-soft) !important; color: var(--green2) !important; }
.tx-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin: 15px 0 2px; padding: 18px 12px; border-radius: 21px; color: #fff; background: linear-gradient(145deg,#c56a49,#a84b32); }
.tx-summary-cell { display: flex; align-items: center; min-width: 0; gap: 8px; padding: 0 8px; }
.tx-summary-cell + .tx-summary-cell { border-left: 1px solid rgba(255,255,255,.33); }
.tx-summary-cell div { min-width: 0; }
.tx-summary-cell small { display: block; color: #fff6ef; font-size: 10.5px; white-space: nowrap; }
.tx-summary-cell strong { display: block; margin-top: 5px; font-size: clamp(12px,3.3vw,16px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; font-size: 21px; font-weight: 850; }
.expense-mark { background: #ffdfd0; color: #a9452d; }
.income-mark { background: #e6eddf; color: #4d7142; }
.page[data-page="transactions"] > .section-head h3 { font-size: 17px !important; }
#txList { padding: 4px 12px; }
#txList .modern-date-group { background: transparent !important; border: 0 !important; border-radius: 0; padding: 16px 2px 7px !important; margin: 0 !important; }
#txList .date-main strong { font-size: 13px; }
#txList .date-net.minus { color: var(--green2) !important; }
#txList .date-net.surplus { color: var(--olive) !important; }
#txList .tx-item { border: 1px solid var(--line); border-radius: 17px; margin-bottom: 8px; padding: 10px; background: var(--surface); }

/* Report: spending leads; income and balance remain visible, chart stays functional. */
.page[data-page="report"] .report-period-card { text-align: left; padding: 15px !important; background: var(--card-glass) !important; }
.report-summary { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin-top: 14px !important; }
.page[data-page="report"] .report-summary .mini-box { min-width: 0; min-height: 65px; border-radius: 15px; padding: 11px 12px !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) { grid-column: 1 / -1; grid-row: 1; min-height: 104px; padding: 19px 20px !important; position: relative; overflow: hidden !important; text-align: left !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #fff !important; background: linear-gradient(140deg,#c76b49,#a5462e 84%) !important; border: 0 !important; }
.report-summary .mini-box:has(#reportExpense)::after { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(255,240,224,.72); border-radius: 10px; pointer-events: none; }
.report-summary .mini-box:has(#reportExpense) span,
.report-summary .mini-box:has(#reportExpense) strong { position: relative; z-index: 1; color: #fff !important; }
.page[data-page="report"] .report-summary .mini-box span { font-size: 11px !important; }
.page[data-page="report"] .report-summary .mini-box strong { display: block; font-size: 15px !important; margin-top: 5px; overflow: visible !important; text-overflow: clip !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) span { color: #fff !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) strong { font-size: clamp(27px,7vw,36px) !important; letter-spacing: -.045em; color: #fff !important; }
#shareWaBtn { margin-top: 13px !important; min-height: 46px !important; border: 1px solid var(--green) !important; background: var(--card-glass) !important; color: var(--green2) !important; box-shadow: none !important; border-radius: 15px !important; }
.report-chart-card { text-align: left !important; padding: 17px !important; }
.report-chart-card .report-header-row h3, .page[data-page="report"] .section-head h3 { font-size: 18px !important; letter-spacing: -.03em; }
.report-chart-card .chart-stage { background: var(--chart-bg) !important; border: 0 !important; min-height: 255px; }
.report-chart-card .chart-svg { max-width: 310px !important; }
.breakdown-card { border-color: var(--line) !important; background: var(--card-glass) !important; border-radius: 19px !important; }
.breakdown-card .icon { border-radius: 50% !important; }
.breakdown-bar-track { background: #eee3da !important; }

/* Frequent shortcuts lead the screen; budget settings follow. */
.page[data-page="shortcut"].active { display: flex; flex-direction: column; }
.page[data-page="shortcut"] > .card:first-child { order: 5; }
.page[data-page="shortcut"] > .section-head { order: 1; }
.page[data-page="shortcut"] > #shortcutList { order: 3; }
.page[data-page="shortcut"] > #scBulkBar { order: 4; }
.page[data-page="shortcut"] > .card:last-child { order: 6; }
.page[data-page="shortcut"] > .shortcut-editor { order: 2; display: none; }
.page[data-page="shortcut"] > .shortcut-editor.editor-open { display: block; }
.page[data-page="shortcut"] > .card:first-child h3,
.page[data-page="shortcut"] > .section-head h3,
.page[data-page="shortcut"] > .card:last-child h3 { font-size: 18px !important; letter-spacing: -.035em; }
#pocketManager { margin-top: 12px !important; }
#pocketManager .pocket-manage-item { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 17px !important; }
.pocket-icon { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent-soft); }
.pocket-icon .category-svg { width: 19px; height: 19px; }
#shortcutList { padding: 8px !important; }
#shortcutList .shortcut-item { border-radius: 16px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; margin-bottom: 8px; padding: 12px !important; }
.shortcut-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--accent-soft); }
.shortcut-icon .category-svg { width: 23px; height: 23px; }
#shortcutList .shortcut-title-only strong { font-size: 13.5px; }
#shortcutList .shortcut-actions button { min-height: 42px !important; color: var(--green2) !important; }
#pocketManager [data-edit-pocket], #pocketManager [data-del-pocket], #catManager button { min-height: 42px !important; }
.page[data-page="shortcut"] > .card:last-child { margin-bottom: 14px; }
#catManager .shortcut-item { background: var(--surface) !important; }

/* Unified searchable local icon picker. */
.emoji-picker.open { display: block !important; max-height: min(55vh,440px) !important; overflow-y: auto; padding: 10px !important; border-radius: 17px !important; }
#shortcutForm #iconPicker.open { display: block !important; max-height: min(55vh,440px) !important; padding: 10px !important; }
.icon-picker-search { position: sticky; top: 0; z-index: 2; padding-bottom: 8px; background: var(--dropdown-bg); }
.icon-picker-search input { height: 41px; width: 100%; font-size: 13px; }
.icon-group { margin: 8px 0 14px; }
.icon-group[hidden], .icon-grid button[hidden] { display: none !important; }
.icon-group-title { font-weight: 850; font-size: 12px; color: var(--ink); margin: 0 2px 7px; }
.icon-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.icon-grid button { min-width: 0; min-height: 65px; aspect-ratio: auto !important; padding: 5px 2px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 11px !important; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; }
#shortcutForm #iconPicker .icon-grid button { width: 100% !important; min-height: 65px !important; aspect-ratio: auto !important; }
.icon-grid button.active { border: 2px solid var(--green) !important; background: var(--accent-soft) !important; }
.icon-grid img { width: 23px !important; height: 23px !important; object-fit: contain; border: 0 !important; background: transparent !important; padding: 0 !important; filter: brightness(0) saturate(100%) invert(24%) sepia(22%) saturate(626%) hue-rotate(330deg) brightness(89%); }
.icon-grid span { display: block; max-width: 100%; color: var(--ink); font-size: 9px; font-weight: 650; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Semantic flow colors are paired with labels and arrows for quick recognition. */
.balance .grid2 small::before { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px; border-radius: 50%; font-size: 12px; font-weight: 900; }
.balance .grid2 > div:first-child small::before { content: "↑"; background: #d9f0d7; color: #315b3b; }
.balance .grid2 > div:last-child small::before { content: "↓"; background: #ffdfcc; color: #a7442f; }
.balance #incomeTotal { color: #e0f4da !important; }
.balance #expenseTotal { color: #ffe1cc !important; }
.tx-item .amount.expense { color: var(--expense) !important; }
.tx-item .amount.income, .breakdown-card .amount.income { color: var(--income) !important; }
.tx-item:has(.amount.income) .icon { background: var(--income-soft) !important; }
.tx-item:has(.amount.income) .category-svg, .shortcut-item[data-flow="income"] .category-svg { filter: brightness(0) saturate(100%) invert(40%) sepia(30%) saturate(622%) hue-rotate(77deg) brightness(92%); }
#txList .date-net.minus { color: var(--expense) !important; }
#txList .date-net.surplus { color: var(--income) !important; }
.tx-summary { gap: 9px !important; padding: 0 !important; background: none !important; }
.tx-summary-cell { min-height: 80px; padding: 12px !important; border: 1px solid transparent; border-radius: 17px; }
.tx-summary-cell:first-child { background: var(--expense-soft); color: var(--expense); }
.tx-summary-cell:last-child { background: var(--income-soft); color: var(--income); border-left: 0 !important; }
.tx-summary-cell small { color: inherit !important; opacity: .82; }
.expense-mark { background: #f7d1be; color: var(--expense); }
.income-mark { background: #cde4c9; color: #315e3e; }
#typeFilter [data-type="expense"].active, #reportTypeSeg [data-rtype="expense"].active { background: var(--expense) !important; color: #fff !important; }
#typeFilter [data-type="income"].active, #reportTypeSeg [data-rtype="income"].active { background: var(--income) !important; color: #fff !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) { background: var(--income-soft) !important; border-color: #bfd7bd !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) span,
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) strong { color: var(--income) !important; }
.shortcut-item[data-flow="income"] .shortcut-icon { background: var(--income-soft); }

/* Report separates period, cash flow, monthly budget, and category details. */
.page[data-page="report"] .report-period-card { padding-bottom: 15px !important; }
.page[data-page="report"] .report-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; margin-top: 14px !important; }
.page[data-page="report"] .report-summary .mini-box { min-height: 101px; padding: 15px 14px !important; text-align: left !important; border: 0 !important; border-radius: 18px; box-shadow: none !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; background: #426f4f !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; min-height: 101px; padding: 15px 14px !important; background: #ae5036 !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense)::after { display: none; }
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) span,
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) strong,
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) span,
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) strong { color: #fff !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) span::before,
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) span::before { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; background: rgba(255,255,255,.23); font-size: 12px; font-weight: 900; }
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) span::before { content: "↑"; }
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) span::before { content: "↓"; }
.page[data-page="report"] .report-summary .mini-box:has(#reportIncome) strong,
.page[data-page="report"] .report-summary .mini-box:has(#reportExpense) strong { font-size: clamp(17px,4.4vw,22px) !important; letter-spacing: -.04em; white-space: nowrap !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportNet) { grid-column: 1 / -1; grid-row: 2; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card-glass) !important; border: 1px solid var(--line) !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportNet) span { color: var(--muted) !important; font-size: 12px !important; }
.page[data-page="report"] .report-summary .mini-box:has(#reportNet) strong { color: var(--ink) !important; font-size: 19px !important; margin: 0; }
.report-budget-card[hidden] { display: none !important; }
.page[data-page="report"] .report-budget-card { padding: 17px !important; }
.report-budget-top, .report-budget-numbers, .report-budget-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-eyebrow { color: var(--green2); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.report-budget-top h3 { margin: 3px 0 0; color: var(--ink); font-size: 18px; letter-spacing: -.035em; }
.report-budget-numbers { justify-content: flex-start; align-items: baseline; margin-top: 17px; }
.report-budget-numbers strong { color: var(--ink); font-size: 27px; letter-spacing: -.045em; }
.report-budget-numbers span { color: var(--muted); font-size: 12px; }
.report-budget-track { height: 10px; overflow: hidden; margin: 11px 0 12px; border-radius: 99px; background: #eee5dc; }
.report-budget-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--expense); transition: width .2s ease; }
.report-budget-bottom { color: var(--muted); font-size: 12px; }
.report-budget-bottom strong { color: var(--ink); font-size: 15px; }
.report-budget-card.over-budget .report-budget-bottom strong { color: var(--expense); }
.report-budget-card p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.page[data-page="report"] .report-controls-row { display: none !important; }
.page[data-page="transactions"] #sourceFilter { display: none !important; }
#manSourceSeg, .st-toggle { display: none !important; }
.page[data-page="report"] .report-chart-card { margin-top: 14px; }
.page[data-page="report"] .chart-stage { min-height: 240px; display: grid; place-items: center; background: var(--card-glass) !important; }
.page[data-page="report"] .chart-svg { width: min(100%,240px) !important; height: 240px; }
.page[data-page="report"] .chart-label { fill: var(--muted); }
.page[data-page="report"] .chart-value { fill: var(--ink); font-size: 15px; }
.page[data-page="report"] #shareWaBtn { width: 100%; margin: 16px 0 25px !important; }
#breakdown { display: grid; gap: 8px; }
#breakdown .breakdown-card { display: block; width: 100%; min-height: 86px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--card-glass); text-align: left; box-shadow: none; }
#breakdown .breakdown-card-top { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; }
#breakdown .breakdown-card .icon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; }
#breakdown .breakdown-card .category-svg { width: 23px; height: 23px; }
#breakdown .breakdown-card-title { display: block; min-width: 0; }
#breakdown .breakdown-card-title strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#breakdown .breakdown-card-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
#breakdown .breakdown-card .amount { margin: 0; font-size: 12px; font-weight: 850; white-space: nowrap; }
#breakdown .breakdown-bar-track { height: 5px; margin: 10px 0 0 52px; overflow: hidden; border-radius: 99px; }
#breakdown .breakdown-bar-fill { height: 100%; border-radius: inherit; }

/* Focused add screen. Samples teach the two flows without changing parser behavior. */
.page[data-page="add"] .focus-entry { margin-top: 14px; padding: 22px 18px 18px !important; text-align: left; }
.focus-kicker { color: var(--green2); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.focus-entry h2 { margin: 8px 0 6px; color: var(--ink); font-size: clamp(25px,6vw,30px); line-height: 1.1; letter-spacing: -.05em; }
.focus-lead { max-width: 34ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.42; }
.focus-examples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 20px 0 21px; }
.focus-example { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 86px; padding: 11px 10px; border: 1px solid; border-radius: 17px; text-align: left; cursor: pointer; }
.focus-example span:last-child { min-width: 0; }
.focus-example strong { display: block; font-size: 13px; line-height: 1.1; }
.focus-example small { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.2; }
.focus-example-arrow { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 50%; font-size: 21px; font-weight: 800; }
.example-expense { background: var(--expense-soft); border-color: #efc9b5; color: var(--expense); }
.example-expense .focus-example-arrow { background: #f5cfbd; }
.example-income { background: var(--income-soft); border-color: #c7ddc3; color: var(--income); }
.example-income .focus-example-arrow { background: #cce4c9; }
.focus-input-label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 850; }
.focus-entry #focusInput { width: 100%; height: 58px; padding: 0 15px; text-align: left; font-size: 15px; }
.focus-entry #focusPreview { margin: 11px 0 0; border: 1px solid var(--line); border-radius: 16px; padding: 11px 12px; background: var(--surface); color: var(--ink); }
.focus-entry #focusPreview[data-type="expense"] { border-color: #efc9b5; background: var(--expense-soft) !important; }
.focus-entry #focusPreview[data-type="income"] { border-color: #c7ddc3; background: var(--income-soft) !important; }
.focus-entry #focusPreview.bad { border-color: #efc9b5; background: var(--expense-soft) !important; color: var(--expense); }
.focus-preview-row { display: flex; align-items: center; gap: 10px; }
.focus-preview-icon { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; border-radius: 11px; background: var(--surface); }
.focus-preview-icon .category-svg { width: 22px; height: 22px; }
.focus-preview-copy { min-width: 0; flex: 1; }
.focus-preview-copy small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; }
.focus-preview-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); font-size: 12px; }
.focus-preview-amount { color: var(--expense); font-size: 12px; white-space: nowrap; }
#focusPreview[data-type="income"] .focus-preview-amount { color: var(--income); }
.focus-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.focus-tool { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 53px; border: 1px solid var(--line); border-radius: 15px; background: var(--button-bg); color: var(--ink); font-size: 13px; font-weight: 800; }
.focus-tool img { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(36%) sepia(26%) saturate(742%) hue-rotate(334deg) brightness(92%); }
.focus-save { width: 100%; min-height: 57px !important; margin-top: 12px; font-size: 15px !important; }
.focus-manual { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 47px; margin-top: 6px; border: 0; background: transparent; color: var(--green2); font-size: 13px; font-weight: 800; }
.focus-example:active, .focus-tool:active, .focus-save:active { transform: scale(.98); }

:where(button,a,input,select,textarea):focus-visible { outline: 3px solid #d99974 !important; outline-offset: 2px; }
@media (max-width: 430px) {
  .screen { padding-left: 13px !important; padding-right: 13px !important; }
  .balance { padding: 25px 22px 22px !important; }
  .balance .grid2 strong { font-size: 13.5px; }
  .nav { height: calc(72px + env(safe-area-inset-bottom,0px)) !important; padding: 7px 7px calc(8px + env(safe-area-inset-bottom,0px)) !important; }
  .nav button .nav-label { font-size: 10.5px !important; }
  .nav-svg { width: 22px; height: 22px; }
  .nav .add { width: 54px !important; height: 54px !important; min-height: 54px !important; transform: translateY(-14px) !important; }
  #homeCategories .cat-card small { font-size: 11px; }
  .icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 355px) {
  .home-quick .input-row { grid-template-columns: 1fr 1fr 1.2fr; }
  .home-quick .primary { font-size: 12px; }
  .nav button .nav-label { font-size: 9.5px !important; }
  .balance h2 { font-size: 30px; }
}