/* ============================================================
 * css/screens/recharge.css — 充值页 + 积分商店（js/screens/recharge.js，rc- 前缀）
 * 归属：pay 组。只写 .rc-* 与 .rc-modal 作用域内的样式，绝不改动全局类。
 *
 * 版面口径：#screen 448×780，本页 .rc-root 撑满；.rc-tabwrap 固定在顶（tab-wood 约 56px），
 *   余下的都给 .rc-body 滚动。左右统一 10px 留白（内容宽 428），
 *   **所有可点按钮实高 ≥ 44px**（theme 的 .btn 默认 42、.btn-sm 只有 30，本文件按需抬高）。
 * 色板全部走 theme.css 的变量，不另起一套颜色。
 * ============================================================ */

.rc-root { position: relative; width: 448px; height: 100%; display: flex; flex-direction: column;
  background: var(--bg-paper); overflow: hidden; }
.rc-tabwrap { flex: none; background: var(--bg-wood-dark); }
.rc-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 0 16px; -webkit-overflow-scrolling: touch; }
.rc-body::-webkit-scrollbar { width: 0; }

/* ---------- 断网 / 未登记名帖的如实提示（不假装能充） ---------- */
.rc-off { margin: 0 10px 8px; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; line-height: 1.5;
  color: #ffe9c0; background: linear-gradient(180deg, #7a3a12, #5a2708);
  border: 1px solid #f2c245; box-shadow: inset 0 1px 0 rgba(255, 225, 160, .35); }
.rc-off .btn { margin-top: 6px; height: 44px; min-width: 100px; }

/* ---------- 顶部三格：积分 / 累计充值 / 倒计时 ---------- */
.rc-head { display: flex; gap: 6px; margin: 0 10px 8px; }
.rc-hi { flex: 1 1 0; min-width: 0; height: 62px; border-radius: 8px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--tex-paper), linear-gradient(180deg, #f7ecd0, #e2cb95);
  border: 2px solid var(--wood); box-shadow: inset 0 1px 0 #fff8e0, 0 2px 3px rgba(0, 0, 0, .28); }
.rc-hi i { position: absolute; left: 6px; top: 6px; opacity: .9; line-height: 0; }
.rc-hi i svg { width: 26px; height: 26px; }
.rc-hi b { font-family: var(--font-body); font-size: 19px; font-weight: 700; color: #7a1e12; line-height: 1.1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.rc-hi small { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.rc-cdbox b { font-size: 17px; letter-spacing: .5px; color: #8a2410; }

/* ---------- 活动横幅 ---------- */
.rc-banner { position: relative; height: 80px; margin: 0 10px 10px; border-radius: 8px; overflow: hidden;
  background: #4a2410 center 30% / cover no-repeat;
  border: 2px solid var(--gold-dark); box-shadow: inset 0 0 0 1px rgba(255, 230, 170, .35), 0 2px 4px rgba(0, 0, 0, .35); }
.rc-bmask { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 8, 2, .8) 0%, rgba(20, 8, 2, .35) 55%, transparent 100%); }
.rc-btxt { position: absolute; left: 10px; top: 0; bottom: 0; right: 96px; display: flex; flex-direction: column; justify-content: center; }
.rc-btxt b { font-family: var(--font-brush); font-size: 24px; letter-spacing: 2px; color: #ffe9a3; text-shadow: var(--stroke-dark), 0 2px 3px rgba(0, 0, 0, .7); }
.rc-btxt small { font-size: 11.5px; color: #f0dcb4; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-bover { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal;
  font-size: 13px; color: #fff; padding: 5px 10px; border-radius: 5px; background: rgba(0, 0, 0, .55); border: 1px solid #c9a96e; }

/* ---------- 分节 ---------- */
.rc-sec { margin: 0 10px 12px; padding: 8px 8px 10px; border-radius: 8px;
  background: var(--tex-paper), linear-gradient(180deg, rgba(255, 250, 232, .55), rgba(230, 208, 160, .5));
  border: 1px solid var(--paper-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 240, .6); }
.rc-st { font-family: var(--font-brush); font-size: 21px; letter-spacing: 2px; color: var(--ink);
  text-align: center; padding-bottom: 6px; margin-bottom: 8px; position: relative; }
.rc-st::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dark) 30%, var(--gold) 50%, var(--gold-dark) 70%, transparent); }
.rc-shint { font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 2px 8px; }
.rc-shint b { color: #8a2410; }
.rc-note { font-size: 11px; line-height: 1.5; color: var(--ink-faint); margin: 6px 2px 0; }

/* ---------- 金额宫格 ---------- */
.rc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rc-amt { position: relative; height: 68px; border-radius: 8px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--tex-paper), linear-gradient(180deg, #fff7dd, #f0dcaa 55%, #ddc287);
  border: 2px solid var(--gold-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 252, 235, .85), 0 2px 3px rgba(0, 0, 0, .3);
  transition: transform .1s, filter .12s; }
.rc-amt:hover { filter: brightness(1.05); }
.rc-amt:active { transform: translateY(2px); filter: brightness(.95); }
.rc-amt .mn { display: flex; align-items: baseline; gap: 3px; font-family: var(--font-body); font-weight: 700;
  font-size: 19px; color: #7a1e12; line-height: 1.1; }
.rc-amt .mn .ar { font-style: normal; font-size: 13px; color: var(--ink-faint); margin: 0 1px; }
.rc-amt .mn em { font-style: normal; font-size: 18px; color: #1f5f37; }
.rc-amt .mn .u { font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.rc-amt .lb { margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px;
  max-width: 96%; overflow: hidden; white-space: nowrap; }
.rc-amt .lb .tg { font-style: normal; font-size: 10px; color: #fff; padding: 1px 5px; border-radius: 3px;
  background: linear-gradient(180deg, #d8321f, #8a140a); }
/* 首充双倍角标：右上折角，未用掉首充时每张卡都有 */
/* 「首充双倍」不再做斜角标（体验官 #13 #27）：
   原来是 10px、斜 38 度、深棕字压金底，448 宽下四个字基本读不出来，
   而且首充把积分数字撑长以后，那条斜带还会盖掉正文末尾。
   改成正文下面一行横排红字 + 宫格上方一条通栏说明（.rc-fxbar），两处都好读、都不挡字。 */
.rc-amt .x2t { margin-top: 1px; font-size: 11px; line-height: 14px; font-weight: 700; color: #a8180c; white-space: nowrap; }
.rc-amt.x2 { height: 76px; border-color: #c9411f;
  box-shadow: inset 0 0 0 1px rgba(255, 252, 235, .85), 0 0 0 1px rgba(201, 65, 31, .5), 0 2px 3px rgba(0, 0, 0, .3); }
/* 首充把数字撑长（6,480 → 12,960）：正文自动缩一号，绝不溢出格子 */
.rc-amt.x2 .mn { font-size: 17px; }
.rc-amt.x2 .mn em { font-size: 17px; }
/* 通栏首充说明：把「不限档位、每 ID 一次、以到账为准」讲清楚，不再只靠一个斜角标 */
.rc-fxbar { margin: 0 0 8px; padding: 7px 9px; border-radius: 6px; font-size: 12.5px; line-height: 1.5;
  color: #fff2e2; background: linear-gradient(180deg, #b5321c, #7d1409);
  border: 1px solid #f2c245; box-shadow: inset 0 1px 0 rgba(255, 200, 170, .4); }
.rc-fxbar b { color: #ffe07a; }

/* ---------- 自定义金额 ---------- */
.rc-custom { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.rc-custom .k { flex: none; font-size: 13px; color: var(--ink); }
.rc-custom .in { flex: none; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px;
  border-radius: 6px; background: #fffaea; border: 2px solid var(--paper-deep); box-shadow: inset 0 2px 3px rgba(120, 90, 40, .2); }
.rc-custom .in i { font-style: normal; font-size: 14px; color: var(--ink-soft); }
.rc-cin { width: 74px; height: 40px; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 17px; font-weight: 700; color: #7a1e12; text-align: center; }
/* Chrome/Safari 的数字输入小箭头在 448 宽里挤位置，去掉 */
.rc-cin::-webkit-outer-spin-button, .rc-cin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rc-cin { -moz-appearance: textfield; }
.rc-cest { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #1f5f37; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-cest.bad { color: #a8261b; }
.rc-cest.empty { color: var(--ink-faint); }
.rc-cbtn { flex: none; height: 44px; min-width: 76px; padding: 0 14px; }

/* ---------- 奖励行（单充 / 累充通用） ---------- */
.rc-list { display: flex; flex-direction: column; gap: 6px; }
.rc-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 252, 236, .8), rgba(233, 214, 172, .8));
  border: 1px solid var(--paper-deep); }
.rc-row.hot { border-color: var(--gold-dark); box-shadow: 0 0 0 1px var(--gold), 0 0 8px rgba(242, 194, 69, .45);
  background: linear-gradient(180deg, #fff6d8, #f3dfa8); }
.rc-row.off { opacity: .62; }
.rc-rl { flex: none; width: 74px; display: flex; flex-direction: column; }
.rc-rl b { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: #7a1e12; line-height: 1.15; }
.rc-rl small { font-size: 11px; color: var(--ink-soft); }
.rc-rb { flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink); }
.rc-rr { flex: none; width: 82px; display: flex; align-items: center; justify-content: flex-end; }
.rc-cl { height: 44px; min-width: 76px; padding: 0 10px; font-size: 18px; }
.rc-done { font-size: 12px; color: var(--jade-dark); padding: 4px 8px; border-radius: 4px;
  background: rgba(63, 143, 90, .18); border: 1px solid rgba(63, 143, 90, .5); }
.rc-lock { font-size: 11px; color: var(--ink-faint); text-align: right; line-height: 1.3; }

/* ---------- 累充进度条 ---------- */
.rc-bar { position: relative; height: 22px; border-radius: 11px; overflow: hidden; margin: 0 2px 8px;
  background: linear-gradient(180deg, #4a3a24, #2b1d12); border: 2px solid var(--wood);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.rc-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px 0 0 11px;
  background: linear-gradient(180deg, #ffe9a3, #f2c245 45%, #c9950f); box-shadow: 0 0 8px rgba(242, 194, 69, .6); transition: width .3s; }
.rc-bar .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; color: #fff8e0; text-shadow: var(--stroke-dark); }

/* ---------- 我的订单 ---------- */
.rc-ord-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 8px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 252, 236, .8), rgba(233, 214, 172, .8));
  border: 1px solid var(--paper-deep); }
.rc-ord-row.s-rejected { border-color: #a8261b; }
.rc-ord-row.s-paid { border-color: var(--jade); }
.rc-ol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rc-ol b { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.rc-ol small { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.rc-rej { font-style: normal; font-size: 11px; color: #a8261b; margin-top: 2px; line-height: 1.35; }
.rc-or { flex: none; display: flex; align-items: center; }
.rc-tag { font-size: 11px; padding: 4px 7px; border-radius: 4px; color: #fff; background: var(--stone-dark); white-space: nowrap; }
.rc-tag.t-pending { background: linear-gradient(180deg, #c98a12, #8a5c06); }
.rc-tag.t-submitted { background: linear-gradient(180deg, #2f6fb5, #173d6b); }
.rc-tag.t-paid { background: linear-gradient(180deg, #4fae6d, #215c34); }
.rc-tag.t-rejected { background: linear-gradient(180deg, #d8321f, #8a140a); }
.rc-tag.t-expired { background: linear-gradient(180deg, #8d8d8d, #4f4f4f); }
/* 未完结订单的操作行：整行独占，两个钮各 44px 高（手机上这是真要按的） */
.rc-oa { flex: 1 0 100%; display: flex; gap: 8px; }
.rc-mini { flex: 1 1 0; height: 44px; min-width: 0; padding: 0 8px; font-size: 18px; }

/* ---------- 积分商店 ---------- */
.rc-pbar { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 10px;
  height: 48px; padding: 0 12px; border-radius: 8px;
  background: var(--tex-wood), linear-gradient(180deg, #7c4519, #4a2410);
  border: 2px solid var(--gold-dark); box-shadow: inset 0 0 0 1px rgba(242, 194, 69, .4); }
.rc-pbar .l { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #f0dcb4; }
.rc-pbar .l svg { width: 28px; height: 28px; }
.rc-pbar .l b { font-family: var(--font-body); font-size: 22px; color: var(--gold); text-shadow: var(--shadow-gold-text); }
.rc-pbar .r { font-size: 11.5px; color: #d5be92; }

.rc-gds { display: flex; flex-direction: column; gap: 8px; }
.rc-gd { padding: 8px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 252, 236, .85), rgba(233, 214, 172, .85));
  border: 1px solid var(--paper-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 245, .7); }
.rc-gd.off { opacity: .6; filter: grayscale(.5); }
.rc-gl { flex: none; }
.rc-gb { flex: 1 1 auto; min-width: 0; }
.rc-gb .nm { font-family: var(--font-brush); font-size: 19px; letter-spacing: 1px; color: var(--ink);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* 限购角标从 10px 提到 11.5px：它决定玩家「还能买几个」，10px 在 448 宽下偏小（体验官 #28） */
.rc-gb .nm .lim { font-style: normal; font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0;
  color: #fff; padding: 1px 5px; border-radius: 3px; background: linear-gradient(180deg, #d8321f, #8a140a); }
.rc-gb .ds { font-size: 11px; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
.rc-gb .pz { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; font-size: 11px; color: var(--ink-soft); }
/* 每个词自己不许断行（「积 分」「余 额」那样断开很难看），但整行放不下时允许整块折到第二行。
   加了「余额 N」之后这一行确实会挤——宁可折行，也不能横向溢出卡片。 */
.rc-gb .pz > span, .rc-gb .pz .mul, .rc-gb .pz .bal { flex: none; white-space: nowrap; }
.rc-gb .pz b { flex: none; white-space: nowrap; }
.rc-gb .pz svg { flex: none; }
.rc-gb .pz svg { width: 20px; height: 20px; }
.rc-gb .pz b { font-family: var(--font-body); font-size: 16px; color: #7a1e12; }
.rc-gb .pz.poor b { color: #a8261b; }
/* 「积分不足」四个字改由下面 .lk 那一行说全（差多少、约合多少钱、去哪补），不再只丢一句结论 */
.rc-gb .pz .bal { font-style: normal; font-size: 10px; color: var(--ink-faint); margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rc-gb .lk { margin-top: 3px; min-height: 44px; display: flex; align-items: center; gap: 3px;
  font-size: 12px; line-height: 1.35; color: #a8261b; cursor: pointer;
  padding: 4px 7px; border-radius: 6px; background: rgba(216, 50, 31, .1); border: 1px dashed rgba(168, 38, 27, .55); }
.rc-gb .lk b { font-family: var(--font-body); font-size: 12.5px; }
.rc-gb .lk:active { filter: brightness(.95); }
.rc-gb .pz .mul { font-style: normal; font-size: 10px; color: var(--ink-faint); }
.rc-gr { flex: none; width: 112px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.rc-go { height: 46px; min-width: 0; width: 100%; padding: 0 8px; font-size: 18px; }
.rc-shelf { display: block; height: 44px; line-height: 44px; text-align: center; border-radius: 6px;
  font-size: 14px; color: #e8e8e8; background: var(--bg-stone); border: 2px solid #26262a; }
/* 数量步进器：按钮宽 36 但高 44，手指够得着 */
.rc-step { display: flex; align-items: center; justify-content: space-between; height: 44px;
  border-radius: 6px; background: #fffaea; border: 2px solid var(--paper-deep); box-shadow: inset 0 2px 3px rgba(120, 90, 40, .18); }
.rc-step .sbtn { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 22px; font-weight: 700; color: #7a1e12; line-height: 1; padding: 0; }
.rc-step .sbtn:active { filter: brightness(.8); transform: translateY(1px); }
/* 中间由 <span> 换成可直接打数字的 <input>：要买 40 片不必点 39 下＋（体验官 #11 #23） */
.rc-step .sn { flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; border: 0; background: transparent; outline: none;
  text-align: center; font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--ink); }
.rc-step input.sn::-webkit-outer-spin-button, .rc-step input.sn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rc-step input.sn { -moz-appearance: textfield; }
/* 快捷档：本级还差 N / 积分买满 / 最多 N。高度 26 是「次要」量级，但配合上面 44px 的步进器足够用；
   它们不是主行动按钮，主行动是下面的【兑换】（44px）。 */
/* 上面一行：图标 / 说明 / 步进器+兑换 */
.rc-gtop { display: flex; align-items: center; gap: 8px; }
/* 快捷档独占卡片底部一整行（不塞进右边那条 112px 窄列）：这样每个钮都能做到 44px 高 */
.rc-qks { display: flex; gap: 5px; margin-top: 7px; }
.rc-qks .qk { flex: 1 1 0; min-width: 0; height: 44px; line-height: 42px; padding: 0 6px; border-radius: 6px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; color: #7a1e12; cursor: pointer;
  background: linear-gradient(180deg, #fff6d8, #ecd8a8); border: 2px solid var(--gold-dark); }
.rc-qks .qk:active { filter: brightness(.94); transform: translateY(1px); }

/* ---------- 诚实说明（页脚，掌门要求逐字保留） ---------- */
.rc-foot { margin: 4px 12px 6px; padding: 8px 10px; border-radius: 6px;
  font-size: 11px; line-height: 1.65; color: var(--ink-soft);
  background: rgba(255, 250, 232, .55); border: 1px dashed var(--paper-deep); }

/* ============================================================
 * 订单卡 / 选件弹窗（.rc-modal 内）
 * ============================================================ */
/* 弹窗底部那两个钮：theme 的 .btn 默认 42px，差 2px 到手指友好的 44。
   只在 .rc-modal 作用域里抬高，不动全局 —— 别的页面的弹窗按钮维持原样。 */
.rc-modal .modal-btns .btn { height: 46px; font-size: 22px; }
.rc-ord { text-align: center; }
/* 订单号：#app 全局 user-select:none，这里单独放开，好让手机长按唤出系统「复制」；
   点一下也会走 JS 复制，两条路都留。 */
.rc-ono { display: block; margin: 2px 0 2px; padding: 8px 6px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-body); font-size: 26px; font-weight: 700; letter-spacing: 2px; color: #7a1e12;
  background: linear-gradient(180deg, #fff8e0, #f0dcaa); border: 2px dashed var(--gold-dark);
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.rc-ono:active { filter: brightness(.95); }
.rc-osub { font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; }
/* 电脑端付不了款的人唯一的出路，原来是一条 366×18 的小字链（体验官 #15 #28）→ 正经按钮 */
.rc-cplink { display: flex; width: 100%; height: 44px; margin-top: 8px; font-size: 17px; letter-spacing: 1px; }
.rc-okv { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--ink); }
.rc-okv b { font-family: var(--font-body); font-size: 17px; color: #7a1e12; }
.rc-ofx { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.rc-ofx b { color: #a8261b; }
/* 「付款备注请填订单号」——整页最要紧的一行，红底白字，不许缩小、不许折叠 */
.rc-warn { margin: 8px 0; padding: 7px 8px; border-radius: 6px; font-size: 14px; font-weight: 700; line-height: 1.4;
  color: #fff; background: linear-gradient(180deg, #d8321f, #8a140a);
  border: 1px solid #5a0d06; box-shadow: inset 0 1px 0 rgba(255, 190, 160, .5); }
.rc-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0; }
.rc-qr img { width: 176px; height: 176px; object-fit: contain; border-radius: 6px; background: #fff;
  padding: 6px; border: 2px solid var(--wood); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }
.rc-qr .tip { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.rc-qr.no-img::before { content: '收款码图缺失，请点下面的按钮跳支付宝'; display: block; width: 176px; padding: 40px 10px;
  font-size: 12px; color: var(--ink-soft); background: #fffaea; border: 2px dashed var(--paper-deep); border-radius: 6px; }
.rc-payee { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 8px; }
.rc-payee b { color: var(--ink); }
.rc-open { display: flex; width: 100%; height: 48px; font-size: 22px; text-decoration: none; }
.rc-l6 { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rc-l6 .k { flex: none; font-size: 12px; color: var(--ink-soft); }
.rc-l6i { flex: 1 1 auto; min-width: 0; height: 44px; border-radius: 6px; padding: 0 10px;
  border: 2px solid var(--paper-deep); background: #fffaea; outline: none;
  font-family: var(--font-body); font-size: 15px; color: var(--ink); }
/* 付款备注自查（体验官 #29）：整条 ≥44px，点哪儿都能勾 */
.rc-ck { display: flex; align-items: center; gap: 8px; min-height: 46px; margin-top: 10px; padding: 6px 9px; border-radius: 6px;
  cursor: pointer; text-align: left; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  background: rgba(255, 250, 232, .7); border: 2px dashed var(--paper-deep); }
.rc-ck .bx { flex: none; width: 24px; height: 24px; border-radius: 5px; position: relative;
  background: #fffaea; border: 2px solid var(--wood); box-shadow: inset 0 1px 2px rgba(120, 90, 40, .25); }
.rc-ck.on { border-style: solid; border-color: var(--jade); background: rgba(33, 92, 52, .1); }
.rc-ck.on .bx { background: linear-gradient(180deg, #3f9a5c, #1f5f37); border-color: #16452a; }
.rc-ck.on .bx::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 12px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(42deg); }
.rc-ck b { color: #8a2410; }
.rc-ck.shake { animation: rc-ckshake .36s; }
@keyframes rc-ckshake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.rc-otip { font-size: 11px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; text-align: left; }
.rc-otip2 { font-size: 11.5px; line-height: 1.55; color: var(--ink); margin-top: 6px; text-align: left;
  padding: 6px 8px; border-radius: 6px; background: rgba(255, 250, 232, .7); border: 1px dashed var(--paper-deep); }
.rc-otip2 b { color: #a8261b; }

/* 幻化四选一 */
.rc-pkwrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rc-pk { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #fff7dd, #ecd8a8); border: 2px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, .8); min-height: 118px; justify-content: center; }
.rc-pk:active { transform: translateY(2px); filter: brightness(.96); }
.rc-pk .nm { font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.2; }
.rc-pk .tg { font-size: 11px; color: var(--jade-dark); }
.rc-pk.had { cursor: default; filter: grayscale(1) brightness(.85); opacity: .7; border-color: var(--stone-dark); }
.rc-pk.had .tg { color: var(--stone-dark); }
.rc-pk.had:active { transform: none; }
/* 包裹里已有同款：仍可换（服务端只认 own），但必须一眼看得出来——
   原来四张卡长得一模一样，只有一行 11px 的小字「包裹已有」，很容易花 15000 积分换重（体验官 #38）。 */
.rc-pk { position: relative; }
.rc-pk.inbag { opacity: .72; filter: saturate(.7); border-color: var(--stone-dark); }
.rc-pk.inbag .tg { color: var(--stone-dark); font-weight: 700; }
.rc-pk .mk { position: absolute; right: 4px; top: 4px; font-style: normal; font-size: 10px; line-height: 16px;
  padding: 0 6px; border-radius: 4px; color: #fff; background: rgba(40, 40, 44, .82); border: 1px solid #1a1a1e; }
.rc-pk .mk.own { background: linear-gradient(180deg, #6b6b72, #3a3a40); }
.rc-pkhint { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); }
.rc-pkhint b { color: #7a1e12; }

/* ============================================================
 * 主页两个金色入口（.hm-gold，home.js 渲染在九宫格与底部六小入口之间）
 * 放这儿而不是 home.css：这两个入口是本次充值/宝物一并加的，
 * 谁要撤掉充值功能，删掉本文件与 home.js 那一段即可，不会在 home.css 里留下孤儿样式。
 * ============================================================ */
.hm-gold { position: relative; z-index: 4; display: flex; gap: 10px; margin: 8px 20px 0; }
.hm-gold .gcell { flex: 1 1 0; min-width: 0; height: 46px; border-radius: 8px; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  background: linear-gradient(180deg, #fff6d0 0%, #f7d162 32%, #dea41e 62%, #b8860b 100%);
  border: 2px solid #6e4a08;
  box-shadow: inset 0 1px 0 rgba(255, 252, 225, .9), inset 0 -3px 5px rgba(120, 80, 10, .35), 0 2px 4px rgba(0, 0, 0, .4);
  transition: transform .1s, filter .12s; }
.hm-gold .gcell:hover { filter: brightness(1.06); }
.hm-gold .gcell:active { transform: translateY(2px); filter: brightness(.94); }
.hm-gold .gcell .t { font-family: var(--font-brush); font-size: 21px; letter-spacing: 2px; color: #6b2109;
  text-shadow: 0 1px 0 rgba(255, 248, 215, .9); }
.hm-gold .gcell svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(90, 60, 0, .5)); }
/* 缓慢扫过的高光，让这两格在九宫格之间显眼但不吵 */
.hm-gold .gcell .shine { position: absolute; left: -60%; top: 0; bottom: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: rcShine 3.6s ease-in-out infinite; }
.hm-gold .gcell:nth-child(2) .shine { animation-delay: 1.8s; }
/* 单机 / Artifact 版：充值那一格挂个小角标，点之前就让人知道这个端充不了值（体验官 #7）。
   格子本身仍然可点——点进去是一页如实说明，不是死路。 */
.hm-gold .gcell.solo { filter: saturate(.62) brightness(.95); }
.hm-gold .gcell .solo-tag { position: absolute; right: 4px; top: 3px; font-style: normal;
  font-size: 10px; line-height: 15px; padding: 0 5px; border-radius: 3px;
  color: #fff2e2; background: rgba(60, 30, 10, .75); border: 1px solid rgba(255, 226, 150, .55); }
@keyframes rcShine { 0% { left: -60%; } 55% { left: 120%; } 100% { left: 120%; } }


/* ============================================================
 * 单机 / Artifact 版（体验官 #7）
 * 这个端跑在沙箱里，CSP 掐死 fetch，**永远**登记不上名帖 ——
 * 所以不摆金额宫格、不写「登记后即可充值」，只如实说清楚它是什么。
 * ============================================================ */
.rc-solo { margin: 0 10px 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--tex-paper), linear-gradient(180deg, #f7ecd0, #e2cb95);
  border: 2px solid var(--wood); box-shadow: inset 0 1px 0 #fff8e0, 0 2px 4px rgba(0, 0, 0, .3); }
.rc-solo .t { font-family: var(--font-brush); font-size: 22px; letter-spacing: 2px; color: var(--ink); text-align: center; margin-bottom: 6px; }
.rc-solo .t b { color: #8a2410; }
.rc-solo .d { font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); margin-top: 4px; }
.rc-solo .d b { color: #8a2410; }
.rc-solo .d.dim { font-size: 11px; color: var(--ink-faint); }
/* 网页版地址：点一下复制（沙箱里外链多半也点不出去，复制是唯一可靠的一条路） */
.rc-solo .rc-web { display: inline-block; padding: 3px 7px; margin: 2px 0; border-radius: 5px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: #7a1e12; user-select: text; -webkit-user-select: text;
  background: #fffaea; border: 1px dashed var(--gold-dark); }
.rc-solo .rc-web:active { filter: brightness(.95); }