@font-face {
  font-family: "ELEYANG Soft";
  src: url("../assets/fonts/private/eleyang-soft/ELEYANG-Soft-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300 700;
}

@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: "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-reading: "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-numeric: "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", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-reading: "ELEYANG Soft", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --font-numeric: "ELEYANG Soft", "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 { background-color: var(--bg); }

body {
  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;
}

[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: translateX(2px);
}

#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 { transform: translateY(-3px) rotate(0); }

.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: translateY(-2px); box-shadow: 0 5px 0 rgba(80, 65, 58, .13); }
.btn:active,
.export-dropdown-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(80, 65, 58, .14); }

.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: translateY(-1px); }
.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:transform .16s ease,box-shadow .16s ease;
}
.calendar-day.has-records:nth-child(4n+1){background:#f5dfe1}.calendar-day.has-records:nth-child(4n+2){background:#dceee4}.calendar-day.has-records:nth-child(4n+3){background:#dfeaf3}.calendar-day.has-records:nth-child(4n){background:#f4e7b8}
.calendar-day:hover { transform:translateY(-2px) rotate(-.3deg); box-shadow:0 5px 10px rgba(77,65,48,.1); }
.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 {
  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 {
  flex: 1;
  min-height: 52px;
  font-size: 20px;
}

.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 { font-size: 18px; }
  .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; }
}

.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; }
}