.balance-evolution .balance-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.balance-evolution .balance-snapshot-card { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-glass); min-width: 0; }
.balance-evolution .balance-snapshot-card h3 { font-size: var(--fs-md); color: var(--text-secondary); margin: 0 0 10px; }
.balance-evolution .balance-current { display: block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; overflow-wrap: anywhere; }
.balance-evolution .balance-base, .balance-evolution .balance-change { font-size: var(--fs-sm); line-height: 1.65; margin: 8px 0 0; overflow-wrap: anywhere; }
.balance-evolution .balance-base { color: var(--text-secondary); }
.balance-evolution .balance-change.is-increasing { color: var(--red); }
.balance-evolution .balance-change.is-decreasing { color: var(--green); }
.balance-evolution .balance-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 16px; }
.balance-evolution .balance-controls button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); background: transparent; cursor: pointer; }
.balance-evolution .balance-controls button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #0a0b14); border-color: var(--accent); }
.balance-evolution .balance-controls button:focus-visible, .balance-evolution summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.balance-evolution #balance-movement-title { font-size: var(--fs-md); margin: 0 0 12px; }
.balance-evolution .balance-explanation, .balance-evolution .balance-history { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-secondary); }
.balance-evolution .balance-explanation { margin: 14px 0; }
.balance-evolution .balance-history summary { color: var(--accent); padding: 12px 0; cursor: pointer; min-height: 44px; }
.balance-evolution .balance-history .table-wrapper { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.balance-evolution .balance-history table { width: 100%; border-collapse: collapse; }
.balance-evolution .balance-history th, .balance-evolution .balance-history td { text-align: left; padding: 12px; white-space: nowrap; }
.balance-evolution .balance-history th { color: var(--text-primary); }
@media (max-width: 600px) { .balance-evolution .balance-summary { grid-template-columns: minmax(0, 1fr); } .balance-evolution .balance-controls button { flex: 1; } }