/* ============================================================
   E · Wallet / Recharge page extras
   依赖 _tokens.css · _e-fashion.css · _e-orders.css(sidebar)· _e-form.css
   仅 G 原型(钱包 / 充值 / 交易历史)
   ============================================================ */

/* ───────── Hero balance card ───────── */
.e-wal-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-fill) 100%);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: 32px 36px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.e-wal-hero::before { content: ""; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; background: rgba(255,210,63,.22); border-radius: 50%; pointer-events: none; }
.e-wal-hero::after  { content: ""; position: absolute; bottom: -100px; left: 28%; width: 220px; height: 220px; background: rgba(255,107,74,.20); border-radius: 50%; pointer-events: none; }
.e-wal-hero__body { position: relative; z-index: 1; }
.e-wal-hero__hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.75); padding: 5px 12px; background: rgba(255,255,255,.12); border-radius: 999px; border: 1px solid rgba(255,255,255,.18); }
.e-wal-hero__hint__dot { width: 6px; height: 6px; background: var(--color-sticker-yellow); border-radius: 50%; animation: e-pulse 2s ease-in-out infinite; }
.e-wal-hero__balance { font-family: var(--font-display); font-size: 64px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 16px 0 6px; font-variant-numeric: tabular-nums; }
.e-wal-hero__balance__cur { font-size: 28px; font-weight: 700; color: rgba(255,255,255,.85); margin-left: 6px; }
.e-wal-hero__cn { font-size: 13px; color: rgba(255,255,255,.65); font-family: var(--font-mono); }
.e-wal-hero__sub { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 14px; line-height: 1.5; max-width: 360px; }

.e-wal-hero__breakdown { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-xl); padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; min-width: 240px; backdrop-filter: blur(8px); }
.e-wal-hero__breakdown__row { display: flex; justify-content: space-between; font-size: 12px; }
.e-wal-hero__breakdown__k { color: rgba(255,255,255,.65); }
.e-wal-hero__breakdown__v { font-weight: 700; font-variant-numeric: tabular-nums; }
.e-wal-hero__breakdown__sep { height: 1px; background: rgba(255,255,255,.18); margin: 2px 0; }
.e-wal-hero__breakdown__row--total { font-family: var(--font-display); font-weight: 900; font-size: 13px; }
.e-wal-hero__breakdown__row--total .e-wal-hero__breakdown__v { color: var(--color-sticker-yellow); font-size: 15px; }

@media (max-width: 720px) {
  .e-wal-hero { grid-template-columns: 1fr; padding: 26px; }
  .e-wal-hero__balance { font-size: 48px; }
}

/* ───────── Quick action buttons row ───────── */
.e-wal-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
@media (max-width: 720px) { .e-wal-actions { grid-template-columns: repeat(2, 1fr); } }
.e-wal-act { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 18px; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); display: flex; align-items: center; gap: 12px; text-align: left; }
.e-wal-act:hover { border-color: var(--color-primary-fill); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.e-wal-act__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary-fill); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.e-wal-act--cta .e-wal-act__ic { background: var(--color-cta-soft); color: var(--color-cta); }
.e-wal-act--yellow .e-wal-act__ic { background: var(--color-sticker-yellow-soft); color: var(--color-sticker-yellow-fg); }
.e-wal-act--violet .e-wal-act__ic { background: var(--color-secondary-soft); color: var(--color-secondary); }
.e-wal-act__t { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--color-text); letter-spacing: -0.005em; }
.e-wal-act__s { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ───────── Amount chips row ───────── */
.e-amt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 540px) { .e-amt-grid { grid-template-columns: repeat(2, 1fr); } }
.e-amt {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 16px;
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 78px;
}
.e-amt:hover:not(.is-selected) { border-color: var(--color-text); transform: translateY(-1px); }
.e-amt.is-selected { background: linear-gradient(180deg, var(--color-primary-soft) 0%, #fff 80%); border-color: var(--color-primary-fill); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.e-amt__bonus { position: absolute; top: -8px; right: 12px; background: var(--color-cta); color: #fff; font-size: 10px; font-weight: 900; padding: 3px 8px; border-radius: 6px; transform: rotate(6deg); letter-spacing: 0.02em; white-space: nowrap; }
.e-amt__bonus--violet { background: var(--color-secondary); }
.e-amt__v {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.e-amt__cn { font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); white-space: nowrap; }
.e-amt.is-selected .e-amt__v { color: var(--color-primary-fill); }
.e-amt__hint { font-size: 11px; color: var(--color-primary-fill); font-weight: 700; width: 100%; margin-top: -2px; white-space: nowrap; }

/* ───────── Payment method picker ───────── */
.e-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .e-pay-grid { grid-template-columns: 1fr; } }
.e-pay {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  transition: border-color var(--duration-fast) var(--ease-out);
  position: relative;
}
.e-pay:hover:not(.is-selected) { border-color: var(--color-text); }
.e-pay.is-selected { border-color: var(--color-primary-fill); background: linear-gradient(180deg, var(--color-primary-soft) 0%, #fff 60%); }
.e-pay__ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 13px; color: #fff; flex-shrink: 0; letter-spacing: -0.02em; }
.e-pay__t { font-size: 14px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.e-pay__s { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.5; }
.e-pay__tag { font-family: var(--font-mono); font-size: 9px; padding: 1px 6px; border-radius: 4px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.e-pay__tag--rec { background: var(--color-primary-fill); color: #fff; }
.e-pay__tag--fast { background: var(--color-sticker-yellow); color: var(--color-sticker-yellow-fg); }
.e-pay__tag--bonus { background: var(--color-cta); color: #fff; }
.e-pay__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-border-strong); background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.e-pay.is-selected .e-pay__radio { border-color: var(--color-primary-fill); }
.e-pay.is-selected .e-pay__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary-fill); }
.e-pay__fee { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.e-pay__fee--free { color: var(--color-primary-fill); }

/* ───────── Order summary (right rail) ───────── */
.e-wal-summary { background: var(--color-surface); border-radius: var(--radius-xl); padding: 22px 24px; position: sticky; top: 84px; }
@media (max-width: 980px) { .e-wal-summary { position: static; } }
.e-wal-summary__h { font-family: var(--font-display); font-size: 15px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.005em; }
.e-wal-summary__row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; }
.e-wal-summary__row__k { color: var(--color-text-muted); }
.e-wal-summary__row__v { font-weight: 700; font-variant-numeric: tabular-nums; }
.e-wal-summary__row--bonus .e-wal-summary__row__v { color: var(--color-primary-fill); }
.e-wal-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 8px; border-top: 2px solid var(--color-text); }
.e-wal-summary__total__k { font-size: 13px; font-weight: 800; }
.e-wal-summary__total__v { font-family: var(--font-display); font-size: 26px; font-weight: 900; letter-spacing: -0.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.e-wal-summary__hint { font-size: 11px; color: var(--color-text-muted); margin-top: 14px; line-height: 1.5; }

/* ───────── Transactions table ───────── */
.e-tx-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.e-tx-tabs { display: flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; overflow-x: auto; }
.e-tx-tabs button { background: transparent; border: 0; padding: 7px 12px; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.e-tx-tabs button:hover:not(.is-active) { color: var(--color-text); }
.e-tx-tabs button.is-active { background: var(--color-text); color: #fff; }
.e-tx-tabs button .count { font-family: var(--font-mono); font-size: 10px; opacity: .7; margin-left: 4px; }

.e-tx-list { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; }
.e-tx-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.e-tx-row:last-child { border-bottom: 0; }
.e-tx-row:hover { background: var(--color-surface); }
.e-tx-row__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.e-tx-row__ic--in { background: var(--color-primary-soft); color: var(--color-primary-fill); }
.e-tx-row__ic--out { background: var(--color-surface); color: var(--color-text-muted); }
.e-tx-row__ic--bonus { background: var(--color-sticker-yellow-soft); color: var(--color-sticker-yellow-fg); }
.e-tx-row__ic--refund { background: var(--color-secondary-soft); color: var(--color-secondary); }
.e-tx-row__ic--pending { background: var(--color-warning-soft); color: var(--color-warning-foreground); }
.e-tx-row__t { font-size: 14px; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.e-tx-row__s { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; font-family: var(--font-mono); display: flex; gap: 10px; flex-wrap: wrap; }
.e-tx-row__s a { color: var(--color-primary-fill); }
.e-tx-row__amt { font-family: var(--font-display); font-size: 17px; font-weight: 900; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.e-tx-row__amt--in { color: var(--color-primary-fill); }
.e-tx-row__amt--out { color: var(--color-text); }
.e-tx-row__amt--pending { color: var(--color-warning-foreground); }
.e-tx-row__st { font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.e-tx-row__st--done { background: var(--color-primary-soft); color: var(--color-primary-fill); }
.e-tx-row__st--pending { background: var(--color-warning-soft); color: var(--color-warning-foreground); border: 1px solid rgba(255,162,0,.3); }
.e-tx-row__st--failed { background: var(--color-danger-soft); color: var(--color-danger); }

/* group header inside list */
.e-tx-day { padding: 10px 20px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

/* Coupons strip */
.e-coupons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .e-coupons { grid-template-columns: 1fr; } }
.e-coupon { position: relative; padding: 18px 20px; border-radius: 14px; overflow: hidden; color: #fff; display: flex; flex-direction: column; gap: 6px; }
.e-coupon::before, .e-coupon::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--color-surface); border-radius: 50%; top: 50%; transform: translateY(-50%); }
.e-coupon::before { left: -9px; }
.e-coupon::after { right: -9px; }
.e-coupon--ship { background: linear-gradient(135deg, #0BA888, #087A63); }
.e-coupon--off  { background: linear-gradient(135deg, #FF6B4A, #E54A2A); }
.e-coupon--bonus { background: linear-gradient(135deg, #6B4EFF, #5B3FE6); }
.e-coupon__v { font-family: var(--font-display); font-size: 26px; font-weight: 900; letter-spacing: -0.015em; line-height: 1; }
.e-coupon__t { font-size: 13px; font-weight: 700; line-height: 1.3; }
.e-coupon__s { font-size: 11px; opacity: 0.8; line-height: 1.4; }
.e-coupon__exp { font-family: var(--font-mono); font-size: 10px; opacity: 0.7; margin-top: 4px; letter-spacing: 0.04em; }