.app[data-view="expenses"] .view-expenses,.app[data-view="schedule"] .view-schedule{display:block}
.expenses-body{padding:20px;display:grid;gap:12px}
.expense-summary{padding:20px 18px;background:var(--panel);border-radius:var(--r-lg);box-shadow:0 6px 22px rgb(0 0 0 / .04)}
.expense-month-control{display:flex;align-items:center;justify-content:space-between;gap:6px}
.expense-month-control .expense-period-label{flex:1;display:flex;justify-content:center;margin:0;color:var(--text);font:600 var(--fs-body-l) var(--font-ui,inherit);padding:6px;text-align:center}
.expense-month-control .round-btn{width:30px;height:30px;min-height:30px;font-size:var(--fs-display-s)}
.expense-total{font-family:var(--font-numeric);font-size:34px;font-weight:800;line-height:1.2;margin:14px 0 6px;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.expense-total.is-waiting{color:var(--muted)}
.expense-total small{font-family:var(--font-ui,inherit);font-size:var(--fs-title-l);font-weight:500;color:var(--muted);margin-left:5px;letter-spacing:0}
.expense-summary-note{font-size:var(--fs-label);color:var(--muted);line-height:1.7;margin:0;font-variant-numeric:tabular-nums}
.expense-categories{display:grid;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.expense-category{display:grid;grid-template-columns:62px 1fr 64px;align-items:center;gap:9px;padding:5px 0}
.expense-category-name{font-size:var(--fs-label);font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expense-category-track{height:6px;border-radius:var(--r-full);background:var(--panel3);overflow:hidden}
.expense-category-fill{display:block;height:100%;border-radius:var(--r-full);background:var(--gold)}
.expense-category-fill.is-dim{background:var(--muted);opacity:.55}
.expense-category-amount{font-family:var(--font-numeric);font-variant-numeric:tabular-nums;font-size:var(--fs-label);font-weight:700;text-align:right}
.expense-actions{display:flex;gap:8px;align-items:stretch}
.expense-actions .full-btn,.expense-actions .secondary-btn{flex:1;height:44px;min-height:44px;margin:0;font-size:var(--fs-body-l)}
.expense-filter{display:flex;flex-wrap:wrap;gap:6px}
.expense-chip{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border:0;border-radius:var(--r-full);background:var(--panel);color:var(--muted);font-family:inherit;font-size:var(--fs-label);font-weight:600;cursor:pointer}
.expense-chip b{font-family:var(--font-numeric);font-variant-numeric:tabular-nums;font-weight:700}
.expense-chip.is-warn{color:var(--warn)}
.expense-chip.is-on{background:var(--panel3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
html:not([data-theme="dark"]) .expense-chip.is-on{background:#FFFFFF}
.expense-chip.is-on.is-warn{color:var(--warn)}
.expense-list{background:var(--panel);border-radius:var(--r-lg);overflow:hidden}
.expense-row{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:14px 16px;background:transparent;border:0;border-bottom:1px solid var(--line,rgba(128,128,128,.12));color:var(--text);font-family:inherit;cursor:pointer}
.expense-row:last-child{border-bottom:0}
.expense-row-copy{flex:1;min-width:0;display:grid;gap:3px}
.expense-row-copy strong{display:block;font-size:var(--fs-body-l);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expense-row-copy small{display:block;font-size:var(--fs-caption);color:var(--muted);line-height:1.6;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expense-missing{font-style:normal;color:var(--red);font-weight:600}
.expense-row-amount{flex:0 0 auto;font-family:var(--font-numeric);font-size:var(--fs-title-m);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.expense-row-amount small{font-family:inherit;font-size:var(--fs-caption);color:var(--muted);font-weight:500;margin-left:3px}
.expense-row-blank{font-family:var(--font-ui,inherit);font-size:var(--fs-label);font-weight:500;color:var(--muted)}
.expense-row-chevron{flex:0 0 10px;text-align:right;font-size:var(--fs-title-l);font-weight:500;color:var(--muted)}
.expense-empty{text-align:center;padding:24px 18px;color:var(--muted)}.expense-empty strong{display:block;color:var(--text);font-size:var(--fs-title);font-weight:600}.expense-empty p{font-size:var(--fs-label);line-height:1.8;overflow-wrap:anywhere}.expense-empty-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:var(--panel2);font-size:25px;margin-bottom:12px}
.expense-empty-action{margin-top:14px;height:38px;padding:0 20px;border:0;border-radius:var(--r-full);background:var(--gold);color:var(--gold-ink);font-family:inherit;font-size:var(--fs-body);font-weight:700;cursor:pointer}
.expense-dialog{padding:0;border:0;border-radius:var(--r-xl);background:var(--panel);color:var(--text);width:min(540px,calc(100% - 24px));max-height:88dvh;box-shadow:0 18px 80px rgb(0 0 0 / .24);font-family:var(--font-ui,inherit);overflow:auto}
.expense-dialog::backdrop{background:rgb(0 0 0 / .5)}.expense-dialog form{margin:0}
.expense-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 12px;gap:12px}.expense-dialog-head h2{font-size:var(--fs-display-s);font-weight:700;margin:0;letter-spacing:-.02em}
.expense-trash-note{margin:0 0 4px;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-label);line-height:1.6;font-weight:500;color:var(--red);background:color-mix(in srgb, var(--red) 9%, transparent);border:1px solid color-mix(in srgb, var(--red) 26%, transparent)}.expense-dialog-head .round-btn{font-size:23px;flex-shrink:0}
.expense-dialog-body{padding:0 18px}.expense-file-actions{display:flex;gap:8px;margin:8px 0 10px}.expense-file-actions .secondary-btn{height:36px;min-height:36px;font-size:var(--fs-label);flex:1}
.expense-files{display:grid;gap:6px;margin-bottom:12px}.expense-file{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border:0;border-radius:var(--r-sm);background:var(--panel2);font-family:inherit;font-size:var(--fs-label);font-weight:500;color:var(--text);width:100%;text-align:left}.expense-file>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.expense-file small{color:var(--muted);white-space:nowrap}.expense-file.is-pending{padding-right:6px}
.expense-file-remove{width:28px;height:28px;flex-shrink:0;background:transparent;border:0;color:var(--muted);font-size:var(--fs-display-s)}
.expense-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}.expense-fields label,.expense-memo{display:grid;gap:6px;margin:0;font-size:var(--fs-label);font-weight:500;line-height:20px;color:var(--muted);min-width:0}.expense-field-full,.expense-amount-field{grid-column:1/-1}.expense-amount-field{position:relative}.expense-amount-field>span{position:absolute;right:13px;bottom:16px;font-size:var(--fs-body-l);line-height:20px}
.expense-dialog input:not([type="file"]),
.expense-dialog select,
.expense-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body-l);
  font-weight: 500;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.expense-dialog input[type="number"] { font-family: var(--font-numeric); }
.expense-dialog input[type="date"] { font-family: var(--font-code); }
.expense-dialog .expense-amount-field input {
  height: 52px;
  min-height: 52px;
  padding-right: 35px;
  font-size: var(--fs-display-s);
  font-weight: 600;
  line-height: 28px;
}
.expense-dialog input::placeholder,
.expense-dialog textarea::placeholder {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--fs-body-l);
  font-weight: 500;
  opacity: 1;
}
.expense-dialog textarea {
  height: 88px;
  min-height: 88px;
  padding: 10px 11px;
  resize: vertical;
}
.expense-more{margin:14px 0}.expense-more>summary{font-size:var(--fs-body);font-weight:600;cursor:pointer;color:var(--text);padding:5px 0}.expense-more[open]>summary{margin-bottom:10px}.expense-more .secondary-btn{margin-top:10px;font-size:var(--fs-label);min-height:34px}.expense-help,.expense-form-status{font-size:var(--fs-label);line-height:1.7;color:var(--muted)}
.expense-form-status{min-height:1.5em;overflow-wrap:anywhere;margin:0;padding:0 18px;position:sticky;bottom:68px;background:var(--panel)}
.expense-form-status:empty{min-height:0;padding:0}.expense-memo{margin-top:12px}
.expense-dialog-footer{display:flex;gap:8px;padding:12px 18px 18px;background:var(--panel);position:sticky;bottom:0}.expense-dialog-footer button{flex:1;height:44px;min-height:44px;margin:0;font-family:inherit;font-size:var(--fs-body-l);font-weight:600}.expense-trash{display:block;background:transparent;border:0;color:var(--muted);font-family:inherit;font-size:var(--fs-label);font-weight:500;margin:0 auto 18px;min-height:30px;padding:5px 14px}
.expense-receipt-view{margin:12px 0;max-height:300px;overflow:auto;display:grid;gap:8px}.expense-receipt-view img{max-width:100%;max-height:250px;object-fit:contain}.expense-receipt-view a{font-size:var(--fs-label);color:var(--gold)}
html .expense-dialog .secondary-btn,html .expense-dialog .round-btn,html .view-expenses .secondary-btn,html .view-expenses .round-btn{background:var(--panel2);color:var(--text);border:0;box-shadow:none}
html .expense-dialog .expense-fields input,html .expense-dialog .expense-fields select,html .expense-dialog textarea{border-color:var(--line)}
html .expense-dialog button:focus-visible,html .expense-dialog input:focus-visible,html .expense-dialog select:focus-visible,html .expense-dialog textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html .expense-dialog .expense-fields input:focus,html .expense-dialog .expense-fields select:focus,html .expense-dialog textarea:focus{border-color:var(--gold)}
@media(max-width:420px){.expenses-body{padding:16px}.expense-summary{padding:18px}.expense-dialog-head{padding:18px 18px 12px}.expense-total{font-size:32px}}
.expense-chip,.expense-empty-action{position:relative}
.expense-chip::after{content:"";position:absolute;inset:-6px 0}
.expense-empty-action::after{content:"";position:absolute;inset:-3px 0}
