/* Stat cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.cards .hero { grid-column: 1 / -1; }
@media (min-width: 720px) { .cards .hero { grid-column: auto; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.card.hero { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.card .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.72; font-weight: 600; }
.card .amount { font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.card.hero .amount { font-size: 32px; }
.card .delta { font-size: 11px; opacity: 0.8; margin-top: 4px; }
.card .delta.down { color: #dc2626; }

/* Balance + withdraw */
.balance {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
}
.balance .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); font-weight: 600; }
.balance .amount { font-size: 22px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.balance .sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.btn-accent {
  background: var(--accent); color: var(--accent-contrast); border: none;
  font: inherit; font-weight: 700; font-size: 14px; padding: 11px 18px;
  border-radius: 10px; cursor: pointer; transition: transform 0.05s, filter 0.15s;
}
.btn-accent:hover { filter: brightness(1.05); }
.btn-accent:active { transform: translateY(1px); }

/* Graph */
.graph { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.graph .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.graph .title { font-size: 13px; font-weight: 700; }
.toggle { display: flex; gap: 4px; }
.toggle button {
  font: inherit; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  border: none; background: var(--line-soft); color: var(--ink-soft); cursor: pointer;
}
.toggle button.on { background: var(--accent); color: var(--accent-contrast); }
.graph svg { width: 100%; height: 160px; display: block; }
.graph .area { fill: var(--accent); opacity: 0.12; }
.graph .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.graph .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.graph .tip { fill: var(--ink); }
.graph .tip-text { fill: var(--surface); font-size: 10px; font-weight: 600; }

/* Breakdown tables */
.tables { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tables .thead, .tables .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 11px 16px; align-items: center; }
.tables .thead { background: var(--line-soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 700; }
.tables .row { border-top: 1px solid var(--line-soft); font-size: 13px; }
.tables .row .amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tables .bar-wrap { display: flex; justify-content: flex-end; }
.tables .bar { height: 7px; border-radius: 999px; background: var(--accent); }
.tables .row.total { font-weight: 800; background: var(--line-soft); }