.finance-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.goal-card { display: flex; align-items: center; gap: 15px; min-height: 118px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.goal-card.investment { background: #e1edda; }
.goal-card.tithe { background: #f4e1dc; }
.goal-card.emergency { background: #e4e6f1; }
.goal-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #fff9; color: var(--ink); font-size: 25px; }
.goal-card small,.goal-card span { display: block; color: var(--muted); }
.goal-card small { letter-spacing: .11em; font-size: 10px; font-weight: 850; display: block; min-height: 24px; }
.goal-card strong { display: block; margin: 5px 0 2px; font: 25px Georgia, serif; }
.goal-card div>span { font-size: 12px; }
.finance-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 18px; }
.chart-panel,.distribution-panel { min-height: 340px; }
.chart-legend { display: flex; gap: 13px; color: var(--muted); font-size: 11px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 50%; }
.income-dot { background: var(--green); }.expense-dot { background: var(--coral); }
.cashflow-chart { height: 245px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: clamp(8px, 2vw, 22px); padding: 24px 5px 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 59px, #dcd8ca70 60px); }
.month-group { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; min-width: 0; }
.bar-area { display: flex; align-items: end; justify-content: center; gap: 5px; min-height: 0; }
.bar { width: min(24px, 38%); min-height: 3px; border-radius: 7px 7px 2px 2px; transition: height .7s cubic-bezier(.2,.8,.2,1); position: relative; }
.bar:hover::after { content: attr(data-value); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 2; padding: 5px 7px; border-radius: 7px; background: var(--ink); color: white; font-size: 10px; white-space: nowrap; }
.bar.income { background: var(--green); }.bar.expense { background: var(--coral); }
.month-label { color: var(--muted); font-size: 11px; text-align: center; text-transform: uppercase; }
.distribution-chart { display: grid; place-items: center; gap: 20px; padding-top: 18px; }
.donut { width: 165px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; }
.donut::after { content: ''; position: absolute; inset: 25px; border-radius: 50%; background: var(--surface); }
.donut-center { z-index: 1; text-align: center; }.donut-center strong,.donut-center small { display: block; }.donut-center strong { font: 22px Georgia,serif; }.donut-center small { color: var(--muted); font-size: 10px; }
.distribution-list { width: 100%; display: grid; gap: 9px; }
.distribution-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.distribution-row i { width: 9px; height: 9px; border-radius: 3px; }.distribution-row span { color: var(--muted); }.distribution-row strong { font-size: 12px; }
@media(max-width:900px){.finance-kpis{grid-template-columns:1fr}.finance-grid{grid-template-columns:1fr}.chart-panel,.distribution-panel{min-height:auto}}
@media(max-width:560px){.cashflow-chart{gap:6px}.chart-legend{flex-direction:column;gap:4px}.goal-card{min-height:100px}}

.import-ofx{padding:24px;display:grid;gap:14px}
.import-ofx header{display:flex;justify-content:space-between;align-items:center}
.import-ofx h2{font-family:Georgia,serif;margin:0;font-size:27px}
.hint{color:var(--muted);font-size:12.5px;margin:0}
.hint.err{color:var(--coral)}
.ofx-preview{display:grid;gap:8px;max-height:340px;overflow:auto}
.ofx-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}
.ofx-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--green)}
.ofx-row .ofx-desc{min-width:0}
.ofx-row .ofx-desc p{margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofx-row .ofx-desc small{color:var(--muted)}
.ofx-row select{padding:8px 10px;font-size:12.5px}
.ofx-row .amount{font-weight:800;white-space:nowrap}
.ofx-summary{font-size:12.5px;color:var(--muted)}