:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  color: #23342d;
  background: #f5f4ef;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: #f5f4ef; }
button, input, select { font: inherit; }
button, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.app-shell { width: 100%; max-width: 540px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: env(safe-area-inset-top) 16px calc(98px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 4px 18px; }
.eyebrow { margin: 0 0 5px; color: #668073; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.045em; }
.header-add { width: 44px; height: 44px; border: 0; border-radius: 15px; color: #fff; background: #24694f; font-size: 25px; line-height: 1; }
.view, .add-mode { display: none; }
.view.active, .add-mode.active { display: block; animation: reveal .18s ease-out; }
@keyframes reveal { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.period-switch, .mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; padding: 5px; border-radius: 15px; background: #ebece7; }
.period-switch button, .mode-switch button { min-height: 38px; border: 0; border-radius: 11px; color: #6f7b74; background: transparent; font-size: 13px; font-weight: 600; }
.period-switch button.active, .mode-switch button.active { color: #264c3b; background: #fff; }
.mode-switch { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
.period-picker-card { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; margin-bottom: 12px; }
.period-picker-card > button { width: 42px; height: 42px; border: 1px solid #dfe3de; border-radius: 13px; color: #577064; background: #fff; font-size: 24px; }
.period-selects { display: flex; justify-content: center; gap: 7px; }
.period-selects select, .period-selects input { height: 42px; min-width: 112px; border: 1px solid #dfe3de; border-radius: 13px; padding: 0 10px; color: #2f443a; background: #fff; text-align: center; }
.hero-card { overflow: hidden; margin-bottom: 12px; padding: 24px 22px 20px; border-radius: 25px; color: #fff; background: #24694f; }
.hero-card > p { margin: 0 0 8px; color: #cbe2d6; font-size: 12px; }
.hero-card > strong { display: block; margin-bottom: 22px; font-size: 40px; line-height: 1.05; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 14px; background: rgba(255,255,255,.12); }
.hero-metrics span { padding: 12px 10px; color: #dcebe4; font-size: 10px; }
.hero-metrics b { display: block; overflow: hidden; margin-top: 5px; color: #fff; font-size: 12px; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hero-metrics .income { color: #ffe0dc; }
.hero-metrics .expense { color: #d9eee5; }
.insight-card, .merchant-details, .ledger-section, .form-card, .import-card, .help-card, .rule-card, .settings-card, .status-card, .danger-card { margin-bottom: 12px; border: 1px solid #e2e4df; border-radius: 22px; background: #fff; }
.insight-card, .ledger-section { padding: 19px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title-row h2 { margin: 0; font-size: 16px; }
.section-title-row > span { color: #7b857f; font-size: 11px; }
.bar-chart { display: grid; gap: 8px; max-height: 330px; overflow: auto; }
.bar-row { display: grid; grid-template-columns: 38px minmax(76px, 1fr) 82px; align-items: center; gap: 8px; width: 100%; min-height: 25px; border: 0; padding: 0; color: #263a31; background: transparent; text-align: left; }
.bar-row > span { color: #78827c; font-size: 10px; }
.bar-row > b { text-align: right; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: #eef0ec; }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: #5a9b7d; }
.category-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.category-row { display: grid; grid-template-columns: 34px 1fr; gap: 9px; min-height: 65px; border: 0; border-radius: 15px; padding: 11px; color: #263b32; background: #f6f7f3; text-align: left; }
.category-row > i, .transaction-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #256649; background: #deede4; font-size: 13px; font-style: normal; font-weight: 700; }
.category-row span, .category-row strong, .category-row small, .category-row b { display: block; min-width: 0; }
.category-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.category-row small { margin-top: 4px; color: #8a928c; font-size: 9px; }
.category-row b { grid-column: 2; margin-top: -14px; color: #53675d; font-size: 11px; font-variant-numeric: tabular-nums; }
.rank-empty, .rule-empty { grid-column: 1 / -1; margin: 0; padding: 22px 0; color: #8a928d; text-align: center; font-size: 12px; }
.merchant-details { overflow: hidden; }
.merchant-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 15px 19px; list-style: none; }
.merchant-details summary::-webkit-details-marker { display: none; }
.merchant-details summary span, .merchant-details summary strong, .merchant-details summary small { display: block; }
.merchant-details summary small { margin-top: 5px; color: #858e88; font-size: 11px; font-weight: 400; }
.merchant-details summary b { color: #3e725b; font-size: 11px; }
.rank-list { padding: 0 19px 13px; }
.merchant-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 45px; border: 0; border-top: 1px solid #edf0ec; padding: 8px 0; color: #2a3c34; background: transparent; text-align: left; }
.merchant-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.merchant-row b { flex: 0 0 auto; font-size: 11px; }
.text-button { border: 0; color: #39725a; background: transparent; font-size: 12px; }
.filter-panel { display: grid; grid-template-columns: 1fr 112px; gap: 8px; margin-bottom: 13px; padding: 8px; border-radius: 14px; background: #f1f3ef; }
.filter-panel input, .filter-panel select { width: 100%; height: 40px; border: 0; border-radius: 9px; padding: 0 10px; color: #30483d; background: #fff; font-size: 12px; }
.empty-state { padding: 38px 15px; border: 1px dashed #d4dad5; border-radius: 16px; text-align: center; }
.empty-state p { margin: 0 0 7px; font-weight: 650; }
.empty-state span { color: #7c8680; font-size: 12px; line-height: 1.6; }
.transaction-list { display: grid; gap: 8px; }
.transaction-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 67px; border-bottom: 1px solid #edf0ed; padding: 8px 0; }
.transaction-item:last-child { border-bottom: 0; }
.transaction-icon { width: 38px; height: 38px; }
.transaction-icon.income-icon { color: #9a3f38; background: #f8e8e5; }
.transaction-icon.neutral-icon { color: #686f6b; background: #ecefed; }
.transaction-main { min-width: 0; }
.transaction-main > div { display: flex; justify-content: space-between; gap: 12px; }
.transaction-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.transaction-amount { flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.transaction-main p { display: flex; gap: 8px; margin: 6px 0 0; color: #858e88; font-size: 10px; }
.transaction-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.transaction-source { flex: 0 0 auto; padding-left: 8px; border-left: 1px solid #e1e5e2; }
.delete-button { border: 0; padding: 8px 0 8px 7px; color: #a4544d; background: transparent; font-size: 10px; }
.expense { color: #278258 !important; }
.income { color: #b43f37 !important; }
.page-heading { padding: 9px 5px 19px; }
.page-heading h2 { margin: 5px 0 8px; font-size: 28px; letter-spacing: -.045em; }
.page-heading > p:last-child { margin: 0; color: #707d75; font-size: 13px; line-height: 1.65; }
.form-card, .import-card, .rule-card { padding: 20px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 0 22px; padding: 5px; border: 0; border-radius: 14px; background: #eef1ec; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 10px; border-radius: 10px; color: #6d7971; text-align: center; font-size: 13px; font-weight: 600; }
.segmented input:checked + span { color: #254b3a; background: #fff; }
.amount-field > span, .field-grid label > span, .compact-form label > span { display: block; margin-bottom: 6px; color: #69766e; font-size: 11px; }
.amount-field div { display: flex; align-items: center; margin-bottom: 22px; border-bottom: 1px solid #d9dfda; }
.amount-field b { font-size: 28px; }
.amount-field input { width: 100%; height: 68px; border: 0; padding-left: 10px; color: #23352d; background: transparent; outline: none; font-size: 38px; font-weight: 700; letter-spacing: -.04em; }
.category-fieldset { margin: 0 0 20px; border: 0; padding: 0; }
.category-fieldset legend { margin-bottom: 10px; color: #68756d; font-size: 11px; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.category-grid button { min-width: 0; min-height: 64px; border: 1px solid #e2e6e2; border-radius: 14px; padding: 8px 3px; color: #6b776f; background: #fafbf8; }
.category-grid i, .category-grid span { display: block; }
.category-grid i { width: 28px; height: 28px; margin: 0 auto 5px; border-radius: 9px; color: #46745f; background: #e6efe9; font-size: 12px; font-style: normal; font-weight: 700; line-height: 28px; }
.category-grid span { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.category-grid button.active { border-color: #6fa68e; color: #255b45; background: #edf5f0; }
.category-grid button.active i { color: #fff; background: #31785b; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field-grid label { display: block; }
.form-card input:not([type="radio"]):not([type="hidden"]), .compact-form input, .compact-form select { width: 100%; height: 47px; border: 1px solid #dce2dd; border-radius: 12px; padding: 0 11px; color: #293d34; background: #fbfcf9; outline: none; }
.primary-button { width: 100%; min-height: 52px; border: 0; border-radius: 15px; padding: 14px; color: #fff; background: #24694f; font-size: 14px; font-weight: 650; }
.primary-button:disabled { opacity: .45; }
.form-message { min-height: 18px; margin: 11px 0 0; color: #5f786b; font-size: 11px; line-height: 1.6; }
.form-message.error { color: #a23d37; }
.import-intro strong { font-size: 16px; }
.import-intro p { margin: 7px 0 17px; color: #748077; font-size: 12px; line-height: 1.6; }
.file-picker { display: block; padding: 26px 17px; border: 1px dashed #9bb7a7; border-radius: 17px; background: #f6f9f6; text-align: center; }
.file-picker input, .file-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-picker strong, .file-picker span { display: block; }
.file-picker strong { margin-bottom: 7px; color: #2b6b50; }
.file-picker span { color: #78837c; font-size: 11px; line-height: 1.6; }
.import-preview { margin-top: 17px; padding-top: 17px; border-top: 1px solid #e8ece9; }
.preview-head { display: flex; justify-content: space-between; align-items: center; }
.preview-head span { color: #557065; font-size: 12px; }
.preview-head strong { font-size: 19px; }
.import-preview dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0; }
.import-preview dl div { padding: 11px 7px; border-radius: 11px; background: #f3f5f1; text-align: center; }
.import-preview dt { color: #7b857e; font-size: 10px; }
.import-preview dd { margin: 5px 0 0; font-weight: 650; }
.import-preview p { color: #6d7971; font-size: 11px; line-height: 1.6; }
.help-card { padding: 0 18px; }
.help-card summary { padding: 17px 0; font-size: 13px; font-weight: 600; }
.help-card div { padding-bottom: 13px; color: #69766e; font-size: 11px; line-height: 1.7; }
.card-heading h3 { margin: 0 0 7px; font-size: 16px; }
.card-heading p { margin: 0 0 15px; color: #748078; font-size: 11px; line-height: 1.6; }
.compact-form { display: grid; gap: 9px; }
.rule-list { margin-top: 14px; border-top: 1px solid #e9edea; }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 61px; border-bottom: 1px solid #edf0ed; }
.rule-row span, .rule-row strong, .rule-row small { display: block; min-width: 0; }
.rule-row span { flex: 1; }
.rule-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.rule-row small { margin-top: 5px; color: #7d8780; font-size: 10px; }
.rule-row button { flex: 0 0 auto; border: 0; padding: 8px; color: #a24f48; background: transparent; font-size: 10px; }
.compact-heading { padding-top: 21px; padding-bottom: 11px; }
.compact-heading h2 { font-size: 22px; }
.settings-card { overflow: hidden; }
.setting-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 13px; min-height: 72px; border: 0; border-bottom: 1px solid #e8ece9; padding: 14px 18px; color: #273c33; background: #fff; text-align: left; }
.setting-row:last-child { border-bottom: 0; }
.setting-row span, .setting-row strong, .setting-row small { display: block; }
.setting-row small { margin-top: 5px; color: #7d8780; font-weight: 400; }
.setting-row b { color: #367158; font-size: 11px; }
.status-card { padding: 8px 18px; }
.status-card div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #edf0ed; font-size: 12px; }
.status-card div:last-child { border-bottom: 0; }
.status-card span { color: #7a857e; }
.status-card strong { font-size: 11px; }
.danger-card { padding: 19px; }
.danger-card h3 { margin: 0 0 6px; font-size: 14px; }
.danger-card p { margin: 0 0 13px; color: #7e8781; font-size: 11px; }
.danger-card button { width: 100%; min-height: 45px; border: 1px solid #e4b5b1; border-radius: 12px; color: #a43e37; background: #fff7f6; font-weight: 600; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(540px, 100%); min-height: 77px; padding: 8px 22px calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid #dfe3df; background: rgba(250,250,247,.98); }
.bottom-nav button { min-height: 52px; border: 0; border-radius: 14px; color: #7d8781; background: transparent; }
.bottom-nav span, .bottom-nav small { display: block; }
.bottom-nav small { margin-top: 3px; font-size: 9px; }
.nav-mark { width: 27px; height: 27px; margin: auto; border-radius: 9px; background: #edf0ec; font-size: 11px; font-weight: 700; line-height: 27px; }
.bottom-nav button.active { color: #265f48; font-weight: 650; }
.bottom-nav button.active .nav-mark { color: #fff; background: #35785c; }
.nav-plus { width: 42px; height: 42px; margin: -18px auto 0; border: 4px solid #fafaf7; border-radius: 15px; color: #fff; background: #24694f; font-size: 25px; line-height: 34px; }
.nav-primary small { margin-top: 0; }
@media (max-width: 370px) {
  .app-shell { padding-left: 11px; padding-right: 11px; }
  .hero-card > strong { font-size: 35px; }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .category-summary { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .view.active, .add-mode.active { animation: none; } }