/* 2b — wallet: balance + ledger left, packs right. */

.wallet__left {
  padding: 32px 34px;
  gap: 26px;
  background: var(--stage);
  overflow: hidden;
}

/* --- balance card -------------------------------------------------------- */

.wallet__balance {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 26px;
  padding: 28px 30px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: rgba(245, 165, 36, 0.09);
  border: 1px solid rgba(245, 165, 36, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.wallet__bloom {
  position: absolute;
  left: -60px;
  bottom: -90px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 165, 36, 0.24), transparent 70%);
  filter: blur(44px);
  pointer-events: none;
  animation: sp-breathe 5.5s ease-in-out infinite;
}

.wallet__balance-body {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet__balance-row {
  display: flex;
  align-items: baseline;
  gap: 11px;
}

.wallet__balance-value {
  font: 900 62px/1 var(--font-display);
  letter-spacing: -0.055em;
}

.wallet__balance-unit {
  font: 600 18px/1 var(--font-mono);
  color: var(--credit-light);
}

.wallet__projection {
  font: 500 9.5px/1.4 var(--font-mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--bone50);
}

.wallet__stats {
  position: relative;
  display: flex;
  gap: 22px;
}

.wallet__stats-divider { width: 1px; background: rgba(237, 235, 230, 0.12); }

.wallet__stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wallet__stat-label {
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bone45);
  white-space: nowrap;
}

.wallet__stat-value {
  font: 800 22px/1 var(--font-display);
  letter-spacing: -0.025em;
}

/* --- ledger -------------------------------------------------------------- */

.wallet__ledger {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.wallet__ledger-rows { display: flex; flex-direction: column; }

.ledger-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--rowline);
}

.ledger-row[data-kind="free"] { opacity: 0.8; }

.ledger-row__glyph {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 var(--font-mono);
}

.ledger-row[data-kind="spend"] .ledger-row__glyph {
  background: rgba(255, 77, 77, 0.14);
  border: 1px solid rgba(255, 128, 128, 0.32);
  color: var(--live-light);
}

.ledger-row[data-kind="topup"] .ledger-row__glyph {
  background: rgba(245, 165, 36, 0.14);
  border: 1px solid rgba(245, 165, 36, 0.34);
  color: var(--credit-light);
}

.ledger-row[data-kind="earn"] .ledger-row__glyph {
  background: rgba(79, 227, 156, 0.14);
  border: 1px solid rgba(123, 240, 184, 0.34);
  color: var(--standby-light);
}

.ledger-row[data-kind="earn"] .ledger-row__amount { color: var(--standby-light); }

.ledger-row[data-kind="free"] .ledger-row__glyph {
  background: rgba(107, 168, 255, 0.13);
  border: 1px solid rgba(107, 168, 255, 0.34);
  color: var(--cam-light);
  font-size: 11px;
}

.ledger-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ledger-row__title {
  font: 800 16px/1 var(--font-display);
  letter-spacing: -0.02em;
}

.ledger-row__meta {
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 1.1px;
  color: var(--bone50);
}

.ledger-row__amount {
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.4px;
  text-align: right;
  white-space: nowrap;
}

.ledger-row[data-kind="spend"] .ledger-row__amount { color: var(--live-light); }
.ledger-row[data-kind="topup"] .ledger-row__amount { color: var(--credit-light); }
.ledger-row[data-kind="free"] .ledger-row__amount { color: var(--bone45); font-weight: 500; }

/* --- packs --------------------------------------------------------------- */

.wallet__packs-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 20px;
}

.wallet__packs-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px;
  overflow: hidden;
}

.wallet__packs { display: flex; flex-direction: column; gap: 11px; }

.pack {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(237, 235, 230, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  text-align: left;
  transition: background var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out);
}

.pack:hover { background: rgba(237, 235, 230, 0.09); }

.pack--selected {
  background: linear-gradient(150deg, rgba(245, 165, 36, 0.2), rgba(237, 235, 230, 0.06) 62%);
  border-color: rgba(245, 165, 36, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.pack__radio {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.pack--selected .pack__radio {
  background: var(--credit-light);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(245, 165, 36, 0.8);
}

.pack__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pack__title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pack__name {
  font: 800 18px/1 var(--font-display);
  letter-spacing: -0.02em;
}

.pack__credits {
  font: 600 11px/1 var(--font-mono);
  color: var(--bone76);
}

.pack__note {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 1px;
  color: var(--bone50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack--selected .pack__note { color: var(--bone55); }

.pack__price {
  font: 600 13px/1 var(--font-mono);
  color: var(--bone62);
  white-space: nowrap;
}

.pack--selected .pack__price { color: var(--credit-light); }

/* --- footer slab --------------------------------------------------------- */

.wallet__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-row);
  background: rgba(237, 235, 230, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.wallet__footer-row { display: flex; align-items: center; gap: 9px; }

.wallet__footer-note {
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--bone50);
}

.wallet__buy {
  padding: 19px 0;
  border-radius: 17px;
  font-size: 12px;
  letter-spacing: 1.6px;
}

.wallet__buy.btn--credit {
  --gloss-top: #ffd08a;
  --gloss-bottom: var(--credit);
  --gloss-glow: rgba(245, 165, 36, 0.28);
}

.wallet__fineprint {
  text-align: center;
  font: 500 8px/1.5 var(--font-mono);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--bone32);
}