/* Account page. Reuses /lib/ui.css tokens with literal fallbacks. */

.acct-wrap { padding: 28px var(--pad, 16px) 60px; max-width: 880px; }
.acct-wrap h1 { margin-bottom: 18px; }
.acct-wrap h2 { margin: 0 0 12px; font-size: 18px; }

.plan-summary { margin-bottom: 28px; }
.plan-big { font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-transform: capitalize; }
.credits-box { text-align: right; }
.credits-big { font-size: 26px; font-weight: 700; }
.credits-note { margin: 12px 0 14px; }
.small { font-size: 12.5px; }

.upgrade-section { margin-bottom: 32px; }
.upgrade-head { margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.interval-toggle { display: flex; gap: 6px; }
.save-tag { font-size: 11px; color: var(--ok, #1E7F58); font-weight: 700; margin-left: 4px; }

.plan-grid { margin-top: 4px; }
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.plan-card.current { border-color: var(--accent, #1F5EFF); }
.plan-card .plan-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, #7C8189); }
.plan-card .plan-price { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.plan-card .plan-price small { font-size: 13px; font-weight: 550; color: var(--muted, #7C8189); }
.plan-card .plan-features { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink2, #3A3F46); }
.plan-card .plan-features li::before { content: "\2713 "; color: var(--ok, #1E7F58); font-weight: 700; }
.plan-card .btn { margin-top: auto; }
.current-tag {
  position: absolute; top: -10px; right: 14px;
  background: var(--accent, #1F5EFF); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px;
}

.ledger-card { padding: 0; overflow: hidden; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger-table th, .ledger-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line, #E3E0D9); }
.ledger-table th { color: var(--muted, #7C8189); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.ledger-table tr:last-child td { border-bottom: none; }
.ledger-table td.delta.pos { color: var(--ok, #1E7F58); font-weight: 600; }
.ledger-table td.delta.neg { color: var(--danger, #C8412F); font-weight: 600; }
#ledgerEmpty { padding: 24px 14px; margin: 0; }