/* ============================================================
   MEMBERSHIP —— 会员订阅 / 微信支付 / 运营后台
   复用 style.css 的 CSS 变量，独立文件便于维护
   ============================================================ */

.mb-wrap{display:flex;flex-direction:column;gap:14px}
.mb-loading{padding:40px;text-align:center;color:var(--text-4);font-size:13px}
.mb-empty{padding:28px;text-align:center;color:var(--text-4);font-size:13px}
.data-table{width:100%;border-collapse:collapse}

/* ── 状态大卡 ── */
.mb-hero{border-radius:var(--r-card);padding:20px 22px;color:#fff;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(1,77,178,.18)}
.mb-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08)}
.mb-hero.active{background:linear-gradient(135deg,#014DB2,#0a6ee0)}
.mb-hero.trial{background:linear-gradient(135deg,#0a7d5a,#10B981)}
.mb-hero.expired{background:linear-gradient(135deg,#4b5563,#6B7280);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.mb-hero-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.mb-hero-plan{font-size:22px;font-weight:700;letter-spacing:.5px}
.mb-hero-state{font-size:12px;opacity:.85;margin-top:3px}
.mb-hero-badge{font-size:32px;line-height:1}
.mb-hero-bottom{margin-top:18px;display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1;flex-wrap:wrap;gap:6px}
.mb-hero-exp{font-size:13px;opacity:.9}
.mb-hero-exp b{font-size:15px;font-weight:600}
.mb-hero-days{font-size:13px;opacity:.9}
.mb-hero-days b{font-size:20px;font-weight:700}
.mb-hero-warn{margin-top:14px;background:rgba(255,255,255,.16);border-radius:8px;padding:8px 11px;font-size:12px;position:relative;z-index:1}

/* ── 购买区 ── */
.mb-buybox{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mb-buy-left{flex:1;min-width:180px}
.mb-buy-name{font-size:16px;font-weight:700;color:var(--text-1)}
.mb-buy-sub{font-size:12px;color:var(--text-3);margin-top:3px}
.mb-buy-price{margin-top:10px;color:var(--primary)}
.mb-buy-price b{font-size:32px;font-weight:700;line-height:1}
.mb-buy-price span{font-size:13px;color:var(--text-3);margin-left:2px}
.mb-buy-right{text-align:center;min-width:150px}
.mb-buy-note{font-size:11px;color:var(--text-4);margin-top:7px}
.mb-emp-tip{flex-direction:column;text-align:center;padding:26px}
.mb-mock-tip{background:var(--warning-bg);border:1px solid #FDE68A;border-radius:var(--r-card);padding:10px 13px;font-size:12px;color:#92400E;line-height:1.6}

/* ── 权益对比 ── */
.mb-compare{padding:0;overflow:hidden}
.mb-compare-hd,.mb-compare-row{display:flex;align-items:center;padding:11px 16px;font-size:13px}
.mb-compare-hd{background:var(--bg-input);font-weight:600;color:var(--text-2);border-bottom:1px solid var(--border)}
.mb-compare-row{border-bottom:1px solid #F3F4F6;color:var(--text-2)}
.mb-compare-row:last-child{border-bottom:none}
.mb-compare .c1{flex:1;min-width:0}
.mb-compare .c2,.mb-compare .c3{width:78px;text-align:center;flex-shrink:0}
.mb-compare .c3{color:var(--primary);font-weight:600}
.mb-yes{color:var(--success);font-weight:700;font-size:15px}
.mb-no{color:var(--text-4)}

/* ── 记录区 ── */
.mb-rec{padding:0;overflow:hidden}
.mb-rec-hd{padding:13px 16px;font-size:14px;font-weight:600;color:var(--text-1);border-bottom:1px solid var(--border)}
.mb-tag{display:inline-flex;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:var(--bg-hover);color:var(--text-3)}
.mb-tag.ok{background:var(--success-bg);color:var(--success)}
.mb-tag.wait{background:var(--warning-bg);color:var(--warning)}
.mb-tag.no{background:var(--danger-bg);color:var(--danger)}

/* ── 弹窗 ── */
#mbUpgradeModal .modal-card,#mbRenewModal .modal-card,
#mbPaidModal .modal-card,#mbWxBlockModal .modal-card{position:relative;overflow:hidden;border-radius:16px}
.mb-up-hd{background:linear-gradient(135deg,#014DB2,#0a6ee0);color:#fff;padding:26px 24px 22px;text-align:center}
.mb-up-hd-warn{background:linear-gradient(135deg,#D97706,#F59E0B)}
.mb-up-hd-ok{background:linear-gradient(135deg,#059669,#10B981)}
.mb-up-icon{font-size:38px;line-height:1;margin-bottom:10px}
.mb-up-title{font-size:17px;font-weight:700}
.mb-up-sub{font-size:12.5px;opacity:.88;margin-top:6px;line-height:1.6}
.mb-up-close{position:absolute;top:10px;right:12px;color:#fff;opacity:.8;background:none;border:none;font-size:24px;cursor:pointer;line-height:1}
.mb-up-bd{padding:20px 22px 22px}
.mb-up-list{margin-bottom:18px}
.mb-up-li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;color:var(--text-2);border-bottom:1px dashed #EEF0F3}
.mb-up-li:last-child{border-bottom:none}
.mb-up-li span{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.mb-up-price{text-align:center;margin-bottom:16px;color:var(--primary)}
.mb-up-price b{font-size:34px;font-weight:700}
.mb-up-price span{font-size:13px;color:var(--text-3)}
.mb-up-tip{font-size:11.5px;color:var(--text-4);text-align:center;margin-top:12px;line-height:1.6}
.mb-paid-exp{text-align:center;font-size:13px;color:var(--text-3);line-height:1.9;margin-bottom:18px}
.mb-paid-exp b{font-size:19px;color:var(--primary);font-weight:700}
.mb-btn-primary{width:100%;background:var(--primary);color:#fff;border:none;border-radius:10px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.mb-btn-primary:hover{opacity:.88}
.mb-btn-primary:disabled{opacity:.55;cursor:not-allowed}
.mb-btn-ghost{width:100%;background:var(--bg-hover);color:var(--text-2);border:none;border-radius:10px;padding:11px;font-size:13.5px;font-weight:500;cursor:pointer;font-family:var(--font);margin-top:9px}
.mb-btn-ghost:hover{background:var(--border)}

/* ── 侧边栏徽标 ── */
.mb-nav-badge{margin-left:auto;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;line-height:1.4}
.mb-nav-badge.ok{background:rgba(255,255,255,.22);color:#fff}
.mb-nav-badge.warn{background:var(--warning);color:#fff}
.mb-nav-badge.off{background:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
.nav-item.active .mb-nav-badge.ok{background:var(--primary-light);color:var(--primary)}
.nav-item.active .mb-nav-badge.off{background:var(--bg-hover);color:var(--text-3)}

/* ── 运营后台 ── */
.mb-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.mb-tab{background:#fff;border:1px solid var(--border);border-radius:var(--r-btn);padding:8px 15px;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;font-family:var(--font)}
.mb-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.mb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.mb-kpi{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:16px}
.mb-kpi .v{font-size:22px;font-weight:700;color:var(--primary);line-height:1.2}
.mb-kpi .l{font-size:12px;color:var(--text-3);margin-top:5px}
.mb-filter{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.mb-input{height:38px;border:1px solid var(--border);border-radius:var(--r-input);padding:0 12px;font-size:14px;color:var(--text-1);background:#fff;outline:none;font-family:var(--font);width:100%}
.mb-input:focus{border-color:var(--primary)}
.mb-filter .mb-input{flex:1;min-width:150px}
.mb-chip{background:#fff;border:1px solid var(--border);border-radius:var(--r-chip);padding:6px 13px;font-size:12.5px;color:var(--text-2);cursor:pointer;font-family:var(--font)}
.mb-chip.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary);font-weight:600}
.mb-quick{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.mb-mini-btn{background:var(--primary-light);color:var(--primary);border:none;border-radius:var(--r-chip);padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap}
.mb-mini-btn:hover{background:#DCE8FF}

@media(max-width:768px){
  .mb-hero{padding:18px}
  .mb-hero-plan{font-size:19px}
  .mb-buybox{flex-direction:column;align-items:stretch}
  .mb-buy-right{min-width:0}
  .mb-compare .c2,.mb-compare .c3{width:60px}
  .mb-compare-hd,.mb-compare-row{padding:10px 12px;font-size:12.5px}
  .mb-up-bd{padding:18px}
  .mb-kpi .v{font-size:19px}
  .mb-tab{padding:7px 12px;font-size:12.5px}
}