@charset "UTF-8";
/* ==========================================================================
   充值中心专用样式（纯 CSS2：float / inline-block / text-align）
   --------------------------------------------------------------------------
   按兼容模式编写：不使用 display:flex / display:grid / 媒体查询里的布局 /
   calc() / CSS 变量。现代浏览器与 360 兼容模式渲染完全一致。
   加载顺序：home.css → site.css → recharge.css → compat.css
   --------------------------------------------------------------------------
   旧站这一页的横向排布全部来自 flex / grid + gap，这里逐块换成
   「float 栅格 + inline-block 同行 + margin 模拟 gap」：
     gap-1=4px  gap-2=8px  gap-3=12px  gap-4=16px  gap-6=24px
   列数：旧站 VIP 是 1(sm 起 3) 列、档位是 2(sm 起 3) 列；这里没有媒体查询，
   统一按桌面 3 列渲染（与 site.css 里 gr-grid-3 的老内核兜底列数一致）。
   宽度百分比按「3 列 + 两处 ~16px 间隙」标定（32.05% + 1.86%），
   在 896/814 宽的容器里与旧站 gap-4 的实测位置相差不到 1px。
   ========================================================================== */

/* ---- 通用 ----
   注意：home.css 的 preflight 把 svg 设成了 display:block（旧站靠 flex 排版，
   svg 是不是块级都无所谓），CSS2 里图标要和文字排在同一行、或靠 text-align +
   line-height 在色块里居中，凡是这种图标都要显式改回 inline-block。
   行内混排的还要上提 1px：vertical-align: middle 是按「基线 + 半个 x 高度」对齐的
   （拉丁字母的视觉中心），中文方块字比 x 高度高得多，整块图标会低 1px 左右。
   完整说明见 profile.css 顶部那一组，本页同一处理。 */
.rc-clear:after { content: ""; display: block; clear: both; }
.rc-ib { display: inline-block; vertical-align: middle; }
svg.rc-ib,                   /* 类名直接写在 svg 上（如 .rc-vip-name 里的皇冠） */
.rc-ib svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; }

/* ==========================================================================
   1. 拦截卡（青少年模式 / 未登录·未实名）
   --------------------------------------------------------------------------
   旧站是 main 上 flex + items-center + justify-center（视口内居中）。
   CSS2 没有「按内容高度垂直居中」的写法，这里与个人中心 pf-gate-wrap 一致：
   上留白 72px + text-align: center 里的 inline-block 卡片。
   ========================================================================== */
.rc-gate-wrap { text-align: center; padding: 72px 16px 48px; }
.rc-gate-card {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 40px;
  max-width: 384px;             /* max-w-sm */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
/* 80px 圆底色块里的图标：用 line-height 垂直居中（旧站是 flex items-center）。
   font-size: 0 把字体度量从行盒里去掉：vertical-align: middle 是拿「基线 + 半个
   x-height」对齐的，字号留着图标会落在正中偏下 2-3px。这块只装图标，没有文字。 */
.rc-gate-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
  font-size: 0;
}
.rc-gate-icon svg { display: inline-block; vertical-align: middle; }
.rc-gate-title { margin-bottom: 8px; }          /* mb-2 */
.rc-gate-desc { margin-bottom: 24px; }          /* mb-6 */
/* 按钮行：font-size: 0 消掉 inline-block 之间的换行空白，再用 6px 左右外边距拼出 gap-3 */
.rc-gate-btns { text-align: center; font-size: 0; }
.rc-gate-btns > * { display: inline-block; vertical-align: middle; margin: 0 6px; }

/* ==========================================================================
   2. 页头（白底标题条）
   ========================================================================== */
.rc-head-inner { max-width: 896px; margin: 0 auto; padding: 16px; }
.rc-head-row { display: block; }                /* 行盒：icon + h1 同行 */
.rc-head-icon { display: inline-block; vertical-align: middle; position: relative; top: -1px; }
.rc-head-title { display: inline-block; vertical-align: middle; margin-left: 12px; }

/* ==========================================================================
   3. 主体容器 + 区块
   ========================================================================== */
.rc-body { max-width: 896px; margin: 0 auto; padding: 32px 16px; }
/* 旧站 space-y-8 = 区块之间 32px；上面的 VIP 栅格每张卡自带 16px 下边距，
   所以区块之间的外边距只补 16px，视觉间距仍是 32px。 */
.rc-section { display: block; }
.rc-section + .rc-section { margin-top: 16px; }

/* 区块标题行（icon + 标题）：旧站 flex items-center gap-2 */
.rc-sec-head { display: block; margin-bottom: 16px; line-height: 28px; }
.rc-sec-head .rc-sec-icon { display: inline-block; vertical-align: middle; position: relative; top: -1px; }
.rc-sec-head .rc-sec-title { display: inline-block; vertical-align: middle; margin-left: 8px; }

/* ==========================================================================
   4. VIP 栅格（3 列，原 gap-4 = 16px）
   ========================================================================== */
.rc-vip-grid { display: block; }
.rc-vip-grid:after { content: ""; display: block; clear: both; }
.rc-vip-grid > * {
  float: left;
  width: 32.05%;
  margin: 0 1.86% 16px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.rc-vip-grid > *:nth-child(3n) { margin-right: 0; }
.rc-vip-grid > *:nth-child(3n+1) { clear: left; }

/* 卡片内部（全部是居中块，把旧站的 flex 行拆成 inline-block 对） */
.rc-vip-head { margin-bottom: 16px; }           /* mb-4 */
.rc-vip-name { margin-bottom: 8px; }            /* mb-2：crown + VIP月卡 同行，gap-2 */
.rc-vip-name .rc-name-txt { margin-left: 8px; }
.rc-vip-price { display: block; }
.rc-vip-price .rc-price-old { margin-left: 4px; }  /* gap-1 */

/* 徽标（旧站 absolute left-1/2 -translate-x-1/2）：
   没有 transform 的 CSS2 用「铺满一行 + 居中 + inline-block 内层」实现精确居中 */
.rc-badge-wrap { position: absolute; left: 0; right: 0; top: -10px; text-align: center; }
.rc-badge-wrap .rc-badge { display: inline-block; vertical-align: top; }

/* 权益列表：旧站 space-y-1.5（6px）+ mb-4（16px）。
   每行都带 6px 下边距，所以容器只补 10px，合计仍是 16px。 */
.rc-features { margin-bottom: 10px; }
.rc-feature { margin-bottom: 6px; }
.rc-feature svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 8px; }   /* gap-2，上提见顶部说明 */

/* 开通按钮：块级铺满（原 w-full），文字居中 */
.rc-vip-card .gr-buy-vip { display: block; width: 100%; }

/* ==========================================================================
   5. 金币 / 钻石 Tab（原 flex gap-1 = 4px）
   ========================================================================== */
.rc-tabs { display: block; margin-bottom: 16px; }   /* mb-4 */
.rc-tabs:after { content: ""; display: block; clear: both; }
/* 浮动按钮是 shrink-to-fit：Chrome 按 min-content 算宽度会把图标和文字拆成两行，
   nowrap 让它按一行内容撑开（等于旧站 flex 行内的自然宽度） */
.rc-tab { display: block; float: left; margin-right: 4px; white-space: nowrap; }
.rc-tab svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 8px; }       /* gap-2，上提见顶部说明 */

/* ==========================================================================
   6. 档位栅格（3 列，原 grid gap-3 = 12px + mb-6 = 24px）
   --------------------------------------------------------------------------
   浮动方案里每一行（含最后一行）都带 12px 下边距，所以容器自身只补 12px，
   到下面的「支付方式」正好 24px。档位固定 6 个（金币/钻石各 6），行数不影响。
   ========================================================================== */
.rc-tiers { display: block; margin-bottom: 12px; }
.rc-tiers:after { content: ""; display: block; clear: both; }
.rc-tiers > * {
  float: left;
  width: 32.05%;
  margin: 0 1.86% 12px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.rc-tiers > *:nth-child(3n) { margin-right: 0; }
.rc-tiers > *:nth-child(3n+1) { clear: left; }
/* 选中角标里的对勾（原 flex items-center justify-center）：
   font-size: 0 同上，去掉字体度量后 line-height 居中才是精确的 */
.rc-tier-check { line-height: 20px; text-align: center; font-size: 0; }
.rc-tier-check svg { display: inline-block; vertical-align: middle; }

/* ==========================================================================
   7. 支付方式（原 flex gap-3 = 12px，卡片本身也是 flex 行）
   ========================================================================== */
.rc-pay-methods { display: block; }
.rc-pay-methods:after { content: ""; display: block; clear: both; }
.rc-pay-method { display: block; float: left; white-space: nowrap; }
.rc-pay-method > svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 12px; }   /* gap-3 */
.rc-pay-text { display: inline-block; vertical-align: middle; text-align: left; }
/* 支付方式卡右端的对勾：类名是 gr-pay-check（页面与 page-recharge.js 都用它），
   原来这里写成 .rc-pay-check，选择器对不上元素，div 保持 preflight 的 display:block
   —— 块级子元素必然另起一行，整个按钮被撑成两行、宽度也塌了。
   图标本身不写在这里：它对齐的是「名称 + 说明」两行文字块的中线（旧站 items-center），
   不是某一行文字，所以不需要 -1px 那种上提。 */
.rc-pay-check,
.gr-pay-check { display: inline-block; vertical-align: middle; margin-left: 12px; }  /* gap-3 */

/* ==========================================================================
   8. 底部支付条（原 justify-between + items-center）
   --------------------------------------------------------------------------
   左右两个浮动块无法垂直居中：提示行给一个与按钮等高（py-3 12*2 + 行高 20 = 44px）
   的 line-height，效果与 items-center 一致。
   ========================================================================== */
.rc-paybar { display: block; margin-top: 24px; }    /* mt-6 */
.rc-paybar:after { content: ""; display: block; clear: both; }
.rc-paybar-note { float: left; line-height: 44px; }
.rc-paybar-note svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 4px; }   /* gap-1 */
.rc-paybar .gr-pay-btn { float: right; }

/* ==========================================================================
   9. 右下角 toast（脚本按 .gr-toast 找元素，只切 display）
   --------------------------------------------------------------------------
   旧站 fixed + left-1/2 + -translate-x-1/2：CSS2 用「absolute 盒 left:0/right:0
   + margin auto」把收缩到内容宽的盒子左右均分。
   ========================================================================== */
.rc-toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 32px;
  width: auto;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  z-index: 100;
  text-align: center;
}

/* ==========================================================================
   10. 渐变兜底
   --------------------------------------------------------------------------
   渐变类名（bg-gradient-to-r from-X to-Y）沿用旧站写法，这里只补一层
   background-color：不认 linear-gradient 的内核（老 IE / 兼容模式）会露出纯色，
   认得渐变的浏览器里渐变图完整覆盖底色，视觉不变。
   ========================================================================== */
.bg-gradient-to-r.from-amber-500.to-orange-500 { background-color: #fe9a00; }
.bg-gradient-to-r.from-primary-500.to-purple-500 { background-color: #f97316; }