.ledger-page { max-width: 1000px; }
.ledger-periods { display:flex; gap:24px; overflow:auto; border-bottom:1px solid var(--line); margin-top:18px; }
.period-tab { border:0; background:transparent; color:var(--muted); padding:10px 4px; white-space:nowrap; }
.period-tab.active { color:var(--ink); border-bottom:2px solid var(--accent); }
#custom-range { display:flex; align-items:center; gap:6px; }
#custom-range input { width:132px; }
.ledger-header { display: flex; align-items: center; gap: 14px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.ledger-header > div { flex: 1; }
.ledger-header h1 { font-size: 32px; }
.ledger-header .eyebrow { margin-bottom: 5px; }
.ledger-header .primary { min-height: 44px; padding: 0 18px; white-space: nowrap; }
.ledger-month { display: flex; align-items: center; gap: 6px; margin: 22px 0; }
.ledger-month input, .ledger-list-heading select { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--white); }
.ledger-status { color: var(--muted); font-size: 13px; line-height: 1.6; }
.ledger-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0 30px; border-bottom: 1px solid var(--line); }
.ledger-overview strong { display: block; color: var(--ink); font-family: Georgia, serif; font-size: clamp(36px, 7vw, 62px); font-weight: 400; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ledger-overview > div { min-width: 0; }
#ledger-count { margin-top: 10px; color: var(--muted); font-size: 12px; }
.ledger-note { color: var(--muted); font-size: 13px; line-height: 1.9; flex-shrink: 0; }
.ledger-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 28px; }
.ledger-breakdown { max-width: 820px; width: 100%; margin: 0 auto; }
.ledger-breakdown h2 { text-align: center; }
.ledger-pie { width:min(420px,80vw); margin: 12px auto 28px; }
.pie-label { fill:var(--ink); font-size:5px; font-weight:700; }
.pie-callout { fill:none; stroke:var(--muted); stroke-width:.6; }
.pie-callout-small { stroke-width:.4; }
.pie-label-small { font-size:4px; }
.ledger-legend { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ledger-breakdown h2, .ledger-records h2 { font-size: 18px; }
.ledger-category { margin-top: 20px; }
.ledger-category-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.ledger-category-label small { color: var(--muted); }
.ledger-category-track { height: 5px; overflow: hidden; border-radius: 5px; background: var(--paper-deep); }
.ledger-category-bar { height: 100%; border-radius: inherit; background: var(--ink-soft); }
.ledger-pie { width:min(1100px,100%); aspect-ratio:1.25; margin:4px auto 24px; }.ledger-pie svg { display:block; width:100%; height:100%; overflow:visible; background:transparent; }
.pie-center-total { fill:var(--ink); font-size:13px; font-weight:700; }
.pie-center-label { fill:var(--muted); font-size:5px; }
.pie-percent { fill:#fff; font-size:5px; font-weight:700; paint-order:stroke; stroke:rgba(0,0,0,.3); stroke-width:.7px; }
.pie-percent-small { font-size:4px; }
.ledger-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.ledger-legend-item { display:flex; align-items:center; gap:7px; min-width:0; font-size:12px; }
.ledger-legend-item i { width:10px; height:10px; flex:0 0 auto; border-radius:50%; }.ledger-legend-item span { min-width:0; overflow-wrap:anywhere; }.ledger-legend-item small { color:var(--muted); }.ledger-legend-item b { margin-left:auto; white-space:nowrap; font-weight:500; }
:root { --chart-0:#5d9bd4; --chart-1:#f17c2d; --chart-2:#9c9c9c; --chart-3:#ffc20a; --chart-4:#4778bf; --chart-5:#73b53d; --chart-6:#2b6e9f; --chart-7:#aa4b0c; --chart-8:#656565; --chart-9:#294779; }
.ledger-category:first-child .ledger-category-bar { background: var(--accent); }
.ledger-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ledger-list-heading select { font-size: 12px; }
.expense-day { display: flex; justify-content: space-between; gap: 10px; margin: 24px 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.expense-row { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.expense-row:hover { background: var(--paper-deep); }
.expense-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--paper-deep); color: var(--ink-soft); font-family: 'Noto Serif SC', serif; }
.expense-copy { min-width: 0; flex: 1; }
.expense-copy strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.expense-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.expense-row > strong { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-empty { padding: 28px 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.ledger-bars { display:grid; gap:14px; width:100%; }
.ledger-bar-row { min-width:0; }
.ledger-bar-head { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(110px,auto); align-items:center; gap:12px; margin-bottom:6px; color:var(--ink); font-size:13px; }
.ledger-bar-head > span { min-width:0; overflow-wrap:anywhere; }
.ledger-bar-head i { display:inline-block; width:10px; height:10px; margin-right:8px; border-radius:50%; vertical-align:middle; }
.ledger-bar-head small { color:var(--muted); font-size:12px; }
.ledger-bar-head b { min-width:110px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.ledger-bar-track { height:10px; overflow:hidden; border-radius:999px; background:var(--paper-deep); }
.ledger-bar-fill { height:100%; min-width:2px; border-radius:inherit; }
.expense-dialog { width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); color: var(--ink); }
.expense-dialog::backdrop { background: rgba(5,15,12,.65); backdrop-filter: blur(4px); }
.expense-amount input { font-size: 36px; font-variant-numeric: tabular-nums; }
.expense-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
#delete-expense { margin-right: auto; color: var(--accent-dark); }
.expense-dialog select { background: var(--white); }
button:disabled { cursor: wait; opacity: .6; }
@media (max-width: 700px) {
  .ledger-header { gap: 8px; }
  .ledger-header h1 { font-size: 26px; }
  .ledger-header .primary { padding: 0 12px; font-size: 13px; }
  .ledger-columns { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  #ledger-categories { display: block; }
  .ledger-bar-head { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .ledger-bar-head b { grid-column:2; grid-row:1; min-width:0; }
  .ledger-bar-head small { grid-column:1; grid-row:2; }
  .ledger-note { display: none; }
  .expense-dialog { padding: 20px; }
}

.ledger-import { margin-bottom: 12px; }
.ledger-import p:empty { display: none; }
.ledger-income { line-height: 2; font-size: 13px; color: var(--muted); }
.ledger-income b { display: block; color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.income-amount { color: #2f8f68; }
.expense-row > strong:not(.income-amount) { color: #c84f4f; }