/* bn-pay.css — 充值套餐/支付页样式（复用控制台配色） */
.pay-wrap { max-width: 1160px; margin: 0 auto; padding: 28px 20px 60px; }
.pay-hd { text-align: center; margin-bottom: 26px; }
.pay-hd h2 { font-size: 26px; color: #1b3a6b; margin: 0 0 8px; }
.pay-hd p { color: #7b8794; font-size: 14px; margin: 0; }

.pay-bal {
	display: flex; gap: 14px; flex-wrap: wrap;
	background: #f4f7fc; border: 1px solid #e2e9f5; border-radius: 10px;
	padding: 14px 18px; margin-bottom: 22px;
}
.pay-bal span { color: #5b6b82; font-size: 14px; }
.pay-bal b { color: #1b3a6b; font-size: 18px; margin-left: 6px; }

.pay-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}
.pay-card {
	position: relative; background: #fff; border: 1px solid #e2e9f5;
	border-radius: 12px; padding: 22px 18px 18px; text-align: center;
	transition: .2s; box-shadow: 0 2px 10px rgba(27,58,107,.05);
}
.pay-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27,58,107,.12); }
.pay-card.on { border-color: #1b6fc4; box-shadow: 0 8px 24px rgba(27,111,196,.18); }
.pay-tag {
	position: absolute; top: -1px; right: -1px; background: #ff7a00; color: #fff;
	font-size: 12px; padding: 3px 10px; border-radius: 0 12px 0 12px;
}
.pay-card h4 { margin: 4px 0 12px; font-size: 17px; color: #1b3a6b; font-weight: 600; }
.pay-price { margin-bottom: 14px; }
.pay-price em { font-size: 30px; color: #ff7a00; font-style: normal; font-weight: 700; }
.pay-price span { color: #98a4b3; font-size: 13px; }
.pay-feat { list-style: none; padding: 0; margin: 0 0 18px; text-align: left; }
.pay-feat li {
	font-size: 13px; color: #5b6b82; padding: 7px 0;
	border-bottom: 1px dashed #eef2f8;
}
.pay-feat li:last-child { border-bottom: 0; }
.pay-feat b { color: #1b3a6b; }
.pay-feat .pay-note { color: #98a4b3; font-size: 12px; border-bottom: 0; }
.pay-buy {
	display: block; width: 100%; height: 40px; line-height: 40px; padding: 0;
	border: 0; border-radius: 20px; background: #1b6fc4; color: #fff;
	font-size: 15px; cursor: pointer; transition: .2s;
}
.pay-buy:hover { background: #ff7a00; }
.pay-card.on .pay-buy { background: #ff7a00; }
.pay-card.on .pay-buy:hover { background: #e06c00; }

.pay-loading { text-align: center; color: #98a4b3; padding: 40px 0; font-size: 14px; }
.pay-empty { text-align: center; color: #98a4b3; padding: 30px 0; }

.pay-result { max-width: 560px; margin: 40px auto; text-align: center;
	background: #fff; border: 1px solid #e2e9f5; border-radius: 12px; padding: 34px 24px; }
.pay-result h4 { font-size: 22px; margin: 0 0 14px; }
.pay-result.ok h4 { color: #1b9e5a; }
.pay-result.bad h4 { color: #d9534f; }
.pay-result p { color: #5b6b82; font-size: 14px; margin: 8px 0; }
.pay-result b { color: #1b3a6b; }

.bn-mask {
	position: fixed; inset: 0; background: rgba(16,28,48,.42); z-index: 2147483000;
	display: flex; align-items: center; justify-content: center;
}
.bn-mask-box {
	background: #fff; border-radius: 10px; padding: 18px 22px; min-width: 180px;
	text-align: center; font-size: 14px; color: #1b3a6b;
	box-shadow: 0 12px 32px rgba(0,0,0,.22);
}