.of-section { padding: 20px 0; border-top: 1px solid var(--border, #d8e0e4); border-bottom: 1px solid var(--border, #d8e0e4); }
.of-section [hidden] { display: none; }
.of-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.of-actions { display: flex; align-items: center; gap: 8px; }
.of-status { margin: 10px 0 16px; color: var(--text-muted, #566670); font-size: 13px; }
.of-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-bottom: 16px; }
.of-connections { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.of-connection { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border, #d8e0e4); border-radius: 6px; font-size: 12px; }
.of-account { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border, #d8e0e4); border-radius: 6px; background: var(--surface, #fff); }
.of-account > div { min-width: 0; }
.of-account strong { overflow-wrap: anywhere; }
.of-account small { display: block; color: var(--text-muted, #566670); margin-top: 4px; }
.of-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 4px 0 12px; }
.of-filters label { display: flex; align-items: center; gap: 6px; }
.of-filters select { min-width: 180px; }
.of-match-cell { min-width: 230px; }
.of-match-cell select { max-width: 210px; margin-right: 6px; }
.of-income { color: #126b4d; font-weight: 650; }
.of-expense { color: #a63838; font-weight: 650; }
.of-matched { color: #126b4d; margin-right: 8px; }
.of-muted, .of-empty { color: var(--text-muted, #566670); }
@media (max-width: 640px) { .of-actions { width: 100%; } .of-actions > button { flex: 1; } }