/* 视制 · 商业化前端样式（v3 · 令牌化重构）
 * 全量改用主题 CSS 变量（--p2/--p3/--bd/--tx/--mu/--amber/--rose/--ok/--red），
 * 深浅两种主题均可用；不再用「半透明白」做表面（浅色下会消失）。
 * 语义：主操作=主色 --rose；价值/余额/会员=琥珀 --amber；成功=--ok；错误=--red。 */

/* 「官方通道」是虚拟平台，没有 Key 可填 —— 隐藏其 API Key 输入框 */
#keyBlock-__official__ { display: none !important; }

/* ---------- A. 账号菜单里的钱包卡片 ---------- */
.sbz-card{
  margin:0 0 8px;padding:11px 12px;border-radius:var(--r3,10px);
  background:var(--p2);border:1px solid var(--bd);
}
.sbz-card-t{font-size:11px;color:var(--mu);display:flex;align-items:center;gap:6px;margin-bottom:2px}
.sbz-card-sub{font-size:11px;color:var(--mu);line-height:1.5;margin:4px 0 8px}
.sbz-vip{background:var(--amber);color:#1a1207;border-radius:4px;padding:0 5px;font-size:11px;font-weight:700}
.sbz-bal{display:flex;align-items:baseline;gap:4px}
.sbz-bal b{font-size:22px;font-weight:800;color:var(--amber);line-height:1.15}
.sbz-bal span{font-size:11px;color:var(--mu)}
.sbz-card-q{font-size:11px;color:var(--mu);margin-top:2px}
.sbz-card-btns{display:flex;gap:6px;margin-top:9px}
.sbz-btn{
  flex:1;padding:6px 8px;font-size:12px;border-radius:var(--r2,8px);cursor:pointer;
  border:1px solid var(--bd2);background:var(--p3);
  color:var(--tx);font-family:inherit;text-align:center;text-decoration:none;transition:.14s;
}
.sbz-btn:hover{border-color:var(--rose);color:var(--peach);background:var(--rose-a1)}
.sbz-btn-p{background:var(--rose);border-color:var(--rose);color:#fff;font-weight:700}
.sbz-btn-p:hover{background:var(--rose-h);border-color:var(--rose-h);color:#fff}
.sbz-w{width:100%;flex:none;margin-top:10px}

/* ---------- B. 用户中心弹窗 ---------- */
.sbz-mask{
  position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(3px);
}
.sbz-win{
  width:100%;max-width:720px;max-height:86vh;display:flex;flex-direction:column;
  background:var(--p1);color:var(--tx);
  border:1px solid var(--bd);border-radius:var(--r4,14px);overflow:hidden;
  box-shadow:var(--sh3,0 20px 60px rgba(0,0,0,.5));
  font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
.sbz-hd{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--bd);flex-shrink:0;
}
.sbz-hd-t{font-weight:700;font-size:14px;white-space:nowrap;color:var(--tx)}
.sbz-tabs{display:flex;gap:3px;flex:1;overflow-x:auto}
.sbz-tab{
  padding:5px 11px;font-size:12px;border-radius:var(--r2,8px);cursor:pointer;white-space:nowrap;
  border:0;background:transparent;color:var(--mu);font-family:inherit;transition:.14s;
}
.sbz-tab:hover{color:var(--tx);background:var(--p3)}
.sbz-tab.on{background:var(--rose-a2);color:var(--peach);font-weight:700}
.sbz-close{
  border:0;background:transparent;color:var(--mu);font-size:22px;line-height:1;
  cursor:pointer;padding:0 2px;flex-shrink:0;
}
.sbz-close:hover{color:var(--tx)}
.sbz-bd{padding:14px;overflow-y:auto;flex:1}

.sbz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.sbz-grid{grid-template-columns:1fr}}
.sbz-box{
  padding:13px;border-radius:var(--r3,10px);
  background:var(--p2);border:1px solid var(--bd);
}
.sbz-box-hero{
  background:var(--p2);
  border-color:var(--amber);
}
.sbz-hero-l{font-size:11px;color:var(--mu)}
.sbz-hero-n{font-size:34px;font-weight:800;color:var(--amber);line-height:1.1;margin:1px 0 3px}
.sbz-hero-s{font-size:11px;color:var(--mu)}
.sbz-kv{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px;color:var(--tx)}
.sbz-kv span{color:var(--mu)}
.sbz-mu{color:var(--mu);font-weight:400}
.sbz-ok{color:var(--ok)}
.sbz-note{
  font-size:11px;color:var(--mu);line-height:1.6;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--bd2);
}
.sbz-h4{font-size:12px;font-weight:700;margin:18px 0 8px;color:var(--tx)}
.sbz-h4:first-child{margin-top:0}

/* 商品卡 */
.sbz-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.sbz-plan{
  position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:11px;border-radius:var(--r3,10px);cursor:pointer;font-family:inherit;
  background:var(--p2);border:1.5px solid var(--bd);
  color:var(--tx);transition:.14s;
}
.sbz-plan:hover{border-color:var(--amber)}
.sbz-plan.on{border-color:var(--amber);background:var(--p3)}
.sbz-hot{
  position:absolute;top:-7px;right:8px;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;border-radius:6px;padding:1px 5px;
}
.sbz-plan-n{font-size:12.5px;font-weight:700;color:var(--tx)}
.sbz-plan-p{font-size:17px;font-weight:800;color:var(--amber)}
.sbz-plan-p s{font-size:11px;font-weight:400;color:var(--mu)}
.sbz-plan-d{font-size:11px;color:var(--mu);line-height:1.45}

/* 支付方式 */
.sbz-gws{display:flex;gap:7px;flex-wrap:wrap}
.sbz-gw{
  padding:6px 14px;font-size:12px;border-radius:var(--r2,8px);cursor:pointer;font-family:inherit;
  background:var(--p2);border:1.5px solid var(--bd);color:var(--tx);transition:.14s;
}
.sbz-gw.on{border-color:var(--ok);background:var(--ok-a,rgba(47,207,142,.12));color:var(--ok);font-weight:700}
.sbz-payzone{margin-top:12px}
.sbz-payhd{text-align:center;font-size:13px;margin-bottom:9px;color:var(--tx)}
.sbz-payhd b{color:var(--amber);font-size:17px}
.sbz-qr{display:flex;justify-content:center}
.sbz-qr img,.sbz-qr canvas{width:200px;height:200px;background:#fff;padding:8px;border-radius:10px}
.sbz-paytip{text-align:center;font-size:12px;color:var(--mu);margin-top:8px}
.sbz-paytip.ok{color:var(--ok);font-weight:700;font-size:13px}

/* 表格 */
.sbz-tb{width:100%;border-collapse:collapse;font-size:12px;color:var(--tx)}
.sbz-tb th{
  text-align:left;padding:7px 8px;font-size:11px;font-weight:600;
  color:var(--mu);border-bottom:1px solid var(--bd);
}
.sbz-tb td{padding:8px;border-bottom:1px solid var(--bd)}
.sbz-tb tr:last-child td{border-bottom:0}

.sbz-empty{padding:34px 14px;text-align:center;color:var(--mu);font-size:12.5px;line-height:1.8}
.sbz-empty a{color:var(--amber);font-weight:700}
.sbz-empty span{font-size:11px;opacity:.75}
.sbz-err{padding:14px;text-align:center;color:var(--red);font-size:12px}

/* ---------- C. 配音的官方通道开关 ---------- */
.sbz-tts-row{
  display:flex;align-items:center;gap:6px;margin-top:7px;
  font-size:11px;color:var(--mu);cursor:pointer;user-select:none;
}
.sbz-tts-row input{margin:0;cursor:pointer;accent-color:var(--rose)}
.sbz-tts-row em{font-style:normal;opacity:.65}

/* ---------- 素材库：会员专属分类的开通引导 ---------- */
.mat-lock-in.mat-lock-vip{
  background:var(--p2);
  border-color:var(--amber);
}
.mat-lock-btn.mat-lock-vipbtn{
  background:var(--rose);color:#fff;border:0;font-weight:700;cursor:pointer;
}
.mat-lock-btn.mat-lock-vipbtn:hover{background:var(--rose-h)}
/* 消费记录里的「已退回」 */
.sbz-rf{color:var(--amber);font-weight:600}

/* ---------- 签到 / 兑换码 ---------- */
.sbz-box.sbz-row2{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sbz-box.sbz-row2 .sbz-btn{flex:none;min-width:120px}
.sbz-redeem{display:flex;gap:7px;margin-top:6px}
.sbz-redeem input{
  flex:1;padding:7px 10px;border-radius:var(--r2,8px);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--p3);border:1px solid var(--bd2);color:var(--tx);
}
.sbz-redeem input:focus{outline:none;border-color:var(--rose);box-shadow:var(--focus)}
.sbz-redeem .sbz-btn{flex:none;min-width:76px}
.sbz-redeem-msg{font-size:12px;margin-top:6px;min-height:14px;color:var(--mu)}
.sbz-redeem-msg.ok{color:var(--ok);font-weight:600}
.sbz-redeem-msg.err{color:var(--red)}

/* ---------- 邀请好友 / 分享得积分 ---------- */
.sbz-share{display:flex;gap:7px;margin-top:8px}
.sbz-share input{
  flex:1;min-width:0;padding:7px 10px;border-radius:var(--r2,8px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--p3);border:1px solid var(--bd2);color:var(--tx);
}
.sbz-share input:focus{outline:none;border-color:var(--rose);box-shadow:var(--focus)}
.sbz-share .sbz-btn{flex:none;min-width:74px}

.sbz-stats{display:flex;gap:8px;margin-top:10px}
@media(max-width:560px){.sbz-stats{flex-wrap:wrap}.sbz-stat{flex:1 1 42%}}
.sbz-stat{
  flex:1;text-align:center;padding:10px 6px;border-radius:var(--r3,10px);
  background:var(--p2);border:1px solid var(--bd);
}
.sbz-stat b{display:block;font-size:19px;font-weight:800;line-height:1.3;color:var(--amber)}
.sbz-stat span{display:block;font-size:11px;color:var(--mu);margin-top:2px}

.sbz-rule{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}
.sbz-rule:last-child{border-bottom:0;padding-bottom:0}
.sbz-rule-i{font-size:15px;width:20px;text-align:center;flex:0 0 auto}
.sbz-rule-t{flex:1;font-size:12.5px;line-height:1.45;color:var(--tx)}
.sbz-rule-t em{display:block;font-style:normal;font-size:11px;color:var(--mu);margin-top:1px}
.sbz-rule-v{white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--amber)}

/* 官方通道「本次消耗 N 积分」徽标 */
.spzz-cost-badge{margin-top:6px;font-size:11px;line-height:1.6;padding:5px 8px;border-radius:var(--r1,6px);
  border:1px solid var(--bd);background:var(--p2);color:var(--mu);letter-spacing:.2px}
.spzz-cost-badge b{color:var(--peach);font-weight:800}
.spzz-cost-badge.ok{border-color:var(--ok);background:var(--p2);color:var(--ok)}
.spzz-cost-badge.ok b{color:var(--ok)}
.spzz-cost-badge.warn{border-color:var(--gold);background:var(--p2);color:var(--gold)}
.spzz-cost-badge.err{border-color:var(--red);background:var(--p2);color:var(--red)}
.spzz-cost-badge.err b{color:var(--red)}
.spzz-cost-badge a{color:inherit;text-decoration:underline;cursor:pointer;font-weight:700}