/* =====================================================================
 * RhexMall Pro · 插件设计系统（v2.2.4 · 主题自适应版）
 * 全部样式 scoped 于 .rhxm 根类，类名统一 rhxm- 前缀，绝不污染宿主全局
 * ---------------------------------------------------------------------
 * v2.2.4 修复：前台/后台弹窗与全局界面「看不清」——
 * ① 结构色全面接管 Rhex 宿主 shadcn 语义 token（hsl(var(--card)) 等），
 *    浅色 / 深色 / 跟随系统三种界面模式自动适配；
 * ② 强调文字色按界面模式切换（浅色宿主下自动加深保证对比度）；
 * ③ 弹窗与 Toast 随 JS 挂载进 .rhxm 作用域（本层同时兜底变量与文字色）。
 * ===================================================================== */

/* ======================== 主题 token 层 ========================
 * 结构色优先消费宿主语义变量（--background/--card/--border/--foreground 等），
 * 宿主缺失时回退浅色安全值；检测到深色宿主或系统深色模式时切换暗色数值。   */
.rhxm, .rhxm-mask, .rhxm-toast-wrap {
  /* 品牌色（背景/图标用，深浅通用） */
  --gold: #f5b544; --gold2: #ffcf7a; --mint: #3fe0c8; --vio: #9b8cff;
  --rose: #ff6b81; --sky: #58a6ff;
  /* 强调文字色：浅色宿主下加深，保证在浅色卡片上可读 */
  --gold-tx: #8a6a10; --mint-tx: #0a8a72; --rose-tx: #cf2d52; --sky-tx: #1470c8; --vio-tx: #6b52d6;
  /* 结构色：接管宿主 shadcn 语义 token（浅色回退） */
  --bg: hsl(var(--background, 0 0% 100%));
  --panel: hsl(var(--card, 0 0% 100%));
  --panel2: hsl(var(--muted, 210 40% 96.1%));
  --line: hsl(var(--border, 214 31.8% 88%));
  --line2: hsl(var(--input, 214 31.8% 82%));
  --fg: hsl(var(--foreground, 222 47% 11%));
  --muted: hsl(var(--muted-foreground, 215 16% 44%));
  --dim: hsl(var(--muted-foreground, 215 16% 44%) / .74);
  --track: hsl(var(--muted, 210 40% 93%));
  --field: hsl(var(--muted, 210 40% 96%));
  --shadow: 0 16px 40px -18px rgba(15, 23, 42, .30);
  --r-lg: 16px; --r-md: 12px; --r-sm: 9px;
  color-scheme: light;
}
/* 深色宿主（html.dark / data-theme="dark"） */
:root.dark .rhxm, :root.dark .rhxm-mask, :root.dark .rhxm-toast-wrap,
:root[data-theme="dark"] .rhxm, :root[data-theme="dark"] .rhxm-mask, :root[data-theme="dark"] .rhxm-toast-wrap {
  --gold-tx: #ffcf7a; --mint-tx: #3fe0c8; --rose-tx: #ff8a9c; --sky-tx: #79bcff; --vio-tx: #b3a6ff;
  --bg: hsl(var(--background, 240 10% 4%));
  --panel: hsl(var(--card, 240 8% 7%));
  --panel2: hsl(var(--muted, 240 5% 11%));
  --line: hsl(var(--border, 240 5% 16%));
  --line2: hsl(var(--input, 240 5% 26%));
  --fg: hsl(var(--foreground, 240 6% 95%));
  --muted: hsl(var(--muted-foreground, 240 5% 64%));
  --dim: hsl(var(--muted-foreground, 240 5% 64%) / .74);
  --track: hsl(var(--muted, 240 5% 13%));
  --field: hsl(var(--muted, 240 6% 9%));
  --shadow: 0 16px 44px -18px rgba(0, 0, 0, .65);
  color-scheme: dark;
}
/* 「跟随系统」模式且未打 light/dark 标记时的系统色兜底 */
@media (prefers-color-scheme: dark) {
  :root:not(.dark):not(.light):not([data-theme="dark"]):not([data-theme="light"]) .rhxm,
  :root:not(.dark):not(.light):not([data-theme="dark"]):not([data-theme="light"]) .rhxm-mask,
  :root:not(.dark):not(.light):not([data-theme="dark"]):not([data-theme="light"]) .rhxm-toast-wrap {
    --gold-tx: #ffcf7a; --mint-tx: #3fe0c8; --rose-tx: #ff8a9c; --sky-tx: #79bcff; --vio-tx: #b3a6ff;
    --bg: hsl(var(--background, 240 10% 4%));
    --panel: hsl(var(--card, 240 8% 7%));
    --panel2: hsl(var(--muted, 240 5% 11%));
    --line: hsl(var(--border, 240 5% 16%));
    --line2: hsl(var(--input, 240 5% 26%));
    --fg: hsl(var(--foreground, 240 6% 95%));
    --muted: hsl(var(--muted-foreground, 240 5% 64%));
    --dim: hsl(var(--muted-foreground, 240 5% 64%) / .74);
    --track: hsl(var(--muted, 240 5% 13%));
    --field: hsl(var(--muted, 240 6% 9%));
    --shadow: 0 16px 44px -18px rgba(0, 0, 0, .65);
    color-scheme: dark;
  }
}

.rhxm {
  background: var(--bg); color: var(--fg);
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 14px; line-height: 1.6;
  border-radius: var(--r-lg); overflow: hidden;
  min-height: 420px; text-align: left;
}
.rhxm *, .rhxm *::before, .rhxm *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ======================== 宿主全局样式隔离 ========================
 * 宿主针对 body/div/td 等元素的全局文字色会穿透进插件面板，
 * 作用域内对全部文本元素显式声明颜色，任何元素都不依赖继承；       */
.rhxm, .rhxm div, .rhxm span, .rhxm p, .rhxm a, .rhxm b, .rhxm strong,
.rhxm em, .rhxm i, .rhxm small, .rhxm label, .rhxm td, .rhxm th, .rhxm li,
.rhxm code, .rhxm pre, .rhxm mark, .rhxm summary,
.rhxm h1, .rhxm h2, .rhxm h3, .rhxm h4, .rhxm h5, .rhxm h6,
.rhxm button, .rhxm input, .rhxm textarea, .rhxm select, .rhxm option { color: var(--fg); }
/* 弹窗 / Toast 挂载到 .rhxm 之外时的同款兜底（老缓存页面兼容） */
.rhxm-mask, .rhxm-mask div, .rhxm-mask span, .rhxm-mask p, .rhxm-mask b, .rhxm-mask strong,
.rhxm-mask small, .rhxm-mask label, .rhxm-mask td, .rhxm-mask th, .rhxm-mask code, .rhxm-mask pre,
.rhxm-mask h1, .rhxm-mask h2, .rhxm-mask h3, .rhxm-mask h4,
.rhxm-mask button, .rhxm-mask input, .rhxm-mask textarea, .rhxm-mask select, .rhxm-mask option,
.rhxm-toast-wrap, .rhxm-toast-wrap div, .rhxm-toast-wrap span, .rhxm-toast-wrap b { color: var(--fg); }
/* 宿主表格斑马纹 / host hr / host 列表样式清零 */
.rhxm table, .rhxm thead, .rhxm tbody, .rhxm tr { background: transparent; }
.rhxm ul, .rhxm ol, .rhxm li { list-style: none; }
.rhxm hr { border: 0; border-top: 1px solid var(--line); }
.rhxm img { border: 0; }

.rhxm a { color: inherit; text-decoration: none; }
.rhxm button { font-family: inherit; }
.rhxm::-webkit-scrollbar { width: 8px; height: 8px; }
.rhxm::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; }

/* ---------- 泛用 ---------- */
.rhxm .c-gold { color: var(--gold-tx); } .rhxm .c-mint { color: var(--mint-tx); }
.rhxm .c-rose { color: var(--rose-tx); } .rhxm .c-dim { color: var(--dim); }
.rhxm .c-muted { color: var(--muted); }
.rhxm .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.rhxm .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rhxm .sp { flex: 1; }
.rhxm .hide { display: none !important; }

.rhxm .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-md); padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--fg);
  transition: all .18s ease; user-select: none;
}
.rhxm .btn:hover { border-color: var(--line2); background: var(--panel2); }
.rhxm .btn:active { transform: scale(.97); }
.rhxm .btn:disabled { opacity: .4; pointer-events: none; }
.rhxm .btn-gold {
  background: linear-gradient(180deg, var(--gold2), var(--gold)); border: 0; color: #221503;
  font-weight: 800; box-shadow: 0 8px 22px -10px rgba(245,181,68,.55);
}
.rhxm .btn-gold:hover { filter: brightness(1.08); border: 0; background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.rhxm .btn-mint { background: rgba(63,224,200,.13); border-color: rgba(63,224,200,.3); color: var(--mint-tx); }
.rhxm .btn-mint:hover { background: rgba(63,224,200,.22); }
.rhxm .btn-danger { background: rgba(255,107,129,.12); border-color: rgba(255,107,129,.32); color: var(--rose-tx); }
.rhxm .btn-sm { padding: 5px 11px; font-size: 12px; border-radius: var(--r-sm); }
.rhxm .btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 14px; }
.rhxm .btn-block { width: 100%; }

.rhxm .tag {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel2);
  padding: 2px 7px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.rhxm .tag-gold { background: rgba(245,181,68,.12); border-color: rgba(245,181,68,.3); color: var(--gold-tx); }
.rhxm .tag-mint { background: rgba(63,224,200,.12); border-color: rgba(63,224,200,.3); color: var(--mint-tx); }
.rhxm .tag-rose { background: rgba(255,107,129,.12); border-color: rgba(255,107,129,.3); color: var(--rose-tx); }
.rhxm .tag-sky { background: rgba(88,166,255,.12); border-color: rgba(88,166,255,.3); color: var(--sky-tx); }
.rhxm .tag-vio { background: rgba(155,140,255,.12); border-color: rgba(155,140,255,.3); color: var(--vio-tx); }

.rhxm .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rhxm .card-hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.rhxm .card-hover:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: var(--shadow); }

.rhxm .input, .rhxm .select, .rhxm .textarea {
  width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 12px; font-size: 13px; color: var(--fg); outline: none; font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}
.rhxm .input:focus, .rhxm .textarea:focus, .rhxm .select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,181,68,.14); }
.rhxm .input::placeholder, .rhxm .textarea::placeholder { color: var(--dim); }
.rhxm .select option { background: var(--panel); color: var(--fg); }
.rhxm .field { display: block; margin-bottom: 12px; }
.rhxm .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }

/* ---------- 顶栏 ---------- */
.rhxm-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky; top: 0; z-index: 30;
}
.rhxm-brand { display: flex; align-items: center; gap: 10px; }
.rhxm-brand-logo {
  width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #221503; flex: none;
  box-shadow: 0 6px 18px -6px rgba(245,181,68,.5);
}
.rhxm-brand b { font-size: 15px; font-weight: 900; letter-spacing: -.02em; display: block; line-height: 1.2; }
.rhxm-brand small { font-size: 10px; color: var(--dim); display: block; }
.rhxm-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.rhxm-nav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px;
  font-size: 13px; color: var(--muted); transition: all .16s;
}
.rhxm-nav a:hover { color: var(--fg); background: var(--panel2); }
.rhxm-nav a.on { color: var(--gold-tx); background: rgba(245,181,68,.12); font-weight: 800; }
.rhxm-wallet {
  display: flex; align-items: center; gap: 12px; margin-left: auto;
  border: 1px solid var(--line); background: var(--panel2); border-radius: 12px; padding: 7px 14px;
}
.rhxm-wallet em { font-style: normal; display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
.rhxm-wallet b { font-family: 'JetBrains Mono', monospace; }
.rhxm-wallet .div { width: 1px; height: 14px; background: var(--line); }

/* ---------- 主体布局 ---------- */
.rhxm-body { padding: 20px; max-width: 1180px; margin: 0 auto; }
.rhxm-hero {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(120deg, var(--panel2), var(--panel)); padding: 34px 30px; margin-bottom: 18px;
}
.rhxm-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--muted) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 25%, transparent) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.rhxm-hero::after {
  content: ''; position: absolute; top: -90px; right: 8%; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(245,181,68,.16); filter: blur(90px); pointer-events: none;
}
.rhxm-hero h1 { font-size: 28px; font-weight: 900; letter-spacing: -.02em; line-height: 1.25; position: relative; }
.rhxm-hero h1 .gold-text {
  background: linear-gradient(120deg, var(--gold-tx), var(--gold) 45%, #e08a1e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rhxm-hero p { color: var(--muted); font-size: 13px; max-width: 560px; margin-top: 8px; position: relative; }
.rhxm-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; position: relative; }
.rhxm-hero-stats .stat {
  border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 16px;
}
.rhxm-hero-stats .stat small { display: block; font-size: 10.5px; color: var(--dim); }
.rhxm-hero-stats .stat b { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--gold-tx); }

/* ---------- 筛选 / 商品格子 ---------- */
.rhxm-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 14px; }
.rhxm-pill {
  border: 1px solid var(--line); border-radius: 11px; padding: 6px 14px; font-size: 12.5px;
  color: var(--muted); cursor: pointer; background: transparent; transition: all .16s;
}
.rhxm-pill:hover { color: var(--fg); }
.rhxm-pill.on { border-color: rgba(245,181,68,.5); background: rgba(245,181,68,.12); color: var(--gold-tx); font-weight: 800; }
.rhxm-search { position: relative; margin-left: auto; min-width: 200px; }
.rhxm-search .input { padding-left: 32px; }
.rhxm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--dim); }

.rhxm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.rhxm-product { overflow: hidden; display: flex; flex-direction: column; }
.rhxm-product-img { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--field); }
.rhxm-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; display: block; }
.rhxm-product:hover .rhxm-product-img img { transform: scale(1.06); }
.rhxm-product-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); }
.rhxm-product-img .badges { position: absolute; z-index: 2; left: 10px; top: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.rhxm-product-img .bads { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: flex; gap: 5px; }
.rhxm-product-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rhxm-product-cat { font-size: 11px; color: var(--dim); }
.rhxm-product-name { font-size: 14px; font-weight: 800; line-height: 1.35; }
.rhxm-product-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhxm-limitbar { height: 5px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 4px; }
.rhxm-limitbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--rose)); }
.rhxm-product-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; }
.rhxm-price { display: flex; align-items: baseline; gap: 4px; color: var(--gold-tx); font-weight: 900; font-size: 17px; font-family: 'JetBrains Mono', monospace; }
.rhxm-price .thru { font-size: 11px; color: var(--dim); text-decoration: line-through; font-weight: 400; }
.rhxm-price-pts { color: var(--mint-tx); font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 3px; font-family: 'JetBrains Mono', monospace; }
.rhxm-sold { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 3px; }
.rhxm-soldout { filter: grayscale(.9) opacity(.5); }

/* ---------- 弹窗（挂载于 .rhxm 作用域内，主题随宿主） ---------- */
.rhxm-mask {
  position: fixed; inset: 0; z-index: 99900; background: rgba(5,5,9,.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: rhxm-fade .18s ease;
}
@keyframes rhxm-fade { from { opacity: 0; } }
.rhxm-modal {
  width: min(560px, 94vw); max-height: 88vh; overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  animation: rhxm-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.rhxm-modal.wide { width: min(880px, 96vw); }
@keyframes rhxm-pop { from { transform: scale(.94) translateY(14px); opacity: 0; } }
.rhxm-modal-head {
  display: flex; align-items: center; gap: 9px; padding: 15px 18px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.rhxm-modal-head h3 { font-size: 15px; font-weight: 900; flex: 1; }
.rhxm-modal-x { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 4px; border-radius: 8px; display: flex; }
.rhxm-modal-x:hover { color: var(--fg); background: var(--panel2); }
.rhxm-modal-body { padding: 18px; }

/* ---------- 详情 ---------- */
.rhxm-detail { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; }
@media (max-width: 760px) { .rhxm-detail { grid-template-columns: 1fr; } }
.rhxm-detail-img { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); position: relative; align-self: start; }
.rhxm-detail-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.rhxm-detail-img .badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.rhxm-detail h2 { font-size: 22px; font-weight: 900; line-height: 1.3; }
.rhxm-detail .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.rhxm-price-box {
  border: 1px solid rgba(245,181,68,.25); border-radius: 14px; padding: 14px 16px; margin: 12px 0;
  background: linear-gradient(135deg, rgba(245,181,68,.08), transparent);
}
.rhxm-price-box .big { font-size: 26px; font-weight: 900; color: var(--gold-tx); font-family: 'JetBrains Mono', monospace; }
.rhxm-price-box .big small { font-size: 13px; color: var(--dim); text-decoration: line-through; font-weight: 400; margin-left: 8px; }
.rhxm-price-box .note { font-size: 11px; color: var(--dim); margin-top: 4px; }
.rhxm-stockcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.rhxm-stockcards .sc { border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; background: var(--panel); }
.rhxm-stockcards .sc b { display: block; font-size: 17px; font-family: 'JetBrains Mono', monospace; }
.rhxm-stockcards .sc small { font-size: 10.5px; color: var(--dim); }
.rhxm-perk {
  display: flex; align-items: center; gap: 10px; border: 1px solid rgba(155,140,255,.3);
  background: rgba(155,140,255,.07); border-radius: 13px; padding: 11px 13px; margin: 10px 0;
}
.rhxm-perk-ico { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(155,140,255,.15); color: var(--vio); }
.rhxm-deliver { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.rhxm-deliver > div { display: flex; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; font-size: 12px; }
.rhxm-deliver b { font-size: 12.5px; display: block; }
.rhxm-deliver small { color: var(--dim); font-size: 11px; }
.rhxm-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rhxm-qty button { width: 36px; height: 38px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.rhxm-qty button:hover { color: var(--gold-tx); }
.rhxm-qty span { width: 42px; text-align: center; font-weight: 900; font-family: 'JetBrains Mono', monospace; font-size: 15px; }

/* ---------- 收银台 ---------- */
.rhxm-payitem { border: 1px solid var(--line); border-radius: 13px; padding: 12px 13px; cursor: pointer; transition: all .16s; margin-bottom: 9px; }
.rhxm-payitem:hover { border-color: var(--line2); }
.rhxm-payitem.on { border-color: rgba(245,181,68,.5); background: rgba(245,181,68,.06); }
.rhxm-payitem .t { display: flex; align-items: center; gap: 10px; }
.rhxm-payitem .t b { font-size: 13.5px; flex: 1; }
.rhxm-payitem small { color: var(--dim); font-size: 11.5px; display: block; margin-top: 2px; }
.rhxm-radio {
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--line2); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.rhxm-payitem.on .rhxm-radio { border-color: var(--gold); background: var(--gold); }
.rhxm-payitem.on .rhxm-radio::after { content: ''; width: 7px; height: 7px; background: #221503; border-radius: 50%; }
.rhxm-slider { width: 100%; accent-color: var(--gold); margin: 10px 0 6px; }
.rhxm-splitbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--track); }
.rhxm-splitbar .a { background: rgba(63,224,200,.75); }
.rhxm-splitbar .b { background: rgba(245,181,68,.85); flex: 1; }
.rhxm-bill { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--panel2); }
.rhxm-bill .r { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: var(--muted); }
.rhxm-bill .total { border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.rhxm-bill .total b { font-size: 21px; font-weight: 900; color: var(--gold-tx); font-family: 'JetBrains Mono', monospace; }

/* 处理步骤 */
.rhxm-steps { display: flex; flex-direction: column; gap: 12px; }
.rhxm-step { display: flex; align-items: center; gap: 11px; opacity: .32; transition: opacity .2s; }
.rhxm-step.on { opacity: 1; }
.rhxm-step-ico {
  width: 32px; height: 32px; flex: none; border-radius: 10px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--dim);
}
.rhxm-step.cur .rhxm-step-ico { border-color: rgba(245,181,68,.5); background: rgba(245,181,68,.1); color: var(--gold-tx); }
.rhxm-step.done .rhxm-step-ico { border-color: rgba(63,224,200,.4); background: rgba(63,224,200,.1); color: var(--mint); }
.rhxm-step b { font-size: 13px; }
.rhxm-sqltip {
  margin-top: 16px; border: 1px solid rgba(155,140,255,.3); background: rgba(155,140,255,.07);
  border-radius: 12px; padding: 10px 13px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--vio-tx); line-height: 1.7; overflow-x: auto; white-space: pre;
}

/* 卡密票据 */
.rhxm-ticket {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px dashed rgba(245,181,68,.4); border-radius: 13px; padding: 13px 16px; margin: 8px 0;
}
.rhxm-ticket code { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 800; letter-spacing: 1.5px; color: var(--gold-tx); }
.rhxm-ticket.blur code { filter: blur(5px); user-select: none; color: var(--muted); }
.rhxm-ticket.expired code { color: var(--dim); text-decoration: line-through; }

/* ---------- 列表 / 表格 ---------- */
.rhxm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rhxm-order { overflow: hidden; margin-bottom: 12px; }
.rhxm-order-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--dim);
  border-bottom: 1px solid var(--line); background: var(--panel2); padding: 9px 14px;
}
.rhxm-order-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 14px; }
.rhxm-order-body img { width: 82px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.rhxm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rhxm-table th { text-align: left; padding: 9px 12px; font-size: 11.5px; color: var(--dim); font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rhxm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rhxm-table tr:hover td { background: var(--panel2); }

/* ---------- 兑换 ---------- */
.rhxm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .rhxm-duo { grid-template-columns: 1fr; } }
.rhxm-balance { border-radius: 13px; padding: 13px 15px; border: 1px solid; }
.rhxm-balance.pts { border-color: rgba(63,224,200,.25); background: rgba(63,224,200,.06); }
.rhxm-balance.cash { border-color: rgba(245,181,68,.25); background: rgba(245,181,68,.06); }
.rhxm-balance small { font-size: 11px; opacity: .8; display: flex; align-items: center; gap: 4px; }
.rhxm-balance b { font-size: 21px; font-family: 'JetBrains Mono', monospace; display: block; margin-top: 2px; }
.rhxm-balance.pts b { color: var(--mint-tx); } .rhxm-balance.cash b { color: var(--gold-tx); }
.rhxm-dir { border: 1px solid var(--line); border-radius: 13px; padding: 12px; text-align: center; cursor: pointer; transition: all .16s; }
.rhxm-dir.on { border-color: rgba(245,181,68,.5); background: rgba(245,181,68,.08); }
.rhxm-dir b { font-size: 13.5px; display: block; }
.rhxm-dir small { font-size: 11px; color: var(--dim); }
.rhxm-preview { border: 1px solid var(--line); background: var(--panel2); border-radius: 13px; padding: 13px 15px; font-size: 12.5px; margin-top: 12px; }
.rhxm-preview .r { display: flex; justify-content: space-between; padding: 2.5px 0; color: var(--muted); }
.rhxm-preview .got { display: flex; justify-content: space-between; border-top: 1px dashed var(--line2); padding-top: 9px; margin-top: 8px; align-items: baseline; }
.rhxm-preview .got b { color: var(--gold-tx); font-size: 17px; font-family: 'JetBrains Mono', monospace; }
.rhxm-progress { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 6px; }
.rhxm-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--gold)); border-radius: 99px; transition: width .4s ease; }

/* ---------- 管理端 ---------- */
.rhxm-admin-wrap { display: flex; gap: 16px; min-height: 480px; }
.rhxm-side { width: 168px; flex: none; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 10px; align-self: flex-start; position: sticky; top: 76px; }
.rhxm-side button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; border: 0; background: none; color: var(--muted);
  font-size: 13px; cursor: pointer; margin-bottom: 2px; transition: all .15s;
}
.rhxm-side button:hover { color: var(--fg); background: var(--panel2); }
.rhxm-side button.on { color: var(--gold-tx); background: rgba(245,181,68,.12); font-weight: 800; }
.rhxm-admin-main { flex: 1; min-width: 0; }
.rhxm-stats4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rhxm-stat-card { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 13px 14px; }
.rhxm-stat-ico { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 11px; border: 1px solid; }
.rhxm-stat-ico.gold { color: var(--gold); border-color: rgba(245,181,68,.3); background: rgba(245,181,68,.1); }
.rhxm-stat-ico.mint { color: var(--mint); border-color: rgba(63,224,200,.3); background: rgba(63,224,200,.1); }
.rhxm-stat-ico.rose { color: var(--rose); border-color: rgba(255,107,129,.3); background: rgba(255,107,129,.1); }
.rhxm-stat-ico.sky { color: var(--sky); border-color: rgba(88,166,255,.3); background: rgba(88,166,255,.1); }
.rhxm-stat-card small { display: block; font-size: 11px; color: var(--dim); }
.rhxm-stat-card b { font-size: 18px; font-family: 'JetBrains Mono', monospace; }
@media (max-width: 720px) { .rhxm-side { width: 100%; position: static; display: flex; overflow-x: auto; } .rhxm-admin-wrap { flex-direction: column; } }

.rhxm-switch { position: relative; width: 36px; height: 20px; border-radius: 99px; background: var(--line2); transition: background .2s; cursor: pointer; flex: none; display: inline-block; }
.rhxm-switch::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: all .2s; }
.rhxm-switch[data-on="1"] { background: var(--gold); }
.rhxm-switch[data-on="1"]::after { left: 18px; background: #0a0a0f; }

.rhxm-toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.rhxm-toast { background: var(--panel); border: 1px solid var(--line2); color: var(--fg); border-radius: 12px; padding: 10px 18px; font-size: 13px; box-shadow: var(--shadow); animation: rhxm-pop .2s ease; max-width: 86vw; }
.rhxm-toast.ok { border-color: rgba(63,224,200,.45); } .rhxm-toast.err { border-color: rgba(255,107,129,.5); }

.rhxm-empty { text-align: center; padding: 52px 16px; color: var(--dim); }
.rhxm-empty .ic { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.rhxm-empty b { display: block; color: var(--muted); font-size: 14px; margin-bottom: 3px; }
.rhxm-empty small { font-size: 12px; }
.rhxm-loading { display: flex; justify-content: center; padding: 60px 0; }
.rhxm-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: rhxm-rot .8s linear infinite; }
@keyframes rhxm-rot { to { transform: rotate(360deg); } }
.rhxm-notice { border-radius: 12px; padding: 10px 13px; font-size: 12.5px; line-height: 1.7; border: 1px solid; }
.rhxm-notice.gold { border-color: rgba(245,181,68,.3); background: rgba(245,181,68,.07); color: var(--gold-tx); }
.rhxm-notice.mint { border-color: rgba(63,224,200,.3); background: rgba(63,224,200,.07); color: var(--mint-tx); }
.rhxm-notice.rose { border-color: rgba(255,107,129,.3); background: rgba(255,107,129,.07); color: var(--rose-tx); }
.rhxm-h2 { font-size: 16px; font-weight: 900; margin: 18px 0 12px; display: flex; align-items: center; gap: 8px; }

.rhxm .btn span, .rhxm .tag span { color: inherit; }