/* 视觉修改入口：颜色、字号、间距与手机布局。 */
:root { font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#23342b; background:#eaf0e8; font-synthesis:none; --accent:#345b43; --accent-light:#e8f0e2; --paper:#f8faf6; --muted:#6d786e; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; display:grid; place-items:center; }
button,input,select { font:inherit; -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #92ad76; outline-offset:3px; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
h1,h2,h3,p { margin:0; }
h1 { font-size:24px; font-weight:650; }
h2,h3 { font-size:18px; font-weight:600; }
.app { position:relative; display:flex; flex-direction:column; width:min(100%,420px); height:100dvh; min-height:550px; padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); background:var(--paper); }
.page-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; flex-shrink:0; height:44px; gap:8px; }
.page-title { display:flex; align-items:center; gap:11px; }
.header-date { text-align:center; white-space:nowrap; font-size:16px; color:var(--muted); }
.brand-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; background:var(--accent); color:white; }
.brand-icon svg { width:27px; height:27px; }
.history-button { display:flex; justify-self:end; align-items:center; gap:7px; padding:10px 0 10px 10px; min-height:44px; border:0; background:transparent; font-size:16px; color:#56634e; }
.history-button svg { width:21px; height:21px; }
.amount-section { flex-shrink:0; margin-top:20px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; }
.section-heading time { font-size:16px; color:var(--muted); }
.amount-editor { display:flex; align-items:baseline; gap:10px; margin-top:10px; padding-bottom:14px; border-bottom:1px solid #e0e7db; }
.currency { font-size:30px; color:#7b8878; }
.amount-editor input { min-width:0; width:100%; height:86px; padding:0; color:#253c2b; background:transparent; border:0; font-size:70px; font-weight:550; line-height:1; letter-spacing:-3px; font-variant-numeric:tabular-nums; }
.amount-editor input::placeholder { color:#bdc8b5; opacity:1; }
.amount-editor input.long-amount { font-size:42px; letter-spacing:-2px; }
.category-section { flex:1; min-height:100px; overflow-y:auto; overscroll-behavior:contain; margin-top:14px; scrollbar-width:thin; }
.category-section>.section-heading { position:sticky; top:0; z-index:1; background:var(--paper); padding-bottom:3px; }
.category-heading { display:flex; align-items:center; gap:4px; min-width:0; }
.category-heading h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-back { display:grid; place-items:center; width:34px; height:42px; padding:0; margin-left:-6px; border:0; color:var(--accent); background:transparent; }
.category-back[hidden] { display:none; }
.text-button { border:0; background:transparent; padding:10px 0 10px 10px; color:var(--accent); font-size:16px; min-height:42px; white-space:nowrap; }
.categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 6px; margin-top:8px; }
.category { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:clamp(64px,calc((100dvh - 554px)/2),104px); min-width:0; padding:7px 0; border:1px solid transparent; border-radius:18px; background:transparent; font-size:18px; font-weight:500; }
.secondary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.return-category { color:var(--muted); }
.return-category svg { width:26px; height:26px; }
.category-name { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.category-icon { display:grid; place-items:center; height:29px; color:var(--icon-color); }
.category-icon svg { width:26px; height:26px; }
.category:hover { background:#eff3e9; }
.category[aria-pressed="true"] { color:#2a4b2e; background:var(--accent-light); border-color:#b2c49c; }
.category[aria-pressed="true"] .category-icon { color:#345c3c; }
.subcategories { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 8px; }
.subcategories:empty { padding:0; }
.subcategory { min-height:42px; max-width:100%; padding:8px 13px; border:1px solid #e0e7db; border-radius:12px; background:#fff; font-size:16px; overflow-wrap:anywhere; }
.subcategory[aria-pressed="true"] { background:var(--accent-light); border-color:#b2c49c; color:var(--accent); }
.keypad { flex-shrink:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,52px); gap:8px; margin-top:16px; }
.keypad button { min-width:0; display:grid; place-items:center; border:0; border-radius:14px; background:#fff; font-size:28px; font-weight:500; box-shadow:0 1px 0 #e9eee3; }
.keypad button:hover { background:#eef3e8; }
.keypad button:active { background:#e0e9d9; }
.keypad button svg { width:26px; height:26px; color:#65755f; }
.save-area { margin-top:16px; flex-shrink:0; }
#save { width:100%; min-height:56px; display:flex; justify-content:center; align-items:center; gap:9px; border:0; border-radius:17px; background:var(--accent); color:white; font-size:19px; font-weight:600; }
#save:disabled { background:#e2e9dc; color:#899581; }
.toast { position:fixed; z-index:100; bottom:max(26px,env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,8px); pointer-events:none; opacity:0; display:flex; align-items:center; gap:9px; max-width:calc(100% - 32px); width:max-content; padding:12px 18px; border:1px solid #c4d5b5; border-radius:18px; color:#2f5135; background:#eff5e9; font-size:17px; box-shadow:0 6px 18px #28402220; transition:opacity .2s,transform .2s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.toast.error { color:#9b322e; background:#fff1ed; border-color:#e7b5a8; }
dialog { color:#23342b; border:0; background:var(--paper); }
dialog::backdrop { background:#24352944; backdrop-filter:blur(5px); }
.history-dialog { width:min(100%,420px); height:min(840px,100dvh); max-width:100%; max-height:100dvh; margin:auto; padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); overflow-y:auto; }
.history-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.history-header h2 { font-size:24px; }
.header-actions { display:flex; align-items:center; gap:8px; }
.header-actions .text-button { padding:10px 0; }
#history[open] { display:flex; flex-direction:column; overflow:hidden; }
#history>.history-header,#history>.period-mode,#history>.period-nav,#history>.total-section,#history>.overview-view { flex-shrink:0; }
.overview-tools { flex-shrink:0; display:flex; margin-top:12px; }
.recurring-entry { display:flex; align-items:center; gap:8px; border:0; border-radius:12px; padding:9px 14px; min-height:42px; background:var(--accent-light); color:var(--accent); font-size:17px; }
.recurring-entry svg { width:21px; height:21px; }
.overview-tools+.period-mode { margin-top:14px; }
.recurring-list { margin-top:20px; }
.recurring-card { padding:20px 0; border-bottom:1px solid #e0e7db; }
.recurring-card:first-child { padding-top:8px; }
.recurring-card-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:19px; }
.recurring-card-heading h3 { font-size:19px; overflow-wrap:anywhere; }
.recurring-card-heading strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.recurring-category { margin-top:9px; font-size:16px; color:var(--muted); overflow-wrap:anywhere; }
.recurring-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.recurring-schedule { display:grid; gap:6px; font-size:16px; }
.recurring-schedule span:last-child { color:var(--muted); }
.cancel-recurring { min-height:42px; border:1px solid #c5d1bc; border-radius:11px; padding:8px 13px; background:transparent; color:var(--accent); font-size:16px; white-space:nowrap; }
.cancelled-recurring { margin-top:26px; }
.cancelled-recurring summary { font-size:17px; color:var(--muted); cursor:pointer; padding:10px 0; }
.cancelled-recurring .recurring-card { color:var(--muted); }
.cancelled-recurring .recurring-list { margin-top:0; }
.form-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.form-pair label { min-width:0; }
.recurring-form { gap:16px; }
.recurring-form .form-pair:last-of-type { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
.recurring-form input[type="date"] { -webkit-appearance:none; appearance:none; max-width:100%; padding-left:8px; padding-right:8px; }
.round-button { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border:0; border-radius:50%; background:#eaf0e3; }
.period-mode { display:grid; grid-template-columns:1fr 1fr; background:#eaf0e4; border-radius:14px; padding:4px; margin-top:20px; }
.period-mode button { border:0; border-radius:10px; padding:10px; background:transparent; font-size:17px; }
.period-mode button[aria-pressed="true"] { background:var(--paper); box-shadow:0 1px 4px #345b4312; color:var(--accent); font-weight:600; }
.period-nav { display:flex; align-items:center; gap:6px; margin-top:12px; }
.period-nav .round-button { background:transparent; width:34px; }
.period-picker { position:relative; flex:1; text-align:center; font-size:18px; font-weight:550; cursor:pointer; }
.period-picker input { position:absolute; inset:0; width:100%; opacity:.001; cursor:pointer; }
.period-picker:has(input[type="number"]) span { display:none; }
.period-picker input[type="number"] { position:static; opacity:1; text-align:center; border:0; background:transparent; width:100%; font-size:18px; font-weight:550; color:inherit; padding:10px 0; }
.total-section { display:flex; flex-direction:column; gap:8px; padding:14px 0 20px; border-bottom:1px solid #e0e7db; margin-bottom:16px; }
.total-section>span { font-size:16px; color:var(--muted); }
.total-section strong { font-size:40px; letter-spacing:-1.2px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.overview-view { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.view-mode { display:flex; gap:2px; background:#eaf0e4; padding:3px; border-radius:11px; }
.view-mode button { min-height:36px; padding:6px 10px; font-size:16px; background:transparent; border:0; border-radius:8px; }
.view-mode button[aria-pressed="true"] { background:var(--paper); color:var(--accent); font-weight:550; }
.overview-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.necessity-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; flex:1; min-height:0; }
.overview-scroll[hidden],.necessity-columns[hidden] { display:none; }
.necessity-column { display:flex; flex-direction:column; min-height:0; min-width:0; }
.necessity-column+.necessity-column { border-left:1px solid #e0e7db; padding-left:14px; }
.column-heading { flex-shrink:0; display:flex; flex-direction:column; gap:8px; padding:14px 0 10px; }
.column-heading h3 { font-size:18px; }
.column-heading strong { font-size:20px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.column-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-bottom:16px; }
.column-scroll .breakdown-primary { flex-direction:column; align-items:flex-start; gap:7px; }
.column-scroll .breakdown-primary strong { padding-left:0; white-space:normal; overflow-wrap:anywhere; }
.column-scroll .breakdown-title { gap:6px; }
.column-scroll .breakdown-title .mini-icon { display:none; }
.column-scroll .spending-bar { margin-left:0; }
.column-scroll .breakdown-secondary { flex-direction:column; gap:4px; padding:5px 0; }
.column-scroll .breakdown-group { margin-top:18px; }
.column-scroll .breakdown-group:first-child { margin-top:8px; }
.breakdown-group { margin-top:22px; }
.breakdown-primary { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:18px; }
.breakdown-primary strong { font-size:18px; white-space:nowrap; font-weight:600; }
.breakdown-title { display:flex; align-items:center; gap:9px; min-width:0; overflow-wrap:anywhere; }
.mini-icon { display:flex; }
.mini-icon svg { width:22px; height:22px; }
.spending-bar { height:4px; margin:10px 0 13px 31px; background:#e9eee4; border-radius:5px; overflow:hidden; }
.spending-bar span { height:100%; display:block; background:#96ad80; border-radius:5px; }
.breakdown-secondary { display:flex; justify-content:space-between; gap:12px; padding:5px 0 5px 31px; font-size:16px; color:#6d786e; }
.breakdown-secondary>span:first-child { overflow-wrap:anywhere; }
.breakdown-secondary>span:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.details-section,#year-months-section { margin-top:30px; padding-top:24px; border-top:1px solid #e0e7db; }
.record-date { margin:20px 0 4px; color:#78836f; font-size:16px; font-weight:500; }
.record { width:100%; display:flex; align-items:center; gap:12px; padding:14px 0; border:0; border-bottom:1px solid #e2e8dc; background:transparent; text-align:left; }
.record-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#ecf1e5; color:#4c6f43; flex-shrink:0; }
.record-title { display:flex; flex-direction:column; gap:5px; min-width:0; }
.record-name { font-size:18px; font-weight:500; overflow-wrap:anywhere; }
.record-secondary { font-size:16px; color:var(--muted); overflow-wrap:anywhere; }
.record-amount { margin-left:auto; font-size:19px; font-weight:600; letter-spacing:-.6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.empty-message { padding:28px 0; font-size:17px; color:var(--muted); }
.month-row { display:flex; justify-content:space-between; width:100%; padding:12px 0; border:0; border-bottom:1px solid #e2e8dc; background:transparent; font-size:16px; }
.small-dialog { width:min(380px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:24px; border-radius:24px; }
.solid-button,.outline-button { min-height:44px; border:0; border-radius:12px; padding:10px 16px; background:var(--accent); color:white; font-size:17px; }
.outline-button { border:1px solid #c5d1bc; background:transparent; color:var(--accent); }
.wide { width:100%; margin-top:20px; }
.add-form { display:flex; gap:10px; margin:22px 0; }
.add-form input,.rename-form input,.edit-form input,.edit-form select { min-width:0; width:100%; border:1px solid #d9e1d3; border-radius:11px; padding:10px 12px; background:white; color:inherit; font-size:16px; min-height:44px; }
.add-form .solid-button { flex-shrink:0; }
.manager-card { padding:18px 0; border-top:1px solid #e0e7db; }
.rename-form { display:grid; grid-template-columns:minmax(0,1fr) 40px 40px; align-items:center; gap:4px; }
.rename-form>input { font-size:18px; font-weight:550; }
.necessity-option { grid-column:1/-1; display:flex; align-items:center; gap:9px; min-height:40px; font-size:16px; font-weight:400; color:var(--muted); padding:3px 2px; }
.necessity-option input[type="checkbox"] { width:19px; height:19px; min-height:0; flex-shrink:0; margin:0; padding:0; accent-color:var(--accent); }
.add-secondary-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; }
.manager-children { padding-left:16px; margin-top:12px; }
.manager-children .rename-form { margin-top:8px; }
.manager-children .rename-form>input { font-size:16px; font-weight:400; }
.manager-children .add-form { margin:12px 0 0; }
.icon-button { display:grid; place-items:center; flex-shrink:0; width:40px; height:44px; background:transparent; color:var(--accent); border:0; }
.icon-button svg { width:20px; height:20px; }
.delete-type { color:#99827a; }
.edit-form { display:grid; gap:18px; margin-top:24px; }
.edit-form label { display:grid; gap:9px; font-size:17px; }
.editor-actions { display:flex; justify-content:space-between; gap:12px; }
.editor-actions button:last-child { flex:1; }
@media(min-width:600px) { body { padding:28px; background:radial-gradient(ellipse at 30% 20%,#f3f5ef 0,#e7ede2 70%); } .app,.history-dialog { border-radius:30px; box-shadow:0 20px 70px #2c422219,0 0 0 1px #fff9; } .app { height:min(840px,calc(100dvh - 56px)); } }
@media(max-height:760px) and (max-width:599px) {
  .app { padding-top:max(16px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .amount-section { margin-top:12px; } .amount-editor { margin-top:6px; padding-bottom:8px; } .amount-editor input { height:60px; font-size:54px; }
  .category-section { margin-top:12px; } .category { height:68px; gap:5px; } .category-icon svg { width:24px; height:24px; }
  .keypad { grid-template-rows:repeat(4,44px); gap:6px; margin-top:10px; } .save-area { margin-top:12px; } #save { min-height:50px; }
}
@media(max-height:650px) and (max-width:599px) {
  .app { padding:max(12px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom)); } .page-header { height:38px; }
  .brand-icon { width:34px; height:34px; } .amount-section { margin-top:6px; } .amount-editor input { height:48px; font-size:46px; } .amount-editor input.long-amount { font-size:34px; }
  .category { height:60px; font-size:16px; } .categories { gap:4px; } .category-section { margin-top:10px; } .keypad { margin-top:8px; gap:4px; } .keypad button { font-size:25px; border-radius:11px; } .save-area { margin-top:8px; } #save { min-height:46px; }
  .history-dialog { padding:16px 20px; } .period-nav { gap:2px; } .period-picker { font-size:17px; } .total-section strong { font-size:34px; } .record-amount { font-size:17px; }
  .history-header { gap:6px; } .history-header h2 { font-size:22px; } .header-actions { gap:6px; } .header-actions .round-button { width:36px; height:36px; } .column-heading h3 { font-size:16px; } .column-heading strong { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }