/* 费用中心：余额 + 充值 + 明细。沿用 app.css 的颜色变量；控件、表格、标签、提示用 ui.css */
.bc { padding-bottom: 48px; }
.bc-sub { color: var(--muted); font-size: var(--fs-sm); }
.bc-foot { margin: 0; color: var(--faint); font-size: var(--fs-xs); line-height: 1.6; }

/* 余额 + 本月 */
.bc-top { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: var(--sp-4); }
.bc-balance {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: var(--sp-4); row-gap: var(--sp-1);
  padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel);
}
.bc-k { grid-column: 1; color: var(--muted); font-size: var(--fs-sm); }
.bc-big { grid-column: 1; font-size: 36px; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* 余额大数字，无对应 --fs-* 档 */
.bc-balance .bc-sub { grid-column: 1; }
.bc-balance .bc-cta { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.bc-cta { padding: 8px 20px; }

/* 顶部三张统计卡：ui.css 的 .stats */

/* 充值 */
.bc-recharge { padding: var(--sp-5); border: 1px solid var(--accent-dim); border-radius: var(--radius-lg); background: var(--panel); display: flex; flex-direction: column; gap: var(--sp-4); }
.bc-recharge-h { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.bc-recharge h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.bc-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.bc-chip {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.bc-chip b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.bc-chip span { color: var(--muted); font-size: var(--fs-xs); }
.bc-chip:hover { border-color: var(--line-strong); }
.bc-chip.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.bc-yuan { display: flex; align-items: center; gap: var(--sp-1); color: var(--text) !important; font-size: var(--fs-lg) !important; font-weight: 600; }
.bc-yuan input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.bc-pay { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.bc-pay-sum { margin: 0; color: var(--muted); }
.bc-pay-sum b { color: var(--text); font-variant-numeric: tabular-nums; }

/* 明细（在 .card 里） */
.bc-detail-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; min-height: 52px; padding: 0 var(--sp-5); box-shadow: inset 0 -1px 0 var(--line); }
.bc-detail-h .tabs { align-self: stretch; box-shadow: none; }
.bc-detail-h .tabs > button { padding: 0; min-height: 52px; }
.bc-tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.bc-month { width: 160px; height: var(--ctl-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.card > .bc-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); }
.bc-plus { color: var(--ok); }
.bc-skel { height: 160px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--line); }

@media (max-width: 760px) {
  .bc-top { grid-template-columns: 1fr; }
  .bc-detail-h { padding: 0 var(--sp-4); }
  .bc-chips { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .bc-chip { transition: none; } }
.bc-yuan input::-webkit-outer-spin-button, .bc-yuan input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bc-yuan input { -moz-appearance: textfield; }

/* 控制台：成员管理 */
.bc-over { color: var(--fail); font-weight: 600; }
.bc-members-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.bc-members-h p { margin: 0; font-size: var(--fs-sm); }
.bc-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunk); }
.bc-form .check { grid-column: 1 / -1; }
.bc-form .actions { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .bc-form { grid-template-columns: 1fr; }
  .bc-members-h { flex-direction: column; align-items: flex-start; }
}
.bc-wait { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-md); }