/* ============================================================================
   绘枢 · 侧栏底部三件套 + 个人资料弹窗（全站共享组件）
   2026-09-19 新增。

   背景：index / chat / assets / painting-canvas 四页的侧栏底部原本是四套写法
   （积分块 52px vs 41px、主题项 nav-item 竖排 67px vs theme-btn 横排 38px、
   头像 40px vs 36px vs 不存在 vs 用户名胶囊），并且都带一个无意义的紫色装饰点。

   现在四页统一：侧栏底部只留一个空壳 <div class="sidebar-bottom" id="sidebarBottom">，
   内容由 _shared/sb.js 渲染成本文件的样式。

   两条硬约束，改这个文件前先读：
   1) 本文件**不依赖各页的 CSS 变量**（--s1/--text-3/--fs-13… 四页定义不一致），
      所有颜色/字号在这里自带 --sbx-* 令牌，否则四页又会跑偏。
   2) 只用 #sidebarBottom / #avatarDialog 作用域 + sb- 与 sbd- 前缀类名，
      不碰各页已有的 .nav-item/.theme-btn/.mini-btn，避免反向污染其它弹窗。

   ⚠️ 本文件注释里**绝不能出现 `*` 紧跟 `/` 的写法**（例如想写类名前缀通配时要拆开写）。
   因为那会把注释提前闭合，紧跟其后的第一条规则会被 CSS 解析器整块丢弃 ——
   2026-09-19 就因此把下面第一段 `:root`（浅色令牌）整个弄丢过：深色页正常、
   浅色页所有 var() 取空、弹窗与按钮背景变透明。改完务必用 probe_tokens.py 复核。
   ============================================================================ */

:root{
  --sbx-bg:#ffffff; --sbx-s1:#fafafa; --sbx-s2:#f4f4f5;
  --sbx-border:#e9e9ec;
  --sbx-text:#18181b; --sbx-text2:#6b7280; --sbx-text3:#9ca3af;
  --sbx-v50:#f5f3ff; --sbx-v100:#ede9fe; --sbx-v500:#8b5cf6; --sbx-v600:#7c3aed;
  --sbx-danger:#dc2626;
}
:root[data-theme="dark"]{
  --sbx-bg:#0f0f12; --sbx-s1:#16161a; --sbx-s2:#1d1d23;
  --sbx-border:#26262e;
  --sbx-text:#f4f4f5; --sbx-text2:#a1a1aa; --sbx-text3:#71717a;
  --sbx-v50:#211a33; --sbx-v100:#2a2140; --sbx-v500:#a78bfa; --sbx-v600:#8b5cf6;
  --sbx-danger:#f87171;
}

/* ==========================================================================
   零、品牌 logo（绘枢标志）
   --------------------------------------------------------------------------
   四页原本各写一份尺寸：桌面都写 46px 所以看不出问题，窄屏一份写 30px、
   三份写 24px —— 于是窄屏下生成页的 logo 比其它页大 25%。这里收成单一事实源，
   四页只留 <img class="sidebar-brand">，尺寸与深色换图都在本文件。

   ⚠️ 路径相对本文件（_shared/）解析，写 ../assets/ 才落到 /design/assets/。
   ⚠️ 窄屏侧栏只有 66px 宽（内容区约 50px），logo 高 24px 时宽约 47px 已接近顶格，
      不能再调大，否则横向溢出侧栏。
   ========================================================================== */
.sidebar-brand{height:46px;width:auto;display:block}
/* logo 深色主题适配已移至 _shared/site-common.js（改用 src 替换，兼容 Firefox：其不支持对 <img> 用 content:url()） */
@media (max-width:768px){.sidebar-brand{height:24px}}

/* ==========================================================================
   一、侧栏底部三件套
   ========================================================================== */
#sidebarBottom{
  margin-top:auto;
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
  width:100%; flex:0 0 auto;
}

/* ---- 1. 积分（可点 → 充值中心；必须与「主题」「头像」给同样的链接反馈） ----
   🔴 2026-10-03 修：本块一直缺 cursor:pointer + :hover，导致登录态下
   「积分 / 1296」看着像纯文字（鼠标移上去光标不变），用户以为链接没了。
   功能一直正常（点击能开充值中心），纯粹是**可点反馈缺失**。
   三个兄弟（积分 / 主题 / 头像）必须同一套反馈：手型 + hover 底色 + focus 环。 */
#sidebarBottom .sb-points{
  width:100%; padding:12px 6px; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.25;
  cursor:pointer; user-select:none; outline:none;
  transition:background .15s,color .15s;
}
#sidebarBottom .sb-points:hover{background:var(--sbx-s1)}
#sidebarBottom .sb-points:hover .k{color:var(--sbx-text2)}
#sidebarBottom .sb-points:focus-visible{outline:2px solid var(--sbx-v500);outline-offset:2px}
#sidebarBottom .sb-points .k{
  font-size:10px; font-weight:500; color:var(--sbx-text3); letter-spacing:.5px;
}
#sidebarBottom .sb-points .k:empty{display:none}
#sidebarBottom .sb-points .v{
  font-size:13px; font-weight:600; color:var(--sbx-text); margin-top:1px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 未登录态：值是「未登录 · 去登录」这个链接，侧栏只有 90px 宽，
   必须允许折成两行 —— 否则会被 nowrap 截成「未登录 · 去…」，比旧的折行更差。
   折行后正好也是两行，与已登录的「积分 / 235」同高，两态高度天然一致。 */
#sidebarBottom .sb-points.is-guest .v{
  font-size:12px; font-weight:500; color:var(--sbx-v600); cursor:pointer;
  white-space:normal; overflow:visible; text-overflow:clip;
  line-height:1.3; word-break:keep-all;
}
#sidebarBottom .sb-points.is-guest .v:hover{text-decoration:underline}

/* ---- 2. 主题（与上方导航项同一套尺寸：icon 24 + 文字 13） ---- */
#sidebarBottom .sb-item{
  width:100%; padding:10px 6px 9px; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; color:var(--sbx-text2); font-size:13px;
  cursor:pointer; user-select:none; outline:none;
  transition:background .15s,color .15s;
}
#sidebarBottom .sb-item:hover{background:var(--sbx-s1);color:var(--sbx-text)}
#sidebarBottom .sb-item:focus-visible{outline:2px solid var(--sbx-v500);outline-offset:2px}
#sidebarBottom .sb-item .ico{width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px}
#sidebarBottom .sb-item .ico svg{width:22px;height:22px;display:block}
#sidebarBottom .sb-item .lbl{font-size:13px;line-height:1.2}

/* 主题图标跟随当前主题：浅色显太阳、深色显月亮（避免出现「无状态的第三个图标」） */
#sidebarBottom .sb-item .ico .i-moon{display:none}
:root[data-theme="dark"] #sidebarBottom .sb-item .ico .i-moon{display:block}
:root[data-theme="dark"] #sidebarBottom .sb-item .ico .i-sun{display:none}

/* ---- 3. 头像（40px 圆形，点击打开个人资料） ---- */
#sidebarBottom .sb-avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 40px;
  align-self:center; margin:2px 0 2px;
  background:var(--sbx-s2); border:1px solid var(--sbx-border);
  display:grid; place-items:center; overflow:hidden;
  font-size:13px; font-weight:600; color:var(--sbx-text2);
  cursor:pointer; transition:border-color .15s,transform .15s;
}
#sidebarBottom .sb-avatar:hover{border-color:var(--sbx-v500);transform:translateY(-1px)}
#sidebarBottom .sb-avatar:focus-visible{outline:2px solid var(--sbx-v500);outline-offset:2px}
#sidebarBottom .sb-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* 深色底上的头像描边略提亮，保证圆形边界看得见 */
:root[data-theme="dark"] #sidebarBottom .sb-avatar{border-color:#34343e}

/* ---- 窄屏（≤768px：侧栏收成 66px，与各页导航一致） ---- */
@media (max-width:768px){
  #sidebarBottom{gap:10px}
  #sidebarBottom .sb-points{padding:8px 2px}
  #sidebarBottom .sb-points .k{font-size:9px;letter-spacing:0}
  #sidebarBottom .sb-points .v{font-size:12px}
  #sidebarBottom .sb-item{width:100%;padding:11px 0;gap:2px}
  #sidebarBottom .sb-item .lbl{display:none}
  #sidebarBottom .sb-avatar{width:34px;height:34px;flex-basis:34px}
}

/* ==========================================================================
   二、个人资料弹窗（原 index.html 私有实现，搬到这里供 index/资产/画布共用）
   作用域全部挂在 #avatarDialog 下，不影响各页自己的登录弹窗。
   ========================================================================== */
#avatarDialog{
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,.42); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
#avatarDialog.show{display:flex}
#avatarDialog .hide{display:none !important}
/* ⚠️ 共享组件嵌在四页不同的宿主样式里：id 作用域只能盖住**本文件声明过的属性**，
   宿主页同名类（.form-row / .form-input / .mini-btn / .icon-x …）的其它声明会漏进来。
   2026-09-19 就因此翻车：对话页的 .form-row 是 flex-direction:column，
   把共享弹窗的昵称行从 38px 撑到 130px（而生成页同名类恰好一致，所以只有对话页坏）。
   凡布局属性（box-sizing / 方向 / 宽度 / 盒模型）一律显式写全，不依赖宿主默认值。 */
#avatarDialog, #avatarDialog *{box-sizing:border-box}

#avatarDialog .dialog{
  width:100%; max-width:392px;
  background:var(--sbx-bg); border:1px solid var(--sbx-border);
  border-radius:14px; padding:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  color:var(--sbx-text);
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:13px; line-height:1.5;
}
#avatarDialog .av-dialog{max-width:520px; max-height:calc(100vh - 40px); overflow-y:auto}

#avatarDialog .dialog-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#avatarDialog .dialog-h h3{font-size:17px;font-weight:600;margin:0}
#avatarDialog .icon-x{
  width:28px;height:28px;border-radius:8px;border:none;background:transparent;
  color:var(--sbx-text2);font-size:14px;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,color .15s;
}
#avatarDialog .icon-x:hover{background:var(--sbx-s2);color:var(--sbx-text)}

/* Tab */
#avatarDialog .login-tabs{display:flex;gap:6px;background:var(--sbx-s2);padding:4px;border-radius:10px;margin-bottom:14px}
#avatarDialog .login-tabs button{
  flex:1;padding:7px 0;border:none;border-radius:8px;background:transparent;
  font-family:inherit;font-size:12px;font-weight:500;color:var(--sbx-text2);cursor:pointer;transition:all .15s;
}
#avatarDialog .login-tabs button.on{background:var(--sbx-bg);color:var(--sbx-text);box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* 通用小按钮 / 输入框 */
#avatarDialog .mini-btn{
  margin:0;white-space:nowrap;
  height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--sbx-border);
  background:var(--sbx-s1);color:var(--sbx-text);font-family:inherit;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,border-color .15s,opacity .15s;
}
#avatarDialog .mini-btn:hover:not(:disabled){background:var(--sbx-s2)}
#avatarDialog .mini-btn:disabled{opacity:.55;cursor:not-allowed}
#avatarDialog .mini-btn.primary{background:var(--sbx-v600);border-color:var(--sbx-v600);color:#fff;font-weight:500}
#avatarDialog .mini-btn.primary:hover:not(:disabled){background:var(--sbx-v500)}
/* 方向、换行、宽度必须显式写：宿主页的 .form-row 可能是 column、.form-input 可能是 100% */
#avatarDialog .form-row{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
  gap:10px;margin:0 0 10px;
}
#avatarDialog .form-row>span{
  flex:0 0 52px;font-size:12px;font-weight:400;line-height:1.5;color:var(--sbx-text2);
}
#avatarDialog .form-input{
  flex:1 1 auto;width:auto;min-width:0;
  height:38px;padding:0 12px;border:1px solid var(--sbx-border);border-radius:10px;
  background:var(--sbx-s1);color:var(--sbx-text);font-family:inherit;font-size:13px;
  font-weight:400;line-height:normal;outline:none;
  transition:border-color .15s,background .15s;
}
#avatarDialog .form-input:focus{border-color:var(--sbx-v500);background:var(--sbx-bg)}
#avatarDialog .form-input[readonly]{background:var(--sbx-s2);color:var(--sbx-text2);cursor:default}

/* 资料面板 */
#avatarDialog .prof-card{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#avatarDialog .prof-ava{
  width:56px;height:56px;border-radius:50%;background:var(--sbx-s2);border:1px solid var(--sbx-border);
  display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--sbx-text2);
  overflow:hidden;flex:0 0 56px;cursor:pointer;transition:border-color .15s;
}
#avatarDialog .prof-ava:hover{border-color:var(--sbx-v500)}
#avatarDialog .prof-ava img{width:100%;height:100%;object-fit:cover;display:block}
#avatarDialog .prof-meta{flex:1;min-width:0}
#avatarDialog .prof-name{font-size:17px;font-weight:600;color:var(--sbx-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#avatarDialog .prof-sub{font-size:11px;color:var(--sbx-text3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#avatarDialog .prof-badge{
  flex:none;font-size:10px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--sbx-v100);color:var(--sbx-v600);
}
#avatarDialog .prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#avatarDialog .prof-cell{background:var(--sbx-s1);border:1px solid var(--sbx-border);border-radius:10px;padding:9px 6px;text-align:center}
#avatarDialog .prof-cell .k{font-size:10px;color:var(--sbx-text3)}
#avatarDialog .prof-cell .v{font-size:13px;font-weight:600;color:var(--sbx-text);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#avatarDialog .prof-hr{height:1px;background:var(--sbx-border);margin:14px 0}
#avatarDialog .prof-err{min-height:18px;font-size:11px;color:var(--sbx-danger);line-height:1.4;margin-top:8px}
#avatarDialog .prof-row-btn{display:flex;gap:8px}
#avatarDialog .prof-row-btn .mini-btn{flex:1}

/* 共享资料弹窗 · 去工作台充值按钮 */
#avatarDialog .prof-payrow{display:flex;gap:8px;align-items:center;margin-top:10px}
#avatarDialog .prof-payrow .mini-btn{height:32px;padding:0 14px;font-size:12px;border-radius:8px}
#avatarDialog #profPayMsg{min-height:16px;margin-top:6px}

/* 头像面板 */
#avatarDialog .av-sec{font-size:12px;color:var(--sbx-text2);font-weight:500;margin:0 0 8px}
#avatarDialog .av-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:14px}
#avatarDialog .av-cell{
  position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:var(--sbx-s2);transition:transform .12s,border-color .12s;
}
#avatarDialog .av-cell img{width:100%;height:100%;object-fit:cover;display:block}
#avatarDialog .av-cell:hover{transform:translateY(-2px);border-color:var(--sbx-v500)}
#avatarDialog .av-cell:focus-visible{outline:2px solid var(--sbx-v500);outline-offset:1px}
#avatarDialog .av-cell.busy{opacity:.45;pointer-events:none}
#avatarDialog .av-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--sbx-border);padding-top:12px}
#avatarDialog .av-tip{font-size:12px;color:var(--sbx-text3);line-height:1.5}

@media (max-width:480px){
  #avatarDialog{padding:14px}
  #avatarDialog .av-grid{grid-template-columns:repeat(6,1fr);gap:6px}
  #avatarDialog .av-foot{flex-direction:column;align-items:stretch}
  #avatarDialog .prof-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   三、侧栏容器 + 主导航（全站四页共用 · 单一事实源）
   --------------------------------------------------------------------------
   2026-09-23 重构：此前四页各自写 .sidebar / .nav-list / .nav-item，且每页还有一份
   名为「统一侧栏」的覆盖块（chat/canvas 写 140px、assets/index 写 106px、默认又是
   72px）——三套宽度叠在一起，四页大小位置各不相同。现在全部收进本文件，四页的
   aside.sidebar 只留空结构（sidebar-top logo + nav-list + #sidebarBottom），尺寸/位置/
   配色统一由这里控制。宽屏 140px 展开（logo + 文字），≤768px 收 66px 纯图标，≤430px 50px。
   配色全用 --sbx- 令牌，不依赖各页变量（与文件开头两条硬约束一致）。
   ========================================================================== */
.sidebar{
  width:140px; flex:0 0 140px; display:flex; flex-direction:column;
  align-items:stretch; gap:0; padding:18px 10px;
  background:transparent; border-right:1px solid var(--sbx-border);
  min-height:0; transition:background .25s,border-color .25s,width .2s;
}
.sidebar-top{display:flex;align-items:center;gap:8px;padding:0 6px;margin-bottom:26px}
.sidebar-name{font-size:14px;font-weight:600;color:var(--sbx-text);letter-spacing:.5px}
.brand-link{
  display:block; line-height:0; border-radius:8px; text-decoration:none;
  transition:opacity .15s,transform .15s;
}
.brand-link:hover{opacity:.85}
.brand-link:active{transform:scale(.97)}
.brand-link:focus-visible{outline:2px solid var(--sbx-v500);outline-offset:4px}
.nav-list{display:flex;flex-direction:column;align-items:stretch;gap:0;flex:0 0 auto}
.nav-item{
  position:relative; width:100%; margin:0 0 5px; padding:10px 6px 9px; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; color:var(--sbx-text2); cursor:pointer;
  font-size:13px; transition:background .15s,color .15s;
}
.nav-item:hover{background:var(--sbx-s1);color:var(--sbx-text)}
.nav-item.active{background:var(--sbx-s2);color:var(--sbx-text);font-weight:600}
.nav-item.active::before{
  content:""; position:absolute; left:-10px; top:26%; bottom:26%;
  width:3px; border-radius:2px; background:var(--sbx-v600);
}
.nav-item .icon{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;color:var(--sbx-text2);transition:color .15s}
.nav-item .icon svg{width:22px;height:22px}
.nav-item.active .icon{color:var(--sbx-v600)}
.nav-item:hover .icon{color:var(--sbx-text)}
.nav-item span{font-size:13px;line-height:1.2}

/* 窄屏（≤768px）：收成 66px 纯图标栏，隐藏文字 */
@media (max-width:768px){
  .sidebar{width:66px;flex:0 0 66px;padding:18px 8px}
  .sidebar-name{display:none}
  .nav-item{flex-direction:column;gap:2px;justify-content:center;text-align:center;padding:12px 0}
  .nav-item span{display:none}
  .nav-item .icon{margin:0 auto 4px}
}
/* 超窄（≤430px）：50px */
@media (max-width:430px){
  .sidebar{width:50px;flex:0 0 50px;padding:14px 4px}
  .nav-item{padding:10px 0;margin-bottom:7px}
  .nav-item .icon svg{width:20px;height:20px}
}

/* ================= 充值中心弹层（rc-*，sb.js 注入，四页共用） =================
   视觉与 design/recharge.html 一致；固定浅色面板，不随页面深色主题翻转，
   保证支付场景的可读性与页面主题解耦。 */
.rc-ovl{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(10,16,32,.55);backdrop-filter:blur(3px);padding:18px}
.rc-ovl.show{display:flex}
.rc-panel{width:min(980px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:#fff;color:#0d1b3e;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(10,16,32,.35);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
.rc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 24px 14px;border-bottom:1px solid #eef1f7;flex:0 0 auto}
.rc-head h3{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:0}
.rc-sub{font-size:12.5px;color:#5b6a86;margin:4px 0 0}
.rc-sub b{color:#0ea968}
.rc-x{border:none;background:#f3f5fa;width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:14px;color:#5b6a86;flex:0 0 auto;line-height:1}
.rc-x:hover{background:#e8ecf5;color:#0d1b3e}
.rc-body{overflow-y:auto;padding:18px 24px;flex:1 1 auto;min-height:0}
.rc-sec-h{display:flex;align-items:baseline;gap:10px;margin:6px 0 12px}
.rc-sec-h h4{font-size:16px;font-weight:800;margin:0}
.rc-sec-h span{font-size:12px;color:#8b97ad}
.rc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.rc-cards.three{grid-template-columns:repeat(3,1fr)}
.rc-card{position:relative;background:#fff;border:1.5px solid #e6eaf2;border-radius:14px;
  padding:16px 14px 12px;cursor:pointer;text-align:left;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.rc-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(13,27,62,.12)}
.rc-card.sel{border-color:#1f5cff;box-shadow:0 0 0 1px rgba(31,92,255,.30),0 14px 34px rgba(13,27,62,.12)}
.rc-card.sel::after{content:"✓";position:absolute;top:10px;right:10px;width:20px;height:20px;
  border-radius:50%;background:linear-gradient(120deg,#1f5cff,#22d3ee);color:#fff;
  font-size:12px;font-weight:800;display:grid;place-items:center}
.rc-card .pop{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:linear-gradient(120deg,#1f5cff,#22d3ee);color:#fff;
  font-size:11px;font-weight:700;padding:3px 11px;border-radius:18px;white-space:nowrap}
.rc-card .cn{font-size:13px;font-weight:700;color:#5b6a86}
.rc-card .cv{font-size:26px;font-weight:850;margin:6px 0 2px;letter-spacing:-1px}
.rc-card .cv small{font-size:12px;font-weight:600;color:#8b97ad;letter-spacing:0}
.rc-card .ct{font-size:12px;color:#8b97ad}
.rc-card .ct b{color:#0ea968;font-size:13.5px}
.rc-card .cs{margin-top:5px;font-size:11px;font-weight:700;color:#d6336c;background:#fdecec;
  border-radius:10px;padding:2px 8px;display:inline-block}
.rc-card .cfoot{margin-top:9px;padding-top:8px;border-top:1px dashed #e6eaf2;font-size:11px;color:#8b97ad}
.rc-tips{margin-top:16px;color:#8b97ad;font-size:12px;line-height:1.9}
.rc-tips b{color:#0ea968}
.rc-foot{display:flex;align-items:center;gap:12px;padding:13px 24px;flex:0 0 auto;
  border-top:1px solid #eef1f7;background:#fbfcff}
.rc-selinfo{font-size:13px;color:#5b6a86;min-width:0}
.rc-selinfo b{color:#0d1b3e;font-size:15px}
.rc-err{font-size:12px;color:#d6336c;min-width:0}
.rc-reclink{flex:none;background:#fff;border:1px solid #dfe5f0;border-radius:10px;
  padding:10px 16px;font-size:13px;font-weight:600;color:#41527a;cursor:pointer;transition:.15s;white-space:nowrap}
.rc-reclink:hover{border-color:#1f5cff;color:#1f5cff;background:#f5f9ff}
.rc-pay{margin-left:auto;flex:none;display:inline-flex;align-items:center;
  background:linear-gradient(120deg,#1f5cff,#22d3ee);color:#fff;border:none;cursor:pointer;
  font-size:14.5px;font-weight:700;padding:11px 26px;border-radius:11px;
  box-shadow:0 8px 20px rgba(31,92,255,.32);transition:opacity .15s}
.rc-pay:disabled{opacity:.6;cursor:default}
/* 支付方式切换 + 微信扫码层（2026-10-03 微信支付接入） */
.rc-pms{margin-left:auto;flex:none;display:inline-flex;border:1px solid #dfe5f0;border-radius:10px;overflow:hidden}
.rc-pms .pm{border:none;background:#fff;color:#5b6a86;font-size:12.5px;font-weight:650;
  padding:9px 14px;cursor:pointer;transition:.15s;white-space:nowrap}
.rc-pms .pm + .pm{border-left:1px solid #dfe5f0}
.rc-pms .pm.sel{background:#eef3ff;color:#1f5cff}
.rc-pms .pm:hover{color:#1f5cff}
.rc-pay{margin-left:0}
.rc-wxmask{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:rgba(10,16,32,.5);backdrop-filter:blur(3px)}
.rc-wxmask.show{display:flex}
.rc-wxbox{background:#fff;color:#0d1b3e;border-radius:16px;padding:24px 28px 20px;width:min(300px,92vw);
  text-align:center;position:relative;box-shadow:0 30px 80px rgba(10,16,32,.35);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
.rc-wxx{position:absolute;top:8px;right:12px;border:none;background:none;font-size:18px;color:#8b97ad;cursor:pointer;line-height:1}
.rc-wxx:hover{color:#0d1b3e}
.rc-wxt{font-size:16px;font-weight:750}
.rc-wxt b{color:#1f5cff}
.rc-wxqr{margin:16px auto 8px;width:200px;height:200px;background:#fff;border:1px solid #e6eaf2;
  border-radius:12px;display:grid;place-items:center;overflow:hidden}
.rc-wxqr img,.rc-wxqr canvas{width:200px;height:200px;display:block}
.rc-wxhint{font-size:12.5px;color:#5b6a86}
.rc-wxstatus{font-size:13px;font-weight:650;color:#8b97ad;margin:8px 0 2px;min-height:19px}
.rc-wxstatus.ok{color:#0ea968}
.rc-wxstatus.err{color:#d6336c}
@media (max-width:720px){
  .rc-cards.three{grid-template-columns:1fr}
  .rc-cards{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .rc-selinfo.opt{display:none}
}