@font-face {
  font-family: "Ledger WenKai UI";
  src: url("../assets/fonts/LXGWWenKaiGBScreen.ui.woff2") format("woff2");
  font-display: swap;
  font-weight: 300 700;
}

@font-face {
  font-family: "Ledger WenKai";
  src: url("../assets/fonts/LXGWWenKaiGBScreen.woff2") format("woff2"), url("../assets/fonts/LXGWWenKaiGBScreen.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Ledger Symbols";
  src: url("../assets/fonts/LedgerSymbols.woff2") format("woff2");
  font-display: swap;
  font-weight: 300 700;
  unicode-range: U+0000-02FF,U+2000-27FF,U+3000-303F,U+FF00-FFEF;
}

@font-face {
  font-family: "Xiaolai Hand";
  src: url("../assets/fonts/Xiaolai-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Xiaolai Hand Mono";
  src: url("../assets/fonts/XiaolaiMono-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --font-hand: "Ledger WenKai UI", "Ledger WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-reading: "Ledger WenKai UI", "Ledger WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-numeric: "Ledger WenKai UI", "Ledger WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --bg: #f6efe2;
  --sidebar-bg: #46516c;
  --primary: #a75569;
  --primary-hover: #8f4357;
  --primary-light: #f4dfe3;
  --income: #2f745f;
  --expense: #ad454d;
  --neutral: #80756f;
  --text: #473f3a;
  --text-muted: #756a64;
  --border: #c7b9a8;
  --card-bg: #fbf4e6;
  --table-head-bg: #efe2cd;
  --table-hover-bg: #f4ead9;
  --input-bg: #fffaf0;
  --gradient-primary: #a75569;
  --radius: 11px;
  --radius-sm: 7px;
  --shadow: 0 3px 0 rgba(88, 72, 62, .12), 0 7px 18px rgba(88, 72, 62, .10);
  --shadow-md: 0 5px 0 rgba(88, 72, 62, .13), 0 11px 25px rgba(88, 72, 62, .14);
  --shadow-lg: 0 10px 34px rgba(52, 43, 40, .24);
  --paper-mint: #cfe5d7;
  --paper-blue: #ceddec;
  --paper-rose: #ebc8cf;
  --paper-yellow: #f2e1aa;
  --paper-taupe: #d6ccc1;
  --paper-ledger: #fbf4e6;
  --paper-grain: url("../assets/scrapbook/paper-grain.png");
  --body-paper: url("../assets/scrapbook/paper-warm.png");
  --tape-rose: url("../assets/scrapbook/tape-rose-hearts.png");
  --tape-yellow: url("../assets/scrapbook/tape-yellow-gingham.png");
  --tape-yellow-compact: url("../assets/scrapbook/tape-yellow-gingham-compact.png");
  --tape-blue: url("../assets/scrapbook/tape-blue-gingham.png");
  --tape-taupe: url("../assets/scrapbook/tape-taupe-grid.png");
  --doodle-wallet: url("../assets/scrapbook/doodle-wallet.png");
  --doodle-receipt: url("../assets/scrapbook/doodle-receipt.png");
  --doodle-coins: url("../assets/scrapbook/doodle-coins.png");
  --title-crayon: url("../assets/scrapbook/tape-blue-gingham.png");
  --title-graph: url("../assets/scrapbook/title-graph-paper.png");
  --title-speech: url("../assets/scrapbook/title-speech-note.png");
  --title-chapter: url("../assets/scrapbook/title-chapter-tab.png");
  --title-stat-waves: url("../assets/scrapbook/title-stat-waves.png");
  --title-login-stars: url("../assets/scrapbook/title-login-stars.png");
  --chart-primary: #61759a;
  --chart-income: #4f947b;
  --chart-expense: #bd6470;
  --chart-blue: #7895b5;
  --chart-mint: #69a58d;
  --chart-yellow: #d3a94e;
  --chart-rose: #c87383;
  --chart-taupe: #9a806f;
  --chart-violet: #8c789d;
  --chart-text: #635952;
  --chart-grid: rgba(113, 96, 83, .16);
  --chart-border: rgba(113, 96, 83, .27);
  --chart-paper: #fbf4e6;
  --chart-tooltip: #46516c;
  --chart-tooltip-text: #fff8ea;
}

body[data-font-style="eleyang"] {
  --font-hand: "ELEYANG Soft Private", "ELEYANG Soft UI", "Ledger Symbols", "Ledger WenKai UI", "Ledger WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-reading: "ELEYANG Soft Private", "ELEYANG Soft UI", "Ledger Symbols", "Ledger WenKai UI", "Ledger WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-numeric: "ELEYANG Soft Private", "ELEYANG Soft UI", "Ledger Symbols", "Ledger WenKai UI", "Ledger WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
}

[data-theme="dark"] {
  --bg: #252832;
  --sidebar-bg: #303746;
  --primary: #d38b9b;
  --primary-hover: #e3a2b0;
  --primary-light: #583f4b;
  --income: #8fc5ae;
  --expense: #ee9aa0;
  --neutral: #b9aca0;
  --text: #f4eadb;
  --text-muted: #c4b7a8;
  --border: #655e5b;
  --card-bg: #3d3b40;
  --table-head-bg: #4b4544;
  --table-hover-bg: #48454a;
  --input-bg: #302f35;
  --gradient-primary: #b96e80;
  --shadow: 0 3px 0 rgba(0, 0, 0, .24), 0 8px 20px rgba(0, 0, 0, .25);
  --shadow-md: 0 5px 0 rgba(0, 0, 0, .28), 0 12px 28px rgba(0, 0, 0, .31);
  --paper-mint: #42594f;
  --paper-blue: #424f61;
  --paper-rose: #5d434a;
  --paper-yellow: #5a5038;
  --paper-taupe: #504944;
  --paper-ledger: #3d3b40;
  --chart-primary: #aebfda;
  --chart-income: #8fc5ae;
  --chart-expense: #e99da4;
  --chart-blue: #95aed0;
  --chart-mint: #8fbea8;
  --chart-yellow: #d9bd79;
  --chart-rose: #d699a5;
  --chart-taupe: #b59d8d;
  --chart-violet: #b7a4c5;
  --chart-text: #e7d9c8;
  --chart-grid: rgba(237, 220, 197, .14);
  --chart-border: rgba(237, 220, 197, .24);
  --chart-paper: #3d3b40;
  --chart-tooltip: #f0dfca;
  --chart-tooltip-text: #312d2b;
  color-scheme: dark;
}

html {
  max-width: 100%;
  overflow-x: clip;
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: clip;
  min-height: 100vh;
  font-family: var(--font-reading);
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: .045em;
  font-synthesis: none;
  background-color: var(--bg);
  background-image: var(--body-paper);
  background-size: 920px 920px;
  background-attachment: fixed;
  background-blend-mode: soft-light;
}

#app { max-width: 100%; overflow-x: clip; }

input,
select,
textarea,
button { min-width: 0; max-width: 100%; }

input[type="date"],
input[type="datetime-local"] {
  display: block;
  inline-size: 100%;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

[data-theme="dark"] body { background-blend-mode: multiply; }

button,
select,
label,
.page-title,
.card-title,
.summary-card,
.badge,
.pagination,
.auth-tab,
.import-tab,
#sidebar,
#bottom-bar,
.me-popup,
input[type="date"],
input[type="number"],
.img-cell-amount,
.img-cell-time,
.img-mobile-card-amount {
  font-family: var(--font-hand);
}

.summary-card .value,
.beneficiary-total strong,
.beneficiary-stat-value,
.platform-stat-card strong,
.import-result .stat .n,
td,
th,
.money,
.amount {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

input[type="text"],
input[type="password"],
textarea,
.img-cell-input:not(.img-cell-amount):not(.img-cell-time) {
  font-family: var(--font-hand);
}

#sidebar {
  background-color: var(--sidebar-bg);
  background-image: var(--paper-grain);
  background-size: 720px 720px;
  background-blend-mode: multiply;
  border-right: 0;
  box-shadow: 7px 0 22px rgba(49, 48, 57, .18);
  padding: 24px 10px 18px;
}

#sidebar::after {
  content: "";
  position: absolute;
  width: 116px;
  height: 25px;
  right: -21px;
  top: 70px;
  background-image: var(--tape-rose);
  background-size: 124px 25px;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(8deg);
  mix-blend-mode: screen;
  opacity: .72;
  pointer-events: none;
}

#sidebar .logo {
  min-height: 54px;
  color: #fff6e9;
  font-size: 24px;
  letter-spacing: .06em;
  border-bottom: 1px dashed rgba(255, 248, 234, .28);
  padding: 2px 14px 18px;
  margin: 0 4px 13px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

#sidebar .logo svg { color: #f1c5cf; }

#sidebar a {
  color: rgba(255, 248, 234, .72);
  border-radius: 5px 12px 7px 10px;
  margin: 4px 3px;
  padding: 10px 16px;
  font-size: 17px;
  letter-spacing: .04em;
}

#sidebar a:hover {
  color: #fff8ea;
  background-color: rgba(255, 248, 234, .09);
  transform: none;
}

#sidebar a.active {
  color: #3d3a3a;
  background-color: var(--paper-yellow);
  background-image: var(--paper-grain);
  background-size: 420px;
  background-blend-mode: soft-light;
  box-shadow: 0 3px 0 rgba(28, 31, 44, .22);
  transform: rotate(-.45deg);
}

#sidebar a.active::before { display: none; }
.nav-icon { width: 19px; height: 19px; }

.sidebar-user {
  margin: 8px 4px 0;
  padding: 14px 10px 4px;
  border-top: 1px dashed rgba(255, 248, 234, .25);
}

#user-display { color: #fff8ea; font-weight: 600; }

.btn-theme,
.btn-logout {
  color: #fff8ea;
  border-color: rgba(255, 248, 234, .3);
  background-color: rgba(255, 248, 234, .08);
}

#app { padding: 32px 38px 42px; }

.page-header {
  min-height: 58px;
  position: relative;
  padding: 0 84px 0 4px;
  margin-bottom: 28px;
}

.page-title {
  display: inline-block;
  position: relative;
  z-index: 0;
  font-size: 36px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .11em;
  padding: 2px 12px 5px 6px;
  transform: rotate(-.7deg);
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--paper-ledger) 70%, transparent);
}

.page-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -9px;
  right: -12px;
  bottom: 0;
  height: 34px;
  background-image: var(--title-crayon);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: .62;
  transform: rotate(.7deg);
}

[data-theme="dark"] .page-title::before {
  background-image: var(--tape-blue);
  background-size: 100% 100%;
  mix-blend-mode: normal;
  opacity: .48;
}

body[data-route="dashboard"] .page-title { color: color-mix(in srgb, var(--text) 80%, #3e7692); }
body[data-route="transactions"] .page-title,
body[data-route="records"] .page-title { color: color-mix(in srgb, var(--text) 80%, #a14d5d); }
body[data-route="import"] .page-title { color: color-mix(in srgb, var(--text) 82%, #5a8e78); }
body[data-route="stats"] .page-title { color: color-mix(in srgb, var(--text) 80%, #8d6d2f); }

.page-subtitle { font-size: 16px; line-height: 1.75; }

.page-header::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: 2px;
  top: -12px;
  background-image: var(--page-doodle, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .88;
  pointer-events: none;
}

body[data-route="dashboard"] { --page-doodle: var(--doodle-wallet); }
body[data-route="transactions"],
body[data-route="records"] { --page-doodle: var(--doodle-receipt); }
body[data-route="import"] { --page-doodle: var(--doodle-receipt); }
body[data-route="rules"] { --page-doodle: var(--doodle-wallet); }
body[data-route="stats"] { --page-doodle: var(--doodle-coins); }
body[data-route="assets"] { --page-doodle: var(--doodle-wallet); }
body[data-route="settings"] { --page-doodle: var(--doodle-wallet); }
body[data-route="stats"] .page-header::after {
  mix-blend-mode: multiply;
  border-radius: 50%;
}

[data-theme="dark"] body[data-route="stats"] .page-header::after {
  mix-blend-mode: screen;
  opacity: .68;
}

.card,
.summary-card,
.filter-bar,
.table-wrap,
.drop-zone,
.crop-review-card,
.import-result,
.img-mobile-card,
.me-popup,
.modal-content {
  background-color: var(--paper-ledger);
  background-image: var(--paper-grain);
  background-size: 700px 700px;
  background-blend-mode: soft-light;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: var(--shadow);
}

[data-theme="dark"] .card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .drop-zone,
[data-theme="dark"] .crop-review-card,
[data-theme="dark"] .import-result,
[data-theme="dark"] .img-mobile-card,
[data-theme="dark"] .me-popup,
[data-theme="dark"] .modal-content {
  background-blend-mode: multiply;
}

[data-paper="mint"] { background-color: var(--paper-mint); }
[data-paper="blue"] { background-color: var(--paper-blue); }
[data-paper="rose"] { background-color: var(--paper-rose); }
[data-paper="yellow"] { background-color: var(--paper-yellow); }
[data-paper="taupe"] { background-color: var(--paper-taupe); }
[data-paper="ledger"] { background-color: var(--paper-ledger); }

.card,
.summary-card,
.filter-bar,
.drop-zone,
.crop-review-card {
  position: relative;
  overflow: visible;
}

.card::before,
.summary-card::before,
.filter-bar::before,
.drop-zone::before,
.crop-review-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: 92px;
  height: 27px;
  transform: translateX(-50%) rotate(-1.5deg);
  background-image: var(--tape-rose);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: .78;
  pointer-events: none;
}

[data-tape="rose"]::before { background-image: var(--tape-rose); }
[data-tape="yellow"]::before { background-image: var(--tape-yellow); width: 104px; }
[data-tape="blue"]::before { background-image: var(--tape-blue); }
[data-tape="taupe"]::before { background-image: var(--tape-taupe); width: 104px; }

.card {
  border-radius: 8px 13px 9px 11px;
  padding: 24px 26px;
}

.card:hover { box-shadow: var(--shadow-md); }

.card-title {
  display: inline-block;
  position: relative;
  z-index: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .08em;
  line-height: 1.5;
  padding: 0 8px 2px 2px;
  margin-bottom: 16px;
}

.card-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3px;
  right: -6px;
  bottom: 0;
  height: 15px;
  background-image: var(--title-crayon);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: .42;
}

[data-theme="dark"] .card-title::before {
  background-image: var(--tape-yellow);
  background-size: 100% 100%;
  mix-blend-mode: normal;
  opacity: .34;
}

.summary-grid { gap: 20px; margin-bottom: 30px; }

.summary-card {
  min-height: 136px;
  padding: 25px 22px 20px;
  border-radius: 7px 12px 9px 10px;
  overflow: visible;
}

.summary-card:nth-child(1) { transform: rotate(-.55deg); }
.summary-card:nth-child(2) { transform: rotate(.45deg); }
.summary-card:nth-child(3) { transform: rotate(-.25deg); }
.summary-card:nth-child(4) { transform: rotate(.65deg); }
.summary-grid > .summary-card:nth-child(1) { background-color: var(--paper-mint); }
.summary-grid > .summary-card:nth-child(2) { background-color: var(--paper-rose); }
.summary-grid > .summary-card:nth-child(3) { background-color: var(--paper-blue); }
.summary-grid > .summary-card:nth-child(4) { background-color: var(--paper-yellow); }

.summary-card:hover { box-shadow: var(--shadow-md); }
.summary-card:nth-child(1):hover { transform: rotate(-.55deg); }
.summary-card:nth-child(2):hover { transform: rotate(.45deg); }
.summary-card:nth-child(3):hover { transform: rotate(-.25deg); }
.summary-card:nth-child(4):hover { transform: rotate(.65deg); }

.summary-card .label {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .08em;
  margin-bottom: 9px;
}

.summary-card .value {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.25;
}

.charts-grid { gap: 22px; margin-bottom: 28px; }
.charts-grid .card:nth-child(odd) { transform: rotate(-.22deg); }
.charts-grid .card:nth-child(even) { transform: rotate(.28deg); }
.chart-canvas-wrap { height: 295px; }

.filter-bar {
  background-color: var(--paper-blue);
  border-radius: 8px 13px 8px 12px;
  padding: 20px 20px 17px;
  gap: 12px;
  margin-bottom: 22px;
}

.filter-bar::before { background-image: var(--tape-yellow); width: 112px; }

input,
select,
textarea,
.inline-input,
.stats-controls select,
.stats-controls input,
.form-field input,
.form-field select {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
  border-radius: 5px 9px 6px 8px;
}

input:focus,
select:focus,
textarea:focus,
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 17%, transparent);
}

.table-wrap,
.img-preview-table-wrap {
  border-radius: 7px 12px 9px 10px;
  overflow-x: auto;
}

table { background-color: transparent; }

th {
  background-color: color-mix(in srgb, var(--table-head-bg) 86%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .08em;
  border-bottom-style: dashed;
}

td { font-size: 15px; border-bottom-style: dashed; }
tr:hover td { background-color: color-mix(in srgb, var(--table-hover-bg) 72%, transparent); }

.badge { border-radius: 4px 9px 5px 7px; font-weight: 700; }
.badge-income { background-color: #d6eadf; color: #255f4e; }
.badge-expense { background-color: #f0d2d4; color: #923a43; }
.badge-neutral { background-color: #e2ddd5; color: #655c57; }
[data-theme="dark"] .badge-income { background-color: #38584b; color: #b8e4d0; }
[data-theme="dark"] .badge-expense { background-color: #633f44; color: #ffc0c4; }
[data-theme="dark"] .badge-neutral { background-color: #4f4a48; color: #ded2c6; }

.btn,
.export-dropdown-btn,
.me-popup-action,
.me-popup-logout {
  border-radius: 5px 10px 6px 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 3px 0 rgba(80, 65, 58, .16);
}

.btn:hover,
.export-dropdown-btn:hover { transform: none; filter: brightness(.98) saturate(1.03); box-shadow: 0 3px 0 rgba(80, 65, 58, .16); }
.btn:active,
.export-dropdown-btn:active { transform: none; filter: brightness(.95); box-shadow: 0 3px 0 rgba(80, 65, 58, .16); }

.btn-primary {
  color: #fffaf0;
  background-color: var(--primary);
  background-image: var(--paper-grain);
  background-size: 400px;
  background-blend-mode: soft-light;
}

.btn-primary:hover { background-color: var(--primary-hover); box-shadow: 0 5px 0 rgba(80, 65, 58, .16); }

.btn-danger {
  color: #fffaf0;
  background-color: var(--expense);
  background-image: var(--paper-grain);
  background-size: 400px;
  background-blend-mode: soft-light;
}

.btn-ghost,
.export-dropdown-btn {
  background-color: var(--paper-yellow);
  background-image: var(--paper-grain);
  background-size: 380px;
  background-blend-mode: soft-light;
  color: var(--text);
}

.pagination { background-color: color-mix(in srgb, var(--paper-ledger) 85%, transparent); }
.pagination button { font-family: var(--font-hand); color: var(--text); background-color: var(--paper-yellow); }
.pagination button.active { background-color: var(--primary); background-image: none; }

.drop-zone {
  min-height: 310px;
  background-color: var(--paper-yellow);
  border: 2px dashed color-mix(in srgb, var(--primary) 65%, var(--border));
  border-radius: 8px 15px 9px 13px;
  padding: 62px 36px 50px;
}

.drop-zone::before { width: 132px; height: 34px; background-size: cover; background-image: var(--tape-blue); }
.drop-zone:hover,
.drop-zone.dragover { background-color: color-mix(in srgb, var(--paper-yellow) 84%, var(--paper-rose)); border-color: var(--primary); }
.drop-zone .drop-hint { font-size: 20px; font-weight: 700; }
.drop-zone .drop-sub { font-size: 16px; }
.drop-icon svg { color: var(--primary) !important; width: 52px; height: 52px; }

.crop-review-card { background-color: var(--paper-blue); padding: 24px; }
.crop-image-item { background-color: var(--paper-ledger); border-radius: 4px 9px 6px 8px; padding: 12px; box-shadow: 0 4px 12px rgba(70, 60, 54, .16); }
.crop-image-item img { border: 7px solid #fffaf0; border-bottom-width: 18px; border-radius: 2px; box-shadow: 0 3px 8px rgba(65, 55, 49, .18); }

.stats-controls {
  width: fit-content;
  max-width: 100%;
  background-color: var(--paper-taupe);
  background-image: var(--paper-grain);
  background-size: 650px;
  background-blend-mode: soft-light;
  border: 1px solid var(--border);
  border-radius: 7px 12px 8px 10px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 24px;
}

.mode-choice {
  background-color: var(--paper-blue);
  background-image: var(--paper-grain);
  background-size: 480px;
  background-blend-mode: soft-light;
  border-radius: 7px 12px 8px 10px;
  color: var(--text);
  font-family: var(--font-reading);
}

.mode-choice:nth-child(2) { background-color: var(--paper-rose); }
.mode-choice.active { border-color: var(--primary); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--primary) 24%, transparent), var(--shadow); }
.mode-choice strong { font-family: var(--font-hand); font-size: 18px; }

.platform-stat-card,
.img-review-summary-card,
.manual-beneficiary-item,
.allocation-chip {
  background-color: var(--paper-yellow);
  background-image: var(--paper-grain);
  background-size: 380px;
  background-blend-mode: soft-light;
  border-color: var(--border);
}

.platform-stat-card:nth-child(3n + 2),
.img-review-summary-card:nth-child(3n + 2) { background-color: var(--paper-blue); }
.platform-stat-card:nth-child(3n),
.img-review-summary-card:nth-child(3n) { background-color: var(--paper-mint); }

.beneficiary-stat-bar { background-color: color-mix(in srgb, var(--paper-taupe) 72%, transparent); }
.beneficiary-stat-bar i { box-shadow: inset 0 0 0 1px rgba(60, 50, 46, .16); }

.auth-container {
  width: min(440px, calc(100vw - 34px));
  min-height: 100vh;
  padding: 54px 0;
  position: relative;
}

.auth-container::before {
  content: "";
  position: absolute;
  width: 108px;
  height: 108px;
  top: 20px;
  right: -56px;
  background-image: var(--doodle-wallet);
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(7deg);
  opacity: .85;
  pointer-events: none;
}

.auth-container > div:first-child { font-family: var(--font-hand); }
.auth-container > .card { background-color: var(--paper-rose); transform: rotate(-.35deg); padding: 34px !important; }
.auth-container > .card::before { width: 126px; background-image: var(--tape-yellow); }
.auth-tabs { border-bottom-style: dashed; }
.auth-tab { color: var(--text-muted); font-size: 18px; }
.auth-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.import-tabs {
  width: fit-content;
  max-width: 100%;
  background-color: var(--paper-blue);
  background-image: var(--paper-grain);
  background-size: 520px;
  background-blend-mode: soft-light;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px 11px 7px 9px;
  box-shadow: var(--shadow);
}

.import-tab { border-radius: 4px 8px 5px 7px; }
.import-tab.active { background-color: var(--paper-rose); color: var(--text); box-shadow: 0 2px 0 rgba(80, 65, 58, .12); }

.export-dropdown-menu,
.me-popup {
  background-color: var(--paper-yellow);
  background-image: var(--paper-grain);
  background-size: 480px;
  background-blend-mode: soft-light;
  border-radius: 7px 12px 8px 10px;
}

.me-popup::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 92px;
  height: 25px;
  transform: translateX(-50%) rotate(2deg);
  background-image: var(--tape-rose);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

.field-hint,
.form-label,
.crop-image-name,
.page-subtitle { font-family: var(--font-hand); }

.category-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.category-preset {
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 9px 7px 10px 8px;
  color: var(--text);
  background: var(--paper-blue);
  box-shadow: 0 2px 0 rgba(88, 72, 62, .09);
  cursor: pointer;
}

.category-preset:nth-child(6n + 2) { background: var(--paper-mint); }
.category-preset:nth-child(6n + 3) { background: var(--paper-yellow); }
.category-preset:nth-child(6n + 4) { background: var(--paper-rose); }
.category-preset:nth-child(6n + 5) { background: var(--paper-taupe); }
.category-preset:nth-child(6n + 6) { background: color-mix(in srgb, var(--paper-blue) 62%, var(--paper-rose)); }
.category-preset:hover { transform: none; filter: brightness(.97) saturate(1.03); }
.category-preset.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent), 0 2px 0 rgba(88, 72, 62, .09);
}
.category-preset-custom { border-style: dashed; }

.form-label,
.filter-bar label,
.stats-controls label,
.allocation-total,
.member-active,
.beneficiary-total,
.platform-stat-card span,
.platform-stat-card small,
.img-issue-ok,
.img-issue-badge,
.crop-image-name,
.drop-zone .drop-sub {
  font-size: 15px;
}

input,
select,
textarea,
.form-field input,
.form-field select,
.filter-bar input,
.filter-bar select,
.stats-controls input,
.stats-controls select,
.inline-input,
.img-cell-input,
.img-cell-select {
  font-family: var(--font-hand);
  font-size: 16px;
  line-height: 1.5;
}

input[type="date"],
input[type="number"],
.img-cell-amount,
.img-cell-time,
.pagination,
.beneficiary-stat-value,
.platform-stat-card strong {
  font-family: var(--font-numeric);
}

.badge,
.pagination button,
.pagination .info,
.loading,
.empty,
.allocation-chip,
.allocation-tag,
.img-mobile-card-dir,
.img-mobile-field,
.me-popup-action,
.me-popup-logout,
.export-dropdown-menu button {
  font-size: 15px;
}

.platform-stat-card strong,
.beneficiary-total strong,
.img-mobile-card-amount { font-size: 21px; }

#app [style*="font-size:12px"] { font-size: 15px !important; }
#app [style*="font-size:13px"] { font-size: 15px !important; }
#app [style*="font-size:14px"] { font-size: 16px !important; }
#app [style*="font-size:15px"] { font-size: 17px !important; }
#app [style*="font-size: 12px"] { font-size: 15px !important; }
#app [style*="font-size: 13px"] { font-size: 15px !important; }
#app [style*="font-size: 14px"] { font-size: 16px !important; }
#app [style*="font-size: 15px"] { font-size: 17px !important; }

/* The original app still has several compact utility sizes. Keep all user-facing
   copy readable while retaining the hand-drawn hierarchy. */
.btn-sm,
.img-mobile-field label,
.img-dup-badge,
.img-preview-table th,
.img-review-summary-card .label,
.img-review-batch input,
.crop-review-head p,
.crop-image-item label,
.allocation-amounts label,
.mode-choice span,
.beneficiary-stat-value span,
.import-result .stat .l,
.cat-detail-wrap th,
.cat-detail-wrap td,
.cat-detail-grid-head,
.cat-detail-grid-row,
.cat-detail-wrap .detail-pager,
.cat-detail-wrap .detail-pager button,
.sidebar-user #user-display,
.field-hint,
.img-quota-bar,
.batch-bar,
.rules-error,
.rule-item-meta,
.rule-item-grid span {
  font-size: 15px !important;
}

#recent-tx,
#stat-monthly-table,
#stat-cat-table,
#import-history { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#recent-tx table,
#stat-monthly-table table { min-width: 600px; }
#stat-cat-table table { min-width: 480px; }
#import-history table { min-width: 680px; }
.img-mobile-card-header { flex-wrap: wrap; gap: 6px; }
.file-review-card .card-title > span,
.beneficiary-stat-name,
.beneficiary-stat-name strong { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 768px) {
  body { background-size: 680px 680px; }
  #app { padding: 22px 16px 112px; }

  .page-header {
    align-items: flex-start;
    min-height: 66px;
    padding-right: 60px;
    margin-bottom: 24px;
  }

  .page-header::after { width: 58px; height: 58px; top: -5px; }
  .page-title { width: fit-content; font-size: 32px; padding-right: 9px; }
  .page-title::before { height: 29px; }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .summary-card {
    min-height: 126px;
    padding: 22px 15px 16px;
  }

  .summary-card .label { font-size: 15px; }
  .summary-card .value { font-size: 25px; overflow-wrap: anywhere; }
  /* Stats cards end with the primary value, so only shrink true helper copy. */
  .summary-card > div:last-child:not(.value) { font-size: 14px !important; }

  .card { padding: 22px 17px; }
  .charts-grid { gap: 18px; }
  .charts-grid .card { transform: none; }
  .chart-canvas-wrap { height: 250px; }

  .filter-bar { padding: 18px 14px 14px; }
  .filter-bar input,
  .filter-bar select { min-height: 38px; }

  .drop-zone { min-height: 300px; padding: 55px 18px 40px; }
  .drop-zone .drop-hint { font-size: 21px; }

  .stats-controls { width: 100%; padding: 14px; }

  #bottom-bar {
    height: 78px;
    padding: 7px 7px calc(6px + env(safe-area-inset-bottom));
    background-color: #f3e4bd;
    background-image: var(--paper-grain);
    background-size: 520px;
    background-blend-mode: soft-light;
    border-top: 1px dashed #baa98f;
    box-shadow: 0 -5px 20px rgba(72, 61, 55, .15);
  }

  [data-theme="dark"] #bottom-bar { background-color: #4a4438; background-blend-mode: multiply; }

  #bottom-bar a {
    color: var(--text-muted);
    border-radius: 5px 10px 6px 8px;
    font-size: 14px;
    padding: 5px 7px;
    min-width: 58px;
  }

  #bottom-bar a.active {
    color: #423b37;
    background-color: var(--paper-rose);
    background-image: var(--paper-grain);
    background-size: 260px;
    background-blend-mode: soft-light;
    box-shadow: 0 3px 0 rgba(79, 65, 58, .14);
    transform: rotate(-1deg) translateY(-3px);
  }

  [data-theme="dark"] #bottom-bar a.active { color: #fff2e3; }
  #bottom-bar a svg { width: 21px; height: 21px; }
  .me-popup { bottom: 96px; }

  .auth-container::before { width: 76px; height: 76px; top: 24px; right: -6px; opacity: .66; }

  .crop-image-item img { height: 280px; }
  .img-mobile-card { border-radius: 7px 12px 8px 10px; }
  .img-mobile-card-header { background-color: color-mix(in srgb, var(--paper-blue) 72%, transparent); }
}

@media (max-width: 390px) {
  #app { padding-left: 13px; padding-right: 13px; }
  .summary-grid { gap: 11px; }
  .summary-card { padding-left: 12px; padding-right: 12px; }
  .summary-card .value { font-size: 24px; }
  .btn { padding-left: 13px; padding-right: 13px; }
}

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

/* ===== Licensed ELEYANG Soft type scale and fixed title language ===== */
html,
body,
button,
input,
select,
textarea,
#app *,
#sidebar *,
#bottom-bar * {
  font-synthesis: none;
}

/* ===== Assets, calendar and compact records ===== */
.mobile-profile-button { display:none; }
.summary-note { margin-top:8px; color:var(--text-muted); font-size:16px; }
.asset-total-value { color:#76552e; }
.calendar-toolbar { display:flex; align-items:center; gap:10px; }
.calendar-month-sticker {
  border:0; min-width:150px; padding:10px 20px; color:var(--text);
  font:700 20px/1 var(--font-hand); cursor:pointer;
  background:#f1d998 var(--tape-yellow) center/100% 100% no-repeat;
  transform:rotate(-.4deg);
}
.ledger-calendar-card { margin-bottom:0; padding:26px; }
.calendar-card-title { display:inline-block; margin-bottom:22px; padding:3px 10px; background:linear-gradient(transparent 52%,rgba(144,197,203,.38) 52%); }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.calendar-weekdays { margin-bottom:8px; }
.calendar-weekday { text-align:center; color:var(--text-muted); font-size:16px; }
.calendar-day {
  appearance:none; position:relative; display:flex; min-height:92px; padding:9px;
  flex-direction:column; align-items:flex-start; gap:4px; border:1px solid rgba(107,94,74,.16);
  border-radius:9px 13px 8px 12px; background:rgba(255,252,244,.72); color:var(--text); cursor:pointer;
  font-family:var(--font-hand); transition:background-color .12s ease,border-color .12s ease,filter .12s ease;
}
.calendar-day:hover { transform:none; filter:brightness(.97) saturate(1.03); }
.calendar-day.is-today { outline:3px solid rgba(190,105,112,.55); outline-offset:-3px; }
.calendar-day.is-outside { visibility:hidden; pointer-events:none; }
.calendar-date { font-size:20px; font-weight:700; }
.calendar-expense,.calendar-income { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; }
.calendar-expense { color:var(--expense); }.calendar-income { color:var(--income); }
.calendar-legend { display:flex; justify-content:flex-end; gap:18px; padding-top:14px; color:var(--text-muted); font-size:15px; }
.calendar-legend .expense{color:var(--expense)}.calendar-legend .income{color:var(--income)}

.assets-page-header { align-items:flex-start; }
.asset-header-actions { display:flex; gap:10px; flex-wrap:wrap; }
.asset-total-note {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:7px; max-width:680px;
  margin:0 auto 32px; padding:30px 38px; border-radius:8px 14px 10px 12px; color:var(--text);
  background-color:var(--paper-blue); box-shadow:0 8px 0 rgba(91,82,64,.1); transform:rotate(-.45deg);
}
.asset-total-note::before { content:""; position:absolute; width:125px; height:28px; left:50%; top:-14px; transform:translateX(-50%) rotate(1deg); background:var(--tape-rose) center/100% 100% no-repeat; }
.asset-total-note span { font-size:21px; }.asset-total-note strong { color:#3f526e; font-size:40px; font-weight:700; }.asset-total-note small { font-size:16px; color:var(--text-muted); }
.asset-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.asset-account-card {
  position:relative; min-height:230px; padding:25px 27px 22px; overflow:hidden; border:1px solid rgba(88,75,57,.18);
  border-radius:12px 19px 13px 17px; background:color-mix(in srgb,var(--asset-color) 82%,#fff 18%);
  box-shadow:0 8px 0 rgba(85,75,62,.1); transform:rotate(var(--asset-tilt));
}
.asset-account-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:var(--paper-grain); }
.asset-card-pin { position:absolute; top:-8px; left:48%; width:80px; height:24px; background:var(--tape-taupe) center/100% 100% no-repeat; }
.asset-card-top,.asset-card-actions { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.asset-type-sticker { padding:3px 10px; border-radius:12px 9px 13px 8px; background:rgba(255,255,255,.55); font-size:16px; }
.asset-card-edit,.asset-card-actions button { border:0; background:transparent; color:var(--primary); font:700 16px var(--font-hand); cursor:pointer; text-decoration:underline; text-decoration-style:wavy; text-underline-offset:4px; }
.asset-account-card h2 { position:relative; z-index:1; margin:18px 0 10px; font-size:25px; }
.asset-native-balance { position:relative; z-index:1; font-size:35px; font-weight:700; font-variant-numeric:tabular-nums; }
.asset-cny-value { position:relative; z-index:1; margin:5px 0 18px; color:var(--text-muted); font-size:17px; }
.asset-card-actions { justify-content:flex-start; margin-top:12px; }
.asset-negative-warning { position:relative; z-index:1; display:inline-block; padding:4px 8px; color:#9f333b; background:#f6d7d9; border-radius:6px; }
.asset-empty { grid-column:1/-1; display:flex; min-height:250px; align-items:center; justify-content:center; flex-direction:column; gap:14px; text-align:center; }
.asset-empty strong { font-size:27px; }.asset-empty span { max-width:560px; color:var(--text-muted); }
.asset-dialog-backdrop,.record-dialog-backdrop { position:fixed; z-index:1200; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(35,35,31,.48); backdrop-filter:blur(3px); }
.asset-dialog,.record-dialog { width:min(680px,100%); max-height:min(86vh,820px); overflow:auto; padding:28px; border:1px solid rgba(103,86,62,.2); border-radius:13px 18px 11px 16px; background:var(--card-bg); box-shadow:0 18px 50px rgba(30,25,18,.24); }
.asset-dialog-wide { width:min(820px,100%); }.asset-dialog h2,.record-dialog h2 { margin:0 0 16px; font-size:29px; }
.asset-dialog-copy { color:var(--text-muted); }
.asset-form,.record-edit-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.asset-form label,.record-edit-form label { display:flex; flex-direction:column; gap:6px; font-size:17px; }
.asset-form-wide,.asset-form-tip,.detail-wide,.asset-dialog-actions,.record-dialog-actions { grid-column:1/-1; }
.asset-form-tip { margin:0; color:var(--text-muted); font-size:15px; }
.asset-dialog-actions,.record-dialog-actions { display:grid; grid-template-columns:auto auto 1fr auto auto; align-items:center; gap:10px; margin-top:10px; }
.asset-movement-list { display:flex; flex-direction:column; gap:2px; }
.asset-movement-row { display:flex; justify-content:space-between; gap:15px; padding:13px 4px; border-bottom:1px dashed var(--border); }
.asset-movement-row div { display:flex; flex-direction:column; }.asset-movement-row span { color:var(--text-muted); font-size:15px; }
.asset-movement-row b { font-size:18px; }.asset-movement-row .positive{color:var(--income)}.asset-movement-row .negative{color:var(--expense)}

.manual-asset-field { padding:14px; border:1px dashed rgba(75,97,94,.35); border-radius:10px; background:rgba(208,232,222,.35); }
.manual-asset-field[hidden],.record-edit-form [hidden] { display:none !important; }
.asset-amount-inline { margin-top:8px; }.img-asset-editor { display:grid; gap:7px; min-width:200px; }.img-asset-editor label{display:grid;gap:3px;font-size:14px}
.records-paper { padding:0; overflow:hidden; }
.records-table { width:100%; }
.records-row { display:grid; grid-template-columns:190px minmax(200px,1fr) 190px 100px; gap:16px; align-items:center; min-height:82px; padding:14px 22px; border-bottom:1px dashed rgba(102,87,64,.28); }
.records-row:last-child { border-bottom:0; }.records-head { min-height:56px; background:rgba(236,222,193,.48); font-weight:700; font-size:18px; }
.records-row time { font-size:17px; font-variant-numeric:tabular-nums; }.records-product { min-width:0; display:flex; flex-direction:column; }.records-product strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:19px; }.records-product small{color:var(--text-muted);font-size:15px}.records-amount{font-size:23px;font-variant-numeric:tabular-nums}.records-amount.income{color:var(--income)}.records-amount.expense{color:var(--expense)}
.records-count { padding:16px 22px; color:var(--text-muted); }.record-dialog-title { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }.record-dialog-title h2 { margin-top:8px; }.dialog-x { border:0; background:transparent; color:var(--text); font:400 36px/1 var(--font-hand); cursor:pointer; }.detail-direction { display:inline-block; padding:3px 11px; border-radius:9px; background:var(--paper-yellow); }.detail-direction.expense{color:var(--expense)}.detail-direction.income{color:var(--income)}
.record-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:12px 0 20px; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--border); }.record-detail-grid>div { display:flex; flex-direction:column; gap:4px; padding:13px 15px; background:var(--card-bg); }.record-detail-grid span { color:var(--text-muted); font-size:15px; }.record-detail-grid b{font-size:18px}.record-detail-grid b.income{color:var(--income)}.record-detail-grid b.expense{color:var(--expense)}.record-cny-preview{padding:10px 12px;border-radius:8px;background:var(--paper-mint);font-size:20px;font-weight:700}

@media (max-width:768px) {
  .mobile-profile-button { position:fixed; z-index:1001; top:12px; right:12px; display:block; border:0; border-radius:13px 9px 12px 8px; padding:8px 12px; color:#57483a; background:#f0d1d4; box-shadow:0 3px 0 rgba(73,62,50,.14); font:700 15px var(--font-hand); }
  .me-popup { top:58px; right:12px; bottom:auto; }
  .dashboard-heading { padding-right:58px; }.dashboard-heading,.assets-page-header,.records-heading { align-items:flex-start; gap:14px; }
  .calendar-toolbar { width:100%; justify-content:center; }.calendar-month-sticker{min-width:130px;font-size:18px}.ledger-calendar-card{padding:16px 10px}.calendar-weekdays,.calendar-grid{gap:4px}.calendar-weekday{font-size:13px}.calendar-day{min-height:69px;padding:5px 4px}.calendar-date{font-size:17px}.calendar-expense,.calendar-income{font-size:11px}.calendar-legend{justify-content:center;gap:8px;font-size:12px;flex-wrap:wrap}
  .asset-card-grid { grid-template-columns:1fr; gap:17px; }.asset-total-note { margin-bottom:24px; padding:26px 25px; }.asset-total-note strong{font-size:34px}.asset-account-card{min-height:210px;padding:22px}.asset-native-balance{font-size:31px}.asset-header-actions{width:100%}.asset-header-actions .btn{flex:1}
  .asset-dialog-backdrop,.record-dialog-backdrop { align-items:flex-end; padding:0; }.asset-dialog,.record-dialog { width:100%; max-height:91vh; border-radius:22px 22px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom)); }.asset-form,.record-edit-form { grid-template-columns:1fr; }.asset-form-wide,.asset-form-tip,.detail-wide,.asset-dialog-actions,.record-dialog-actions { grid-column:1; }.asset-dialog-actions,.record-dialog-actions{grid-template-columns:auto 1fr auto;}.record-dialog-actions span{display:none}
  .records-filter { display:grid; grid-template-columns:1fr 1fr; }.records-filter>input{grid-column:1/-1}.records-filter button{width:100%}.records-paper{margin-bottom:0}.records-head{display:none}.records-row{grid-template-columns:92px minmax(0,1fr) auto;gap:9px;min-height:76px;padding:13px 12px}.records-row time{font-size:14px}.records-product strong{font-size:17px}.records-product small{font-size:13px}.records-amount{font-size:18px}.record-detail-btn{grid-column:1/-1;width:100%}.record-detail-grid{grid-template-columns:1fr}.record-detail-grid .detail-wide{grid-column:1}.record-detail-grid b{font-size:17px}
  .img-asset-editor { grid-column:1/-1; padding:10px; background:rgba(212,232,221,.35); border-radius:8px; }
}

body,
button,
input,
select,
textarea,
.btn,
#sidebar a,
#bottom-bar a,
.auth-tab,
.import-tab,
.badge,
.pagination,
.summary-card,
.money,
.amount {
  font-family: var(--font-reading);
  font-size: 18px;
  font-weight: 400;
}

th,
td,
.img-preview-table th,
.img-preview-table td,
.cat-detail-wrap th,
.cat-detail-wrap td,
.cat-detail-grid-head,
.cat-detail-grid-row {
  font-family: var(--font-numeric);
  font-size: 17px !important;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.page-subtitle,
.field-hint,
.drop-zone .drop-sub,
.crop-image-name,
.platform-stat-card small,
.rule-item-meta,
.img-quota-bar,
.import-result .stat .l,
.auth-subtitle,
#app [style*="font-size:12px"],
#app [style*="font-size: 12px"],
#app [style*="font-size:13px"],
#app [style*="font-size: 13px"] {
  font-family: var(--font-reading);
  font-size: 16px !important;
  font-weight: 300 !important;
}

.page-title,
.auth-title,
.summary-card .value,
.beneficiary-total strong,
.btn-primary,
.card-title {
  font-family: var(--font-hand);
  font-weight: 700;
}

#app [style*="font-weight:500"],
#app [style*="font-weight: 500"] { font-weight: 400 !important; }

#app [style*="font-weight:600"],
#app [style*="font-weight: 600"],
#app [style*="font-weight:800"],
#app [style*="font-weight: 800"] { font-weight: 700 !important; }

#user-display,
.summary-card .label,
.badge,
.drop-zone .drop-hint,
.form-label,
.filter-bar label,
.stats-controls label,
.platform-stat-card strong,
.beneficiary-stat-name strong,
.allocation-total,
.member-active {
  font-weight: 400;
}

.page-header {
  min-height: 92px;
  padding-right: 98px;
  margin-bottom: 32px;
}

.page-title {
  isolation: isolate;
  min-height: 58px;
  font-size: 42px;
  line-height: 1.22;
  letter-spacing: .08em;
  padding: 4px 18px 8px 10px;
  transform: rotate(-.45deg);
}

.page-title::before {
  left: -20px;
  right: -24px;
  bottom: -5px;
  height: 64px;
  opacity: .82;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

body[data-route="dashboard"] .page-title::before {
  display: none;
}

body[data-route="transactions"] .page-title {
  padding: 8px 30px 16px 18px;
  transform: rotate(.2deg);
}

body[data-route="transactions"] .page-title::before {
  background-image: var(--title-graph);
  left: -34px;
  right: -46px;
  bottom: -18px;
  height: 94px;
  transform: rotate(.2deg);
  opacity: .92;
}

body[data-route="records"] .page-title {
  padding:8px 30px 16px 18px;
  transform:rotate(.2deg);
}

body[data-route="records"] .page-title::before {
  background-image:var(--title-graph);
  left:-34px; right:-46px; bottom:-18px; height:94px; opacity:.92;
}

body[data-route="assets"] .page-title {
  padding:7px 34px 12px 18px;
  transform:rotate(-.5deg);
  color:color-mix(in srgb,var(--text) 82%,#4e8772);
}

body[data-route="assets"] .page-title::before {
  background-image:url("../assets/scrapbook/title-crayon-transparent.png");
  left:-26px; right:-42px; bottom:-7px; height:72px; opacity:.86;
}

body[data-route="import"] .page-title {
  padding: 8px 22px 10px 18px;
  transform: rotate(-1deg);
}

body[data-route="import"] .page-title::before {
  background-image: var(--tape-rose);
  left: -22px;
  right: -30px;
  bottom: 0;
  height: 55px;
  transform: rotate(-1.2deg);
  opacity: .9;
}

body[data-route="stats"] .page-title {
  padding: 3px 28px 10px 10px;
  transform: rotate(.35deg);
}

body[data-route="stats"] .page-title::before {
  background-image: var(--tape-blue);
  left: -8px;
  right: 12px;
  bottom: 3px;
  height: 24px;
  transform: rotate(-.8deg);
  opacity: .48;
}

body[data-route="rules"] .page-title {
  padding: 12px 32px 20px 24px;
  transform: rotate(-.2deg);
}

body[data-route="rules"] .page-title::before {
  background-image: var(--title-speech);
  left: -38px;
  right: -46px;
  bottom: -24px;
  height: 104px;
  transform: rotate(-.15deg);
  opacity: .94;
}

body[data-route="settings"] .page-title {
  padding: 10px 38px 16px 24px;
  transform: rotate(.35deg);
}

body[data-route="settings"] .page-title::before {
  background-image: var(--title-chapter);
  left: -34px;
  right: -58px;
  bottom: -19px;
  height: 92px;
  transform: rotate(.2deg);
  opacity: .95;
}

[data-theme="dark"] .page-title::before,
[data-theme="dark"] body[data-route] .page-title::before {
  background-size: 100% 100%;
  mix-blend-mode: normal;
  filter: brightness(.72) saturate(.9);
  opacity: .74;
}

.card-title {
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: .055em;
  padding: 2px 12px 5px 5px;
  margin-bottom: 18px;
}

/* Chart cards: a bright horizontal crayon swipe. */
.charts-grid .card-title::before {
  background-image: var(--title-crayon);
  height: 18px;
  opacity: .55;
}

/* Ledger/list cards: a squared paper index tab. */
body[data-route="dashboard"] .charts-grid + .card .card-title::before,
body[data-route="transactions"] .card-title::before,
body[data-route="import"] .card-title::before,
body[data-route="stats"] .card:not(.charts-grid .card) .card-title::before {
  background-image: var(--tape-taupe);
  height: 23px;
  background-size: 100% 100%;
  opacity: .42;
}

/* Rules and settings: soft pencil brackets / chapter marks. */
body[data-route="rules"] .card-title::before,
body[data-route="settings"] .card-title::before {
  background-image: var(--title-chapter);
  left: -13px;
  right: -18px;
  bottom: -3px;
  height: 32px;
  background-size: 100% 100%;
  opacity: .5;
}

.summary-card .label { font-size: 21px; }
.summary-card .value {
  font-size: 34px;
  line-height: 1.25;
  font-weight: 700;
}

.summary-card > div:last-child:not(.value) { font-size: 16px !important; }
.form-label,
.filter-bar label,
.stats-controls label,
.drop-zone .drop-sub,
.platform-stat-card span,
.beneficiary-total,
.allocation-total { font-size: 16px !important; }

input,
select,
textarea,
.form-field input,
.form-field select,
.filter-bar input,
.filter-bar select,
.stats-controls input,
.stats-controls select,
.inline-input,
.img-cell-input,
.img-cell-select,
.btn {
  min-height: 44px;
  font-size: 18px !important;
  line-height: 1.45;
}

.auth-container { max-width: 520px; }
.auth-container > div:first-child {
  position: relative;
  z-index: 0;
  margin-bottom: 44px !important;
}

.auth-title {
  display: inline-block;
  position: relative;
  z-index: 0;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: .09em;
  padding: 12px 34px 18px;
  color: var(--text);
}

.auth-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20px -50px -24px;
  background: var(--title-login-stars) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .92;
}

.auth-subtitle {
  margin-top: 12px;
  color: var(--text-muted);
  letter-spacing: .05em;
}

@media (max-width: 768px) {
  #app { padding: 24px 16px 122px; }
  .page-header {
    min-height: 84px;
    padding-right: 64px;
    margin-bottom: 30px;
  }
  .page-title {
    max-width: calc(100vw - 110px);
    min-height: 52px;
    font-size: 36px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .page-header::after { width: 54px; height: 54px; }
  .card-title { font-size: 21px; }
  .summary-card { min-height: 142px; padding: 24px 16px 18px; }
  .summary-card .label { font-size: 20px; }
  .summary-card .value { font-size: 30px; }
  .summary-card > div:last-child:not(.value) { font-size: 16px !important; }
  .card { padding: 24px 18px; }
  .filter-bar,
  .stats-controls { gap: 12px; }
  .auth-title { font-size: 36px; padding-left: 26px; padding-right: 26px; }
  #bottom-bar a { font-size: 16px; min-width: 62px; }
}

@media (max-width: 390px) {
  #app { padding-left: 12px; padding-right: 12px; }
  .summary-grid { gap: 12px; }
  .summary-card { padding-left: 12px; padding-right: 12px; }
  .summary-card .value { font-size: 30px; }
  .page-title { font-size: 36px; }
  .btn { padding-left: 12px; padding-right: 12px; }
}

/* ===== Editable account brand ===== */
.ledger-brand-button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.ledger-brand-button:hover,
.ledger-brand-button:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #f1c5cf;
  text-underline-offset: 6px;
}

#ledger-brand-name {
  display: block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-name-card { margin-bottom: 24px; }

.ledger-name-editor {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.ledger-name-editor > label {
  font-size: 18px;
  color: var(--text-muted);
}

.ledger-name-input-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  background-image: var(--tape-yellow);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 2px rgba(88, 72, 62, .12));
  padding: 7px 18px;
}

.ledger-name-input-wrap input {
  min-width: 0;
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 4px !important;
  color: #4c4238;
  font-size: 21px !important;
  font-weight: 700;
}

/* ===== Unified manual + screenshot entry ===== */
.capture-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 620px);
  max-width: 620px;
  margin: 0 0 22px;
  padding: 7px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--paper-ledger) 88%, transparent);
}

.capture-mode-tabs .import-tab {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding-inline: 14px;
  font-size: 20px;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.manual-entry-card { margin-bottom: 24px; }
.manual-entry-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.manual-category-field,
.manual-beneficiary-field,
.manual-submit-row,
.currency-converter { grid-column: 1 / -1; }
.currency-converter {
  padding: 16px 18px;
  border: 1px dashed color-mix(in srgb, var(--chart-blue) 60%, var(--border));
  background: color-mix(in srgb, var(--paper-blue) 66%, transparent);
  border-radius: 9px 15px 8px 12px;
}
.currency-rate-line,
.manual-submit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.currency-rate-line label { display: flex; align-items: center; gap: 9px; }
.currency-rate-line input { width: 180px; }
.currency-result { margin-top: 12px; font-size: 19px; }
.currency-result strong { margin-left: 8px; font-size: 28px; color: var(--expense); }
.exchange-attribution { margin: 16px 0 0; font-size: 14px; color: var(--text-muted); }

/* ===== Full bookkeeping record details ===== */
.tx-detail-row td {
  padding: 0 18px 15px;
  background: color-mix(in srgb, var(--paper-ledger) 91%, var(--paper-blue));
}
.tx-detail-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 18px;
  padding: 11px 14px;
  border-top: 1px dashed var(--border);
  font-size: 15px;
}
.tx-detail-strip span { min-width: 0; overflow-wrap: anywhere; }
.tx-detail-strip b { margin-right: 7px; color: var(--text-muted); }
.tx-detail-remark { grid-column: span 2; }
.tx-full-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px dashed var(--border);
  background: var(--input-bg);
}
.tx-full-editor label { display: grid; gap: 5px; font-size: 15px; color: var(--text-muted); }
.tx-editor-wide { grid-column: span 3; }
.tx-edit-cny-preview { font-size: 20px; color: var(--expense); white-space: nowrap; }

@media (max-width: 768px) {
  .manual-entry-form { grid-template-columns: 1fr; }
  .manual-category-field,
  .manual-beneficiary-field,
  .manual-submit-row,
  .currency-converter { grid-column: 1; }
  .capture-mode-tabs { max-width: none; }
  .capture-mode-tabs .import-tab {
    min-height: 50px;
    padding-inline: 6px;
    font-size: 17px !important;
    letter-spacing: 0 !important;
  }
  .tx-detail-strip { grid-template-columns: 1fr 1fr; font-size: 14px; }
  .tx-detail-remark { grid-column: 1 / -1; }
  .tx-full-editor { grid-template-columns: 1fr; }
  .tx-editor-wide { grid-column: 1; }
}

/* ===== iPhone-safe filters and secondary headings ===== */
.records-date-range,
.stats-date-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.records-date-range label,
.stats-date-range label,
.records-direction-field,
.stats-direction-field {
  display: grid;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.records-date-range input,
.stats-date-range input,
.records-direction-field select,
.stats-direction-field select,
.records-search-input { width: 100%; min-width: 0; max-width: 100%; }

.records-date-range input,
.stats-date-range input {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
  opacity: 1;
}

.records-filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stats-section-heading {
  position: relative;
  min-height: 0;
  margin: 28px 0 16px;
  padding: 0 4px;
}

.stats-section-heading h2 {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 2px 14px 6px 5px;
  font-family: var(--font-hand);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .07em;
}

.stats-section-heading h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -7px;
  right: -12px;
  bottom: 0;
  height: 24px;
  background: var(--title-crayon) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .55;
}

.category-stats-controls { width: 100%; }

@media (min-width: 769px) {
  .records-filter {
    display: grid;
    grid-template-columns: minmax(380px, 1.45fr) minmax(150px, .55fr) minmax(240px, 1fr) auto;
    align-items: end;
  }
  .records-filter-actions { grid-template-columns: auto auto; }
  .category-stats-controls {
    display: grid;
    grid-template-columns: minmax(390px, 1fr) minmax(150px, 180px) auto;
    align-items: end;
  }
}

@media (max-width: 768px) {
  body[data-route="records"] #app,
  body[data-route="stats"] #app { overflow-x: clip; }
  .records-filter,
  .category-stats-controls { display: grid; grid-template-columns: 1fr; width: 100%; }
  .records-date-range,
  .stats-date-range,
  .records-direction-field,
  .stats-direction-field,
  .records-search-input,
  .records-filter-actions,
  .category-stats-controls .btn { grid-column: 1; width: 100%; }
  .records-date-range,
  .stats-date-range { grid-template-columns: 1fr; gap: 12px; }
  .records-date-range label,
  .stats-date-range label { width: 100%; }
  .records-filter-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-section-heading { margin: 22px 0 14px; }
  .stats-section-heading h2 { font-size: 28px; }
}

.ledger-name-input-wrap span {
  flex: 0 0 auto;
  color: #68594d;
  font-size: 21px;
  font-weight: 700;
}

.ledger-name-status {
  min-height: 28px;
  margin-top: 10px;
  font-size: 16px;
}

.ledger-name-status.success { color: var(--income); }
.ledger-name-status.error { color: var(--expense); }

/* ===== Dashboard date stickers ===== */
.dashboard-date-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.date-range-stickers {
  display: flex;
  align-items: center;
  gap: 7px;
}

.date-sticker {
  position: relative;
  display: flex;
  align-items: center;
  width: 218px;
  min-height: 64px;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 2px rgba(88, 72, 62, .13));
}

.date-sticker-yellow {
  background-image: none;
  transform: rotate(-.45deg);
  filter: none;
}

.date-sticker-yellow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper-yellow);
  -webkit-mask: var(--tape-blue) center / 100% 100% no-repeat;
  mask: var(--tape-blue) center / 100% 100% no-repeat;
  pointer-events: none;
}

.date-sticker-blue {
  background-image: none;
  transform: rotate(.45deg);
  filter: none;
}

.date-sticker-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper-blue);
  -webkit-mask: var(--tape-blue) center / 100% 100% no-repeat;
  mask: var(--tape-blue) center / 100% 100% no-repeat;
  pointer-events: none;
}

.date-sticker-caption {
  position: absolute;
  z-index: 1;
  left: 17px;
  top: 5px;
  color: rgba(80, 56, 58, .75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  pointer-events: none;
}

.date-sticker-blue .date-sticker-caption { color: rgba(49, 69, 85, .78); }
.date-sticker-yellow .date-sticker-caption { color: rgba(91, 69, 32, .78); }

.date-sticker input[type="date"] {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  margin: 0;
  padding: 18px 16px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #423a37;
  font-size: 20px !important;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.date-sticker input[type="date"]:focus-visible {
  outline: 2px dashed color-mix(in srgb, var(--primary) 72%, transparent);
  outline-offset: -7px;
}

.date-sticker input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .66;
  cursor: pointer;
}

.date-range-mark {
  color: var(--text-muted);
  font-size: 21px;
  font-weight: 700;
  transform: rotate(-4deg);
}

.dashboard-date-tools #dash-refresh {
  min-height: 48px;
  padding: 8px 18px;
}

@media (max-width: 980px) {
  body[data-route="dashboard"] .page-header {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 72px;
  }

  .dashboard-date-tools {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .ledger-name-editor {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ledger-name-editor .btn { width: 100%; }

  .dashboard-date-tools { gap: 10px; }
  .date-range-stickers { width: 100%; gap: 4px; }
  .date-sticker { width: auto; flex: 1 1 0; min-width: 0; min-height: 58px; }
  .date-sticker input[type="date"] {
    min-height: 58px;
    padding: 18px 6px 4px !important;
    font-size: 16px !important;
  }
  .date-sticker-caption { left: 12px; top: 5px; font-size: 11px; }
  .date-range-mark { flex: 0 0 22px; text-align: center; font-size: 17px; }
  .dashboard-date-tools #dash-refresh { width: 100%; }
}

/* ===== Compact editable transaction list ===== */
.transaction-list-table {
  table-layout: fixed;
  min-width: 720px;
}

.transaction-list-table th:nth-child(1) { width: 52px; }
.transaction-list-table th:nth-child(2) { width: 20%; }
.transaction-list-table th:nth-child(3) { width: 30%; }
.transaction-list-table th:nth-child(4) { width: 14%; }
.transaction-list-table th:nth-child(5) { width: 18%; }
.transaction-list-table th:nth-child(6) { width: 190px; }

.transaction-list-table td {
  padding-top: 19px;
  padding-bottom: 19px;
  vertical-align: middle;
}

.transaction-list-table .tx-category,
.transaction-list-table .tx-product {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-list-table .tx-amount {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.transaction-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.transaction-actions .btn {
  min-width: 68px;
  min-height: 42px;
  padding: 7px 12px;
  font-family: var(--font-hand);
  font-size: 17px !important;
  font-weight: 700 !important;
}

.transaction-list-table tr.is-editing td {
  background-color: color-mix(in srgb, var(--paper-yellow) 44%, transparent);
}

.tx-edit-input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 7px 9px;
  font-size: 17px;
  font-weight: 400;
}

.tx-edit-amount {
  text-align: right;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .transaction-list-table { min-width: 660px !important; }
  .transaction-list-table th:nth-child(6) { width: 170px; }
  .transaction-list-table td { padding: 15px 10px; }
  .transaction-actions { gap: 6px; }
  .transaction-actions .btn { min-width: 62px; padding-inline: 9px; }
}

/* ===== Account font, complete Me page and calendar refinements ===== */
.font-warning {
  position: fixed;
  z-index: 2200;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) rotate(-.4deg);
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border: 1px solid rgba(136, 84, 48, .3);
  border-radius: 8px 13px 7px 11px;
  color: #68442f;
  background: #f2dda5 var(--paper-grain) center/360px;
  box-shadow: 0 5px 16px rgba(62, 48, 37, .18);
  font-family: "Ledger WenKai", "Kaiti SC", serif;
  font-size: 16px;
}

.calendar-month-sticker {
  display: inline-flex;
  min-width: 210px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-size: 26px;
}

.calendar-day.calendar-tone-rose { background-color: #f2d9de; }
.calendar-day.calendar-tone-yellow { background-color: #f2e4b9; }
.calendar-day.calendar-tone-blue { background-color: #d9e7f2; }
[data-theme="dark"] .calendar-day.calendar-tone-rose { background-color: #5b4149; }
[data-theme="dark"] .calendar-day.calendar-tone-yellow { background-color: #58503b; }
[data-theme="dark"] .calendar-day.calendar-tone-blue { background-color: #3d4e60; }

body[data-route="me"] { --page-doodle: var(--doodle-wallet); }
body[data-route="me"] .page-title {
  padding: 10px 38px 16px 24px;
  transform: rotate(.35deg);
}
body[data-route="me"] .page-title::before {
  left: -34px;
  right: -58px;
  bottom: -19px;
  height: 92px;
  opacity: .95;
  background-image: var(--title-chapter);
}
body[data-route="me"] .card-title::before {
  left: -13px;
  right: -18px;
  bottom: -3px;
  height: 32px;
  opacity: .5;
  background-image: var(--title-chapter);
  background-size: 100% 100%;
}
.me-page-header { margin-bottom: 22px; }
.me-profile-sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, .65fr) minmax(180px, 1fr);
  gap: 7px 24px;
  width: 100%;
  margin-bottom: 24px;
  padding: 28px 34px;
  border: 1px solid rgba(84, 76, 64, .18);
  border-radius: 11px 18px 12px 16px;
  background-color: var(--paper-blue);
  background-image: var(--paper-grain);
  background-size: 560px;
  box-shadow: var(--shadow);
}
.me-profile-sheet::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 122px;
  height: 27px;
  transform: translateX(-50%) rotate(.8deg);
  background: var(--tape-rose) center/100% 100% no-repeat;
}
.me-profile-label { align-self: end; color: var(--text-muted); font-size: 17px; }
.me-profile-sheet strong { grid-row: span 2; align-self: center; font-size: 34px; }
.me-profile-ledger { font-size: 20px; }
.me-settings-section { width: 100%; margin-bottom: 22px; }
.me-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.me-action-button {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px 15px 9px 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--paper-ledger) 82%, transparent);
  cursor: pointer;
  text-align: left;
}
.me-action-button span { font-size: 21px; font-weight: 700; }
.me-action-button small { color: var(--text-muted); font-family: var(--font-hand); font-size: 15px; }
.me-action-button:hover { transform: none; filter: brightness(.98) saturate(1.02); box-shadow: var(--shadow); }
.me-action-logout span { color: var(--expense); }

@media (max-width: 768px) {
  #bottom-bar { gap: 2px; padding-inline: 5px; }
  #bottom-bar a { flex: 1 1 0; min-width: 0; padding-inline: 2px; font-size: 12px; }
  #bottom-bar a svg { width: 20px; height: 20px; }
  .dashboard-heading { padding-right: 0; }
  .calendar-toolbar { justify-content: space-between; }
  .calendar-month-sticker { min-width: 190px; min-height: 54px; padding: 8px 14px; font-size: 24px; }
  .me-profile-sheet { grid-template-columns: 1fr; gap: 3px; padding: 26px 22px; }
  .me-profile-sheet strong { grid-row: auto; font-size: 30px; }
  .me-action-grid { grid-template-columns: 1fr; }
  .me-action-button { min-height: 78px; }
}

@media (max-width: 390px) {
  .calendar-toolbar { gap: 5px; }
  .calendar-toolbar .btn { min-width: 38px; padding-inline: 9px; }
  .calendar-month-sticker { min-width: 190px; }
}

/* ===== Compact entry and recognition review ===== */
.dashboard-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary-card-today { border-width: 2px; }
.summary-card-today .label { color: var(--text); }

.manual-entry-card,
.manual-entry-form,
.manual-entry-form > *,
.currency-converter,
.currency-rate-line,
.currency-rate-line label { min-width: 0; max-width: 100%; }
.manual-entry-form input,
.manual-entry-form select { width: 100%; min-width: 0; }
.currency-converter[hidden] { display: none !important; }
.manual-asset-field { grid-column: 1 / -1; }
.asset-amount-inline { display: grid; gap: 6px; }

.img-preview-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.img-preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.img-review-summary-line {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 15px;
  border: 1px dashed var(--border);
  border-radius: 9px 14px 8px 12px;
  background: color-mix(in srgb, var(--paper-blue) 64%, transparent);
  font-size: 16px;
}
.img-review-summary-line strong { font-size: 20px; }
.img-review-total { margin-left: auto; }
.img-review-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.img-mobile-card { min-width: 0; overflow: hidden; }
.img-review-check { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; }
.img-record-number { margin-left: auto; color: var(--text-muted); font-size: 15px; }
.img-mobile-card-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.img-mobile-field,
.img-mobile-field .img-cell-input,
.img-mobile-field .img-cell-select { min-width: 0; max-width: 100%; width: 100%; }
.img-mobile-field-wide,
.img-asset-editor,
.allocation-editor,
.img-extra-fields { grid-column: 1 / -1; min-width: 0; }
.img-converted-amount { margin-top: 4px; color: var(--income); font-size: 15px; }
.img-extra-fields {
  padding-top: 3px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.img-extra-fields summary { padding: 7px 0; color: var(--text-muted); cursor: pointer; font-size: 15px; }
.img-extra-fields[open] summary { margin-bottom: 6px; }
.img-asset-editor { min-width: 0; padding: 12px; border-radius: 9px; background: rgba(208,232,222,.35); }

@media (max-width: 900px) {
  .img-review-card-list { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body[data-route="import"] #app { overflow-x: clip; }
  body[data-route="import"] .card { width: 100%; max-width: 100%; padding: 18px 15px; }
  .dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-entry-form { display: grid; grid-template-columns: 1fr; gap: 14px; width: 100%; }
  .manual-entry-form > *,
  .manual-category-field,
  .manual-beneficiary-field,
  .manual-submit-row,
  .currency-converter,
  .manual-asset-field { grid-column: 1; width: 100%; }
  .currency-rate-line { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .currency-rate-line label { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .currency-rate-line input { width: 100%; }
  .manual-submit-row .btn { width: 100%; }
  .img-preview-title-row { align-items: flex-start; }
  .img-preview-actions { width: 100%; display: grid; grid-template-columns: 1fr 1.35fr; }
  .img-preview-actions .btn { width: 100%; padding-inline: 8px; }
  .img-review-summary-line { gap: 8px 12px; padding: 11px 12px; }
  .img-review-total { width: 100%; margin-left: 0; }
  .img-review-actions { display: grid; grid-template-columns: 1fr; }
  .img-review-batch { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .img-review-card-list { grid-template-columns: 1fr; }
  .img-mobile-card-body { grid-template-columns: 1fr; gap: 11px; padding: 13px 12px 15px; }
  .img-mobile-field-wide,
  .img-asset-editor,
  .allocation-editor,
  .img-extra-fields { grid-column: 1; }
  .img-asset-editor { padding: 11px; }
  .calendar-day { min-height: 78px; padding: 6px 4px; }
  .calendar-date { font-size: 21px; line-height: 1; }
  .calendar-expense,
  .calendar-income { font-size: 14px; line-height: 1.15; }
}

@media (max-width: 390px) {
  body[data-route="import"] #app { padding-left: 10px; padding-right: 10px; }
  .calendar-weekdays,
  .calendar-grid { gap: 3px; }
  .calendar-weekday { font-size: 14px; }
  .calendar-day { min-height: 76px; padding-inline: 3px; }
  .calendar-date { font-size: 20px; }
  .calendar-expense,
  .calendar-income { font-size: 13px; }
}

/* ===== WeChat/iPhone hardening v2 =====
   Keep native form controls inside the paper card and prevent Chinese tab labels
   from being split by embedded browsers with aggressive text autosizing. */
@media (max-width: 768px) {
  body[data-route="import"] .capture-mode-tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-route="import"] .capture-mode-tabs .import-tab {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
    padding: 9px 2px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }

  body[data-route="import"] .manual-entry-form,
  body[data-route="import"] .manual-entry-form > label,
  body[data-route="import"] .manual-entry-form .form-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  body[data-route="import"] .manual-entry-form input,
  body[data-route="import"] .manual-entry-form select,
  body[data-route="records"] .records-filter input,
  body[data-route="records"] .records-filter select,
  body[data-route="stats"] .category-stats-controls input,
  body[data-route="stats"] .category-stats-controls select {
    display: block !important;
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
  }

  body[data-route="import"] input[type="datetime-local"],
  body[data-route="records"] input[type="date"],
  body[data-route="stats"] input[type="date"] {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    opacity: 1 !important;
  }

  body[data-route="stats"] .page-header {
    min-height: 0 !important;
    margin-bottom: 18px !important;
    padding-bottom: 0 !important;
  }

  body[data-route="stats"] .category-stats-controls,
  body[data-route="records"] .records-filter {
    margin-top: 0 !important;
  }
}

/* ===== iOS native date controls v3 =====
   iOS adds its own internal date-field padding after normal box sizing. Using
   fill-available makes the native control resolve against the real inner width.
   Do not clip the field: its full rounded border must remain visible. */
@media (max-width: 768px) {
  body[data-route="import"] .manual-entry-form > label,
  body[data-route="import"] .manual-entry-form .form-field,
  body[data-route="records"] .records-date-range label,
  body[data-route="stats"] .stats-date-range label {
    overflow: visible !important;
  }

  body[data-route="import"] input[type="datetime-local"],
  body[data-route="records"] input[type="date"],
  body[data-route="stats"] input[type="date"] {
    justify-self: stretch !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    body[data-route="import"] input[type="datetime-local"],
    body[data-route="records"] input[type="date"],
    body[data-route="stats"] input[type="date"] {
      inline-size: -webkit-fill-available !important;
      width: -webkit-fill-available !important;
      max-inline-size: -webkit-fill-available !important;
      max-width: -webkit-fill-available !important;
    }
  }
}

/* ===== 2026-09-03 lively interactions, stats index and category ledger ===== */
:root {
  --category-rose: #efd2d9;
  --category-yellow: #f3e4b5;
  --category-blue: #d6e5f2;
  --category-mint: #d4e8dc;
  --category-taupe: #ded3c6;
  --category-coral: #f0d0c7;
  --category-lavender: #ded7eb;
  --category-peach: #f0d6bd;
  --category-neutral: #e7e1d9;
  --motion-spring: cubic-bezier(.2, .85, .28, 1.25);
}

[data-theme="dark"] {
  --category-rose: #5d414b;
  --category-yellow: #5d5237;
  --category-blue: #3e5062;
  --category-mint: #3e584d;
  --category-taupe: #514942;
  --category-coral: #60443e;
  --category-lavender: #50465f;
  --category-peach: #5d4939;
  --category-neutral: #4b4847;
}

[data-category-tone="rose"] { --category-color: var(--category-rose); }
[data-category-tone="yellow"] { --category-color: var(--category-yellow); }
[data-category-tone="blue"] { --category-color: var(--category-blue); }
[data-category-tone="mint"] { --category-color: var(--category-mint); }
[data-category-tone="taupe"] { --category-color: var(--category-taupe); }
[data-category-tone="coral"] { --category-color: var(--category-coral); }
[data-category-tone="lavender"] { --category-color: var(--category-lavender); }
[data-category-tone="peach"] { --category-color: var(--category-peach); }
[data-category-tone="neutral"] { --category-color: var(--category-neutral); }

.category-preset[data-category-tone] {
  background-color: var(--category-color) !important;
  background-image: var(--paper-grain);
  background-size: 250px;
  background-blend-mode: soft-light;
}

.records-row-colored {
  position: relative;
  isolation: isolate;
  background-color: color-mix(in srgb, var(--category-color) 78%, var(--paper-ledger));
  background-image: var(--paper-grain);
  background-size: 440px;
  background-blend-mode: soft-light;
  transition: box-shadow .12s ease, filter .12s ease;
}

.records-row-colored::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px auto 7px 0;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: color-mix(in srgb, var(--category-color) 45%, var(--text));
}

.records-row-colored:hover {
  z-index: 1;
  transform: none;
  filter: brightness(.98) saturate(1.02);
  box-shadow: 0 3px 10px rgba(72, 57, 45, .1);
}

.records-category {
  align-self: flex-start;
  margin-top: 5px;
  padding: 2px 9px 3px;
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  border-radius: 10px 7px 9px 6px;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--category-color) 84%, white 16%);
  line-height: 1.25;
}

[data-theme="dark"] .records-category {
  background: color-mix(in srgb, var(--category-color) 85%, #27262a 15%);
}

.stats-jump-nav {
  position: sticky;
  z-index: 80;
  top: 0;
  width: 100%;
  margin: -4px 0 22px;
  padding: 8px 7px 10px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 11px 16px 10px 14px;
  background-color: color-mix(in srgb, var(--paper-ledger) 92%, transparent);
  background-image: var(--paper-grain);
  background-size: 440px;
  box-shadow: 0 5px 16px rgba(72, 57, 45, .1);
  backdrop-filter: blur(8px);
}

/* A clipped app wrapper prevents position:sticky in Safari and Chromium. The
   page shell already clips the viewport, so the statistics page can keep this
   wrapper visible without introducing horizontal page scrolling. */
body[data-route="stats"] #app { overflow: visible !important; }

.stats-jump-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 3px 5px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.stats-jump-track::-webkit-scrollbar { display: none; }

.stats-jump-chip {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 10px 7px 11px 8px;
  color: var(--text);
  background: var(--paper-blue) var(--paper-grain) center/260px;
  box-shadow: 0 2px 0 rgba(78, 62, 51, .1);
  font-size: 16px;
  cursor: pointer;
  scroll-snap-align: center;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, filter .12s ease;
}

.stats-jump-chip:nth-child(3n + 2) { background-color: var(--paper-yellow); }
.stats-jump-chip:nth-child(3n) { background-color: var(--paper-mint); }
.stats-jump-chip.active {
  color: #fff9ef;
  background-color: var(--primary);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 55%, #5c4147);
}

.stats-anchor-section,
#stat-year-summary { scroll-margin-top: 92px; }

.stats-target-flash { animation: stats-target-highlight .55s ease-out; }

.motion-page-fade { animation: page-fade-in .16s ease-out both; }
.motion-pressed { filter: brightness(.94) saturate(1.04) !important; }

.record-dialog-backdrop,
.asset-dialog-backdrop { animation: backdrop-in .2s ease both; }
.record-dialog,
.asset-dialog { animation: dialog-fade-in .16s ease-out both; }
.export-dropdown-menu { animation: dialog-fade-in .16s ease-out; }

.motion-celebration {
  position: fixed;
  z-index: 4000;
  left: 50%;
  top: 45%;
  width: 190px;
  height: 150px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.motion-celebration strong {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  min-width: 150px;
  padding: 15px 18px;
  transform: translate(-50%, -50%) rotate(-2deg);
  border: 4px double #a95062;
  border-radius: 50%;
  color: #9f4053;
  background: color-mix(in srgb, var(--paper-rose) 88%, white);
  box-shadow: 0 8px 24px rgba(77, 49, 47, .22);
  font: 700 24px/1.2 var(--font-hand);
  text-align: center;
  animation: success-stamp 1.2s ease-out both;
}

.paper-bit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 19px;
  border-radius: 3px 7px 2px 5px;
  background: var(--paper-yellow);
  animation: paper-pop 1.1s ease-out both;
}
.bit-one { --bit-x: -105px; --bit-y: -85px; background: var(--paper-rose); transform: rotate(18deg); }
.bit-two { --bit-x: 100px; --bit-y: -75px; background: var(--paper-blue); transform: rotate(-28deg); }
.bit-three { --bit-x: -112px; --bit-y: 62px; background: var(--paper-mint); transform: rotate(45deg); }
.bit-four { --bit-x: 112px; --bit-y: 55px; background: var(--paper-yellow); transform: rotate(12deg); }
.bit-five { --bit-x: -20px; --bit-y: -110px; background: var(--category-lavender); transform: rotate(-12deg); }
.bit-six { --bit-x: 22px; --bit-y: 102px; background: var(--category-coral); transform: rotate(34deg); }
.bit-seven { --bit-x: -75px; --bit-y: -12px; width: 15px; height: 15px; background: var(--paper-blue); clip-path: polygon(50% 0,61% 36%,98% 38%,68% 59%,79% 96%,50% 74%,21% 96%,32% 59%,2% 38%,39% 36%); }
.bit-eight { --bit-x: 78px; --bit-y: 3px; width: 15px; height: 15px; background: var(--paper-rose); clip-path: polygon(50% 0,61% 36%,98% 38%,68% 59%,79% 96%,50% 74%,21% 96%,32% 59%,2% 38%,39% 36%); }

@keyframes page-fade-in { from { opacity: .82; } to { opacity: 1; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes success-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-2deg) scale(.84); }
  24% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1.04); }
  38%, 78% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
}
@keyframes paper-pop {
  0% { opacity: 0; translate: 0 0; scale: .55; }
  18% { opacity: 1; }
  82% { opacity: .88; }
  100% { opacity: 0; translate: var(--bit-x) var(--bit-y); scale: 1.05; rotate: 95deg; }
}
@keyframes stats-target-highlight {
  0%, 100% { outline-color: transparent; }
  35%, 72% { outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent); outline-offset: 3px; }
}

@media (max-width: 768px) {
  .dashboard-summary .summary-card .value {
    max-width: 100%;
    font-size: 24px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .dashboard-summary .summary-card .value.value-long { font-size: 20px; }
  .dashboard-summary .summary-card .label-single-line {
    font-size: 18px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .stats-jump-nav { top: 0; margin-inline: -4px; width: calc(100% + 8px); }
  .stats-jump-chip { min-height: 40px; padding-inline: 12px; }
  .stats-anchor-section,
  #stat-year-summary { scroll-margin-top: 90px; }
  .records-row-colored { margin: 7px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 10px 15px 9px 13px; }
  .records-row-colored:last-child { margin-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-page-fade,
  .record-dialog-backdrop,
  .asset-dialog-backdrop,
  .record-dialog,
  .asset-dialog,
  .stats-target-flash,
  .motion-celebration strong,
  .paper-bit { animation: none !important; }
  .paper-bit { display: none; }
}