.app-topbar { position: sticky; top: 0; z-index: 3; background: #fff; flex-shrink: 0; }
.topbar-balance { margin-left: auto; text-align: right; text-decoration: none; color: #000; padding: 8px 0 8px 14px; border-left: 3px solid #2aea33; white-space: nowrap; }
.app-topbar .topbar-balance strong { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.topbar-balance .meta-label { font-size: 8px; }
.topbar-balance:hover strong { text-decoration: underline; }
.balance-stale { display: block; font-size: 10px; }
.balance-stale[hidden] { display: none; }
.balance-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.balance-summary > div { padding: 22px; border: 1px solid var(--line); border-radius: 8px; }
.balance-summary dt { color: var(--muted); font-size: 12px; }
.balance-summary dd { margin: 8px 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.balance-summary .balance-available { border-top: 3px solid #2aea33; }
.balance-movements { margin-top: 24px; }
.balance-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1150px) { .balance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) { .app-shell .app-topbar { display: flex; height: 66px; padding: 0 20px; gap: 10px; } .app-topbar > .topbar-breadcrumb { font-size: 11px; } .topbar-breadcrumb > .breadcrumb-prefix { display: none; } }
@media (max-width: 450px) { .balance-summary { gap: 10px; } .balance-summary > div { padding: 14px; } .balance-summary dd { font-size: 16px; } }