/* ============================================================
   小白Tokens H5 — 设计系统 v2
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  --c-primary: #4f46e5;
  --c-primary-light: #6366f1;
  --c-primary-dark: #3730a3;
  --c-primary-bg: #eef2ff;
  --c-accent: #f59e0b;
  --c-accent-light: #fbbf24;
  --c-green: #10b981;
  --c-green-bg: #d1fae5;
  --c-red: #ef4444;
  --c-red-bg: #fee2e2;
  --c-bg: #f0f2f8;
  --c-surface: #ffffff;
  --c-border: #e5e7eb;
  --c-border-light: #f3f4f6;
  --c-text: #1f2937;
  --c-text-secondary: #6b7280;
  --c-text-tertiary: #9ca3af;
  --c-shadow: 0 2px 12px rgba(79, 70, 229, 0.08);
  --c-shadow-lg: 0 8px 30px rgba(79, 70, 229, 0.12);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --font: -apple-system, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 88px;
  min-height: 100vh;
  line-height: 1.5;
}

#app { padding: 0 16px 20px; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
  color: #fff;
  padding: 14px 16px;
  margin: 0 -16px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
  position: relative;
  overflow: hidden;
}
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 60% at 20% 100%, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.topbar::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  pointer-events: none;
}
#brand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
#topRight {
  font-size: 13px;
  opacity: 0.92;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* ---------- 下拉刷新指示器 ---------- */
.ptr {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0;
  z-index: 45;            /* 高于页面内容，低于弹窗(mask z-50) */
  display: flex;
  justify-content: center;
  pointer-events: none;   /* 不拦截触摸，交由下拉手势处理 */
}
.ptr.hidden { display: none; }
.ptr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 74px;      /* 落在顶栏下方，随下拉从视口上方滑入可见区域 */
  /* 默认藏在视口上方，由 JS 随下拉距离位移显示 */
  transform: translateY(-92px);
  transition: transform 0.18s var(--ease-spring);
  will-change: transform;
}
.ptr-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-primary-light);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.28);
}
.ptr-arr {
  display: block;
  width: 17px;
  height: 17px;
  transition: transform 0.2s var(--ease);
}
.ptr-box.ready .ptr-arr { transform: rotate(180deg); }  /* 达到阈值：箭头翻转 */
.ptr-txt {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  padding: 2px 8px;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
/* 刷新中：刷新箭头换成旋转加载环 */
.ptr-box.loading .ptr-ico { border-color: var(--c-border); }
.ptr-spin {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--c-primary-bg);
  border-top-color: var(--c-primary);
  animation: ptrSpin 0.8s linear infinite;
}
.ptr-box.loading .ptr-spin { display: block; }
.ptr-box.loading .ptr-arr { display: none; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* 管理员控制台（深色主题）：让下拉刷新指示器清晰可见，并与居中的管理内容对齐 */
body.admin #ptr { max-width: 520px; margin: 0 auto; }
body.admin .ptr-box { margin-top: 100px; }   /* 管理员顶栏更高，指示器再下移一点 */
body.admin .ptr-ico {
  background: #0f172a;
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}
body.admin .ptr-txt {
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.admin .ptr-box.loading .ptr-ico { border-color: #334155; }

/* ---------- 页面头 ---------- */
.page-head {
  padding: 6px 2px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-head h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.3px;
}
/* 页头「↻ 刷新」按钮（普通用户页：套餐管理 / 个人中心）。
 * 注：管理端另有 body.admin .ref-btn 样式（深色主题）；此规则针对用户端，
 * 视觉与 .orders-entry 保持一致（浅底 + 主色文字 + 胶囊圆角）。
 * 不能直接复用管理端样式：管理端样式只写在 body.admin 作用域内，用户页取不到会退化成默认按钮。 */
.ref-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.ref-btn:active { transform: scale(0.96); background: var(--c-primary-bg); border-color: var(--c-primary-light); }
.ref-btn:disabled { opacity: .55; pointer-events: none; }
.note {
  color: var(--c-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.note code {
  background: var(--c-primary-bg);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--c-primary);
  font-family: var(--mono);
}

/* ---------- 视图 ---------- */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--c-shadow);
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.6);
  transition: box-shadow 0.2s var(--ease);
}
.card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--c-text);
}

/* ---------- 按钮 ---------- */
.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  cursor: pointer;
  margin-top: 12px;
  font-weight: 600;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); }
.btn-primary:active { box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25); }

.btn-ghost {
  background: var(--c-primary-bg);
  color: var(--c-primary);
  font-weight: 600;
}
.btn-ghost:active { background: #dde4ff; }

.btn-cred {
  background: linear-gradient(135deg, #0ea5e9, var(--c-primary-light));
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 91, 253, 0.2);
  font-size: 13px;
  padding: 11px;
}
.btn-cred:active { box-shadow: 0 2px 6px rgba(59, 91, 253, 0.15); }

.btn-renew {
  background: linear-gradient(135deg, var(--c-accent), #ef4444);
  color: #fff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
  font-size: 13px;
  padding: 11px;
}
.btn-renew:active { box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15); }

/* ---------- 登录/注册 ---------- */
.tabs {
  display: flex;
  background: var(--c-bg);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  overflow: hidden;
  padding: 4px;
  gap: 4px;
}
.tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s var(--ease);
}
.tab.active {
  background: var(--c-surface);
  color: var(--c-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}
.form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-secondary);
  margin: 14px 0 5px;
}
.form .pwd-wrap { position: relative; }
.form input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  outline: none;
  background: #fafbfc;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  font-family: var(--font);
}
.form input:focus {
  border-color: var(--c-primary-light);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.form input.bad {
  border-color: var(--c-red);
  background: #fff;
}
.form input.bad:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.form input[type="password"] { padding-right: 46px; }

.eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 17px;
  cursor: pointer;
  opacity: 0.45;
  padding: 8px;
  line-height: 1;
  transition: opacity 0.15s var(--ease);
}
.eye:active { opacity: 0.8; }

.field-err {
  color: var(--c-red);
  font-size: 12px;
  margin-top: 5px;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: shake 0.3s var(--ease);
}
/* 确保 hidden 属性真正隐藏错误提示（避免 display:flex 覆盖 hidden 导致异常显示） */
.field-err[hidden] { display: none !important; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.cfm-row { display: none; }
.auth-register .cfm-row { display: block; }

.msg {
  color: var(--c-red);
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
  text-align: center;
  font-weight: 600;
}
.hint {
  color: var(--c-text-tertiary);
  font-size: 12px;
  margin-top: 14px;
  text-align: center;
}

/* ---------- 市场：分类一级列表 ---------- */
.market-body { padding: 2px 0 8px; }
.market-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 2px 10px;
}
.market-cat-head .mch-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text);
}
.market-cat-head small {
  font-size: 11px;
  color: var(--c-text-tertiary);
  font-weight: 500;
}
.cat-list { display: flex; flex-direction: column; gap: 10px; }
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--c-shadow);
  cursor: pointer;
  transition: transform 0.18s var(--ease-spring), box-shadow 0.22s var(--ease), border-color 0.2s var(--ease);
}
.cat-item:active { transform: scale(0.98); }
.cat-item:hover { border-color: var(--c-primary-light); box-shadow: var(--c-shadow-lg); }
.cat-item-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cat-item-ic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.22);
}
.cat-item-txt { display: flex; flex-direction: column; min-width: 0; }
.cat-item-txt b {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-item-txt span {
  font-size: 11px;
  color: var(--c-text-tertiary);
  font-weight: 600;
  margin-top: 2px;
}
.cat-item-go {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--c-text-tertiary);
  line-height: 1;
  transition: transform 0.18s var(--ease);
}
.cat-item:active .cat-item-go { transform: translateX(2px); }

/* ---------- 市场：分类套餐弹窗（居中） ---------- */
.cat-plan-box {
  background: var(--c-surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 400px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  animation: popIn 0.3s var(--ease-spring);
}
.cat-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--c-border-light);
  flex-shrink: 0;
}
.cat-plan-head h3 { font-size: 16px; font-weight: 800; margin: 0; }
.cat-plan-close {
  border: none;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s var(--ease-spring), background 0.2s var(--ease);
}
.cat-plan-close:active { transform: scale(0.9); }
/* 卡片列表：卡片过多时纵向可滑动，不挤压 */
.cat-plan-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.45) transparent;
}
.cat-plan-list::-webkit-scrollbar { width: 6px; }
.cat-plan-list::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.4); border-radius: 6px; }
.cat-plan-list::-webkit-scrollbar-track { background: transparent; }
.cat-plan-list .plan { margin: 0; }
.cat-plan-list .plan { flex-shrink: 0; } /* 卡片自身高度不受压缩，靠列表滚动 */

/* 套餐卡片（弹窗内）沿用基础紧凑布局，仅微调间距 */
.cat-plan-list .plan { padding: 14px 15px 12px; }
.cat-plan-list .plan-top { margin-bottom: 9px; }

/* ---------- 套餐卡片 ---------- */
.plan {
  background: var(--c-surface);
  border-radius: 18px;
  padding: 14px 15px 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 20px -8px rgba(79,70,229,0.12);
  border: 1px solid var(--c-border-light);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.28s var(--ease), border-color 0.22s var(--ease);
}
.plan:active { transform: scale(0.98); }
/* 卡片左上主色竖条 */
.plan::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  border-radius: 0 2px 2px 0;
}
.plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  position: relative;
  z-index: 1;
}
.plan-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plan-hot .plan-top { padding-right: 44px; } /* 为“推荐”徽章让位，避免与价格重叠 */
.plan-flag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--c-accent), var(--c-red));
  padding: 1.5px 7px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(245,158,11,0.35);
}
/* 第2行：天数 / 次数 / token 标签 */
.plan-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.chip {
  background: var(--c-primary-bg);
  color: var(--c-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 9px;
  border-radius: 16px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip.gray { background: #f3f4f6; color: var(--c-text-secondary); }
/* 天数标签用暖色强调 */
.chip.chip-days {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
/* 第3行：价格 + 购买（最底部，分隔线上方对齐） */
.plan-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--c-border-light);
  position: relative;
  z-index: 1;
}
.plan-price {
  font-weight: 800;
  font-size: 20px;
  color: var(--c-red);
  letter-spacing: -0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.1;
}
.plan-price small {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-tertiary);
  margin-right: 1px;
}
/* 小型购买按钮：不占满整行，右侧紧凑 pill */
.btn-plan-buy {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 18px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.26);
  transition: transform 0.14s var(--ease-spring), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.btn-plan-buy:active { transform: scale(0.95); box-shadow: 0 1px 5px rgba(79,70,229,0.22); }
.btn-plan-buy:disabled { opacity: 0.6; }

/* ---------- 我的套餐卡片 ---------- */
.mypkg {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--c-shadow);
  border: 1px solid var(--c-border-light);
  transition: transform 0.15s var(--ease-spring), box-shadow 0.2s var(--ease);
}
.mypkg:active { transform: scale(0.99); }
.mypkg.pending { border: 1px solid rgba(245,158,11,0.35); background: linear-gradient(180deg, #fffdf7, var(--c-surface)); }
.mypkg.pending .mypkg-actions { margin-top: 4px; }
.mypkg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.mypkg-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--c-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
}
.pill.ok { background: var(--c-green-bg); color: var(--c-green); }
.pill.off { background: #f3f4f6; color: var(--c-text-secondary); }
.pill.warn { background: rgba(245,158,11,0.15); color: #d97706; }
.mypkg-sub {
  font-size: 12px;
  color: var(--c-text-tertiary);
  margin-bottom: 10px;
}
.keybox {
  background: #1e1b4b;
  color: #a5b4fc;
  border-radius: var(--radius-md);
  padding: 14px;
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid rgba(165, 180, 252, 0.15);
  transition: background 0.2s var(--ease);
}
.keybox:hover { background: #2e1f6a; }
.key-copy {
  color: #1e1b4b;
  background: #a5b4fc;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.key-copy:active { opacity: 0.8; }
.mypkg-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.mypkg-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.mypkg-actions .btn { flex: 1; margin-top: 0; }

/* ---------- 续费套餐选择弹窗 ---------- */
.renew-box { text-align: left; max-height: 80vh; overflow-y: auto; }
.renew-box h3 { text-align: center; font-size: 17px; }
.renew-box .note { margin-bottom: 12px; font-size: 12px; }
.renew-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.renew-item {
  border: 1.5px solid var(--c-border-light);
  background: #fafbfc;
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s var(--ease);
}
.renew-item:active {
  transform: scale(0.98);
  border-color: var(--c-primary-light);
  background: var(--c-primary-bg);
}
.renew-item-name { font-weight: 700; font-size: 15px; color: var(--c-text); }
.renew-item-price {
  font-weight: 800;
  font-size: 17px;
  color: var(--c-red);
}
.renew-item-price small { font-size: 12px; font-weight: 500; color: var(--c-text-tertiary); }
.renew-item-chip { font-size: 12px; color: var(--c-text-secondary); }

/* ---------- 订单 ---------- */
.order {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: var(--c-shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--c-border-light);
  transition: transform 0.15s var(--ease-spring);
}
.order:active { transform: scale(0.99); }
.order-left b { font-size: 15px; color: var(--c-text); }
.order-left .sub { font-size: 12px; color: var(--c-text-tertiary); margin-top: 3px; }
.order .st {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  flex-shrink: 0;
}
.st.paid { background: var(--c-green-bg); color: var(--c-green); }
.st.pending { background: #fef3cd; color: var(--c-accent); }
.st.redeemed { background: var(--c-primary-bg); color: var(--c-primary); }
.st.refunded { background: #fee2e2; color: #ef4444; }
.st.expired { background: #f3f4f6; color: var(--c-text-secondary); }

/* ---------- 教程 ---------- */
.dl-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  margin-top: 12px;
  background: linear-gradient(135deg, #0ea5e9, var(--c-primary));
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(59, 91, 253, 0.25);
  transition: transform 0.15s var(--ease-spring), box-shadow 0.2s var(--ease);
}
.dl-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(59, 91, 253, 0.15); }
pre {
  background: #1e1b4b;
  color: #c7d2fe;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  margin-top: 10px;
  font-family: var(--mono);
  border: 1px solid rgba(165, 180, 252, 0.1);
}

/* ---------- 表单行 ---------- */
.kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border-light);
  font-size: 14px;
}
.kv:last-child { border-bottom: none; }
.kv span { color: var(--c-text-secondary); flex-shrink: 0; font-size: 13px; }
.kv b {
  color: var(--c-text);
  text-align: right;
  font-weight: 600;
}
.kv b#me-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}

/* ---------- 个人中心头部（无头像，姓名/邮箱左对齐、身份徽章靠右） ---------- */
.profile-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-text);
}
.profile-email {
  font-size: 13px;
  color: var(--c-text-secondary);
}

/* 个人中心统计卡片 */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  box-shadow: var(--c-shadow);
  border: 1px solid var(--c-border-light);
}
.stat-card .stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.2;
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--c-text-secondary);
  margin-top: 4px;
  font-weight: 500;
}

/* 「我的」菜单卡片 */
.me-menu {
  margin-top: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.me-item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 16px 18px; background: transparent; border: none;
  border-bottom: 1px solid var(--c-border-light);
  cursor: pointer; text-align: left;
  transition: background 0.15s var(--ease);
}
.me-item:last-child { border-bottom: none; }
.me-item .me-item-ic { font-size: 18px; flex-shrink: 0; }
.me-item .me-item-txt { flex: 1; font-size: 14px; font-weight: 700; color: var(--c-text); }
.me-item .me-item-go { color: var(--c-text-tertiary); font-size: 16px; transition: transform 0.2s var(--ease); }
.me-item:active { background: var(--c-primary-bg); }
.me-item:active .me-item-go { transform: translateX(2px); color: var(--c-primary); }
.me-item.danger .me-item-ic, .me-item.danger .me-item-txt { color: #ef4444; }
.me-item.danger:active { background: #fee2e2; }
.me-item.danger:active .me-item-go { color: #ef4444; }

/* ---------- 弹窗 ---------- */
.mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.2s var(--ease);
}
.mask.hidden { display: none !important; }
.pay-box {
  background: var(--c-surface);
  border-radius: var(--radius-xl);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  animation: popIn 0.3s var(--ease-spring);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.pay-box h3 {
  font-size: 17px;
  font-weight: 700;
}
.pay-amount {
  color: var(--c-red);
  font-weight: 800;
  font-size: 36px;
  margin: 16px 0 6px;
  letter-spacing: -1px;
}
.pay-box .note { font-size: 12px; color: var(--c-text-tertiary); }

/* 调用凭证弹窗 */
.cred-box {
  background: var(--c-surface);
  border-radius: var(--radius-xl);
  padding: 26px 22px 22px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  animation: popIn 0.3s var(--ease-spring);
}
.cred-box h3 { font-size: 17px; margin-bottom: 6px; }
.cred-box .note { font-size: 12px; color: var(--c-text-tertiary); margin-bottom: 14px; }
.cred-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #f8f9fc;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color 0.15s var(--ease);
}
.cred-item:last-of-type { margin-bottom: 16px; }
.cred-label {
  width: 100%;
  font-size: 11px;
  color: var(--c-text-tertiary);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.cred-val {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--c-text);
  word-break: break-all;
  line-height: 1.5;
}
/* API URL 为「主 + 备用」两条，各自一行、各自复制；中间是备用地址的提示语 */
.cred-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.cred-url-tip {
  width: 100%;
  margin: -2px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--c-text-tertiary);
}
.cred-copy {
  flex-shrink: 0;
  border: none;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
  transition: transform 0.12s var(--ease-spring), box-shadow 0.15s var(--ease);
}
.cred-copy:active { transform: scale(0.95); box-shadow: 0 1px 4px rgba(79, 70, 229, 0.15); }

/* ---------- 底栏（浮动玻璃 Tabbar） ---------- */
.tabbar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  display: flex;
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 4px;
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.12);
  z-index: 40;
}
.tabbar.hidden { display: none; }
.tab-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 7px 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-tertiary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 16px;
  transition: all 0.2s var(--ease);
  position: relative;
}
.tab-btn span { font-size: 21px; transition: transform 0.2s var(--ease-spring); }
.tab-btn.active {
  color: var(--c-primary);
  background: var(--c-primary-bg);
}
.tab-btn.active span { transform: translateY(-1px); }
.tab-btn:active { opacity: 0.7; }

/* ---------- 轻提示 Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(16px);
  color: #fff;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-spring);
  max-width: 80%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { background: rgba(16, 185, 129, 0.92); }
.toast.err { background: rgba(239, 68, 68, 0.92); }

/* ---------- 列表页状态（加载/空/错） ---------- */
.note.state {
  text-align: center;
  padding: 24px 0;
  color: var(--c-text-tertiary);
  font-size: 14px;
}
.note.state.err { color: var(--c-red); }

/* ---------- 加载动画（简约脉冲） ---------- */
.state .spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 状态表情 ---------- */
.state-emoji { font-size: 32px; display: block; margin-bottom: 6px; }


/* ============================================================
   管理后台（Admin Console）—— 深色控制台主题
   通过 body.admin 类切换；仅管理员登录时生效
   ============================================================ */
body.admin {
  --c-primary: #10b981;
  --c-primary-light: #34d399;
  --c-primary-dark: #059669;
  --c-primary-bg: rgba(16, 185, 129, 0.12);
  --c-bg: #0f172a;
  --c-surface: #1e293b;
  --c-border: #334155;
  --c-border-light: #334155;
  --c-text: #e2e8f0;
  --c-text-secondary: #94a3b8;
  --c-text-tertiary: #64748b;
  background: radial-gradient(ellipse 120% 80% at 50% -20%, #1e293b 0%, #0f172a 70%);
}

/* 管理员顶栏 */
body.admin .topbar {
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 55%, #059669 140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
body.admin .topbar::before {
  background: radial-gradient(ellipse 120% 60% at 20% 100%, rgba(16,185,129,0.18) 0%, transparent 70%);
}
body.admin #brand { letter-spacing: 0.4px; }

/* 管理员页面头 */
body.admin .page-head h2 { color: #f1f5f9; font-size: 21px; }

/* 管理员底部导航 */
#tabbar-admin.tabbar {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
#tabbar-admin .tab-btn { color: #64748b; }
#tabbar-admin .tab-btn.active {
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
}
#tabbar-admin .tab-btn.active span { transform: translateY(-1px); }

/* 管理卡片（深色面板） */
body.admin .card {
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
body.admin .card h3 { color: #f1f5f9; }
body.admin .note { color: #94a3b8; }
body.admin .kv { border-bottom-color: #334155; }
body.admin .kv span { color: #94a3b8; }
body.admin .kv b { color: #e2e8f0; }

/* 管理统计卡片 */
body.admin .stats-row { gap: 12px; }
body.admin .stat-card {
  background: linear-gradient(160deg, #1e293b 0%, #16213a 100%);
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 18px 14px;
}
body.admin .stat-card .stat-num { color: #34d399; font-size: 24px; }
body.admin .stat-card .stat-label { color: #94a3b8; }

/* 管理通用按钮 */
body.admin .btn-ghost {
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}
body.admin .btn-ghost:active { background: rgba(148, 163, 184, 0.2); }
body.admin .btn-primary {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

/* 管理列表行 */
body.admin .admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid #334155;
  flex-wrap: wrap;
}
body.admin .admin-row:last-child { border-bottom: none; }
body.admin .admin-row b { color: #f1f5f9; font-size: 14px; }
body.admin .admin-sub { color: #94a3b8; font-size: 12px; margin-top: 3px; }
body.admin .admin-mono {
  font-family: var(--mono);
  font-size: 12px;
  color: #34d399;
  background: rgba(16,185,129,0.1);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  word-break: break-all;
}

/* 管理状态标签 */
.pill-admin {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
body.admin .pill-admin-ok { background: rgba(16,185,129,0.15); color: #34d399; }
body.admin .pill-admin-off { background: rgba(239,68,68,0.14); color: #f87171; }
body.admin .pill-admin-warn { background: rgba(245,158,11,0.14); color: #fbbf24; }
body.admin .pill-admin-muted { background: rgba(148,163,184,0.15); color: #94a3b8; }
body.admin .pill-admin-deleted { background: rgba(148,163,184,0.18); color: #cbd5e1; text-decoration: line-through; }
body.admin .pur-ud { color: #94a3b8; font-size: 11px; }

/* 管理操作按钮 */
body.admin .admin-btn {
  border: none;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s var(--ease-spring), opacity 0.15s var(--ease);
}
body.admin .admin-btn:active { transform: scale(0.95); }
body.admin .admin-btn-green { background: rgba(16,185,129,0.15); color: #34d399; }
body.admin .admin-btn-red { background: rgba(239,68,68,0.14); color: #f87171; }
body.admin .admin-btn-blue { background: rgba(59,130,246,0.14); color: #60a5fa; }
body.admin .admin-btn-solid {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #04281f;
  box-shadow: 0 3px 10px rgba(16,185,129,0.25);
}

/* 管理详情展开 */
body.admin .admin-detail {
  margin-top: 8px;
  background: #16213a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.9;
}
body.admin .admin-detail code {
  font-family: var(--mono);
  font-size: 10px;
  color: #64748b;
}

/* 管理表单控件（select/input） */
body.admin .form label { color: #94a3b8; }
body.admin .form input,
body.admin .form select {
  background: #0f172a;
  border: 1.5px solid #334155;
  color: #e2e8f0;
}
body.admin .form input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
  background: #0f172a;
}
body.admin .form select {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
}
body.admin .form select:focus { border-color: #10b981; }

/* 管理页提示状态 */
body.admin .note.state { color: #64748b; }
body.admin .note.state.err { color: #f87171; }

/* 兑换码生成结果 */
body.admin #admin-code-result .code-chip {
  font-family: var(--mono);
  background: rgba(16,185,129,0.12);
  color: #34d399;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  margin: 2px 2px;
  display: inline-block;
}

/* 空状态 / 加载 */
body.admin .state-emoji { color: #64748b; }
body.admin .spinner {
  border: 3px solid #334155;
  border-top-color: #10b981;
}

/* ============================================================
   管理后台 v2 —— 增强组件
   在深色控制台主题下使用，覆盖/补充上面 v1 的管理样式
   ============================================================ */

/* ---------- 总览：营收卡片 ---------- */
body.admin .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-bottom: 14px; }
body.admin .hero-card {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 18px;
  border: 1px solid #334155;
}
body.admin .hero-card.rev {
  background: linear-gradient(145deg, #065f46 0%, #0f766e 100%);
  border-color: rgba(16,185,129,0.35);
  box-shadow: 0 8px 26px rgba(16,185,129,0.18);
}
body.admin .hero-card.rev::after {
  content: ''; position: absolute; right: -24px; top: -24px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.07); pointer-events: none;
}
body.admin .hero-card.sub {
  background: linear-gradient(145deg, #1e293b 0%, #1a2738 100%);
}
body.admin .hero-label { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: 0.3px; }
body.admin .hero-rev-num {
  font-size: 30px; font-weight: 800; color: #6ee7b7; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
body.admin .hero-rev-sub { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 6px; }
body.admin .hero-today { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #a7f3d0; margin-top: 8px; }
body.admin .hero-num { font-size: 28px; font-weight: 800; color: #f1f5f9; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* 总览统计卡（带左侧色条 + 图标） */
body.admin .stat-card.he {
  position: relative; text-align: left; padding: 16px 14px 14px 18px; overflow: hidden;
}
body.admin .stat-card.he::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: var(--tint, #10b981);
}
body.admin .stat-card.he .stat-he-ic { font-size: 18px; }
body.admin .stat-card.he .stat-num { font-size: 24px; color: var(--tint, #34d399); margin-top: 6px; }
body.admin .stat-card.he .stat-label { margin-top: 2px; font-size: 12px; }

/* 总览：营收明细行 */
body.admin .rev-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid #334155; font-size: 13px;
}
body.admin .rev-row:last-child { border-bottom: none; }
body.admin .rev-row .rl { color: #94a3b8; display: inline-flex; align-items: center; gap: 8px; }
body.admin .rev-row .rv { color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums; }
body.admin .rev-row .rv.green { color: #34d399; }
body.admin .rev-row .rv.amber { color: #fbbf24; }

/* 总览快捷操作 */
body.admin .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.admin .quick-item {
  display: flex; flex-direction: column; gap: 4px;
  background: #16213a; border: 1px solid #334155; border-radius: 14px; padding: 14px;
  cursor: pointer; transition: transform 0.12s var(--ease-spring), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
body.admin .quick-item:active { transform: scale(0.97); border-color: #10b981; background: #1a2a46; }
body.admin .quick-item .qi-ic { font-size: 20px; }
body.admin .quick-item .qi-t { font-size: 13px; font-weight: 700; color: #f1f5f9; }
body.admin .quick-item .qi-d { font-size: 11px; color: #64748b; }

/* ---------- 页面小标题 ---------- */
body.admin .sec-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 10px; }
body.admin .sec-head h3 { font-size: 16px; font-weight: 700; color: #f1f5f9; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
body.admin .sec-head .sec-count { font-size: 11px; color: #34d399; background: rgba(16,185,129,0.12); padding: 2px 9px; border-radius: 20px; font-weight: 700; }

/* ---------- 搜索框 ---------- */
body.admin .admin-search {
  display: flex; align-items: center; gap: 8px;
  background: #0f172a; border: 1.5px solid #334155; border-radius: 12px; padding: 11px 14px; margin-bottom: 12px;
}
body.admin .admin-search input {
  flex: 1; border: none; background: none; outline: none; color: #e2e8f0; font-size: 14px; font-family: var(--font);
}
body.admin .admin-search input::placeholder { color: #475569; }
body.admin .admin-search .s-ic { font-size: 15px; opacity: 0.6; }

/* ---------- 用户行 ---------- */
body.admin .user-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid #334155;
}
body.admin .user-item:last-child { border-bottom: none; }
body.admin .user-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #f0fdf4;
  background: linear-gradient(135deg, #059669, #0891b2);
}
body.admin .user-item .ui-main { flex: 1; min-width: 0; }
body.admin .user-item .ui-mail { font-size: 14px; font-weight: 700; color: #f1f5f9; word-break: break-all; }
body.admin .user-item .ui-sub { font-size: 11px; color: #64748b; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.admin .ui-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* 用户详情展开 */
body.admin .user-detail {
  margin: 2px 2px 10px 50px; background: #16213a; border: 1px solid #334155;
  border-radius: 12px; padding: 12px 14px; font-size: 12px; color: #94a3b8; line-height: 1.9;
}
body.admin .user-detail code { font-family: var(--mono); font-size: 10px; color: #475569; word-break: break-all; }
body.admin .user-detail .kd { display: flex; justify-content: space-between; gap: 10px; }
body.admin .user-detail .kv-l { color: #64748b; }
body.admin .user-detail .kv-r { color: #cbd5e1; text-align: right; font-weight: 600; }

/* ---------- 兑换码 ---------- */
body.admin .code-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid #334155; flex-wrap: wrap;
}
body.admin .code-item:last-child { border-bottom: none; }
body.admin .code-txt {
  font-family: var(--mono); font-weight: 700; color: #34d399; letter-spacing: 0.5px; font-size: 13px;
  background: rgba(16,185,129,0.1); padding: 3px 10px; border-radius: 8px;
}
body.admin .code-meta { flex: 1; min-width: 120px; font-size: 11px; color: #94a3b8; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
body.admin .code-meta b { color: #e2e8f0; font-size: 12px; }
body.admin .code-card-actions { display: flex; gap: 8px; margin: 12px 0 16px; }
body.admin .code-card-actions .btn { flex: 0 0 auto; width: auto; margin: 0; padding: 12px 18px; }

/* ---------- 定价 ---------- */
body.admin .plan-price-item {
  padding: 14px 2px; border-bottom: 1px solid #334155;
}
body.admin .plan-price-item:last-child { border-bottom: none; }
body.admin .pp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.admin .pp-name { font-size: 15px; font-weight: 700; color: #f1f5f9; }
body.admin .pp-days { font-size: 11px; color: #64748b; }
body.admin .pp-desc { font-size: 11px; color: #94a3b8; margin-top: 3px; }
body.admin .pp-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
body.admin .pp-default { font-size: 12px; color: #64748b; }
body.admin .pp-input {
  width: 96px; padding: 9px 10px; border: 1.5px solid #334155; border-radius: 10px;
  background: #0f172a; color: #e2e8f0; font-size: 14px; text-align: center; outline: none;
  font-variant-numeric: tabular-nums; transition: border-color 0.15s var(--ease);
}
body.admin .pp-input:focus { border-color: #10b981; }
body.admin .pp-price-current { font-size: 18px; font-weight: 800; color: #6ee7b7; }

/* 覆写徽标 */
body.admin .over-tag { font-size: 10px; background: rgba(245,158,11,0.16); color: #fbbf24; padding: 2px 8px; border-radius: 20px; font-weight: 700; }

/* ---------- 状态圆点 ---------- */
body.admin .dot { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; }
body.admin .dot i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
body.admin .dot-g i { background: #34d399; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
body.admin .dot-r i { background: #f87171; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
body.admin .dot-a i { background: #fbbf24; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
body.admin .dot-i i { background: #818cf8; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }
body.admin .dot-x i { background: #9ca3af; box-shadow: 0 0 0 3px rgba(107,114,128,0.15); }
body.admin .dot-m i { background: #94a3b8; }

/* ---------- 营收明细小卡 ---------- */
body.admin .money-stat { font-size: 12px; color: #94a3b8; }
body.admin .admin-btn-ghost { background: none; color: #94a3b8; }
body.admin .admin-btn-ghost:active { opacity: 0.6; }

/* ============================================================
   普通用户 v2 —— 首页 / 订单管理 / 兑换 增强
   ============================================================ */

/* 订单管理：区块小标题 */
.sec-title { display: flex; align-items: center; gap: 8px; margin: 4px 2px 10px; }
.sec-title h3 { font-size: 16px; font-weight: 800; color: var(--c-text); letter-spacing: -0.3px; }
.sec-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-border), transparent); }

/* 市场页顶部资产横幅 */
.asset-banner {
  background:
    radial-gradient(120% 160% at 8% -20%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(130% 160% at 105% 118%, rgba(236,72,153,0.34) 0%, rgba(236,72,153,0) 52%),
    linear-gradient(135deg, #4338ca 0%, #6d28d9 46%, #9333ea 78%, #a855f7 112%);
  border-radius: 22px; padding: 18px 18px 15px; color: #fff;
  margin-bottom: 14px; position: relative; overflow: hidden;
  box-shadow: 0 14px 34px rgba(109, 40, 217, 0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}
.asset-banner::before {
  content: ''; position: absolute; left: -34px; top: -34px; width: 120px; height: 120px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.asset-banner::after {
  content: ''; position: absolute; right: -30px; bottom: -52px; width: 170px; height: 170px;
  border-radius: 50%; background: rgba(255,255,255,0.07); pointer-events: none;
  box-shadow: inset 0 0 24px rgba(255,255,255,0.04);
}
.asset-banner .ab-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.asset-banner .ab-title-wrap { display: inline-flex; align-items: center; gap: 7px; }
.asset-banner .ab-title-icon {
  width: 26px; height: 26px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; background: rgba(255,255,255,0.20); border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.asset-banner .ab-title { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; }
.asset-banner .ab-action {
  font-size: 12px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22);
  padding: 4px 11px; border-radius: 999px; transition: background .2s var(--ease);
}
.asset-banner .ab-action:active { background: rgba(255,255,255,0.30); }
.asset-banner .ab-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px;
  position: relative; z-index: 1;
}
.asset-banner .ab-cell {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 12px 6px 11px; text-align: center; position: relative;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 16px rgba(30, 10, 80, 0.16);
  transition: transform .18s var(--ease-spring);
}
.asset-banner .ab-cell:active { transform: scale(0.97); }
.asset-banner .ab-cell-token {
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 100%);
  border-color: rgba(255,255,255,0.34);
}
.asset-banner .ab-ico { font-size: 15px; margin-bottom: 4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.16)); }
.asset-banner .ab-num { font-size: 19px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.asset-banner .ab-cell-token .ab-num { font-size: 21px; background: linear-gradient(180deg, #fff 0%, #e9d5ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.asset-banner .ab-lb { font-size: 11px; opacity: 0.84; margin-top: 4px; letter-spacing: 0.2px; }
.asset-banner .ab-foot {
  margin-top: 14px; display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1;
}
.asset-banner .ab-chip {
  font-size: 12px; background: rgba(0,0,0,0.16); border: 1px solid rgba(255,255,255,0.14);
  padding: 5px 12px; border-radius: 999px; max-width: 70%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asset-banner .ab-go { font-size: 12px; font-weight: 700; opacity: 0.95; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* 套餐卡片：增强 */
.plan { position: relative; }
.plan.hot::before { background: linear-gradient(180deg, var(--c-accent), var(--c-red)); }
.plan .plan-badge {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c-red), #f97316);
  padding: 2px 9px; border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(239,68,68,0.4);
}
.plan .plan-price { display: flex; align-items: baseline; gap: 2px; }
.plan .plan-price small { font-size: 12px; }
.plan .plan-days-chip { font-size: 11px; color: var(--c-text-secondary); }
.plan .plan-quota-line { margin-top: 4px; }

/* 兑换页 */
.redeem-bar { display: flex; gap: 10px; margin-top: 4px; }
.redeem-bar input {
  flex: 1; min-width: 0; padding: 13px 14px; border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md); font-size: 15px; outline: none; background: #fafbfc;
  font-family: var(--mono); letter-spacing: 1px; color: var(--c-text);
  text-transform: uppercase;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.redeem-bar input::placeholder { text-transform: none; font-family: var(--font); letter-spacing: 0; color: var(--c-text-tertiary); }
.redeem-bar input:focus { border-color: var(--c-primary-light); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); background: #fff; }
.redeem-bar .btn { margin-top: 0; width: auto; flex-shrink: 0; padding: 13px 22px; }
.redeem-result { margin-top: 2px; }

/* 兑换方式选择选项 */
.r-opt-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
/* 兑换选择弹窗：内容较多时限制高度并在弹窗内滚动，避免超出手机屏幕 */
#redeem-choose-mask { align-items: flex-end; padding: 16px; }
#redeem-choose-mask .cred-box {
  max-height: 82vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
#redeem-choose-mask .r-opt-list {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 12px;
  padding-right: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 激活方式弹窗：更精致的底部卡片 */
.rc-box { overflow: hidden; padding: 20px 20px 18px; }
.rc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; position: relative; }
.rc-head-badge {
  flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; border-radius: 13px;
  background: linear-gradient(135deg, var(--c-primary-bg), #e0e7ff);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.18);
}
.rc-head-txt { flex: 1; min-width: 0; padding-right: 6px; }
.rc-head-txt h3 { font-size: 17px; font-weight: 800; margin: 0 0 3px; letter-spacing: 0.2px; }
.rc-head-sub { font-size: 12px; color: var(--c-text-tertiary); margin: 0; line-height: 1.5; }
.rc-close {
  flex-shrink: 0; width: 28px; height: 28px; border: none; background: #f1f2f6;
  color: var(--c-text-tertiary); font-size: 13px; line-height: 1; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease-spring);
}
.rc-close:hover { background: #e5e7eb; color: var(--c-text); }
.rc-close:active { transform: scale(0.9); }
.rc-box .r-opt-list { margin-top: 0; }
.rc-cancel { margin-top: 2px; }

.r-opt {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--c-border-light); background: #fafbfc; border-radius: var(--radius-md);
  padding: 13px 14px; cursor: pointer; transition: all 0.15s var(--ease);
}
.r-opt:active { transform: scale(0.98); border-color: var(--c-primary-light); background: var(--c-primary-bg); }
.r-opt:hover { border-color: var(--c-border); }
.r-opt.renew { border-left: 3px solid var(--c-primary); }
.r-opt.new { border-left: 3px solid var(--c-green); }
.r-opt .r-opt-ic {
  font-size: 17px; flex-shrink: 0; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,0.08), inset 0 0 0 1px rgba(16,24,40,0.05);
}
.r-opt.renew .r-opt-ic { background: var(--c-primary-bg); }
.r-opt.new .r-opt-ic { background: var(--c-green-bg); }
.r-opt .r-opt-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-opt .r-opt-txt b { font-size: 14px; color: var(--c-text); }
.r-opt .r-opt-txt span { font-size: 11px; color: var(--c-text-secondary); }
.r-opt .r-opt-txt .r-opt-warn { font-size: 11px; color: #ef5350; line-height: 1.45; }
.r-opt .r-opt-go { flex-shrink: 0; font-size: 12px; color: var(--c-primary); font-weight: 700; }
.r-opt.new .r-opt-go { color: var(--c-green); }
.r-opt.disabled { opacity: 0.62; pointer-events: none; border-left: 3px solid #9ca3af; }
.r-opt.disabled .r-opt-ic { background: #f3f4f6; filter: grayscale(1); }

/* ---------- 套餐弹窗内套餐卡片质感与推荐角标 ---------- */
.cat-plan-list .plan { transition: transform 0.2s var(--ease-spring), box-shadow 0.25s var(--ease); }
.cat-plan-list .plan:hover { transform: translateY(-2px); box-shadow: var(--c-shadow-lg); }

.plan .plan-price { letter-spacing: -0.5px; }
.btn-plan-buy { letter-spacing: 1px; }

/* 分类列表项质感 */
.cat-item { box-shadow: 0 1px 4px rgba(16,24,40,0.04); }
.cat-item:hover { box-shadow: 0 4px 14px rgba(79,70,229,0.14); }

/* ---------- 订单管理：右上角入口 & 失效套餐折叠 ---------- */
.orders-entry {
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-primary); font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: 20px; cursor: pointer;
  transition: all 0.15s var(--ease); flex-shrink: 0;
}
.orders-entry:active { transform: scale(0.96); background: var(--c-primary-bg); border-color: var(--c-primary-light); }
.orders-entry.back { color: var(--c-text-secondary); }

.collapse-group { margin-top: 4px; }
.collapse-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-border-light); border-radius: var(--radius-md);
  padding: 13px 16px; cursor: pointer; user-select: none;
}
.collapse-head:active { opacity: 0.7; }
.collapse-head span:first-child { font-size: 13px; font-weight: 700; color: var(--c-text-secondary); }
.collapse-arrow { color: var(--c-text-tertiary); font-size: 14px; transition: transform 0.2s var(--ease); }
.collapse-group.open .collapse-arrow { transform: rotate(90deg); }
.collapse-body { display: none; }
.collapse-group.open .collapse-body { display: block; }
.collapse-body .mypkg { opacity: 0.82; }

/* 套餐管理底部：小的“查看失效套餐”入口 */
.inactive-entry {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin-top: 14px; padding: 12px 16px;
  background: #f8f9fc; border: 1.5px dashed var(--c-border); border-radius: var(--radius-md);
  font-size: 12px; font-weight: 700; color: var(--c-text-secondary); cursor: pointer;
  transition: all 0.15s var(--ease);
}
.inactive-entry .collapse-arrow { font-size: 15px; transition: transform 0.2s var(--ease); }
.inactive-entry:active { transform: scale(0.98); background: var(--c-primary-bg); border-color: var(--c-primary-light); color: var(--c-primary); }
.inactive-entry:active .collapse-arrow { transform: translateX(2px); }
/* ---------- 管理 · 首页推荐套餐 ---------- */
.rec-on { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }
.rec-item { border-color: rgba(239,68,68,0.35) !important; }
.rec-btn { margin-left: 4px; }
body.admin .load-more {
  display: block; width: 100%; margin-top: 12px; padding: 11px 0;
  background: rgba(16,185,129,0.08); color: #34d399;
  border: 1px dashed rgba(16,185,129,0.3); border-radius: var(--radius-md);
  font-size: 13px; font-weight: 700; cursor: pointer; text-align: center;
}
body.admin .load-more:active { background: rgba(16,185,129,0.16); }
/* 套餐内 Token 用量进度条 */
/* 套餐卡用量行：标签 + 进度槽 + 数值 三段固定布局，有限/无限额度共用同一套样式与对齐 */
.mypkg-usage { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.mypkg-usage-label { flex: 0 0 32px; font-size: 10px; color: var(--c-text-tertiary); white-space: nowrap; }
.mypkg-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(148,163,184,0.15); overflow: hidden; }
.mypkg-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #34d399, #22d3ee); transition: width .4s; }
/* 无限额度：进度槽保留底纹占位，保证与有限额度卡片布局一致 */
.mypkg-bar.infinite { background: repeating-linear-gradient(135deg, rgba(148,163,184,0.22) 0 4px, rgba(148,163,184,0.08) 4px 8px); }
.mypkg-usage-val { margin-left: auto; font-size: 10px; color: var(--c-text-secondary); white-space: nowrap; }


/* ============================================================
   管理后台 v3 —— 「精致控制台」精修层
   仅在 body.admin 深色主题下生效，覆盖/优化上面 v1/v2 样式；
   复用的类名、ID 与 DOM 结构均保持不变，避免破坏功能。
   ============================================================ */

/* ---------- 全局氛围：细腻渐变背景 + 微妙噪点纹理 ---------- */
body.admin {
  background:
    radial-gradient(900px 480px at 85% -8%, rgba(16,185,129,0.10) 0%, transparent 55%),
    radial-gradient(700px 420px at 0% 8%, rgba(59,130,246,0.08) 0%, transparent 55%),
    radial-gradient(120% 80% at 50% -20%, #1e293b 0%, #0b1220 68%);
}
body.admin #app { max-width: 520px; margin: 0 auto; }
body.admin .page-head { padding: 14px 2px 14px; }
body.admin .page-head h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
  display: inline-flex; align-items: center; gap: 8px;
  color: #f1f5f9; text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* ---------- 卡片：清爽的内阴影 + 顶部高光 ---------- */
body.admin .card {
  background: linear-gradient(165deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2,6,16,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.admin .card h3 { letter-spacing: -0.2px; }

/* ---------- 分段标题 ---------- */
body.admin .sec-head { margin-bottom: 12px; }
body.admin .sec-head h3 { font-size: 16px; }
body.admin .sec-count {
  background: rgba(16,185,129,0.14); color: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.05);
}

/* ---------- 顶部营收双卡 ---------- */
body.admin .hero-grid { gap: 12px; }
body.admin .hero-card { border-radius: 20px; padding: 20px 18px; }
body.admin .hero-card.rev {
  background: linear-gradient(150deg, #065f46 0%, #0b7a5f 55%, #0f766e 110%);
  border: 1px solid rgba(110,231,183,0.28);
  box-shadow: 0 14px 34px rgba(6,95,70,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
body.admin .hero-card.rev::after {
  width: 150px; height: 150px; right: -30px; top: -40px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
}
body.admin .hero-label { letter-spacing: 0.4px; opacity: 0.85; }
body.admin .hero-rev-num { font-size: 32px; }
body.admin .hero-card.sub {
  background: linear-gradient(155deg, #1e2a3b 0%, #182334 100%);
  border: 1px solid rgba(148,163,184,0.14);
  box-shadow: 0 14px 34px rgba(2,6,16,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.admin .hero-today { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }

/* ---------- 核心指标卡（he）：悬浮微动效 ---------- */
body.admin .stat-card.he { border-radius: 16px; transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease), border-color .2s var(--ease); }
body.admin .stat-card.he:active { transform: scale(0.97); }
body.admin .stat-card.he::before { background: linear-gradient(180deg, var(--tint,#10b981), var(--tint,#10b981)); width: 3.5px; border-radius: 4px; }
body.admin .stat-card.he .stat-he-ic {
  width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,0.12); font-size: 17px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
body.admin .stat-card.he .stat-num { font-size: 26px; margin-top: 8px; }
body.admin .stat-card.he .stat-label { opacity: 0.8; }

/* ---------- 营收明细行 ---------- */
body.admin .rev-row { padding: 13px 4px; }
body.admin .rev-row .rl { letter-spacing: 0.2px; }
body.admin .rev-row .rv { font-size: 14px; }

/* ---------- 快捷入口 ---------- */
body.admin .quick-grid { gap: 12px; }
body.admin .quick-item {
  border-radius: 16px; padding: 16px 14px;
  background: linear-gradient(165deg, #1b2635 0%, #151f2d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
body.admin .quick-item::after {
  content: ''; position: absolute; right: -22px; top: -22px; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%); pointer-events: none;
}
body.admin .quick-item:active { border-color: #10b981; }
body.admin .quick-item .qi-ic {
  width: 34px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(16,185,129,0.13); font-size: 18px; margin-bottom: 4px;
}
body.admin .quick-item .qi-t { font-size: 14px; }
body.admin .quick-item .qi-d { font-size: 11px; line-height: 1.5; }

/* ---------- 按钮精修 ---------- */
body.admin .btn { border-radius: 14px; }
body.admin .btn-primary {
  background: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 120%);
  color: #03201a; font-weight: 700;
  box-shadow: 0 6px 18px rgba(16,185,129,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
}
body.admin .btn-primary:active { box-shadow: 0 3px 10px rgba(16,185,129,0.28); }
body.admin .btn-ghost { background: rgba(148,163,184,0.12); color: #e2e8f0; border: 1px solid rgba(148,163,184,0.16); }
body.admin .btn-ghost:active { background: rgba(148,163,184,0.2); }

/* 管理行内操作按钮 */
body.admin .admin-btn { min-height: 32px; padding: 8px 13px; border-radius: 10px; }
body.admin .admin-btn-green, body.admin .admin-btn-red, body.admin .admin-btn-blue {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
body.admin .admin-btn-solid {
  color: #04281f; font-weight: 700;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* ---------- 搜索框 ---------- */
body.admin .admin-search {
  border-radius: 14px; padding: 12px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
body.admin .admin-search:focus-within {
  border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
}
body.admin .admin-search input { letter-spacing: 0.2px; }

/* ---------- 列表行：用户 / 购买 ---------- */
body.admin .user-item {
  padding: 15px 4px; border-radius: 4px; gap: 12px;
  transition: background .15s var(--ease);
}
body.admin .user-item { border-bottom: 1px solid rgba(148,163,184,0.10); }
body.admin .user-item:last-child { border-bottom: 1px solid transparent; }
body.admin .user-item:hover { background: rgba(148,163,184,0.05); }
body.admin .user-av {
  width: 42px; height: 42px; border-radius: 13px; font-size: 17px; font-weight: 700;
  background: linear-gradient(135deg, #059669, #0d9488);
  box-shadow: 0 4px 12px rgba(5,150,105,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
body.admin .ui-mail { font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.admin .ui-sub { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
body.admin .ui-sep { margin: 0 8px; opacity: 0.4; }
body.admin .ui-time { font-size: 10.5px; color: #64748b; margin-top: 4px; letter-spacing: 0.2px; }
body.admin .ui-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
body.admin .ui-price { font-size: 16.5px; font-weight: 800; color: #f1f5f9; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
body.admin .detail-toggle {
  border: none; background: none; color: #6ee7b7; font-size: 11.5px; cursor: pointer; margin-top: 8px;
  padding: 2px 4px; letter-spacing: 0.2px; opacity: 0.85;
}
body.admin .detail-toggle:active { opacity: 0.6; }
body.admin .sys-acct { font-size: 11px; color: #64748b; white-space: nowrap; }
body.admin .renew-tag {
  background: rgba(96,165,250,0.16) !important; color: #60a5fa !important;
  margin-left: 0; padding: 2px 8px; border-radius: 20px;
}
body.admin .user-detail {
  margin: 4px 4px 12px 56px; background: linear-gradient(165deg, #182334 0%, #141e2b 100%);
  border: 1px solid rgba(148,163,184,0.12); border-radius: 13px; padding: 13px 15px;
  animation: fadeIn .2s var(--ease);
}
body.admin .user-detail .kd { padding: 5px 0; }

/* ---------- 状态标签（pill-admin）精修 ---------- */
body.admin .pill-admin { padding: 4px 11px; letter-spacing: 0.3px; }

/* ---------- 兑换码条目 ---------- */
body.admin .code-item { padding: 13px 4px; border-bottom: 1px solid rgba(148,163,184,0.10); gap: 12px; }
body.admin .code-item:last-child { border-bottom: 1px solid transparent; }
body.admin .code-txt {
  font-size: 13.5px; letter-spacing: 1px; padding: 4px 12px; border-radius: 9px;
  background: rgba(16,185,129,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.admin .code-meta { gap: 3px; }

/* ---------- 状态圆点精修 ---------- */
body.admin .dot { gap: 6px; letter-spacing: 0.2px; }
body.admin .dot i { width: 8px; height: 8px; }

/* ---------- 定价条目 ---------- */
body.admin .plan-price-item { padding: 16px 4px; border-bottom: 1px solid rgba(148,163,184,0.10); }
body.admin .plan-price-item:last-child { border-bottom: 1px solid transparent; }
body.admin .pp-name { font-size: 16px; }
body.admin .pp-input { border-radius: 11px; background: #0f172a; }
body.admin .pp-price-current { font-size: 20px; }

/* ---------- 兑换码生成结果 ---------- */
body.admin #admin-code-result { line-height: 2.2; }
body.admin #admin-code-result .code-chip { padding: 5px 10px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }

/* ---------- 表单控件 ---------- */
body.admin .form input, body.admin .form select { border-radius: 13px; }
body.admin .form input:focus { border-color: #10b981; }

/* ---------- 弹窗（深色精修）---------- */
body.admin .mask { background: rgba(3, 7, 18, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.admin .pay-box, body.admin .cred-box, body.admin .renew-box {
  border: 1px solid rgba(148,163,184,0.16);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
body.admin .pay-box h3 { color: #f1f5f9; }
body.admin .cred-box h3 { color: #f1f5f9; }
body.admin .cred-item { background: #0f172a; border-color: rgba(148,163,184,0.14); }
body.admin .cred-val { color: #e2e8f0; }

/* ---------- 空态 / 加载 ---------- */
body.admin .note.state { color: #64748b; padding: 32px 0; }
body.admin .note.state.err { color: #f87171; }
body.admin .spinner { border-width: 3px; border-color: #334155; border-top-color: #10b981; }
body.admin .state-emoji { filter: saturate(0.85); }

/* ---------- 加载更多 ---------- */
body.admin .load-more { border-radius: 12px; letter-spacing: 0.3px; }

/* ---------- 管理底部导航精修 ---------- */
#tabbar-admin.tabbar {
  background: rgba(13, 22, 36, 0.88);
  border: 1px solid rgba(148,163,184,0.14);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
#tabbar-admin .tab-btn { border-radius: 14px; margin: 2px; }
#tabbar-admin .tab-btn.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(16,185,129,0.10));
  color: #6ee7b7; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#tabbar-admin .tab-btn.active span { transform: translateY(-1px) scale(1.05); }

/* ---------- 顶栏精修（管理员）---------- */
body.admin .topbar {
  background: linear-gradient(135deg, #0f1a2b 0%, #0f3d38 60%, #0e5c4b 130%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 15px 18px;
}
body.admin .topbar::before { background: radial-gradient(ellipse 120% 60% at 15% 100%, rgba(16,185,129,0.22) 0%, transparent 70%); }
body.admin #brand b { font-weight: 800; }

/* ---------- 极窄屏兜底：保证营收双卡与统计卡不塌 ---------- */
@media (max-width: 360px) {
  body.admin .hero-grid { grid-template-columns: 1fr; }
  body.admin .header-hero { grid-template-columns: 1fr; }
  body.admin .user-item { flex-wrap: wrap; }
  body.admin .ui-actions { width: 100%; justify-content: flex-start; margin-top: 4px; }
  body.admin .user-item.purchase-item { flex-wrap: nowrap; }
  body.admin .ui-right { gap: 6px; }
}

/* ============================================================
   视觉精修 v4 —— 「质感 + 精致」统一升级层
   在既有 v1/v2/v3 之上做细粒度优化，不改动任何 DOM；
   通过选择器与特异性保证不破坏既有功能与布局。
   ============================================================ */

/* ---------- 全局：更细腻的排版与滚动体验 ---------- */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
body::-webkit-scrollbar { width: 0; height: 0; }

/* 轻量进入动画的过渡缓和 */
.screen.active { animation-duration: 0.3s; }

/* ---------- 顶栏：增添细腻高光与微纹理 ---------- */
.topbar::before { filter: saturate(1.1); }
#brand { text-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* ---------- 卡片：一致性提升，柔和悬浮 ---------- */
.card { position: relative; }
.card::after {
  content: ''; position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  border-radius: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.75), rgba(255,255,255,0));
  pointer-events: none; opacity: .8;
}
body:not(.admin) .card:hover { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10); }

/* ---------- 按钮：细节强调 ---------- */
.btn { letter-spacing: 0.3px; }
.btn::before {
  content: ''; position: absolute; left: 0; right: 0; top: 6%; bottom: 58%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  border-radius: inherit; pointer-events: none;
}
.btn-primary { letter-spacing: 0.08em; }

/* ---------- 登录/注册卡片：精致化 ---------- */
#view-auth .card {
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(79, 70, 229, 0.16), 0 2px 8px rgba(79, 70, 229, 0.06);
  overflow: hidden;
}
#view-auth .tabs { box-shadow: inset 0 1px 2px rgba(15,23,42,0.04); }
#view-auth .form input { box-shadow: inset 0 1px 2px rgba(15,23,42,0.03); }

/* ---------- 市场分类列表项：更细腻 ---------- */
.cat-item { transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.cat-item:hover { border-color: var(--c-primary-light); }

/* ---------- 套餐卡片：悬浮更精致 ---------- */
.plan { transition: transform .22s var(--ease-spring), box-shadow .28s var(--ease), border-color .2s var(--ease); }
.plan:hover { box-shadow: var(--c-shadow-lg); }
.plan .plan-badge { letter-spacing: 0.4px; }

/* ---------- 我的套餐卡片 ---------- */
.mypkg { transition: transform .18s var(--ease-spring), box-shadow .25s var(--ease); }
.mypkg:hover { box-shadow: 0 10px 30px rgba(15,23,42,0.10); }

/* ---------- 底部导航：精修 ---------- */
.tab-btn { transition: color .2s var(--ease), background .2s var(--ease), opacity .15s var(--ease); }
.tab-btn.active::after {
  content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 3px; border-radius: 3px; background: currentColor; opacity: .9;
}

/* ---------- Toast：更精致 ---------- */
.toast { letter-spacing: 0.2px; }

/* ---------- 弹窗：更圆润、更有层次 ---------- */
.pay-box, .cred-box, .renew-box, .admin-reset-box { backdrop-filter: blur(2px); }

/* ============================================================
   管理员控制台 v4 精修 —— 在深色主题上把粒度再拉高一档
   ============================================================ */

/* 顶栏：更强品牌感 */
body.admin .topbar { padding: 16px 20px; }
body.admin #brand { display: inline-flex; align-items: center; }

/* 页面头：加入细分割线，增强层级 */
body.admin .page-head { position: relative; }
body.admin .page-head::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 1px;
  background: linear-gradient(90deg, rgba(148,163,184,0.20), rgba(148,163,184,0.02) 70%, transparent);
}
body.admin .page-head h2 { font-weight: 800; }

/* 卡片：加深内阴影，立体感更强 */
body.admin .card {
  box-shadow: 0 16px 40px rgba(2,8,18,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* 深色面板顶部高光调柔和，避免过亮的白线 */
body.admin .card::after {
  left: 12px; right: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
  opacity: .8;
}

/* 营收核心卡：数字与标注的对比强化 */
body.admin .hero-rev-num { text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
body.admin .hero-num { text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
body.admin .hero-label { text-transform: none; }

/* 统计卡：图标托盘更精致 */
body.admin .stat-card.he .stat-he-ic {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.2);
}

/* 营收明细：金额用等宽数字更整齐 */
body.admin .rev-row .rv { font-feature-settings: "tnum"; }

/* 快捷入口：增加图标氛围光 */
body.admin .quick-item .qi-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }

/* 用户行：交互反馈细腻 */
body.admin .user-item:hover { background: rgba(148,163,184,0.06); }
body.admin .admin-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .14s var(--ease-spring), opacity .15s var(--ease), background .15s var(--ease);
}

/* 用户详情：展开更有层次 */
body.admin .user-detail { box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }

/* 兑换码条目：代码芯片更有质感 */
body.admin .code-txt { letter-spacing: 1.5px; }

/* 定价输入：聚焦态强化 */
body.admin .pp-input:focus { box-shadow: 0 0 0 3px rgba(16,185,129,0.14); }

/* 底部导航：图标动效 */
#tabbar-admin .tab-btn.active span { transition: transform .18s var(--ease-spring); }

/* 弹窗：更精致的深色 */
body.admin .pay-box, body.admin .cred-box, body.admin .renew-box {
  border-radius: 22px;
}

/* 空态/加载：更柔和 */
body.admin .state-emoji { opacity: .9; }

/* ---------- 极窄屏下管理员操作不塌（补充） ---------- */
@media (max-width: 360px) {
  body.admin .pp-row { align-items: stretch; }
  body.admin .pp-input { width: 100%; }
  body.admin .ui-actions { gap: 0; }
}

/* ============================================================
   收尾打磨 v4.1 —— 登录页与整体氛围的最后一档质感
   ============================================================ */

/* 登录/注册页：更高级的卡片质感 */
#view-auth .card { border: 1px solid rgba(79,70,229,0.08); }
#view-auth .tabs .tab.active { box-shadow: 0 4px 14px rgba(79,70,229,0.14), inset 0 1px 0 rgba(255,255,255,0.8); }
#view-auth .btn-primary { border-radius: 12px; }
#view-auth .hint a { color: var(--c-primary); font-weight: 600; }

/* 表单聚焦：加入柔性光晕 */
.form input:focus, .redeem-bar input:focus { box-shadow: 0 0 0 3.5px rgba(99,102,241,0.11), inset 0 1px 2px rgba(15,23,42,0.02); }

/* 弹窗内套餐卡片：单列堆叠 */
.cat-plan-list .plan { border-radius: 20px; }

/* 资产横幅数据卡片：内高光与深度已在主样式定义，此处不再重复覆盖 */


/* 管理页：核心指标数字更沉稳 */
body.admin .stat-num, body.admin .hero-num, body.admin .hero-rev-num { font-feature-settings: "tnum"; }

/* 管理弹窗按钮间距 */
body.admin .pay-box .btn { margin-top: 14px; }

/* 移动端常亮感：选中/聚焦统一 */
.tab-btn:focus-visible, .btn:focus-visible, .admin-btn:focus-visible { outline: 2px solid rgba(99,102,241,0.5); outline-offset: 1px; }

/* 减少「加载/空态」跳动：占位更稳定 */
.note.state { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }

/* ============================================================
   登录 / 注册页 v5 —— 「精品化」重设计层
   管理员登录同样走此页（登录成功后才会切换深色控制台）。
   所有规则均限定在 #view-auth 内，不改 DOM、不影响其它页面，
   通过特异度覆盖 v1–v4 的既有样式。
   ============================================================ */

#view-auth { position: relative; }

/* ---------- 氛围背景：柔和渐变光斑 ---------- */
#view-auth::before {
  content: '';
  position: absolute;
  left: -70px; top: 90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, rgba(124,58,237,0) 70%);
  filter: blur(6px); pointer-events: none; z-index: 0;
}
#view-auth::after {
  content: '';
  position: absolute;
  right: -80px; top: 300px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,0.16) 0%, rgba(14,165,233,0) 70%);
  filter: blur(8px); pointer-events: none; z-index: 0;
}

/* 卡片提到光斑之上 */
#view-auth > .card { position: relative; z-index: 1; }

/* ---------- 顶部品牌徽章（菱形渐变 + 钥匙） ---------- */
#view-auth > .card { padding-top: 34px; }
#view-auth > .card::before {
  content: '🔑';
  position: absolute; top: -27px; left: 17px;
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(79,70,229,0.40), inset 0 1px 0 rgba(255,255,255,0.30),
              inset 0 -3px 6px rgba(31,27,116,0.25);
}
#view-auth > .card::after {
  content: '';
  position: absolute; left: 30px; right: 0; top: 6px; height: 110px;
  background: radial-gradient(60px 60px at 12% 4%, rgba(124,58,237,0.10) 0%, transparent 70%);
  border-radius: 0; opacity: 1; pointer-events: none;
}
/* 卡片标题 */
#view-auth > .card .tabs { margin-top: 6px; }

/* ---------- 卡片主体：更高级的毛玻璃质感 ---------- */
#view-auth > .card {
  border-radius: 28px;
  background: linear-gradient(165deg, #ffffff 0%, #fbfcff 60%, #f6f8ff 100%);
  border: 1px solid rgba(79,70,229,0.10);
  box-shadow:
    0 4px 10px rgba(16,24,40,0.04),
    0 24px 60px rgba(79,70,229,0.18),
    0 2px 8px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ---------- 分段切换（登录/注册）：玻璃胶囊 + 滑入高亮 ---------- */
#view-auth .tabs {
  background: #eef0f8;
  border-radius: 14px;
  padding: 5px;
  gap: 5px;
  box-shadow: inset 0 2px 6px rgba(15,23,42,0.06);
  position: relative;
}
#view-auth .tab {
  border-radius: 10px;
  font-size: 15px;
  letter-spacing: 0.2px;
  padding: 11px;
}
#view-auth .tab.active {
  background: linear-gradient(135deg, #ffffff 0%, #f4f6ff 100%);
  color: #4f46e5;
  box-shadow: 0 4px 12px rgba(79,70,229,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
  transform: translateY(0);
}

/* ---------- 表单标签与输入框：图标化、更精致 ---------- */
#view-auth .form label {
  font-size: 13px; font-weight: 600; color: #4b5563;
  letter-spacing: 0.2px; margin: 16px 0 7px;
}
#view-auth .form label::before { margin-right: 5px; font-size: 13px; }
#view-auth .form label:nth-of-type(1)::before { content: '✉️'; }
#view-auth .form label:nth-of-type(2)::before { content: '🔒'; }

#view-auth .form input {
  background: #fafbff;
  border: 1.5px solid #e2e6f2;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  color: #1f2937;
  box-shadow: inset 0 2px 4px rgba(15,23,42,0.03);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
#view-auth .form input::placeholder { color: #a5aeba; }
#view-auth .form input:focus {
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.13), inset 0 1px 2px rgba(79,70,229,0.05);
}
#view-auth .form input.bad {
  border-color: #ef4444;
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
}
#view-auth .form input.bad:focus { box-shadow: 0 0 0 4px rgba(239,68,68,0.12); }
/* 邮箱自动填充底色修正 */
#view-auth .form input:-webkit-autofill,
#view-auth .form input:-webkit-autofill:hover,
#view-auth .form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1f2937;
  -webkit-box-shadow: 0 0 0 1000px #fafbff inset;
  transition: background-color 9999s ease-out 0s;
}

/* 密码可见切换按钮 */
#view-auth .eye {
  right: 12px; opacity: .5; font-size: 18px;
}
#view-auth .eye:active { opacity: 1; transform: translateY(-50%) scale(1.1); }

/* 错误提示：更柔和的胶囊 */
#view-auth .field-err {
  font-size: 12px; font-weight: 500; color: #ef4444;
  margin-top: 6px; padding-left: 3px; letter-spacing: 0.2px;
}

/* ---------- 主按钮：流光质感 ---------- */
#view-auth .btn-primary {
  border-radius: 14px;
  padding: 15px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.35em;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #7c3aed 120%);
  box-shadow: 0 10px 24px rgba(79,70,229,0.35), inset 0 1px 0 rgba(255,255,255,0.28);
  margin-top: 22px;
}
#view-auth .btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
#view-auth .btn-primary:hover::before,
#view-auth .btn-primary:active::before { left: 120%; }
#view-auth .btn-primary:active { transform: scale(0.98); box-shadow: 0 6px 16px rgba(79,70,229,0.3); }
#view-auth .btn-primary[disabled] { opacity: .55; }
#view-auth .btn-primary[disabled]::before { display: none; }

/* ---------- 提交信息 / 底部提示：更干净 ---------- */
#view-auth .msg {
  font-size: 13px; font-weight: 500; margin-top: 14px;
}
#view-auth .hint {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid #f0f1f7;
  font-size: 12.5px; color: #9aa3b2;
}
#view-auth .hint a {
  color: #4f46e5; font-weight: 600; text-decoration: none;
}
#view-auth .hint a:hover { text-decoration: underline; }

/* ---------- 卡片进入动效 ---------- */
#view-auth > .card {
  animation: authCardIn .5s var(--ease-spring) both;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 顶栏在登录页更清爽舒展 ---------- */
body:not(.admin) .topbar { padding: 16px 18px 15px; }

/* ============================================================
   管理后台 v6 —— 「移动端精致化」精修层
   聚焦手机端的触控体验、间距层级与信息密度。
   仅在 body.admin 深色主题下生效，不改 DOM，不破坏功能。
   ============================================================ */

/* ---------- 更舒适的全局内边距与滚动脚本 ---------- */
body.admin #app { padding: 0 18px 26px; }
body.admin .card { border-radius: 20px; }

/* ---------- 顶栏：品牌感再强化 + 移动端安全留白 ---------- */
body.admin .topbar { padding: 16px 20px 15px; border-radius: 0 0 22px 22px; }
body.admin #brand { font-size: 18px; }
body.admin #brand b {
  font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 2px;
}

/* ---------- 页面头：标题更突出，分割线更柔和 ---------- */
body.admin .page-head { padding: 16px 2px 16px; }
body.admin .page-head h2 { font-size: 24px; }

/* ---------- 营收双卡：数字更大、更富冲击力 ---------- */
body.admin .hero-card.rev { padding: 22px 20px; }
body.admin .hero-rev-num { font-size: 38px; }
body.admin .hero-num { font-size: 32px; }
body.admin .hero-today { padding: 5px 12px; font-size: 12.5px; }

/* ---------- 统计卡：触控友好、间距更舒展 ---------- */
body.admin .stats-row { gap: 12px; margin-bottom: 16px; }
body.admin .stat-card.he { padding: 18px 16px 16px 20px; border-radius: 18px; }
body.admin .stat-card.he .stat-num { font-size: 28px; }
body.admin .stat-card.he .stat-label { font-size: 12.5px; }

/* ---------- 快捷入口：更大触控区域 ---------- */
body.admin .quick-grid { gap: 12px; }
body.admin .quick-item { padding: 18px 16px; border-radius: 18px; }
body.admin .quick-item .qi-ic { width: 38px; height: 36px; border-radius: 12px; font-size: 19px; }
body.admin .quick-item .qi-t { font-size: 14.5px; }
body.admin .quick-item .qi-d { font-size: 11.5px; }

/* ---------- 行内操作按钮：提升触控目标（≥40px 高） ---------- */
body.admin .admin-btn { min-height: 38px; padding: 10px 14px; font-size: 12.5px; border-radius: 11px; }
body.admin .sys-acct { font-size: 12px; padding: 8px 12px; background: rgba(148,163,184,0.08); border-radius: 10px; }

/* ---------- 用户列表：行内层级更清晰 ---------- */
body.admin .user-item { padding: 16px 4px; gap: 13px; }
body.admin .user-av { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; }
body.admin .ui-mail { font-size: 15px; }
body.admin .ui-sub { font-size: 12px; }

/* ---------- 兑换码页：创建面板更聚焦 ---------- */
body.admin #view-a-codes .card { margin-bottom: 16px; }
body.admin #view-a-codes .form-input,
body.admin #view-a-codes .form-select { padding: 13px 14px; font-size: 15px; }
body.admin #admin-code-gen { min-height: 48px; font-size: 15px; }
body.admin .code-item { padding: 15px 4px; gap: 12px; }
body.admin .code-txt { font-size: 14px; padding: 5px 13px; }

/* ---------- 定价页：触控与布局优化 ---------- */
body.admin .plan-price-item { padding: 18px 4px; }
body.admin .pp-name { font-size: 16.5px; }
body.admin .pp-input { min-height: 42px; }
body.admin .pp-row { gap: 8px; }

/* ---------- 购买管理：价格与状态更突出 ---------- */
body.admin .ui-price { font-size: 18px; }
body.admin .purchase-item .ui-right { gap: 8px; }
body.admin .dot { font-size: 12.5px; }

/* ---------- 搜索框：更大的触控高度 ---------- */
body.admin .admin-search { padding: 13px 15px; }
body.admin .admin-search input { font-size: 15px; }

/* ---------- 弹窗：移动端全宽沉浸式 ---------- */
@media (max-width: 480px) {
  body.admin .mask { padding: 16px; align-items: flex-end; }
  body.admin .pay-box,
  body.admin .cred-box,
  body.admin .renew-box {
    width: 100%;
    max-width: none;
    border-radius: 24px 24px 22px 22px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  body.admin .cred-item { padding: 14px 14px; }
  body.admin .cred-copy { min-height: 40px; padding: 9px 16px; }
  body.admin .pay-box .btn,
  body.admin .cred-box .btn { min-height: 48px; }
}

/* ---------- 极窄屏：统计卡单列兜底 ---------- */
@media (max-width: 360px) {
  body.admin .stats-row { grid-template-columns: 1fr; }
  body.admin .hero-grid { grid-template-columns: 1fr; }
  body.admin .ui-actions { gap: 6px; }
  body.admin .user-item { flex-wrap: wrap; }
}

/* ============================================================
   管理后台 v7 —— 「页面重构层」
   对应需求重构的：用户 / 兑换码 / 定价 / 购买 四页，
   以及总览页移除快捷入口后的衔接。
   仅 body.admin 下生效；补齐新 DOM 类名的深色精致样式。
   ============================================================ */

/* ---------- 通用：独立状态框（脱离 card 外的加载/空态） ---------- */
body.admin .state-box {
  text-align: center; color: #64748b; font-size: 14px;
  padding: 36px 0; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}

/* ============ 用户管理：顶部统计条 ============ */
body.admin .u-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px;
}
body.admin .u-stat {
  background: linear-gradient(160deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 16px; padding: 14px 8px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
body.admin .u-stat b {
  display: block; font-size: 24px; font-weight: 800; color: #34d399;
  font-variant-numeric: tabular-nums;
}
body.admin .u-stat span { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
body.admin .u-stat:nth-child(3) b { color: #60a5fa; }
body.admin .u-stat:nth-child(4) b { color: #f87171; }

/* 搜索框内的清除按钮 */
body.admin .search-clear {
  border: none; background: rgba(148,163,184,0.14); color: #94a3b8;
  width: 24px; height: 24px; border-radius: 50%; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; line-height: 1; padding: 0;
}
body.admin .search-clear[hidden] { display: none; }
body.admin .search-clear:active { background: rgba(148,163,184,0.26); }

/* 无邮箱用户：用户名主展示 */
body.admin .ui-mail-name { font-size: 15px; }
body.admin .ui-sub .uname { font-size: 11.5px; color: #7c8aa0; }

/* ============ 兑换码：创建面板 ============ */
body.admin .create-code-card { margin-bottom: 16px; }
body.admin .create-code-form { text-align: left; }
body.admin .create-code-form label { display: block; font-size: 13px; font-weight: 600; color: #94a3b8; margin: 16px 0 7px; letter-spacing: 0.2px; }
body.admin .create-code-form label:first-of-type { margin-top: 6px; }

/* 自定义下拉选择器：去掉原生箭头，换精致箭头 */
body.admin .select-wrap { position: relative; }
body.admin .form-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; padding: 14px 42px 14px 16px; min-height: 50px;
  background: #0f172a; border: 1.5px solid #334155; border-radius: 14px;
  color: #e2e8f0; font-size: 15px; font-family: var(--font);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  cursor: pointer;
}
body.admin .form-select:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.14); }
body.admin .select-arrow {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-size: 14px; pointer-events: none;
}

/* 数量步进器 */
body.admin .count-row { display: flex; align-items: center; gap: 10px; }
body.admin .count-btn {
  width: 46px; height: 48px; border: 1.5px solid #334155; background: #16202e;
  color: #34d399; font-size: 22px; font-weight: 700; border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease); flex-shrink: 0;
}
body.admin .count-btn:active { background: #1c2736; transform: scale(0.95); border-color: #10b981; }
body.admin .count-input {
  flex: 1; width: 64px; min-height: 48px; text-align: center;
  background: #0f172a; border: 1.5px solid #334155; border-radius: 13px;
  color: #e2e8f0; font-size: 18px; font-weight: 700; outline: none;
  font-variant-numeric: tabular-nums;
}
body.admin .count-input:focus { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }
body.admin .count-hint { font-size: 12px; color: #64748b; flex-shrink: 0; }

/* 生成结果面板 */
body.admin .code-result {
  margin-top: 16px; border-radius: 14px; padding: 14px;
  font-size: 12.5px; line-height: 1.8;
}
body.admin .code-result[hidden] { display: none; }
body.admin .code-result.ok { background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.25); }
body.admin .code-result.err { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.25); color: #f87171; }
body.admin .cr-head { font-weight: 700; color: #34d399; margin-bottom: 8px; }
body.admin .cr-grid { display: flex; flex-wrap: wrap; gap: 6px; }
body.admin #admin-code-result .code-chip {
  font-family: var(--mono); background: rgba(16,185,129,0.14); color: #6ee7b7;
  padding: 6px 10px; border-radius: 8px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background .15s var(--ease), transform .12s var(--ease-spring);
}
body.admin #admin-code-result .code-chip:active { background: rgba(16,185,129,0.26); transform: scale(0.96); }

/* ============ 兑换码：列表（可复制卡片） ============ */
body.admin .code-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 2px; border-bottom: 1px solid rgba(148,163,184,0.10);
}
body.admin .code-item:last-child { border-bottom: 1px solid transparent; }
body.admin .code-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
body.admin .code-txt {
  align-self: flex-start; font-family: var(--mono); font-weight: 700; color: #6ee7b7;
  letter-spacing: 1.2px; font-size: 13.5px; background: rgba(16,185,129,0.12);
  padding: 6px 12px; border-radius: 9px; max-width: 100%;
  word-break: break-all; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  cursor: pointer; user-select: all;
  transition: background .15s var(--ease), transform .1s var(--ease-spring);
}
body.admin .code-txt:active { background: rgba(16,185,129,0.22); transform: scale(0.98); }
body.admin .code-meta { font-size: 11.5px; color: #94a3b8; line-height: 1.6; display: flex; flex-direction: column; gap: 3px; }
body.admin .code-meta b { color: #e2e8f0; font-size: 12.5px; }
body.admin .code-user { color: #60a5fa; }
body.admin .code-exp { color: #fbbf24; }
body.admin .code-right {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 64px;
}
body.admin .code-copy-btn {
  border: none; background: rgba(16,185,129,0.16); color: #34d399;
  padding: 7px 16px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .15s var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
body.admin .code-copy-btn:active { background: rgba(16,185,129,0.28); transform: scale(0.95); }

/* ============ 定价：卡片式排版 ============ */
body.admin .pricing-tip {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.22);
  border-radius: 14px; padding: 13px 15px; margin-bottom: 14px;
  font-size: 12.5px; color: #d99a4e; line-height: 1.6;
}
body.admin .pricing-tip-ic { font-size: 16px; flex-shrink: 0; }
body.admin .price-card {
  background: linear-gradient(165deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.14); border-radius: 18px;
  padding: 18px; margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(2,6,16,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.admin .price-card.rec-item { border-color: rgba(239,68,68,0.35); box-shadow: 0 12px 34px rgba(239,68,68,0.12), inset 0 1px 0 rgba(255,255,255,0.04); }
body.admin .pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
body.admin .pc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
body.admin .pc-name { font-size: 16px; font-weight: 700; color: #f1f5f9; }
body.admin .pc-days { font-size: 11px; color: #64748b; background: rgba(148,163,184,0.12); padding: 3px 9px; border-radius: 20px; }
body.admin .pc-tag-custom { background: rgba(96,165,250,0.16) !important; color: #60a5fa !important; }
body.admin .over-tag { font-size: 10px; padding: 3px 9px; border-radius: 20px; font-weight: 700; }
body.admin .pc-rec-btn {
  flex-shrink: 0; border: 1px solid rgba(148,163,184,0.2); background: none;
  color: #94a3b8; font-size: 11.5px; font-weight: 600; border-radius: 8px;
  padding: 7px 11px; cursor: pointer; transition: all .15s var(--ease); white-space: nowrap;
}
body.admin .pc-rec-btn:active { background: rgba(148,163,184,0.1); }
body.admin .pc-rec-btn.on { border-color: rgba(239,68,68,0.3); color: #f87171; background: rgba(239,68,68,0.08); }
body.admin .pc-desc { font-size: 12px; color: #94a3b8; margin: 8px 0 14px; line-height: 1.6; }
body.admin .pc-current-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; background: rgba(15,23,42,0.6); margin-bottom: 14px;
}
body.admin .pc-cur-lb { font-size: 11.5px; color: #64748b; }
body.admin .pc-price-current { font-size: 24px; font-weight: 800; color: #6ee7b7; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
body.admin .pc-default { font-size: 12px; color: #64748b; }
body.admin .pc-edit-lb { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 8px; letter-spacing: 0.2px; }
body.admin .pc-edit-row { display: flex; gap: 10px; align-items: center; }
body.admin .pc-input-wrap { position: relative; flex: 1; min-width: 0; }
body.admin .pc-yen {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-size: 14px; font-weight: 600; pointer-events: none;
}
body.admin .pp-input {
  width: 100%; min-height: 48px; padding: 12px 14px 12px 32px;
  background: #0f172a; border: 1.5px solid #334155; border-radius: 12px;
  color: #e2e8f0; font-size: 16px; font-weight: 700; text-align: left; outline: none;
  font-variant-numeric: tabular-nums; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  font-family: var(--mono);
}
body.admin .pp-input:focus { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.14); }
body.admin .pc-save {
  flex-shrink: 0; border: none; min-height: 48px; padding: 0 22px;
  background: linear-gradient(135deg, #059669, #10b981); color: #03201a;
  border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 5px 14px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: all .15s var(--ease);
}
body.admin .pc-save:active { transform: scale(0.96); }
body.admin .pc-hint { font-size: 11px; color: #64748b; margin-top: 7px; }

/* ============ 购买：营收 Hero + 卡片列表 ============ */
body.admin .purchase-hero {
  background: linear-gradient(150deg, #065f46 0%, #0b7a5f 55%, #0f766e 110%);
  border: 1px solid rgba(110,231,183,0.28); border-radius: 20px; padding: 20px 18px;
  margin-bottom: 14px; position: relative; overflow: hidden;
  box-shadow: 0 14px 34px rgba(6,95,70,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
body.admin .purchase-hero::after {
  content: ''; position: absolute; right: -30px; top: -40px; width: 150px; height: 150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
body.admin .ph-label { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 600; letter-spacing: 0.4px; }
body.admin .ph-amount { font-size: 34px; font-weight: 800; color: #a7f3d0; margin-top: 6px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0,0,0,0.25); letter-spacing: -0.5px; }
body.admin .ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
body.admin .ph-stat {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 13px; padding: 10px 6px; text-align: center; backdrop-filter: blur(4px);
}
body.admin .ph-stat .ph-n { display: block; font-size: 17px; font-weight: 800; color: #f0fdf4; font-variant-numeric: tabular-nums; }
body.admin .ph-stat .ph-lb { display: block; font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 2px; }

/* 购买卡片列表 */
body.admin .purchase-card {
  background: linear-gradient(165deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.14); border-radius: 16px; padding: 16px;
  margin-bottom: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color .15s var(--ease);
}
body.admin .pur-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
body.admin .pur-name { font-size: 15px; font-weight: 700; color: #f1f5f9; word-break: break-all; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.admin .pur-renew { font-size: 10px; background: rgba(96,165,250,0.16); color: #60a5fa; padding: 2px 8px; border-radius: 20px; font-weight: 700; }
body.admin .pur-status {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
}
body.admin .pur-status i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
body.admin .pur-status.paid { background: rgba(16,185,129,0.14); color: #34d399; }
body.admin .pur-status.paid i { background: #34d399; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
body.admin .pur-status.pending { background: rgba(245,158,11,0.14); color: #fbbf24; }
body.admin .pur-status.pending i { background: #fbbf24; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
body.admin .pur-status.refund { background: rgba(239,68,68,0.14); color: #f87171; }
body.admin .pur-status.refund i { background: #f87171; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
body.admin .pur-buyer { font-size: 12px; color: #94a3b8; margin-top: 6px; word-break: break-all; }
body.admin .pur-buyer span { color: #a9b6c9; }
body.admin .pur-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(148,163,184,0.10); }
body.admin .pur-order { font-size: 11.5px; color: #64748b; }
body.admin .pur-amount { font-size: 20px; font-weight: 800; color: #f1f5f9; font-variant-numeric: tabular-nums; }
body.admin .pur-time { font-size: 11px; color: #64748b; margin-top: 6px; }

/* 极窄屏：统计条/购买统计收敛 */
@media (max-width: 380px) {
  body.admin .u-stat-row { grid-template-columns: repeat(2, 1fr); }
  body.admin .ph-stats { grid-template-columns: repeat(3, 1fr); }
  body.admin .pc-edit-row { flex-direction: column; align-items: stretch; }
  body.admin .pc-save { width: 100%; }
}

/* ============================================================
   管理后台 v8 —— 「功能模块视觉重排」
   聚焦信息架构与页面层级：给每个功能区域加模块标题与节奏，
   让总览/用户/兑换码/定价/购买 五页结构更清晰、更好用。
   仅 body.admin 下生效，不改任何逻辑与接口，复用既有类名/ID。
   ============================================================ */

/* 页头跟随模块节奏 */
body.admin .screen .page-head { margin-bottom: 0; }

/* ---------- 功能模块（信息分区） ---------- */
body.admin .admin-module { display: block; }
body.admin .admin-module + .admin-module { margin-top: 14px; }

/* 模块标题栏：紧凑的小标题 + 细线，不占高度 */
body.admin .module-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 2px; margin-bottom: 7px;
}
body.admin .module-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #a9b6c9; letter-spacing: 0.2px;
}
body.admin .module-sub {
  font-size: 10.5px; color: #64748b; font-weight: 600; letter-spacing: 0.3px;
  background: rgba(148,163,184,0.12); padding: 2px 9px; border-radius: 20px;
}
/* 标题下面的柔和分割线 */
body.admin .module-head::after {
  content: ''; flex: 1; height: 1px; margin-left: 6px;
  background: linear-gradient(90deg, rgba(148,163,184,0.18), transparent);
}
/* 模块内的末位元素：去掉自带下边距，统一交给模块间距 */
body.admin .admin-module .stats-row,
body.admin .admin-module .card { margin-bottom: 0 !important; }

/* ---------- 总览：营收/订单双卡衔接 ---------- */
body.admin .hero-grid { margin: 0 0 14px; }
body.admin .admin-module > .hero-grid { width: 100%; }

/* 营收明细：行高收紧，更紧凑 */
body.admin .rev-row { padding: 10px 4px; }

/* ---------- 总览：退出登录（独立收尾区） ---------- */
body.admin .admin-exit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 2px; padding: 15px; border-radius: 14px;
  background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.24);
  color: #f87171; font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
  cursor: pointer; transition: all .16s var(--ease);
}
body.admin .admin-exit:active { transform: scale(0.98); background: rgba(239,68,68,0.16); }
body.admin .admin-exit .exit-ic { font-size: 15px; }

/* ---------- 用户管理：统计条 + 列表节奏 ---------- */
body.admin .u-stat-row { margin: 0 0 6px; }
body.admin .user-item { border-bottom: 1px solid rgba(148,163,184,0.10); }
body.admin .user-item:last-child { border-bottom: 1px solid transparent; }
/* 用户列表容器：包裹卡片里的列表，滚动更舒适 */
body.admin #admin-users-list { display: flex; flex-direction: column; }
body.admin .load-more { margin-top: 6px; }

/* ---------- 兑换码：创建面板 + 列表分段 ---------- */
body.admin .create-code-card { margin-bottom: 14px; }
body.admin .create-code-card .sec-head { margin-bottom: 8px; }
body.admin .code-result { margin-top: 10px; }

/* ---------- 定价：期期分卡 + 期期标题 ---------- */
body.admin .pricing-tip { margin-bottom: 14px; }
body.admin .pricing-tip {
  display: flex; align-items: center; gap: 10px;
}

/* ---------- 购买：营收 Hero + 列表节奏 ---------- */
body.admin .purchase-hero { margin-bottom: 14px; }

/* ============================================================
   管理后台 v8.1 —— 「用户页去头像 + 类型筛选」
   ============================================================ */

/* 去掉头像后，用户行内不做空白偏移 */
body.admin .user-item { gap: 12px; align-items: center; }
body.admin .user-detail { margin: 4px 4px 12px 2px; }

/* 统计条变为可点击的类型筛选 chips */
body.admin .u-stat {
  cursor: pointer; user-select: none;
  transition: transform .14s var(--ease-spring), border-color .16s var(--ease),
              background .16s var(--ease), box-shadow .16s var(--ease);
  border: 1px solid transparent;
}
body.admin .u-stat:active { transform: scale(0.96); }
body.admin .u-stat:hover { border-color: rgba(148,163,184,0.20); }
/* 选中的筛选 chip：绿色描边 + 高亮数字 */
body.admin .u-stat.on {
  border-color: rgba(16,185,129,0.45);
  background: linear-gradient(160deg, rgba(16,185,129,0.16) 0%, rgba(16,185,129,0.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
body.admin .u-stat.on b { color: #6ee7b7 !important; }
body.admin .u-stat.on span { color: #a7f3d0; }

/* ============================================================
   管理后台 v8.2 —— 「兑换码：选择套餐下拉框精修」
   ============================================================ */

/* 通知浏览器用深色主题渲染下拉控件及其系统弹出层（Chrome/Edge/Safari 支持） */
body.admin #view-a-codes { color-scheme: dark; }

/* 下拉框本体：更精致的深色质感 + 悬停/聚焦反馈 */
body.admin #admin-plan-select {
  background: linear-gradient(165deg, #141f2d 0%, #101a27 100%);
  border: 1.5px solid #2e3a4d;
  border-radius: 13px;
  padding: 13px 44px 13px 16px;
  min-height: 52px;
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
body.admin #admin-plan-select:hover {
  border-color: #3f4d63;
  background: linear-gradient(165deg, #162335 0%, #121e2c 100%);
}
body.admin #admin-plan-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.16), inset 0 2px 6px rgba(0,0,0,0.3);
}
/* 原生下拉箭头隐藏，改用精致 SVG 箭头（与深色主题一致） */
body.admin #view-a-codes #admin-plan-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
body.admin #view-a-codes .select-arrow {
  right: 15px;
  color: #6ee7b7;
  font-size: 13px;
  pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16,185,129,0.14);
  width: 24px; height: 24px; border-radius: 8px;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
body.admin #view-a-codes .select-wrap:focus-within .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  background: rgba(16,185,129,0.26);
}
/* 选中显示的文字强调：闭合下拉框内文字过长时省略号收尾，不溢出 */
body.admin #admin-plan-select {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 下拉选项（原生选择框）：紧凑字号、圆整、限制最大宽度，避免选项文字溢出屏幕 */
body.admin #admin-plan-select option {
  background: #1e293b;
  color: #e2e8f0;
  font-size: 13px;
  padding: 6px 10px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.admin #admin-plan-select option:checked { color: #6ee7b7; }
body.admin #admin-plan-select option:disabled { color: #64748b; }
/* 极窄屏：下拉/选项行宽兜底 */
@media (max-width: 360px) {
  body.admin #admin-plan-select { font-size: 14px; padding-left: 14px; }
  body.admin #admin-plan-select option { font-size: 12px; }
}

/* 兑换码 chip：去掉独立复制按钮后，强化“可点击复制”的悬停反馈 */
body.admin .code-txt { transition: background .15s var(--ease), transform .1s var(--ease-spring), box-shadow .15s var(--ease); }
body.admin .code-txt:hover {
  background: rgba(16,185,129,0.22);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}
body.admin .code-txt:active { transform: scale(0.97); }

/* ============================================================
   管理后台 v8.3 —— 「定价页：套餐卡片压缩」
   ============================================================ */
body.admin .price-card { padding: 13px 14px; margin-bottom: 10px; border-radius: 16px; }
body.admin .pc-name { font-size: 15px; }
body.admin .pc-days { padding: 2px 8px; }
body.admin .pc-desc { margin: 6px 0 8px; line-height: 1.5; }
body.admin .pc-current-row {
  padding: 9px 12px; margin-bottom: 8px; border-radius: 11px;
}
body.admin .pc-price-current { font-size: 22px; }
body.admin .pc-edit-lb { margin-bottom: 5px; }
body.admin .pp-input {
  min-height: 42px; padding: 8px 12px 8px 30px; border-radius: 11px; font-size: 15px;
}
body.admin .pc-yen { left: 12px; font-size: 13px; }
body.admin .pc-save {
  min-height: 42px; padding: 0 18px; border-radius: 11px; font-size: 13.5px;
}
body.admin .pc-hint { margin-top: 4px; }
body.admin .pc-rec-btn { padding: 5px 9px; }

/* ============================================================
   管理后台 v8.4 —— 「购买页：购买卡片压缩」
   ============================================================ */
body.admin .purchase-card { padding: 12px 13px; margin-bottom: 9px; border-radius: 14px; }
body.admin .pur-name { font-size: 14px; }
body.admin .pur-renew { font-size: 9.5px; padding: 1px 7px; }
body.admin .pur-status { font-size: 11.5px; padding: 3px 10px; }
body.admin .pur-buyer { font-size: 11.5px; margin-top: 4px; }
body.admin .pur-foot { margin-top: 8px; padding-top: 8px; }
body.admin .pur-order { font-size: 11px; }
body.admin .pur-amount { font-size: 17px; }
body.admin .pur-time { font-size: 10.5px; margin-top: 3px; }

/* ============================================================
   管理后台 v8.5 —— 「用户页：独立用户卡片」
   每张卡片只展示：用户名 / 用户类型 / 状态 / 禁用启用 / 重置密码
   ============================================================ */
body.admin #admin-users-list { display: flex; flex-direction: column; gap: 10px; }
body.admin .user-card {
  background: linear-gradient(165deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 14px;
  padding: 13px 14px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(2,6,16,0.2);
  transition: transform .14s var(--ease-spring), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
body.admin .user-card:active { transform: scale(0.99); }
body.admin .user-card:hover { border-color: rgba(16,185,129,0.3); }

/* 卡片上半部：用户名 + 标签 */
body.admin .uc-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.admin .uc-name {
  font-size: 15px; font-weight: 700; color: #f1f5f9;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.admin .uc-tags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* 卡片下半部：操作按钮 */
body.admin .uc-actions {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(148,163,184,0.12);
}
body.admin .uc-actions .admin-btn { flex: 1; }
body.admin .uc-actions .sys-acct {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 10px;
  background: rgba(148,163,184,0.10); color: #94a3b8; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.2px;
}

/* ============================================================
   管理后台 v8.6 —— 「总览：核心指标横向一行」
   仅作用于总览核心指标(#admin-stats)，不影响普通用户的个人中心统计卡。
   ============================================================ */
body.admin #admin-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
/* 每个指标卡：一列一个指标，内容纵向居中、更紧凑 */
body.admin #admin-stats .stat-card.he {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 14px 6px 12px;
  border-radius: 15px;
  min-height: 96px;
}
/* 去掉左侧竖条，改用顶部细条，适配横向窄卡 */
body.admin #admin-stats .stat-card.he::before {
  left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 3px;
}
body.admin #admin-stats .stat-card.he .stat-he-ic {
  width: 30px; height: 30px; border-radius: 9px; font-size: 15px; margin-bottom: 6px;
  background: rgba(148,163,184,0.12);
}
body.admin #admin-stats .stat-card.he .stat-num {
  font-size: 24px; margin-top: 0; line-height: 1.1;
}
body.admin #admin-stats .stat-card.he .stat-label {
  font-size: 11.5px; margin-top: 4px; opacity: 0.85;
}
/* 极窄屏：4 列太挤，退化为 2×2（仍横向成行） */
@media (max-width: 380px) {
  body.admin #admin-stats { grid-template-columns: repeat(2, 1fr); }
  body.admin #admin-stats .stat-card.he {
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    text-align: left; gap: 10px; padding: 12px 12px; min-height: 64px;
  }
  body.admin #admin-stats .stat-card.he .stat-he-ic { margin-bottom: 0; width: 34px; height: 34px; }
  body.admin #admin-stats .stat-card.he::before { left: 0; bottom: 0; top: 0; right: auto; width: 3px; height: auto; }
}

/* ============================================================
   管理后台 v8.7 —— 「用户页：卡片占满全宽」
   移动端：去掉内层白卡，让每张用户卡片直接横跨页面宽度。
   ============================================================ */
body.admin .users-list-head { margin: 0 0 12px; }
body.admin .users-list-head .sec-head { margin: 0 0 8px; }
body.admin .users-list-head .admin-search { margin-bottom: 0; }

/* 用户卡片列表：占满屏宽，卡片间留白 */
body.admin #admin-users-list {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
}
body.admin .user-card { width: 100%; margin: 0; }

/* ============================================================
   管理后台 v8.8 —— 「兑换码列表：参考用户页卡片样式」
   兑换码列表容器与用户列表一致（flex 纵列 + gap），每张兑换码
   卡片视觉完全复用用户的 .user-card（背景/边框/圆角/阴影/占满宽）。
   ============================================================ */

/* 列表表头：与用户页 .users-list-head 对齐 */
body.admin .codes-list-head {
  margin: 2px 0 12px;
}
body.admin .codes-list-head .sec-head { margin: 0 2px 6px; }

/* 兑换码列表容器：参考 #admin-users-list，占满屏宽、卡片间留白 */
body.admin #admin-codes-list {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 0; min-width: 0;
  justify-content: flex-start; align-items: stretch;
}

/* 每张兑换码卡片：复用用户页 .user-card 的卡片视觉，占满全宽 */
body.admin .code-item {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; max-width: 100%; min-width: 0; margin: 0;
  padding: 13px 14px;
  background: linear-gradient(165deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(2,6,16,0.2);
  transition: transform .14s var(--ease-spring), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
body.admin .code-item:active { transform: scale(0.99); }
body.admin .code-item:hover { border-color: rgba(16,185,129,0.3); }
/* 上行：套餐名 + 到期信息 */
body.admin .code-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
body.admin .code-name { font-size: 15px; font-weight: 700; color: #f1f5f9; min-width: 0; }
body.admin .code-exp { font-size: 11px; color: #fbbf24; white-space: nowrap; }
/* 中行：价格 · 创建时间 · 使用人 */
body.admin .code-sub { font-size: 11.5px; color: #94a3b8; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
body.admin .code-user { color: #60a5fa; }
/* 下行：兑换码（可复制）+ 状态 */
body.admin .code-btm {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 1px;
}
body.admin .code-btm .code-txt { max-width: 100%; min-width: 0; }
body.admin .code-btm .dot { flex-shrink: 0; }
/* 加载更多按钮：占满宽度，与其他卡片对齐、留白 */
body.admin #admin-codes-list .load-more { width: 100%; max-width: 100%; min-width: 0; margin: 0; }

/* ============================================================
   管理后台 v8.9 —— 「定价页：套餐名 + 综合信息 + 价格编辑 + 推荐」
   天数/次数/Token 综合成一行小字展示；保留修改价格功能，
   不展示、不操作默认价格。
   ============================================================ */
/* 推荐中标签 */
body.admin .rec-tag {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: rgba(239,68,68,0.16); color: #f87171; white-space: nowrap;
}
/* 定价列表容器：重置 note.state 遗留的居中，整体靠左 */
body.admin #admin-pricing-list { text-align: left; }
/* 综合信息小字：天数 · 次数 · Token，靠左占一行 */
body.admin .pc-quota {
  margin: 8px 0 12px; font-size: 11.5px; color: #94a3b8;
  line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
/* 价格编辑区：标签 + 输入框 + 保存，横向一行 */
body.admin .pc-price-edit {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(15,23,42,0.55);
}
body.admin .pc-price-edit .pc-edit-lb { font-size: 11.5px; color: #64748b; flex-shrink: 0; }
body.admin .pc-price-edit .pc-edit-row { flex: 1; min-width: 0; }
/* 精简：套餐名更醒目 */
body.admin .price-card .pc-name { font-size: 16px; }

/* ============================================================
   管理后台 v8.10 —— 「购买页：列表样式参考用户页」
   购买列表容器与用户列表一致（flex 纵列 + gap + 占满宽），
   卡片去掉底部 margin，改用容器 gap 留白。
   ============================================================ */
/* 列表表头：与用户页 .users-list-head 对齐 */
body.admin .purchases-list-head { margin: 8px 0 12px; }
body.admin .purchases-list-head .sec-head { margin: 0 2px 10px; }
body.admin .purchases-list-head .admin-search { margin-bottom: 0; }

/* 购买列表容器：参考 #admin-users-list；重置 note.state 的居中，靠左 */
body.admin #admin-purchase-list {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 0; min-width: 0;
  justify-content: flex-start; align-items: stretch;
  text-align: left;
}
/* 购买卡片：占满全宽，去掉底部 margin（间距交给容器 gap），内容靠左 */
body.admin .purchase-card {
  width: 100%; max-width: 100%; margin: 0;
  text-align: left;
}

/* ============================================================
   登录 / 注册页 —— 简洁化（v5.1 精简）
   移除装饰性伪元素、光斑、流光等可能遮挡点击的效果，
   回归干净、简单、稳定的登录/注册交互。
   ============================================================ */

/* 禁用登录页一切装饰伪元素（钥匙角标、光斑、流光、光晕），杜绝遮挡点击 */
#view-auth *::before,
#view-auth *::after,
#view-auth::before,
#view-auth::after { display: none !important; }

/* 顶部品牌区：仅保留标题与副标题，去掉徽标装饰 */
#view-auth .auth-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 6px 0 14px;
}
#view-auth .auth-logo { display: none; }
#view-auth .auth-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: #1f2937;
}
#view-auth .auth-sub {
  font-size: 13px; color: #98a1b3; margin-top: 4px;
}

/* 分段切换：简洁胶囊 */
#view-auth .tabs { margin-top: 2px; }
#view-auth .tab { padding: 12px 10px; font-weight: 700; }
#view-auth .tab.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
}

/* 输入框：图标隐藏（去掉内嵌图标，避免任何遮挡） */
#view-auth .field-ic { display: none; }
#view-auth .field input,
#view-auth .pwd-wrap input { padding-left: 14px; }

/* 主按钮：去除流光伪元素由上方统一切除；仅保留加载态 */
#view-auth .btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; }
#view-auth .btn-primary .btn-load {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff;
  display: none; animation: spin .7s linear infinite;
}
#view-auth .btn-primary.loading .btn-load { display: inline-block; }
#view-auth .btn-primary.loading { opacity: .9; }

/* ---------- 记住密码复选框 ---------- */
.remember-row {
  display: flex; align-items: center;
  margin-top: 14px; margin-bottom: -6px;
}
.remember-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--c-text-secondary);
  cursor: pointer; user-select: none;
}
.remember-label input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--c-primary);
  cursor: pointer;
}
/* 注册模式隐藏记住密码（记住密码仅对登录有意义） */
#view-auth.auth-register .remember-row { display: none; }

/* ---------- 密码强度条 ---------- */
.strength-wrap {
  margin-top: 12px; padding: 10px 12px;
  background: var(--c-card, #f1f3f8);
  border: 1px solid var(--c-border, rgba(120,130,150,.22));
  border-radius: 12px;
}
.strength-wrap[hidden] { display: none; }
.strength-bar {
  height: 6px; border-radius: 6px; overflow: hidden;
  background: rgba(120,130,150,.18);
}
.strength-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--c-text-secondary, #94a3b8);
  border-radius: 6px; transition: width .25s ease, background .25s ease;
}
.strength-label {
  display: block; margin-top: 6px;
  font-size: 12px; color: var(--c-text-secondary);
}

/* ================= 使用指南：左右分页 tab ================= */
.docs-tabs {
  display: flex; gap: 6px; margin: 4px 0 16px;
  background: var(--c-card, #f1f3f8);
  border: 1px solid var(--c-border, rgba(120,130,150,.22));
  border-radius: 14px; padding: 5px;
  box-shadow: inset 0 1px 3px rgba(15,23,42,.05);
}
.docs-tab {
  flex: 1; padding: 11px 12px; border: none; border-radius: 10px;
  background: transparent; color: var(--c-text-secondary);
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .2s;
}
.docs-tab:hover { color: var(--c-text); background: rgba(255,255,255,.6); }
.docs-tab.active {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(79,70,229,.35);
  border: 1px solid transparent;
}
.docs-pane { display: none; }
.docs-pane.active { display: block; }

/* ---- 指南页：三步开始调用（序号步骤条） ---- */
.g-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.g-step {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  background: #f7f8fc;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
}
.g-step-no {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
  color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(79, 70, 229, .26);
}
.g-step-main { flex: 1; min-width: 0; }
.g-step-title { font-size: 14px; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.g-step-main .note { font-size: 12.5px; }
.g-step-go {
  flex-shrink: 0; align-self: center; cursor: pointer;
  border: none; font-family: inherit;
  padding: 7px 13px; border-radius: 999px;
  background: var(--c-primary-bg); color: var(--c-primary);
  font-size: 12.5px; font-weight: 700;
  transition: transform .14s var(--ease-spring), background .2s var(--ease);
}
.g-step-go:active { transform: scale(.94); background: #dde4ff; }

/* ---- 指南页：强调提示条 ---- */
.g-tip {
  margin-top: 10px; padding: 9px 12px;
  background: var(--c-primary-bg); color: var(--c-primary-dark);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

/* ---- 指南页：两种使用方式分块 ---- */
.g-way { padding: 11px 0; border-bottom: 1px dashed var(--c-border-light); }
.g-way:first-of-type { padding-top: 4px; }
.g-way:last-child { padding-bottom: 0; border-bottom: none; }
.g-way-h {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 700; color: var(--c-text);
  margin-bottom: 4px;
}
.g-way-badge {
  font-size: 10.5px; font-weight: 700; color: #fff;
  padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, var(--c-green), #34d399);
}

/* ---- 指南页：命令行示例 ---- */
#view-docs #g-demo { font-size: 11.5px; line-height: 1.65; }

/* ---- 指南页：常见问题（左侧竖线问答条） ---- */
.g-faq { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.g-faq-item { padding-left: 11px; border-left: 3px solid rgba(79, 70, 229, .22); }
.g-faq-q { font-size: 13.5px; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.g-faq-item .note { font-size: 12.5px; }

/* 窄屏：步骤条按钮换行铺满，避免文字被挤成竖排 */
@media (max-width: 380px) {
  .g-step { flex-wrap: wrap; }
  .g-step-go { width: 100%; margin-top: 2px; }
}

/* 在线测试 */
#view-docs .btn-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
#view-docs .btn-secondary {
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border, rgba(120,130,150,.25));
}
#view-docs .btn-secondary:active { opacity: .8; }
#view-docs .btn-sm { padding: 6px 14px; font-size: 13px; }
#view-docs .kv.grid-2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#view-docs .resp-pre {
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(120,130,150,.2);
  border-radius: 10px; padding: 12px 14px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap;
  word-break: break-all; max-height: 320px; overflow: auto;
  color: var(--c-text);
}

/* 在线测试：选择 Key / 输入测试内容 */
#view-docs .test-label {
  display: block; margin: 12px 0 6px;
  font-size: 13px; color: var(--c-text-secondary); font-weight: 600;
}
#view-docs .test-select,
#view-docs .test-textarea {
  width: 100%; border-radius: 10px;
  border: 1px solid var(--c-border, rgba(120,130,150,.3));
  background: var(--c-surface); color: var(--c-text);
  font-size: 14px; padding: 10px 12px;
  box-sizing: border-box;
}
#view-docs .test-select:focus,
#view-docs .test-textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
#view-docs .test-textarea { resize: vertical; min-height: 72px; font-family: inherit; line-height: 1.5; }
#view-docs .test-select[disabled] { opacity: .6; }

/* ============================================================
   管理后台 · 兑换码列表（最终覆盖样式）
   紧凑四行卡片：①兑换码+状态/删除 ②套餐+价格 ③创建时间 ④使用时间
   卡片占满容器全宽，时间靠右。
   ============================================================ */
/* 筛选按钮 */
body.admin .code-filter { display: flex; gap: 8px; margin: 2px 2px 10px; flex-wrap: wrap; }
body.admin .code-filter-btn {
  flex: 1; border: 1px solid rgba(148,163,184,0.22); background: rgba(148,163,184,0.08);
  color: #cbd5e1; border-radius: 999px; padding: 8px 0; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; transition: all .15s var(--ease);
}
body.admin .code-filter-btn:hover { border-color: rgba(16,185,129,0.4); color: #e2e8f0; }
body.admin .code-filter-btn.active {
  background: linear-gradient(135deg, #10b981, #059669); border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(16,185,129,0.3);
}

/* 兑换码列表容器：占满全宽、卡片间距 */
body.admin #admin-codes-list {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 0; min-width: 0; align-items: stretch;
}
/* 卡片：占满全宽、紧凑纵向 */
body.admin .code-item {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0;
  padding: 12px 14px;
  background: linear-gradient(165deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(2,6,16,0.2);
  transition: transform .14s var(--ease-spring), border-color .15s var(--ease);
}
body.admin .code-item:active { transform: scale(0.99); }
body.admin .code-item:hover { border-color: rgba(16,185,129,0.3); }

/* 第一行：兑换码 + 状态/删除 */
body.admin .code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.admin .code-head-ops { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
body.admin .code-txt {
  display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 100%;
  font-family: var(--mono); font-weight: 700; color: #6ee7b7;
  letter-spacing: 1.2px; font-size: 14px; background: rgba(16,185,129,0.12);
  padding: 7px 12px; border-radius: 9px; word-break: break-all; overflow-wrap: anywhere;
  cursor: pointer; user-select: all;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background .15s var(--ease), transform .1s var(--ease-spring);
}
body.admin .code-txt:hover { background: rgba(16,185,129,0.2); }
body.admin .code-txt:active { transform: scale(0.98); }
body.admin .code-del-btn {
  border: none; background: rgba(239,68,68,0.12); color: #fca5a5;
  width: 30px; height: 30px; border-radius: 8px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease);
}
body.admin .code-del-btn:hover { background: rgba(239,68,68,0.25); color: #fecaca; transform: scale(1.05); }
body.admin .code-del-btn:active { transform: scale(0.95); }

/* 数据行：标签靠左、内容靠右 */
body.admin .code-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0;
}
body.admin .code-lb { flex-shrink: 0; font-size: 12px; color: #94a3b8; }
body.admin .code-val { font-size: 12px; color: #e2e8f0; text-align: right; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
body.admin .code-noval { color: #64748b; font-weight: 400; }


/* ============================================================
   普通用户视觉精修层（追加层，不改动既有结构/文案）
   作用域限定，不触碰管理员深色主题（body.admin 覆盖优先）。
   ============================================================ */

/* —— 数字等宽对齐：价格/额度/次数不随长度跳动 —— */
body:not(.admin) .plan-price,
body:not(.admin) .ab-num,
body:not(.admin) .mypkg-sub,
body:not(.admin) .order-left .sub,
body:not(.admin) .hero-num,
body:not(.admin) .keybox {
  font-variant-numeric: tabular-nums;
}

/* —— 按钮细节 —— */
body:not(.admin) .btn:focus-visible {
  outline: 2px solid rgba(99,102,241,0.55);
  outline-offset: 2px;
}
body:not(.admin) .btn[disabled] { box-shadow: none; }

/* —— 轻提示 toast 更精致圆角与层次 —— */
body:not(.admin) .toast { border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); }

/* —— 底部导航：激活态更细腻 —— */
body:not(.admin) .tabbar {
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.8);
}
body:not(.admin) .tab-btn { font-weight: 600; }
body:not(.admin) .tab-btn.active {
  background: linear-gradient(180deg, var(--c-primary-bg), #e0e7ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(79,70,229,0.12);
}
body:not(.admin) .tab-btn.active span { transform: translateY(-2px) scale(1.05); }

/* —— 卡片细节：更柔和层次 —— */
body:not(.admin) .card { box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 10px 30px rgba(79,70,229,0.06); }
body:not(.admin) .card h3 { letter-spacing: -0.2px; }
body:not(.admin) .card h3 .h3-extra { float: right; font-size: 12px; font-weight: 600; }

/* —— 状态空/错态：间距与语义更清楚 —— */
body:not(.admin) .note.state { gap: 6px; }
body:not(.admin) .state-emoji { line-height: 1; }

/* —— 我的套餐卡：hover/按压手感与数字 —— */
body:not(.admin) .mypkg { border-color: rgba(229,231,235,0.6); }
body:not(.admin) .mypkg-head .pill { letter-spacing: 0.2px; }

/* —— 订单记录：金额与状态对齐 —— */
body:not(.admin) .order-left b { letter-spacing: -0.1px; }

/* —— 在线测试：聚焦与次要按钮细节 —— */
#view-docs .test-select:focus, #view-docs .test-textarea:focus { outline: none; }
body:not(.admin) #view-docs .btn-secondary:hover { border-color: var(--c-primary-light); color: var(--c-primary); }

/* ============================================================
   管理后台 v9 —— 「用户信息卡 + 分类一行 + 定价三行卡」
   作用域 body.admin，仅调整视觉排版，不改任何逻辑/接口。
   ============================================================ */

/* ---------- 用户页：类型筛选 5 个并排一行 ---------- */
body.admin .u-stat-row {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0 0 12px;
}
body.admin .u-stat {
  padding: 12px 4px;
}
body.admin .u-stat b { font-size: 19px; }
body.admin .u-stat span { font-size: 10.5px; margin-top: 2px; white-space: nowrap; }

/* ---------- 用户页：信息卡样式（去头像） ---------- */
body.admin #admin-users-list { gap: 10px; }
body.admin .admin-user-card {
  background: linear-gradient(165deg, #1c2736 0%, #16202e 100%);
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(2,6,16,0.18);
  transition: border-color .15s var(--ease);
}
body.admin .admin-user-card:hover { border-color: rgba(16,185,129,0.3); }
body.admin .auc-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0;
}
body.admin .auc-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0;
  font-size: 14.5px; font-weight: 700; color: #f1f5f9; word-break: break-all;
}
body.admin .auc-id {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: #64748b;
  font-family: var(--mono); background: rgba(148,163,184,0.12);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
body.admin .auc-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: rgba(15,23,42,0.5);
}
body.admin .auc-kv {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #94a3b8; min-width: 0; overflow-wrap: anywhere;
}
body.admin .auc-kv b { font-size: 12px; }
body.admin .auc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; flex-wrap: wrap;
}
body.admin .auc-stats {
  display: flex; align-items: center; gap: 12px; font-size: 12px; color: #94a3b8;
}
body.admin .auc-stats b { color: #34d399; font-variant-numeric: tabular-nums; }
body.admin .auc-stats .detail-toggle { margin-top: 0; }
body.admin .user-detail { margin: 6px 2px 2px; }

/* ---------- 兑换码：新建面板紧凑化 ---------- */
body.admin .create-code-card { margin-bottom: 14px; }
body.admin .create-code-form label {
  margin: 0 0 7px; font-size: 12.5px;
}
body.admin .create-code-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end;
}
body.admin .cc-field { min-width: 0; }
body.admin .cc-count { width: 210px; max-width: 46%; }
body.admin .cc-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
}
body.admin #admin-code-gen { flex: 1; margin: 0; }
body.admin .create-code-form .count-row { gap: 8px; }
body.admin .create-code-form .count-btn { width: 42px; height: 46px; min-height: 0; font-size: 20px; }
body.admin .create-code-form .count-input { min-height: 46px; font-size: 16px; }
body.admin .create-code-form .count-hint { font-size: 11.5px; }

/* ---------- 定价：三行卡片 ---------- */
body.admin #admin-pricing-list { display: flex; flex-direction: column; gap: 12px; }
body.admin .price-card { margin-bottom: 0; }
body.admin .price-card.rec-item {
  border-color: rgba(239,68,68,0.4);
  box-shadow: 0 12px 34px rgba(239,68,68,0.14), inset 0 1px 0 rgba(255,255,255,0.05);
}
body.admin .price-card .pc-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.admin .price-card .pc-name { font-size: 17px; }
body.admin .price-card .pc-spec {
  font-size: 13px; color: #94a3b8; margin: 10px 0 14px; line-height: 1.6;
  padding: 10px 12px; border-radius: 10px; background: rgba(15,23,42,0.5);
}
body.admin .price-card .pc-row3 {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; background: rgba(15,23,42,0.6);
}
body.admin .price-card .pc-cur {
  display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
}
body.admin .price-card .pc-cur-lb { font-size: 11.5px; color: #64748b; }
body.admin .price-card .pc-price-current { font-size: 22px; }
body.admin .price-card .pc-default { font-size: 11px; color: #64748b; }
body.admin .price-card .pc-edit {
  display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; position: relative;
}
body.admin .price-card .pc-yen {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-size: 14px; font-weight: 600; pointer-events: none;
}
body.admin .price-card .pp-input {
  flex: 1 1 120px; min-width: 90px; padding: 12px 12px 12px 32px; min-height: 46px;
}
body.admin .price-card .pc-save { min-height: 46px; padding: 0 20px; }
body.admin .price-card .rec-btn { flex-shrink: 0; }

/* 窄屏：定价行3 纵向堆叠 */
@media (max-width: 420px) {
  body.admin .price-card .pc-row3 { flex-direction: column; align-items: stretch; }
  body.admin .price-card .pc-edit { flex: 1 1 auto; }
  body.admin .create-code-grid { grid-template-columns: 1fr; }
  body.admin .cc-count { width: 100%; max-width: 100%; }
  body.admin .u-stat span { font-size: 9.5px; }
}

/* ---------- 用户页：解锁按钮（警示黄/橙） ---------- */
body.admin .admin-btn-warn {
  background: rgba(245,158,11,0.16); color: #fbbf24;
}
body.admin .admin-btn-warn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- 兑换码：新建（单行紧凑工具条 v2） ---------- */
body.admin .create-code-bar {
  display: flex; align-items: stretch; gap: 8px; width: 100%;
  margin-top: 8px;
}
body.admin .create-code-bar .select-wrap { flex: 1 1 auto; min-width: 0; }
body.admin .create-code-bar .select-wrap .form-select {
  width: 100%; min-height: 44px; padding: 10px 38px 10px 12px;
  font-size: 14px; border-radius: 12px;
}
body.admin .create-code-bar .select-wrap .select-arrow { right: 14px; }
body.admin .cc-num { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
body.admin .create-code-bar .count-btn {
  width: 40px; height: 44px; min-height: 44px; border-radius: 10px; font-size: 18px;
}
body.admin .create-code-bar .count-input {
  width: 52px; min-height: 44px; font-size: 15px; border-radius: 10px; padding: 0;
}
body.admin .create-code-bar #admin-code-gen {
  flex: 0 0 auto; width: auto; margin: 0; min-height: 44px;
  padding: 0 16px; font-size: 14px; border-radius: 12px; white-space: nowrap;
}
body.admin .create-code-card .measure-note { font-size: 11px; color: #64748b; }

/* ============================================================
   兑换码：新建卡片（手机端重做 v3）
   全部使用自定义类（code-create-head / cc-row / cc-gen），
   不依赖全局 .btn / .form / .sec-head，避免样式冲突崩坏。
   ============================================================ */
body.admin #view-a-codes .create-code-card { padding: 16px; }
body.admin .code-create-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; color: #f1f5f9; margin-bottom: 14px;
}
body.admin .create-code-card .cc-row { display: block; margin-bottom: 14px; }
body.admin .create-code-card .cc-row > label {
  display: block; font-size: 12.5px; font-weight: 600; color: #94a3b8;
  margin-bottom: 7px; letter-spacing: 0.2px;
}
body.admin .create-code-card .cc-row .select-wrap { position: relative; width: 100%; }
body.admin .create-code-card .form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; min-height: 48px; padding: 12px 40px 12px 14px; margin: 0;
  background: #0f172a; border: 1.5px solid #334155; border-radius: 13px;
  color: #e2e8f0; font-size: 15px; font-family: var(--font);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer; box-sizing: border-box;
}
body.admin .create-code-card .form-select:focus { outline: none; border-color: #10b981; }
body.admin .create-code-card .select-arrow {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-size: 14px; pointer-events: none;
}
body.admin .create-code-card .count-row {
  display: flex; align-items: center; gap: 10px;
}
body.admin .create-code-card .count-btn {
  width: 48px; height: 48px; min-height: 0; flex-shrink: 0; padding: 0;
  border: 1.5px solid #334155; background: #16202e; color: #34d399;
  font-size: 22px; font-weight: 700; border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease); line-height: 1;
}
body.admin .create-code-card .count-btn:active { background: #1c2736; transform: scale(0.95); border-color: #10b981; }
body.admin .create-code-card .count-input {
  flex: 1; width: auto; min-width: 0; min-height: 48px; padding: 0; margin: 0;
  text-align: center; background: #0f172a; border: 1.5px solid #334155; border-radius: 13px;
  color: #e2e8f0; font-size: 18px; font-weight: 700; outline: none;
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
body.admin .create-code-card .count-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
body.admin .create-code-card .count-hint { font-size: 12px; color: #64748b; flex-shrink: 0; }
body.admin #admin-code-gen.cc-gen {
  display: block; width: 100%; min-height: 50px; margin: 6px 0 0; padding: 12px 16px;
  background: linear-gradient(135deg, #059669, #10b981); color: #04281f;
  border: none; border-radius: 13px; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 5px 14px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: all .15s var(--ease); box-sizing: border-box;
}
body.admin #admin-code-gen.cc-gen:disabled { opacity: 0.6; pointer-events: none; }
body.admin #admin-code-gen.cc-gen:active { transform: scale(0.98); }
body.admin .create-code-card .code-result { margin-top: 14px; }
/* 窄屏：工具条换行堆叠 */
@media (max-width: 480px) {
  body.admin .create-code-bar { flex-wrap: wrap; }
  body.admin .create-code-bar .select-wrap { flex: 1 1 100%; }
  body.admin .cc-num { flex: 1 1 auto; }
  body.admin .create-code-bar #admin-code-gen { flex: 0 0 auto; }
}

/* ============================================================
   管理后台 v10 —— 「全局细节精修层」
   纯视觉打磨：保持既有深色控制台风格、布局与全部逻辑/结构不变，
   仅通过追加覆盖 refine 层次、微交互、统一质感与细节。
   全部限定在 body.admin 内，cascade 覆盖前述版本。
   ============================================================ */

/* ---------- 整体氛围：更通透的底色与柔和滚动 ---------- */
body.admin #app { padding-bottom: 26px; }
body.admin {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(16,185,129,0.10) 0%, transparent 55%),
    radial-gradient(120% 80% at 88% 116%, rgba(59,130,246,0.07) 0%, transparent 55%),
    #0b1220;
  transition: background .3s var(--ease);
}
/* 细节滚动条：克制、适配深色 */
body.admin ::-webkit-scrollbar { width: 8px; height: 8px; }
body.admin ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.22); border-radius: 8px; }
body.admin ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.34); }
body.admin ::-webkit-scrollbar-track { background: transparent; }

/* 数字等宽：金额/次数/单数更稳定不跳动 */
body.admin .hero-rev-num,
body.admin .hero-num,
body.admin .ph-amount,
body.admin .ph-n,
body.admin .stat-num,
body.admin .pc-price-current,
body.admin .rv,
body.admin .pp-price-current { font-variant-numeric: tabular-nums; }

/* 可控焦点态：键盘可达、视觉统一 */
body.admin :focus-visible {
  outline: 2px solid rgba(110,231,183,0.65);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- 顶栏：更精致的渐变与细光晕 ---------- */
body.admin .topbar {
  background:
    radial-gradient(120% 140% at 88% -40%, rgba(16,185,129,0.30) 0%, transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #123b36 58%, #0b7a5f 130%);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.06);
}
body.admin .topbar::after {
  content: '';
  position: absolute; top: -60%; right: -6%;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, transparent 70%);
}
body.admin #brand { text-shadow: 0 1px 8px rgba(0,0,0,0.3); }

/* ---------- 页头：细加分号强化层级 ---------- */
body.admin .page-head { position: relative; padding-left: 12px; }
body.admin .page-head::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, #34d399, #0d9488);
  box-shadow: 0 0 12px rgba(16,185,129,0.5);
}
body.admin .page-head h2 { font-weight: 800; letter-spacing: -0.3px; }

/* ---------- 底部导航：更贴合的浮层与高亮 ---------- */
body.admin #tabbar-admin.tabbar {
  background: rgba(13, 20, 34, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(148,163,184,0.16);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.2);
  padding: 6px 8px;
}
body.admin #tabbar-admin .tab-btn {
  border-radius: 12px; padding: 6px 4px 5px;
  transition: color .16s var(--ease), background .16s var(--ease), transform .14s var(--ease-spring);
}
body.admin #tabbar-admin .tab-btn:active { transform: translateY(1px) scale(0.97); }
body.admin #tabbar-admin .tab-btn.active {
  background: linear-gradient(180deg, rgba(16,185,129,0.22), rgba(16,185,129,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 10px rgba(16,185,129,0.12);
}

/* ---------- 模块标题：细线更柔、小字更清晰 ---------- */
body.admin .module-head::after {
  background: linear-gradient(90deg, rgba(148,163,184,0.22), transparent);
}

/* ---------- 卡片通用：统一柔和的内外层次 ---------- */
body.admin .card {
  background: linear-gradient(180deg, #1d2a3c 0%, #17212f 100%);
  border: 1px solid rgba(148,163,184,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 22px rgba(2,6,16,0.28);
}

/* ---------- 总览：营收 Hero 微光与嵌套 ---------- */
body.admin .hero-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 30px rgba(6,95,70,0.28); }
body.admin .hero-card.rev {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.10) 0%, transparent 45%),
    linear-gradient(145deg, #065f46 0%, #0f766e 100%);
}
body.admin .hero-rev-num, body.admin .hero-num { text-shadow: 0 2px 14px rgba(0,0,0,0.25); }

/* 统计卡：顶部色条渐变 + 柔和高光 + 按压反馈 */
body.admin #admin-stats .stat-card.he {
  background:
    linear-gradient(160deg, #1c2736 0%, #151e2b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 5px 16px rgba(2,6,16,0.22);
  transition: transform .14s var(--ease-spring), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
body.admin #admin-stats .stat-card.he:hover { border-color: rgba(16,185,129,0.34); }
body.admin #admin-stats .stat-card.he:active { transform: scale(0.97); }
body.admin #admin-stats .stat-card.he::before {
  background: linear-gradient(90deg, var(--tint, #34d399), transparent);
  opacity: .95;
}
body.admin #admin-stats .stat-card.he .stat-he-ic {
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #34d399) 24%, transparent), transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* 营收明细行：值色阶更清晰 */
body.admin .rev-row .rv { color: #e8eef7; }
body.admin .rev-row .rv.green { text-shadow: 0 1px 10px rgba(52,211,153,0.25); }

/* 退出登录：更稳的警示红 */
body.admin .admin-exit {
  background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.05));
  border: 1px solid rgba(239,68,68,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
body.admin .admin-exit:hover { border-color: rgba(239,68,68,0.45); }

/* ---------- 搜索框：更贴合输入区 ---------- */
body.admin .admin-search { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
body.admin .admin-search:focus-within {
  border-color: rgba(16,185,129,0.6);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}
body.admin .admin-search .s-ic { opacity: 0.75; }

/* ---------- 用户页：筛选 chips 更细腻 ---------- */
body.admin .u-stat {
  border-radius: 13px;
  background: rgba(148,163,184,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
body.admin .u-stat.on {
  background: linear-gradient(165deg, rgba(16,185,129,0.20), rgba(16,185,129,0.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(16,185,129,0.10);
}

/* 用户信息卡 / 兑换码卡 / 购买卡 / 定价卡：统一悬浮与按压手感 */
body.admin .admin-user-card,
body.admin .user-card,
body.admin .code-item,
body.admin .purchase-card,
body.admin .price-card {
  transition: transform .14s var(--ease-spring), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
body.admin .admin-user-card:hover,
body.admin .user-card:hover,
body.admin .code-item:hover,
body.admin .purchase-card:hover,
body.admin .price-card:hover { transform: translateY(-1px); border-color: rgba(16,185,129,0.32); }
body.admin .admin-user-card:active,
body.admin .user-card:active,
body.admin .code-item:active,
body.admin .purchase-card:active,
body.admin .price-card:active { transform: scale(0.985); }

/* ---------- 操作按钮：统一质感微交互 ---------- */
body.admin .admin-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .12s var(--ease-spring), background .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
body.admin .admin-btn:hover { filter: brightness(1.08); }
body.admin .admin-btn-solid {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 4px 14px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
body.admin .btn-primary {
  box-shadow: 0 5px 16px rgba(16,185,129,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ---------- 兑换码：生成按钮点亮感 + 结果 chip 微调 ---------- */
body.admin #admin-code-gen.cc-gen {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
    linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 7px 18px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.28);
}
body.admin #admin-code-result .code-chip {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ---------- 兑换码筛选按钮 ---------- */
body.admin .code-filter-btn {
  padding: 8.5px 0; letter-spacing: 0.2px;
  transition: all .16s var(--ease);
}

/* ---------- 定价 / 购买 Hero 嵌套光 ---------- */
body.admin .purchase-hero {
  background:
    radial-gradient(120% 130% at 100% -20%, rgba(255,255,255,0.10) 0%, transparent 50%),
    linear-gradient(150deg, #065f46 0%, #0b7a5f 55%, #0f766e 110%);
}
body.admin .ph-stat { transition: transform .14s var(--ease-spring), background .15s var(--ease); }
body.admin .ph-stat:active { transform: scale(0.97); background: rgba(255,255,255,0.16); }

/* ---------- 加载更多：柔和块化 ---------- */
body.admin .load-more {
  background: rgba(148,163,184,0.07);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 12px;
  color: #94a3b8; font-weight: 600;
  padding: 12px 14px;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
body.admin .load-more:hover { border-color: rgba(16,185,129,0.4); color: #e2e8f0; background: rgba(16,185,129,0.08); }

/* ---------- 状态小点：更明显的呼吸层 ---------- */
body.admin .dot i { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
body.admin .dot-g i, body.admin .pur-status.paid i { box-shadow: 0 0 0 3px rgba(16,185,129,0.14); }
body.admin .dot-r i, body.admin .pur-status.refund i { box-shadow: 0 0 0 3px rgba(239,68,68,0.14); }
body.admin .dot-a i, body.admin .pur-status.pending i { box-shadow: 0 0 0 3px rgba(245,158,11,0.14); }

/* ---------- 窄屏微调：极致小屏不溢出 ---------- */
@media (max-width: 360px) {
  body.admin .u-stat-row { gap: 4px; }
  body.admin #tabbar-admin.tabbar { padding: 5px 6px; }
  body.admin #tabbar-admin .tab-btn span { font-size: 17px; }
}

/* ============================================================
   管理后台 v11 —— 「弹窗/空态/氛围细节再精修」
   继续纯视觉打磨：统一管理员弹窗（含重置密码）深色渐变质感、
   空态与加载态的精致度、各小徽标的层次。均限定 body.admin。
   ============================================================ */

/* ---------- 管理员弹窗：深色渐变卡质感（含重置密码弹窗） ---------- */
body.admin .pay-box,
body.admin .cred-box,
body.admin .renew-box,
body.admin .admin-reset-box {
  background: linear-gradient(180deg, #1d2a3c 0%, #141d2a 100%);
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 32px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,0,0,0.3);
  animation: admin-modal-in .28s var(--ease-spring);
}
@keyframes admin-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
body.admin .pay-box h3,
body.admin .cred-box h3,
body.admin .renew-box h3,
body.admin .admin-reset-box h3 { letter-spacing: -0.2px; }
body.admin .admin-reset-box .note b { color: #6ee7b7; }
/* 弹窗内输入框/密码框统一定位 */
body.admin .admin-reset-box .pwd-wrap input {
  background: #0f172a; border: 1.5px solid #334155; color: #e2e8f0;
  border-radius: 12px; padding-left: 16px; padding-right: 46px; font-family: var(--font);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
body.admin .admin-reset-box .pwd-wrap input:focus {
  border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); outline: none;
}
body.admin .admin-reset-box .eye {
  border: none; color: #94a3b8; opacity: .85;
  transition: opacity .15s var(--ease);
}
body.admin .admin-reset-box .eye:active { opacity: .5; }
body.admin .admin-reset-box .field-err { color: #fbbf24; }
/* 弹窗里的一对主/次按钮：占宽更均衡 */
body.admin .admin-reset-box .btn { width: 100%; box-sizing: border-box; }
body.admin .admin-reset-box .btn + .btn { margin-top: 10px; }

/* ---------- 空态 / 加载态：更立体的层次 ----------
   注意：#admin-*-list 容器本身带 .note.state 且常驻不摘除，
   因此这里切忌对其设置 flex 排版/居中（会让卡片列表布局错乱），
   只做视觉质感微调，排版交给各列表自身的 #id 规则。 */
body.admin .state-emoji {
  font-size: 34px; line-height: 1; opacity: .9;
  filter: drop-shadow(0 4px 10px rgba(16,185,129,0.18));
}
body.admin .spinner {
  border-width: 3px; border-color: rgba(148,163,184,0.18);
  border-top-color: #34d399; border-radius: 50%;
  box-shadow: 0 0 18px rgba(16,185,129,0.15);
}

/* ---------- 各类小徽标：更柔和的层次 ---------- */
body.admin .sec-count {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
body.admin .module-sub {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.admin .auc-id {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.admin .over-tag,
body.admin .rec-tag {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- 兑换码可复制 chip：hover 提示更明显 ---------- */
body.admin .code-txt { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }

/* ---------- 极窄屏：弹窗留白收敛 ---------- */
@media (max-width: 360px) {
  body.admin .pay-box,
  body.admin .cred-box,
  body.admin .renew-box,
  body.admin .admin-reset-box { padding: 22px 18px 20px; }
}

/* ============================================================
   管理后台 v12 —— 「高级玻璃拟态层」
   纯视觉重绘（不影响任何逻辑/接口/DOM 结构）：
   在既有深色控制台上叠加真正的玻璃拟态——
   半透明磨砂卡片 + 环境光斑 + 细腻描边与内高光。
   全部限定 body.admin，置于文件末尾，cascade 覆盖前述所有层。
   ============================================================ */

/* ---------- 环境氛围：明亮光斑（让玻璃有可模糊的反光） ---------- */
body.admin {
  --glass-bg: rgba(21, 34, 54, 0.55);
  --glass-border: rgba(148, 163, 184, 0.16);
  --glass-high: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(620px 420px at 8% 2%, rgba(52, 211, 153, 0.20) 0%, transparent 55%),
    radial-gradient(560px 400px at 96% 12%, rgba(56, 189, 248, 0.16) 0%, transparent 55%),
    radial-gradient(640px 460px at 50% 42%, rgba(129, 140, 248, 0.12) 0%, transparent 60%),
    radial-gradient(520px 400px at 12% 88%, rgba(45, 212, 191, 0.16) 0%, transparent 55%),
    radial-gradient(560px 420px at 92% 86%, rgba(236, 72, 153, 0.10) 0%, transparent 55%),
    #0a0f1c;
  background-attachment: fixed;
}

/* 玻璃卡片统一配方 */
body.admin .card,
body.admin .module-card,
body.admin .admin-user-card,
body.admin .price-card,
body.admin .purchase-card,
body.admin .create-code-card,
body.admin .u-stat,
body.admin .stat-card.he,
body.admin .hero-card.sub,
body.admin .quick-item,
body.admin .renew-box {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-high);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 10px 30px rgba(2, 6, 16, 0.35);
}

/*---- 总览：营收双卡（让 rev 透出玻璃感，sub 保持纯玻璃） ----*/
body.admin .hero-card { border: 1px solid var(--glass-border); }
body.admin .hero-card.sub {
  background: linear-gradient(160deg, rgba(30, 43, 66, 0.62), rgba(19, 29, 46, 0.55));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
body.admin .hero-card.rev {
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 48%),
    linear-gradient(150deg, #0b6e52 0%, #0e8f6f 55%, #0ca678 110%);
  border: 1px solid rgba(110, 231, 183, 0.34);
  border-top-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 16px 40px rgba(6, 95, 70, 0.4);
}
body.admin .hero-card.rev::after {
  width: 200px; height: 200px; right: -50px; top: -70px;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 62%);
}
body.admin .hero-card.rev::before {
  content: ''; position: absolute; left: -40px; bottom: -70px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(110,231,183,0.20) 0%, transparent 65%);
  pointer-events: none;
}

/*---- 核心指标卡：每个带微弱对应色光晕 ----*/
body.admin #admin-stats .stat-card.he {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--tint, #34d399) 16%, transparent) 0%, transparent 52%),
    rgba(21, 34, 54, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-high);
}
body.admin #admin-stats .stat-card.he::before {
  background: linear-gradient(180deg, var(--tint, #34d399), color-mix(in srgb, var(--tint, #34d399) 35%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--tint, #34d399) 55%, transparent);
}
body.admin #admin-stats .stat-card.he .stat-he-ic {
  background: color-mix(in srgb, var(--tint, #34d399) 18%, rgba(21,34,54,0.6));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--tint, #34d399) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/*---- 顶栏：通透明亮玻璃渐变 ----*/
body.admin .topbar {
  background:
    radial-gradient(130% 150% at 90% -30%, rgba(16,185,129,0.26) 0%, transparent 55%),
    linear-gradient(135deg, rgba(13, 20, 34, 0.72), rgba(15, 43, 44, 0.66));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--glass-high);
  box-shadow: 0 10px 34px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
body.admin .topbar::after {
  width: 220px; height: 220px; top: -80%; right: -4%;
  background: radial-gradient(circle, rgba(52,211,153,0.26) 0%, transparent 68%);
}

/*---- 底部导航：强磨砂浮层 ----*/
body.admin #tabbar-admin.tabbar {
  background: rgba(11, 18, 32, 0.66);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-high);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 -10px 40px rgba(0,0,0,0.5);
}
body.admin #tabbar-admin .tab-btn.active {
  background: linear-gradient(180deg, rgba(16,185,129,0.30), rgba(16,185,129,0.10));
  border: 1px solid rgba(110,231,183,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 6px 16px rgba(16,185,129,0.18);
}

/*---- 页头：更清亮的引导色条 ----*/
body.admin .page-head::before {
  width: 4px;
  background: linear-gradient(180deg, #34d399, #0d9488);
  box-shadow: 0 0 16px rgba(52,211,153,0.7);
}

/*---- 用户页：筛选 chips 玻璃化 ----*/
body.admin .u-stat {
  background: rgba(21, 34, 54, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-high);
}
body.admin .u-stat.on {
  background: linear-gradient(165deg, rgba(16,185,129,0.26), rgba(16,185,129,0.10));
  border: 1px solid rgba(110,231,183,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 8px 22px rgba(16,185,129,0.16);
}
body.admin .u-stat.on b { color: #6ee7b7 !important; text-shadow: 0 1px 12px rgba(52,211,153,0.4); }

/*---- 用户信息卡 / 明细条：玻璃浮层 ----*/
body.admin .admin-user-card {
  border-radius: 18px;
}
body.admin .admin-user-card .auc-sub,
body.admin .admin-user-card .user-detail,
body.admin .price-card .pc-spec,
body.admin .price-card .pc-row3,
body.admin .auc-sub {
  background: rgba(9, 15, 26, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 163, 184, 0.10);
}
body.admin .auc-id {
  background: rgba(30, 46, 72, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(148,163,184,0.16);
}

/*---- 兑换码：新建面板与列表 chip ----*/
body.admin .create-code-card { border-radius: 20px; }
body.admin .create-code-card .form-select,
body.admin .create-code-card .count-input,
body.admin .price-card .pp-input {
  background: rgba(9, 15, 26, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(148, 163, 184, 0.18);
}
body.admin .create-code-card .count-btn {
  background: rgba(23, 36, 58, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(148, 163, 184, 0.18);
}
body.admin #admin-code-gen.cc-gen {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent),
    linear-gradient(135deg, #0b8a63, #10b981);
  box-shadow: 0 9px 22px rgba(16,185,129,0.38), inset 0 1px 0 rgba(255,255,255,0.34);
}
body.admin .code-txt {
  background: rgba(16,185,129,0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(110,231,183,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
body.admin .code-copy-btn {
  background: rgba(16,185,129,0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(110,231,183,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/*---- 定价：推荐卡亮度 + 玻璃 ----*/
body.admin .price-card { border-radius: 20px; }
body.admin .price-card.rec-item {
  border-color: rgba(239,68,68,0.42);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(239,68,68,0.14) 0%, transparent 55%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
body.admin .price-card .pc-save {
  background: linear-gradient(135deg, #0b8a63, #10b981);
  box-shadow: 0 6px 16px rgba(16,185,129,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
}

/*---- 购买 Hero：玻璃光感 ----*/
body.admin .purchase-hero {
  background:
    radial-gradient(130% 140% at 100% -20%, rgba(255,255,255,0.16) 0%, transparent 52%),
    linear-gradient(150deg, #0b6e52 0%, #0e8f6f 55%, #0ca678 115%);
  border: 1px solid rgba(110,231,183,0.34);
  border-top-color: rgba(255,255,255,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 16px 40px rgba(6, 95, 70, 0.4);
}
body.admin .ph-stat {
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
body.admin .purchase-card {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,0.10) 0%, transparent 50%),
    var(--glass-bg);
  border-radius: 18px;
}
body.admin .purchase-card:hover { transform: translateY(-1px); }

/*---- 兑换码筛选 chips ----*/
body.admin .code-filter-btn {
  background: rgba(21, 34, 54, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-high);
}
body.admin .code-filter-btn.active {
  background: linear-gradient(180deg, rgba(16,185,129,0.30), rgba(16,185,129,0.10));
  border-color: rgba(110,231,183,0.32);
  box-shadow: 0 6px 16px rgba(16,185,129,0.18), inset 0 1px 0 rgba(255,255,255,0.14);
}

/*---- 操作按钮：玻璃质感 ----*/
body.admin .admin-btn-green,
body.admin .admin-btn-blue,
body.admin .admin-btn-warn {
  background: rgba(21, 34, 54, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(148,163,184,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
body.admin .admin-btn-green { color: #34d399; border-color: rgba(16,185,129,0.24); }
body.admin .admin-btn-blue { color: #60a5fa; border-color: rgba(59,130,246,0.26); }
body.admin .admin-btn-warn { color: #fbbf24; border-color: rgba(245,158,11,0.28); }
body.admin .admin-btn-red { color: #f87171; border-color: rgba(239,68,68,0.24); }

/*---- 搜索框玻璃化 ----*/
body.admin .admin-search {
  background: rgba(9, 15, 26, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-high);
}
body.admin .admin-search:focus-within {
  border-color: rgba(52,211,153,0.6);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.14), inset 0 1px 0 rgba(255,255,255,0.06);
  background: rgba(12, 20, 34, 0.6);
}

/*---- 弹窗：强磨砂玻璃 ----*/
body.admin .mask {
  background: rgba(4, 8, 18, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
body.admin .pay-box,
body.admin .cred-box,
body.admin .renew-box,
body.admin .admin-reset-box {
  background: linear-gradient(180deg, rgba(30, 43, 66, 0.82), rgba(15, 24, 40, 0.82));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-high);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 34px 90px rgba(0,0,0,0.7);
}
body.admin .admin-reset-box .pwd-wrap input {
  background: rgba(9, 15, 26, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-color: rgba(148,163,184,0.18);
}

/*---- 空态图标：光晕更透亮 ----*/
body.admin .state-emoji {
  filter: drop-shadow(0 6px 14px rgba(52,211,153,0.22));
}

/*---- 柔和入场动效（仅观感，不改变任何布局） ----
   仅作用于总览等一次渲染的模块，避免用户/购买列表
   在筛选/搜索时逐项重放动画造成抖动。 ----*/
body.admin #view-a-overview .admin-module,
body.admin #view-a-overview .hero-grid,
body.admin #view-a-users .u-stat-row,
body.admin #view-a-codes .create-code-card,
body.admin #view-a-purchases .purchase-hero { animation: glass-in .4s var(--ease-spring) both; }
body.admin #admin-pricing-list .price-card { animation: glass-in .38s var(--ease-spring) both; }
body.admin #admin-pricing-list .price-card:nth-child(2) { animation-delay: .05s; }
body.admin #admin-pricing-list .price-card:nth-child(3) { animation-delay: .10s; }
body.admin #admin-pricing-list .price-card:nth-child(4) { animation-delay: .15s; }
@keyframes glass-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   管理后台 v13 —— 「手机屏幕比例精调层」
   按主流手机屏宽（360–440px，内容区约 324–404px）重新匀称
   各模块的尺寸、间距与字级：大刀阔斧改比例，零逻辑改动。
   全部限定 body.admin，置于文件末尾覆盖前述所有层。
   ============================================================ */

/* 去掉手机上 body 横向极细留白，把可用宽度交给内容 */
body.admin #app { padding: 0 16px 30px; }

/* ---------- 页头：更贴合屏宽的标题 ---------- */
body.admin .page-head { padding: 16px 2px 12px; }
body.admin .page-head h2 { font-size: clamp(19px, 5.4vw, 22px); line-height: 1.2; }

/* ---------- 总览 · 营收/订单双卡：随屏宽匀称缩放 ---------- */
body.admin .hero-grid {
  grid-template-columns: clamp(56%, 304px, 59%) 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
body.admin .hero-card {
  border-radius: 18px;
  padding: clamp(15px, 4.6vw, 20px);
  min-height: clamp(104px, 30vw, 126px);
  display: flex; flex-direction: column; justify-content: space-between;
}
body.admin .hero-label { font-size: 11.5px; }
body.admin .hero-rev-num { font-size: clamp(26px, 8vw, 34px); margin-top: 8px; }
body.admin .hero-num { font-size: clamp(24px, 7.4vw, 30px); margin-top: 8px; }
body.admin .hero-rev-sub { font-size: 11.5px; }
body.admin .hero-today { font-size: 11px; padding: 5px 10px; }

/* ---------- 核心指标 4 卡：2×2 手机网格，更饱满 ---------- */
body.admin #admin-stats .stats-row { gap: 10px; margin: 0; }
body.admin #admin-stats .stat-card.he {
  padding: clamp(13px, 4vw, 16px) 14px clamp(10px, 3.4vw, 13px);
  text-align: left;
}
body.admin #admin-stats .stat-card.he .stat-he-ic {
  width: clamp(30px, 8vw, 36px); height: clamp(30px, 8vw, 36px);
  font-size: 16px; border-radius: 10px;
}
body.admin #admin-stats .stat-card.he .stat-num { font-size: clamp(21px, 6.4vw, 28px); margin-top: 8px; }
body.admin #admin-stats .stat-card.he .stat-label { font-size: 11.5px; }

/* ---------- 总览 · 营收明细模块：留白更疏朗 ---------- */
body.admin .admin-module + .admin-module { margin-top: 18px; }
body.admin .module-head { margin-bottom: 8px; }
body.admin .module-title { font-size: 13px; color: #b6c2d4; }
body.admin .module-sub { font-size: 10.5px; }
body.admin .module-card { padding: 4px 16px; border-radius: 18px; }
body.admin .rev-row { padding: clamp(12px, 4vw, 15px) 6px; }
body.admin .rev-row .rv { font-size: 15px; }

/* ---------- 用户页 · 顶部统计 chips：窄屏 5 等分更紧凑 ---------- */
body.admin .u-stat-row { gap: 6px; margin-bottom: 14px; }
body.admin .u-stat { padding: clamp(10px, 3.4vw, 13px) 4px; border-radius: 13px; }
body.admin .u-stat b { font-size: clamp(17px, 5.4vw, 21px); }
body.admin .u-stat span { font-size: 10px; }

/* ---------- 用户信息卡：行内层级舒适 ---------- */
body.admin .admin-user-card { padding: 14px 15px; border-radius: 17px; margin-bottom: 12px; }
body.admin #admin-users-list { display: flex; flex-direction: column; }
body.admin .auc-title { font-size: 14.5px; }
body.admin .auc-sub { padding: 9px 11px; gap: 6px 12px; }
body.admin .auc-kv { font-size: 11.5px; }
body.admin .auc-foot { margin-top: 12px; }
body.admin .auc-stats { font-size: 12px; gap: 10px; }
body.admin .user-detail { margin: 4px 0 0; padding: 12px 13px; }

/* ---------- 用户 · 操作按钮：触控够大且不溢出 ---------- */
body.admin .ui-actions { gap: 5px; }
body.admin .admin-btn { min-height: 36px; padding: 8px 12px; font-size: 12px; }

/* ---------- 兑换码 · 新建面板 ---------- */
body.admin .create-code-card { padding: 16px 15px; border-radius: 19px; margin-bottom: 18px; }
body.admin .code-create-head { font-size: 15px; margin-bottom: 15px; }
body.admin .create-code-card .cc-row { margin-bottom: 14px; }
body.admin .create-code-card .form-select { min-height: 47px; font-size: 14.5px; }
body.admin .create-code-card .count-btn { width: 44px; height: 46px; }
body.admin .create-code-card .count-input { min-height: 46px; font-size: 17px; }
body.admin #admin-code-gen.cc-gen { min-height: 49px; font-size: 14.5px; }

/* ---------- 兑换码 · 筛选 chips 与列表条目 ---------- */
body.admin .code-filter { gap: 8px; }
body.admin .code-filter-btn { min-height: 34px; padding: 7px 13px; font-size: 12.5px; }
body.admin .code-item { padding: clamp(12px, 4vw, 15px) 3px; gap: 11px; }
body.admin .code-txt { font-size: 13px; padding: 5px 11px; }
body.admin .code-copy-btn { min-height: 32px; padding: 6px 14px; }
body.admin .codes-list-head .note { font-size: 11.5px; }

/* ---------- 定价页：卡片比例与规格区 ---------- */
body.admin #admin-pricing-list { gap: 13px; }
body.admin .price-card { padding: 17px 15px; border-radius: 19px; }
body.admin .price-card .pc-name { font-size: 16.5px; }
body.admin .price-card .pc-spec { font-size: 12.5px; margin: 11px 0 14px; padding: 11px 13px; }
body.admin .price-card .pc-price-current { font-size: 21px; }
body.admin .price-card .pp-input { min-height: 44px; }
body.admin .price-card .pc-save { min-height: 44px; padding: 0 18px; }

/* ---------- 购买页：营收 Hero + 列表 ---------- */
body.admin .purchase-hero { padding: clamp(15px, 4.6vw, 20px); border-radius: 19px; margin-bottom: 16px; }
body.admin .ph-amount { font-size: clamp(28px, 9vw, 36px); }
body.admin .ph-stat { padding: 11px 4px; }
body.admin .ph-stat .ph-n { font-size: 16.5px; }
body.admin .ph-stat .ph-lb { font-size: 10.5px; }
body.admin .purchase-card { padding: 13px 14px; border-radius: 17px; margin-bottom: 11px; }
body.admin .ui-price { font-size: 16.5px; }

/* ---------- 底部导航：五等分、间距贴合屏幕 ---------- */
body.admin #tabbar-admin.tabbar { padding: 6px 6px; }
body.admin #tabbar-admin .tab-btn span { font-size: 18px; }
body.admin #tabbar-admin .tab-btn { font-size: 11.5px; padding: 6px 4px 5px; }

/* 退出登录区 */
body.admin .admin-exit { padding: 15px; border-radius: 16px; margin-top: 14px; }

/* ---------- 窄屏（≤400px 内容更小）---------- */
@media (max-width: 400px) {
  body.admin #app { padding: 0 14px 28px; }
  body.admin .hero-grid { gap: 8px; }
  body.admin .hero-card { padding: 13px; }
  body.admin .admin-user-card { padding: 13px 13px; }
  body.admin .auc-sub { gap: 5px 10px; }
  body.admin .uc-stats,
  body.admin .auc-stats { gap: 8px; }
  body.admin .u-stat span { font-size: 9px; }
}

/* ---------- 超窄屏（≤360px）：双卡纵向、统计 2×2 收敛 ---------- */
@media (max-width: 360px) {
  body.admin .hero-grid { grid-template-columns: 1fr; }
  body.admin #admin-stats .stats-row { grid-template-columns: 1fr 1fr; }
  body.admin .page-head h2 { font-size: 19px; }
}

/* ============================================================
   管理后台 v14 —— 「清爽扁平精修层」
   去掉花哨光效（彩色光斑 / 毛玻璃 / 发光阴影 / 发光色条），
   参考普通用户页面干净实色的扁平卡片风格，重新设计各卡片
   的尺寸与间距，让画面协调。零逻辑改动，置于文件末尾覆盖。
   ============================================================ */

/* ---------- 背景：干净实色深底 ---------- */
body.admin {
  background: #0f172a;
  background-attachment: scroll;
}

/* ---------- 通用扁平卡片配方（对齐普通用户 .card 的克制感） ---------- */
body.admin .card,
body.admin .module-card,
body.admin .create-code-card,
body.admin .quick-item {
  background: #1e293b;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #334155;
  border-top-color: #334155;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* 信息卡类（用户 / 定价 / 购买 / 兑换码条目）统一 */
body.admin .admin-user-card,
body.admin .price-card,
body.admin .purchase-card {
  background: #1e293b;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #334155;
  border-top-color: #334155;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* 顶部导航：实色，去掉磨砂与发光 */
body.admin .topbar {
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 65%, #0d5c46 120%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid #1f3b35;
}
body.admin .topbar::after { background: rgba(255,255,255,0.05); }
body.admin #brand { text-shadow: none; }

/* 底部导航：实色浮条，去掉毛玻璃 */
body.admin #tabbar-admin.tabbar {
  background: #0f172a;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #334155;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}

/* 页头：去掉发光色条与发光，留干净一致的标题 */
body.admin .page-head { padding: 16px 2px 12px; }
body.admin .page-head::before {
  width: 4px;
  background: #34d399;
  box-shadow: none;
  border-radius: 3px;
}
body.admin .page-head h2 { color: #f1f5f9; font-size: 21px; font-weight: 800; }

/* ---------- 总览 · 营收/订单双卡：干净扁平 ---------- */
body.admin .hero-card {
  border-radius: 16px;
  min-height: 0;
  padding: 16px;
  border: 1px solid #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
body.admin .hero-card.rev {
  background: linear-gradient(160deg, #065f46 0%, #0b7260 100%);
  border-color: #14532d;
}
body.admin .hero-card.rev::before,
body.admin .hero-card.rev::after { content: none; }
body.admin .hero-card.sub {
  background: #1e293b;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.admin .hero-card.sub::after { content: none; }
body.admin .hero-label { color: rgba(255,255,255,0.75); }
body.admin .hero-rev-num { color: #6ee7b7; text-shadow: none; }
body.admin .hero-num { color: #f1f5f9; text-shadow: none; }
body.admin .hero-rev-sub { color: rgba(255,255,255,0.78); }
body.admin .hero-today { background: rgba(0,0,0,0.18); color: #a7f3d0; box-shadow: none; }

/* ---------- 核心指标卡：扁平、色条不发光 ---------- */
body.admin #admin-stats .stat-card.he {
  background: #1e293b;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
body.admin #admin-stats .stat-card.he::before {
  background: var(--tint, #34d399);
  box-shadow: none;
}
body.admin #admin-stats .stat-card.he .stat-he-ic {
  background: rgba(148,163,184,0.12);
  border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
body.admin #admin-stats .stat-card.he .stat-num { color: var(--tint, #34d399); text-shadow: none; }

/* ---------- 营收明细模块：扁平行 ---------- */
body.admin .module-card { padding: 4px 16px; }
body.admin .rev-row .rv { text-shadow: none; }
body.admin .rev-row .rv.green { text-shadow: none; }

/* ---------- 用户 · 统计 chips：扁平筛选 ---------- */
body.admin .u-stat {
  background: #1e293b;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #334155;
  box-shadow: none;
}
body.admin .u-stat.on {
  background: #123b35;
  border-color: #1f6f5c;
  box-shadow: none;
}
body.admin .u-stat.on b { color: #6ee7b7 !important; text-shadow: none; }
body.admin .u-stat.on span { color: #a7f3d0; }

/* ---------- 用户信息卡细节：扁平内嵌块 ---------- */
body.admin .admin-user-card .auc-sub,
body.admin .user-detail,
body.admin .price-card .pc-spec,
body.admin .price-card .pc-row3 {
  background: #16202e;
  border: 1px solid #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
body.admin .auc-id {
  background: #16202e;
  border: 1px solid #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}

/* ---------- 用户 / 兑换码 筛选 chips：扁平 ---------- */
body.admin .code-filter-btn {
  background: #1e293b;
  border: 1px solid #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
body.admin .code-filter-btn.active {
  background: #123b35;
  border-color: #1f6f5c;
  box-shadow: none;
}
body.admin .code-filter-btn.active:hover { border-color: #28a081; }

/* ---------- 兑换码：新建面板与可复制 chip 扁平 ---------- */
body.admin .create-code-card .form-select,
body.admin .create-code-card .count-input,
body.admin .price-card .pp-input {
  background: #0f172a;
  border-color: #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.admin .create-code-card .count-btn {
  background: #16202e;
  border-color: #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.admin .code-txt,
body.admin .code-copy-btn {
  background: #123b35;
  border: 1px solid #1f6f5c;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
body.admin .code-txt { color: #6ee7b7; }
body.admin .code-copy-btn { color: #34d399; }

/* ---------- 按钮：扁平实色，去除彩色发光阴影 ---------- */
body.admin .btn-primary,
body.admin .admin-btn-solid,
body.admin .pc-save,
body.admin #admin-code-gen.cc-gen {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
body.admin .btn-ghost { background: #1e293b; border: 1px solid #334155; box-shadow: none; }
body.admin .admin-btn-green,
body.admin .admin-btn-blue,
body.admin .admin-btn-warn,
body.admin .admin-btn-red {
  background: #16202e;
  border: 1px solid #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
body.admin .admin-btn-green { color: #34d399; }
body.admin .admin-btn-blue { color: #60a5fa; }
body.admin .admin-btn-warn { color: #fbbf24; }
body.admin .admin-btn-red { color: #f87171; }

/* ---------- 搜索框：扁平输入区 ---------- */
body.admin .admin-search {
  background: #0f172a;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #334155;
  box-shadow: none;
}
body.admin .admin-search:focus-within {
  border-color: #10b981;
  background: #0f172a;
  box-shadow: none;
}

/* ---------- 定价推荐卡：扁平红描边 ---------- */
body.admin .price-card.rec-item {
  background: #1e293b;
  border-color: rgba(239,68,68,0.5);
  box-shadow: none;
}
body.admin .pricing-tip { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.24); box-shadow: none; }

/* ---------- 购买 Hero 与统计：扁平 ---------- */
body.admin .purchase-hero {
  background: linear-gradient(160deg, #065f46 0%, #0b7260 100%);
  border: 1px solid #14532d;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
body.admin .purchase-hero::after { content: none; }
body.admin .ph-amount { text-shadow: none; }
body.admin .ph-stat {
  background: rgba(0,0,0,0.14);
  border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
body.admin .ph-stat:active { background: rgba(0,0,0,0.24); }

/* ---------- 弹窗：实色扁平卡 ---------- */
body.admin .mask {
  background: rgba(9, 15, 26, 0.6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.admin .pay-box,
body.admin .cred-box,
body.admin .renew-box,
body.admin .admin-reset-box {
  background: #1e293b;
  border: 1px solid #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
body.admin .admin-reset-box .pwd-wrap input {
  background: #0f172a;
  border-color: #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- 状态标签 / 图标：克制 ---------- */
body.admin .state-emoji { filter: none; }
body.admin .spinner { box-shadow: none; }
body.admin .dot i { box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }

/* ---------- 列表分隔线：细而克制 ---------- */
body.admin .code-item,
body.admin .rev-row,
body.admin .user-item,
body.admin .plan-price-item { border-bottom: 1px solid #334155; }

/* ---------- 柔和入场动效：仅一次，克制 ---------- */
body.admin #view-a-overview .admin-module,
body.admin #view-a-overview .hero-grid,
body.admin #view-a-users .u-stat-row,
body.admin #view-a-codes .create-code-card,
body.admin #view-a-purchases .purchase-hero { animation: fadeInUp .3s var(--ease) both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   钱包（管理员充值 + 余额购买）
   ============================================================ */
/* ---- 「我的」页钱包卡片 ---- */
.wallet-card {
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(135deg, #0ea5e9 0%, #0284c7 46%, #2563eb 100%);
  border-radius: 22px; padding: 18px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 14px 34px rgba(14, 165, 233, 0.32), inset 0 1px 0 rgba(255,255,255,0.20);
}
.wallet-card::before {
  content: ''; position: absolute; right: -32px; bottom: -46px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none;
}
.wallet-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.wallet-title-wrap { display: inline-flex; align-items: center; gap: 7px; }
.wallet-ic { font-size: 16px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12)); }
.wallet-title { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; }
.wallet-action {
  font-size: 12px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22);
  padding: 4px 11px; border-radius: 999px; transition: background .2s var(--ease);
}
.wallet-action:active { background: rgba(255,255,255,0.30); }
.wallet-balance-row { display: inline-flex; align-items: baseline; gap: 2px; position: relative; z-index: 1; margin-top: 14px; }
.wallet-yen { font-size: 18px; font-weight: 700; opacity: 0.95; }
.wallet-num { font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.wallet-tip { position: relative; z-index: 1; margin-top: 10px; font-size: 11.5px; opacity: 0.9; line-height: 1.5; }

/* ---- 钱包明细二级页 ---- */
.wallet-head-card {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  border-radius: 18px; padding: 16px 18px; color: #fff; margin-bottom: 12px;
  display: flex; align-items: baseline; justify-content: space-between;
  box-shadow: 0 12px 30px rgba(14,165,233,0.30);
}
.wh-lb { font-size: 13px; opacity: 0.92; }
.wh-num { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 用户钱包流水列表 */
.wt-item {
  background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 14px;
  padding: 13px 14px; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--c-shadow);
}
.wt-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wt-type { display: inline-block; width: fit-content; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.wt-type.in { background: var(--c-green-bg); color: var(--c-green); }
.wt-type.out { background: var(--c-primary-bg); color: var(--c-primary); }
.wt-note { font-size: 13px; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.wt-time { font-size: 11px; color: var(--c-text-tertiary); }
.wt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.wt-amt { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wt-amt.in { color: var(--c-green); }
.wt-amt.out { color: var(--c-primary); }
.wt-bal { font-size: 11px; color: var(--c-text-tertiary); font-variant-numeric: tabular-nums; }

/* ---- 管理员：充值引导文案编辑 ---- */
.recharge-notice-edit {
  background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 14px;
  padding: 12px 14px; margin: 12px 0;
}
.rn-lb { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.rn-row { display: flex; gap: 8px; }
.rn-row input {
  flex: 1; min-width: 0; padding: 9px 11px; border: 1.5px solid var(--c-border); border-radius: 10px;
  font-size: 13px; outline: none; background: #fafbfc; font-family: var(--font); color: var(--c-text);
}
.rn-row input:focus { border-color: var(--c-primary-light); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); background: #fff; }

/* ---- 管理员：用户详情钱包流水 ---- */
.wallet-tx-admin { margin-top: 8px; border-top: 1px dashed #33415552; padding-top: 8px; }
.wt-admin-title { font-size: 12px; font-weight: 700; color: var(--c-text-secondary); margin-bottom: 6px; }
.wt-admin-list { font-size: 12px; }
.wt-line { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--c-border-light); }
.wt-line-type { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.wt-line-type.in { background: var(--c-green-bg); color: var(--c-green); }
.wt-line-type.out { background: var(--c-primary-bg); color: var(--c-primary); }
.wt-line-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.wt-line-amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt-line-amt.in { color: var(--c-green); }
.wt-line-amt.out { color: var(--c-primary); }
.wt-line-time { font-size: 10.5px; color: var(--c-text-tertiary); white-space: nowrap; }
.wt-none { font-size: 12px; color: var(--c-text-tertiary); padding: 4px 0; }

/* 管理员充值弹窗金额输入高亮 */
.admin-topup-box #admin-topup-amount { font-size: 16px; font-weight: 700; }

/* ---- 钱包合并页：Tab 切换（钱包流水 / 套餐订单）---- */
.wallet-tabs { display: flex; gap: 8px; margin: 12px 0; }
.wallet-tab {
  flex: 1; padding: 10px 0; border: 1.5px solid var(--c-border); border-radius: 12px;
  background: var(--c-surface); color: var(--c-text-secondary); font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease);
}
.wallet-tab.active { border-color: var(--c-primary); color: #fff; background: var(--c-primary); box-shadow: 0 6px 16px rgba(79,70,229,0.24); }
.wallet-tab:not(.active):active { background: var(--c-primary-bg); }

/* 套餐订单列表内的小号「续费」标记 */
.renew-tag-mini {
  font-size: 10px; font-weight: 700; color: var(--c-primary); background: var(--c-primary-bg);
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}

/* ============================================================
   管理端精简（v-final）
   1) 底部导航：去掉光效/发光，扁平简洁，动效保留
   2) 定价页套餐卡片：压缩高度、UI 更紧凑
   ============================================================ */

/* ---- 管理底部导航：去光效、扁平简洁（保留动效） ---- */
body.admin #tabbar-admin.tabbar {
  background: #0f172a;
  border: 1px solid #334155;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.25);   /* 仅微弱投影，无彩色光晕 */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 6px 6px;
}
body.admin #tabbar-admin .tab-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  color: #64748b;
  transition: color .18s var(--ease), background .18s var(--ease), transform .14s var(--ease-spring);
}
body.admin #tabbar-admin .tab-btn.active {
  background: rgba(16,185,129,0.16);          /* 平滑微底，无渐变发光 */
  color: #6ee7b7;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
body.admin #tabbar-admin .tab-btn.active::after {
  background: #34d399; opacity: .8;           /* 简洁指示条（非光效） */
}
body.admin #tabbar-admin .tab-btn.active span { transform: translateY(-1px) scale(1.04); }  /* 保留动效：选中图标上浮 */
body.admin #tabbar-admin .tab-btn:active { transform: translateY(1px) scale(0.97); opacity: .85; }  /* 按压反馈 */

/* ---- 管理定价页套餐卡片：压缩高度、紧凑 UI ---- */
body.admin .price-card {
  padding: 13px 14px;
  border-radius: 16px;
  margin-bottom: 10px;
}
body.admin .price-card .pc-top { display: flex; flex-direction: column; gap: 7px; }
body.admin .price-card .pc-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.admin .price-card .pc-name { font-size: 15.5px; line-height: 1.25; }
body.admin .price-card .pc-spec {
  font-size: 12px; line-height: 1.45; color: #94a3b8;
  margin: 0; padding: 0; background: none; border-radius: 0;
}
body.admin .price-card .pc-row3 {
  margin-top: 12px; padding: 10px 12px; gap: 12px; border-radius: 12px;
}
body.admin .price-card .pc-cur-lb { font-size: 11px; }
body.admin .price-card .pc-price-current { font-size: 20px; }
body.admin .price-card .pc-edit { gap: 7px; }
body.admin .price-card .pp-input {
  min-height: 38px; padding: 8px 10px 8px 28px; font-size: 15px; border-radius: 10px;
}
body.admin .price-card .pc-yen { left: 11px; font-size: 13px; }
body.admin .price-card .pc-save {
  min-height: 38px; padding: 0 15px; font-size: 13px; border-radius: 10px;
  box-shadow: none;
}
body.admin .price-card .pc-rec-btn { padding: 6px 10px; font-size: 11px; border-radius: 9px; }

/* ---- 定价页：卡片统一占满可用宽度，左右保留与其它页面一致的内边距 ---- */
body.admin #view-a-pricing {
  margin-left: 0;
  margin-right: 0;
}

/* ---- 定价页分类筛选条：单行可横向滑动 ---- */
body.admin .pricing-cats {
  display: flex; flex-wrap: nowrap; gap: 8px;
  margin: 2px 0 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
body.admin .pricing-cats::-webkit-scrollbar { display: none; }
body.admin .pricing-cats .pc-cat { flex: 0 0 auto; }
body.admin .pc-cat {
  border: 1px solid #334155; background: rgba(148,163,184,0.06);
  color: #94a3b8; font-size: 12.5px; font-weight: 600; border-radius: 999px;
  padding: 8px 14px; cursor: pointer; line-height: 1; white-space: nowrap;
  transition: all .15s var(--ease);
}
body.admin .pc-cat.active {
  background: rgba(16,185,129,0.18); border-color: rgba(110,231,183,0.45); color: #6ee7b7;
}
body.admin .pc-cat:active { transform: scale(0.96); }

/* ---- 定价卡片操作行：当前售价 + 输入框 + 推荐 + 保存，一行放下 ---- */
body.admin .price-card .pc-row3 {
  display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;
  gap: 8px; padding: 10px 8px; margin-top: 12px; border-radius: 12px;
}
body.admin .price-card .pc-cur { flex: 0 0 auto; min-width: 0; }
body.admin .price-card .pc-cur-lb { font-size: 10.5px; }
body.admin .price-card .pc-price-current { font-size: 18px; }
body.admin .price-card .pc-input-wrap { position: relative; flex: 1 1 84px; min-width: 0; max-width: 130px; }
body.admin .price-card .pp-input {
  width: 100%; min-width: 0; min-height: 38px;
  padding: 8px 8px 8px 26px; font-size: 15px; border-radius: 10px;
}
body.admin .price-card .pc-yen { left: 11px; font-size: 13px; }
body.admin .price-card .pc-rec-btn { flex: 0 0 auto; padding: 8px 10px; font-size: 11.5px; white-space: nowrap; }
body.admin .price-card .pc-save {
  flex: 0 0 auto; min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px;
  box-shadow: none;
}

/* ============================================================
   管理后台 v15 —— 「兑换码页：新建卡紧凑化 + 列表卡片重排版」
   ① 新建兑换码卡片整体尺寸更小（内边距/标题/行距/控件高度）
   ② 批量生成按钮更小更轻
   ③ 兑换码列表卡片重排：头部(兑换码+状态/删除) + 双列信息网格
   置于文件末尾，覆盖既有样式。零逻辑改动。
   ============================================================ */

/* ---------- ① 新建兑换码卡片：整体收紧 ---------- */
body.admin #view-a-codes .create-code-card { padding: 12px 13px; border-radius: 15px; margin-bottom: 15px; }
body.admin .create-code-card .code-create-head { font-size: 13.5px; margin-bottom: 11px; }
body.admin .create-code-card .cc-row { margin-bottom: 10px; }
body.admin .create-code-card .form-select { min-height: 39px; font-size: 13.5px; }
body.admin .create-code-card .count-row { gap: 7px; }
body.admin .create-code-card .count-btn { width: 34px; height: 37px; font-size: 16px; min-height: 0; }
body.admin .create-code-card .count-input { min-height: 37px; font-size: 15px; }
body.admin .create-code-card .count-hint { font-size: 11px; }

/* ---------- ② 批量生成按钮：更小更轻 ---------- */
body.admin #admin-code-gen.cc-gen {
  min-height: 38px; font-size: 13px; padding: 9px 16px;
  border-radius: 11px; margin: 4px 0 0; font-weight: 700;
}
body.admin .create-code-card .code-result { margin-top: 11px; }

/* ---------- ③ 兑换码列表卡片：重排为头部 + 双列网格 ---------- */
body.admin #admin-codes-list { gap: 9px; }
body.admin .code-item {
  padding: 12px 14px; gap: 10px;
  background: #1e293b; border: 1px solid #334155; border-top-color: #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18); border-radius: 14px;
}
body.admin .code-item:hover { border-color: rgba(16,185,129,0.45); }

/* 头部行：兑换码 chip + 状态/删除 */
body.admin .code-head { gap: 10px; }
body.admin .code-txt { font-size: 13px; padding: 6px 11px; border-radius: 8px; }
body.admin .code-del-btn { width: 30px; height: 30px; border-radius: 8px; }

/* 双列信息网格：套餐/创建一行，使用一行（占满） */
body.admin .code-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  padding: 10px 11px; background: #0f172a; border: 1px solid #2a3547;
  border-radius: 10px; box-sizing: border-box; min-width: 0;
}
body.admin .code-meta .cm-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.admin .code-meta .cm-cell.cm-full { grid-column: 1 / -1; }
body.admin .code-meta .cm-lb { font-size: 10.5px; color: #94a3b8; letter-spacing: .3px; }
body.admin .code-meta .cm-val {
  font-size: 12.5px; color: #e2e8f0; font-weight: 600;
  min-width: 0; overflow-wrap: anywhere; word-break: break-word; line-height: 1.4;
}
body.admin .code-meta .cm-extra { display: block; color: #94a3b8; font-weight: 500; font-size: 11px; margin-top: 2px; }
body.admin .code-noval { color: #64748b; font-weight: 400; }

/* ============================================================
   管理后台 v16 —— 「兑换码页：整体干净重设计」
   此前十余层碎片覆盖导致尺寸/颜色/间距互相打架，本层一次性
   重写本页全部视觉：统一字号层级、间距、圆角与配色，
   覆盖所有旧定义。JS 渲染结构不变，零逻辑改动。
   ============================================================ */

/* ---- 页面标题：干净克制 ---- */
body.admin #view-a-codes .page-head { padding: 14px 2px 12px; }
body.admin #view-a-codes .page-head h2 { font-size: 20px; color: #f1f5f9; }

/* ---------------- ① 新建兑换码卡片：清爽两步表单 ---------------- */
body.admin #view-a-codes .create-code-card {
  padding: 13px 14px; border-radius: 15px; margin-bottom: 16px;
  background: #1e293b; border: 1px solid #334155; border-top-color: #334155;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
body.admin #view-a-codes .create-code-card .code-create-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #e2e8f0;
  margin-bottom: 10px;
}
/* 字段容器：套餐 + 数量 两列并排（压矮卡片高度） */
body.admin #view-a-codes .create-code-card .cc-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
body.admin #view-a-codes .create-code-card .cc-row { min-width: 0; }
body.admin #view-a-codes .create-code-card .cc-row > label {
  display: block; font-size: 11px; font-weight: 600; color: #64748b;
  margin-bottom: 5px; letter-spacing: .3px;
}
body.admin #view-a-codes .create-code-card .select-wrap { position: relative; min-width: 0; }
body.admin #view-a-codes .create-code-card .form-select {
  width: 100%; min-height: 36px; padding: 0 26px 0 10px;
  font-size: 13px; color: #e2e8f0;
  background: #0f172a; border: 1px solid #334155; border-radius: 9px;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  box-shadow: none;
}
body.admin #view-a-codes .create-code-card .form-select:focus {
  outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.14);
}
body.admin #view-a-codes .create-code-card .select-arrow {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-size: 10px; pointer-events: none;
}
/* 数量：紧凑步进器 */
body.admin #view-a-codes .create-code-card .count-row {
  display: flex; align-items: center; gap: 5px;
}
body.admin #view-a-codes .create-code-card .count-btn {
  width: 26px; height: 36px; min-height: 0; font-size: 15px; line-height: 1;
  border-radius: 9px; background: #16202e; border: 1px solid #334155; color: #e2e8f0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .15s var(--ease); box-shadow: none;
}
body.admin #view-a-codes .create-code-card .count-btn:active {
  background: #1c2736; border-color: #10b981; transform: scale(.94);
}
body.admin #view-a-codes .create-code-card .count-input {
  width: 44px; min-height: 36px; flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: 13px; font-weight: 700; color: #e2e8f0;
  background: #0f172a; border: 1px solid #334155; border-radius: 9px;
  box-sizing: border-box; box-shadow: none;
}
body.admin #view-a-codes .create-code-card .count-input:focus {
  outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.14);
}
body.admin #view-a-codes .create-code-card .count-hint {
  font-size: 10.5px; color: #64748b; flex-shrink: 0;
}
/* 生成按钮：整卡收尾，主绿色 */
body.admin #view-a-codes #admin-code-gen.cc-gen {
  width: 100%; min-height: 36px; margin: 10px 0 0; padding: 7px 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  border: none; border-radius: 10px; box-sizing: border-box;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%); color: #04281f;
  cursor: pointer; transition: all .15s var(--ease);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
body.admin #view-a-codes #admin-code-gen.cc-gen:active { transform: scale(.985); }
body.admin #view-a-codes #admin-code-gen.cc-gen:disabled { opacity: .55; pointer-events: none; }
/* 生成结果：等宽 chip 流 */
body.admin #view-a-codes .create-code-card .code-result {
  margin-top: 10px; padding-top: 10px; line-height: 2.2;
  border-top: 1px dashed #2a3547; font-size: 12px;
}
body.admin #view-a-codes .create-code-card .code-result[hidden] { display: none; }
body.admin #view-a-codes .code-result .code-chip {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .8px; color: #6ee7b7;
  background: #123b35; border: 1px solid #1f6f5c; border-radius: 8px;
  padding: 5px 10px; margin: 2px 5px 2px 0; user-select: all;
  transition: background .15s var(--ease);
}
body.admin #view-a-codes .code-result .code-chip:active { background: #17453e; transform: scale(.96); display: inline-block; }

/* ---------------- 列表头：标题 + 计数 ---------------- */
body.admin #view-a-codes .codes-list-head { margin-bottom: 4px; }
body.admin #view-a-codes .codes-list-head .sec-head { margin: 0 2px 0; display: flex; align-items: center; justify-content: space-between; }
body.admin #view-a-codes .sec-head h3 { font-size: 15.5px; font-weight: 700; color: #f1f5f9; margin: 0; }
body.admin #view-a-codes .sec-count {
  font-size: 11px; font-weight: 700; color: #34d399;
  background: rgba(16,185,129,0.12); padding: 3px 10px; border-radius: 999px;
}
body.admin #view-a-codes .codes-list-head .note { font-size: 11.5px; color: #64748b; margin: 8px 2px 12px; }
/* 列表头右侧操作区：计数胶囊 + 「清空未兑换」危险按钮。
 * 窄屏（≤360）标题与操作区会挤成一行溢出，故允许折行。 */
body.admin #view-a-codes .codes-list-head .sec-head { flex-wrap: wrap; gap: 6px 8px; }
body.admin #view-a-codes .codes-list-head .sec-head-ops {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
body.admin #view-a-codes .code-purge-btn {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 4px 11px; box-sizing: border-box;
  font-family: var(--font); font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  color: #f87171; background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.28); border-radius: 999px;
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
body.admin #view-a-codes .code-purge-btn:hover {
  color: #fecaca; background: rgba(239,68,68,0.20); border-color: rgba(239,68,68,0.45);
}
body.admin #view-a-codes .code-purge-btn:active { transform: scale(.96); }
body.admin #view-a-codes .code-purge-btn:disabled { opacity: .55; pointer-events: none; }


/* ---------------- 搜索框 ---------------- */
body.admin #view-a-codes .code-search-wrap { margin: 6px 2px 10px; }
body.admin #view-a-codes .code-search-input {
  width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 14px;
  font-size: 12.5px; color: #e2e8f0; border-radius: 999px;
  background: #16202e; border: 1px solid #334155;
  outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
body.admin #view-a-codes .code-search-input::placeholder { color: #64748b; }
body.admin #view-a-codes .code-search-input:focus {
  border-color: #1f6f5c; box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}

/* ---------------- 筛选：三段式胶囊 ---------------- */
body.admin #view-a-codes .code-filter {
  display: flex; gap: 8px; margin: 10px 2px 12px;
}
body.admin #view-a-codes .code-filter-btn {
  flex: 1; min-height: 34px; padding: 7px 0;
  font-size: 12.5px; font-weight: 700; color: #94a3b8; text-align: center;
  background: #16202e; border: 1px solid #334155; border-radius: 999px;
  cursor: pointer; transition: all .15s var(--ease); box-shadow: none;
}
body.admin #view-a-codes .code-filter-btn:hover { color: #e2e8f0; border-color: #475569; }
body.admin #view-a-codes .code-filter-btn.active {
  color: #6ee7b7; background: #123b35; border-color: #1f6f5c;
}
body.admin #view-a-codes .code-filter-btn:active { transform: scale(.97); }

/* ---------------- 列表容器与卡片 ---------------- */
body.admin #view-a-codes #admin-codes-list {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; min-width: 0; padding: 0; align-items: stretch;
}
body.admin #view-a-codes .code-item {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0;
  padding: 13px 14px;
  background: #1e293b; border: 1px solid #334155; border-top-color: #334155;
  border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: border-color .15s var(--ease);
}
body.admin #view-a-codes .code-item:hover { border-color: rgba(16,185,129,0.45); }
body.admin #view-a-codes .code-item:active { transform: none; }

/* 头部：兑换码 chip + 状态 + 删除 */
body.admin #view-a-codes .code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.admin #view-a-codes .code-head-ops {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
body.admin #view-a-codes .code-txt {
  display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 100%;
  font-family: var(--mono); font-weight: 700; font-size: 13.5px; letter-spacing: 1.2px;
  color: #6ee7b7; background: #123b35; border: 1px solid #1f6f5c;
  padding: 7px 12px; border-radius: 9px;
  word-break: break-all; overflow-wrap: anywhere;
  cursor: pointer; user-select: all;
  box-shadow: none; transition: background .15s var(--ease), border-color .15s var(--ease);
}
body.admin #view-a-codes .code-txt:hover { background: #17453e; border-color: #28a081; }
body.admin #view-a-codes .code-txt:active { transform: scale(.98); }
/* 状态圆点：标准化 */
body.admin #view-a-codes .dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
body.admin #view-a-codes .dot i {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  box-shadow: none;
}
body.admin #view-a-codes .dot-g { color: #34d399; background: rgba(16,185,129,0.12); }
body.admin #view-a-codes .dot-m { color: #fbbf24; background: rgba(245,158,11,0.12); }
body.admin #view-a-codes .dot-r { color: #f87171; background: rgba(239,68,68,0.12); }
body.admin #view-a-codes .dot-g i { background: #34d399; }
body.admin #view-a-codes .dot-m i { background: #fbbf24; }
body.admin #view-a-codes .dot-r i { background: #f87171; }
/* 删除按钮 */
body.admin #view-a-codes .code-del-btn {
  width: 32px; height: 32px; border: none; border-radius: 9px;
  background: rgba(239,68,68,0.1); color: #f87171; font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .15s var(--ease);
}
body.admin #view-a-codes .code-del-btn:hover { background: rgba(239,68,68,0.22); color: #fecaca; }
body.admin #view-a-codes .code-del-btn:active { transform: scale(.92); }

/* 信息面板：内嵌深色网格，标签/值层级清晰 */
body.admin #view-a-codes .code-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  padding: 11px 12px; background: #0f172a; border: 1px solid #2a3547;
  border-radius: 10px; box-sizing: border-box; min-width: 0;
}
body.admin #view-a-codes .code-meta .cm-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.admin #view-a-codes .code-meta .cm-cell.cm-full { grid-column: 1 / -1; }
body.admin #view-a-codes .code-meta .cm-lb {
  font-size: 10.5px; font-weight: 600; color: #64748b; letter-spacing: .4px;
}
body.admin #view-a-codes .code-meta .cm-val {
  font-size: 12.5px; font-weight: 600; color: #e2e8f0;
  min-width: 0; overflow-wrap: anywhere; word-break: break-word; line-height: 1.45;
}
body.admin #view-a-codes .code-meta .cm-extra {
  display: block; font-size: 11px; font-weight: 500; color: #94a3b8; margin-top: 2px;
}
body.admin #view-a-codes .code-noval { color: #64748b; font-weight: 400; }

/* 加载更多 */
body.admin #view-a-codes .load-more {
  width: 100%; min-height: 40px; margin: 2px 0 0; padding: 10px;
  font-size: 12.5px; font-weight: 700; color: #94a3b8;
  background: #16202e; border: 1px solid #334155; border-radius: 11px;
  cursor: pointer; transition: all .15s var(--ease);
}
body.admin #view-a-codes .load-more:hover { color: #6ee7b7; border-color: #1f6f5c; }
body.admin #view-a-codes .load-more:active { transform: scale(.98); }

/* 空态 / 加载态：统一 */
body.admin #view-a-codes #admin-codes-list.note.state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 16px; color: #94a3b8; font-size: 12.5px; text-align: center;
}
body.admin #view-a-codes #admin-codes-list .state-emoji { font-size: 22px; }
body.admin #view-a-codes #admin-codes-list .spinner { margin: 0 auto; }

/* ============================================================
   总览页 · 卡片缩小 + 重新排版
   （仅作用于 #view-a-overview，置于文件末尾覆盖此前所有层）
   ============================================================ */
/* ---------- 页头：更紧致 ---------- */
body.admin #view-a-overview .page-head { padding: 14px 2px 10px; }
body.admin #view-a-overview .page-head h2 { font-size: 19px; }

/* ---------- 营收 / 订单双卡：更小、更扁，改为一横排紧凑卡 ---------- */
body.admin #view-a-overview .hero-grid {
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
body.admin #view-a-overview .hero-card {
  border-radius: 14px;
  padding: 11px 12px;
  min-height: 0;
  gap: 4px;
}
body.admin #view-a-overview .hero-label { font-size: 10.5px; line-height: 1.3; }
body.admin #view-a-overview .hero-rev-num { font-size: 23px; margin-top: 3px; line-height: 1.1; }
body.admin #view-a-overview .hero-num { font-size: 21px; margin-top: 3px; line-height: 1.1; }
body.admin #view-a-overview .hero-rev-sub { font-size: 10.5px; margin-top: 2px; }
body.admin #view-a-overview .hero-today {
  display: inline-block; width: fit-content;
  font-size: 10px; padding: 3px 8px; margin-top: 6px; border-radius: 999px;
}

/* ---------- 核心指标 4 卡：更小、2×2 更紧凑 ---------- */
body.admin #view-a-overview #admin-stats .stats-row { gap: 8px; margin: 0; }
body.admin #view-a-overview #admin-stats .stat-card.he {
  flex-direction: column; align-items: flex-start;
  padding: 10px 11px 9px;
  border-radius: 13px;
  gap: 0;
}
body.admin #view-a-overview #admin-stats .stat-card.he .stat-he-ic {
  width: 26px; height: 26px; font-size: 13px; border-radius: 8px;
}
body.admin #view-a-overview #admin-stats .stat-card.he .stat-num { font-size: 20px; margin-top: 5px; }
body.admin #view-a-overview #admin-stats .stat-card.he .stat-label { font-size: 10.5px; margin-top: 1px; }

/* ---------- 营收明细模块：行更细、字更小 ---------- */
body.admin #view-a-overview .admin-module + .admin-module { margin-top: 12px; }
body.admin #view-a-overview .module-head { margin-bottom: 6px; }
body.admin #view-a-overview .module-title { font-size: 12.5px; }
body.admin #view-a-overview .module-sub { font-size: 10px; }
body.admin #view-a-overview .module-card { padding: 0 12px; border-radius: 14px; }
body.admin #view-a-overview .rev-row { padding: 8px 6px; }
body.admin #view-a-overview .rev-row .rl { font-size: 12px; }
body.admin #view-a-overview .rev-row .rv { font-size: 13.5px; }

/* ---------- 退出登录：更小 ---------- */
body.admin #view-a-overview .admin-exit { padding: 11px 14px; border-radius: 13px; margin-top: 12px; }

/* ---------- 极小屏（≤360px）进一步收紧 ---------- */
@media (max-width: 360px) {
  body.admin #view-a-overview .hero-rev-num { font-size: 20px; }
  body.admin #view-a-overview .hero-num { font-size: 18px; }
  body.admin #view-a-overview #admin-stats .stat-card.he .stat-num { font-size: 18px; }
}

/* ============================================================
   兑换码页 · 卡片更矮 + 内容重新排版
   （仅作用于 #view-a-codes，置于文件末尾覆盖此前所有层）
   ============================================================ */

/* 卡片整体更矮：收紧内边距与内容间距 */
body.admin #view-a-codes .code-item {
  padding: 10px 12px;
  gap: 7px;
  border-radius: 13px;
}

/* 头部行：兑换码 chip 更紧凑，操作按钮略收紧 */
body.admin #view-a-codes .code-head { gap: 8px; }
body.admin #view-a-codes .code-txt {
  font-size: 12.5px;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 8px;
}
body.admin #view-a-codes .dot {
  font-size: 11px;
  padding: 3px 9px;
  gap: 4px;
}
body.admin #view-a-codes .code-del-btn { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }

/* 信息区：单行紧凑网格（套餐/创建 并排一行；已使用才补满一行） */
body.admin #view-a-codes .code-meta {
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  padding: 7px 10px;
  border-radius: 9px;
}
body.admin #view-a-codes .code-meta .cm-cell { gap: 1px; }
body.admin #view-a-codes .code-meta .cm-cell.cm-full { grid-column: 1 / -1; margin-top: 3px; padding-top: 3px; border-top: 1px dashed #2a3547; }
body.admin #view-a-codes .code-meta .cm-lb { font-size: 10px; letter-spacing: .3px; }
body.admin #view-a-codes .code-meta .cm-val { font-size: 12px; line-height: 1.3; }
body.admin #view-a-codes .code-meta .cm-extra { font-size: 10.5px; margin-top: 1px; }

/* ============================================================
   修复：定价卡片「操作行」(当前售价/输入框/推荐/保存) 在窄屏手机上下溢出错位。
   此前第 5020 行的最终层把 .pc-row3 强制写成单行不换行 nowrap，
   覆盖了早期 @media(max-width:420px) 的纵向堆叠，导致 4 个元素挤在一行放不下而崩坏。
   此层置于文件末尾，仅在小屏将其恢复为纵向堆叠；逻辑零改动。
   ============================================================ */
@media (max-width: 480px) {
  body.admin .price-card .pc-row3 {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
  }
  body.admin .price-card .pc-input-wrap { flex: 1 1 auto; max-width: none; }
  body.admin .price-card .pc-cur { flex: 0 0 auto; align-self: flex-start; }
  body.admin .price-card .pc-rec-btn { align-self: stretch; text-align: center; }
  body.admin .price-card .pc-save { align-self: stretch; }
}

/* ============================================================
   管理后台 · 用户详情弹窗
   （详情由内联展开改为弹出框；卡片内只保留 用户名 + 钱包余额）
   ============================================================ */
body.admin .admin-user-detail-box {
  max-width: 360px;
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}
body.admin .admin-user-detail-box h3 { text-align: center; }
body.admin .aud-email {
  font-size: 14px; font-weight: 800; color: #f1f5f9;
  text-align: center; margin: 8px 0 4px; word-break: break-all;
}
body.admin .aud-sub {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
body.admin .aud-rows {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px;
}
body.admin .aud-rows .kd {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 2px; border-bottom: 1px dashed rgba(148,163,184,0.14); font-size: 12.5px;
}
body.admin .aud-rows .kv-l { color: #94a3b8; }
body.admin .aud-rows .kv-r { color: #e2e8f0; font-weight: 600; text-align: right; word-break: break-all; }
body.admin .admin-user-detail-box .wallet-tx-admin {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(148,163,184,0.2);
}
body.admin .admin-user-detail-box .wt-admin-title {
  font-size: 12px; font-weight: 700; color: #e2e8f0; margin-bottom: 8px;
}
/* 窄屏：弹窗按钮贴底、避免遮挡 */
@media (max-width: 400px) {
  body.admin .admin-user-detail-box { max-width: 100%; max-height: 88vh; }
}

/* ============================================================
   管理后台 · 批量生成结果弹窗
   兑换码一行一个（.cg-line 块级行），列表区单独滚动，
   底栏「复制全部 / 关闭」常驻可见。
   ============================================================ */
body.admin .code-gen-box { max-width: 360px; }
body.admin .code-gen-list {
  display: flex; flex-direction: column;
  max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin: 2px 0 14px; padding: 2px;
  border-top: 1px dashed rgba(148,163,184,0.18);
  border-bottom: 1px dashed rgba(148,163,184,0.18);
}
body.admin .code-gen-list .cg-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; cursor: pointer;
  border-bottom: 1px solid rgba(148,163,184,0.08);
  transition: background .15s var(--ease);
}
body.admin .code-gen-list .cg-line:last-child { border-bottom: none; }
body.admin .code-gen-list .cg-line:hover { background: rgba(16,185,129,0.08); }
body.admin .code-gen-list .cg-line:active { background: rgba(16,185,129,0.14); }
body.admin .code-gen-list .cg-code {
  min-width: 0; font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 1px; color: #6ee7b7; word-break: break-all;
}
body.admin .code-gen-list .cg-copy {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: #94a3b8;
  border: 1px solid #334155; border-radius: 999px; padding: 2px 8px;
}
body.admin .code-gen-ops { display: flex; gap: 10px; }
body.admin .code-gen-ops .btn { flex: 1; margin: 0; min-width: 0; }

/* ============================================================
   兑换码页 · 新建卡排版调整
   (第1行：选择套餐；第2行：生成数量 + 批量生成(更小) 并排)
   置于文件末尾，覆盖此前所有层。零逻辑改动。
   ============================================================ */
/* 字段容器改为单列纵向堆叠 */
body.admin #view-a-codes .create-code-card .cc-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 第2行：生成数量放左侧，批量生成按钮放右侧并排 */
body.admin #view-a-codes .create-code-card .cc-row-action {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
body.admin #view-a-codes .create-code-card .cc-field-count {
  flex: 1 1 auto;
  min-width: 0;
}
body.admin #view-a-codes .create-code-card .cc-field-count > label {
  display: block; font-size: 11px; font-weight: 600; color: #64748b;
  margin-bottom: 5px; letter-spacing: .3px;
}

/* 批量生成按钮：收窄、变矮、自适应宽度，靠右；内容水平垂直居中 */
body.admin #view-a-codes #admin-code-gen.cc-gen {
  width: auto;
  min-height: 34px;
  height: 34px;
  margin: 0;
  min-width: 0;
  padding: 0 22px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}

/* ============================================================
   兑换码页 · 列表卡片三行排版
   (① 套餐名+价格 ② 兑换码+状态 ③ 复制次数+删除)
   卡片宽度占满容器。置于文件末尾，覆盖此前所有层。零逻辑改动。
   ============================================================ */
/* 卡片容器本身已 width:100%，此处再兜底确保占满手机宽度 */
body.admin #view-a-codes #admin-codes-list { width: 100%; }
body.admin #view-a-codes #admin-codes-list .code-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}
/* 兑换码卡片整体可点击（打开详情弹窗），显示手型指针 */
body.admin #view-a-codes #admin-codes-list .code-item,
body.admin #view-a-codes .code-item { cursor: pointer; }

/* 通用行：flex，两端对齐，垂直居中 */
body.admin #view-a-codes .code-item .ci-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

/* ① 套餐名(左) + 价格(右) */
body.admin #view-a-codes .code-item .ci-row-plan { justify-content: flex-start; }
body.admin #view-a-codes .code-item .ci-plan {
  font-size: 13px; font-weight: 700; color: #e2e8f0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
  text-align: left; display: block;
}
body.admin #view-a-codes .code-item .ci-price {
  font-size: 13px; font-weight: 800; color: #34d399;
  flex-shrink: 0; margin-left: auto; text-align: right;
}

/* ② 兑换码 + 状态 */
body.admin #view-a-codes .code-item .ci-row-code .code-txt { flex: 1 1 auto; min-width: 0; }
body.admin #view-a-codes .code-item .ci-row-code .dot { flex-shrink: 0; }

/* ③ 复制次数 + 删除 */
body.admin #view-a-codes .code-item .ci-copy {
  font-size: 11.5px; font-weight: 600; color: #94a3b8;
  display: inline-flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0;
}
body.admin #view-a-codes .code-item .ci-row-ops .code-del-btn { flex-shrink: 0; }

/* ============================================================
   用户管理 · 统计行：钱包余额(紧凑) + 单数 + Key + 详情 并排一行
   钱包余额由 .auc-sub 移入 .auc-stats；置于文件末尾覆盖。
   ============================================================ */
body.admin .admin-user-card .auc-stats {
  flex-wrap: nowrap;
  gap: 9px;
  min-width: 0;
}
body.admin .admin-user-card .auc-stats > span,
body.admin .admin-user-card .auc-stats .detail-toggle { white-space: nowrap; flex-shrink: 0; }
/* 钱包余额：紧凑、不换行 */
body.admin .admin-user-card .auc-stats .auc-kv {
  white-space: nowrap;
  gap: 5px;
  font-size: 12px;
  flex-shrink: 0;
}
body.admin .admin-user-card .auc-stats .auc-kv b { font-size: 12px; }

/* 用户管理 · 整卡可点击弹详情（去掉详情按钮后，加可点击视觉反馈） */
body.admin .admin-user-card { cursor: pointer; }
body.admin .admin-user-card:active { opacity: 0.92; }

/* ============================================================
   定价页 · 卡片压缩高度并占满宽度 + 标题栏手动刷新按钮
   置于文件末尾，覆盖此前所有层。零逻辑改动。
   ============================================================ */

/* 标题栏：标题居左，刷新按钮居右（套餐页 / 活动页共用） */
body.admin #view-a-pricing .page-head,
body.admin #view-a-activity .page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.admin #view-a-pricing .page-head h2,
body.admin #view-a-activity .page-head h2 { margin: 0; }

/* 标题栏刷新按钮：管理端全局共用。
 * 此前该样式仅写在 #view-a-pricing 作用域内，活动页复用同一 class 却取不到样式，
 * 会退化成浏览器默认按钮；提升为 body.admin 作用域后各管理页统一。 */
body.admin .ref-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
  color: #6ee7b7;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .15s var(--ease-spring);
}
body.admin .ref-btn:hover { background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.62); }
body.admin .ref-btn:active { transform: scale(0.94); background: rgba(16, 185, 129, 0.22); }
body.admin .ref-btn:disabled { opacity: .55; pointer-events: none; }
body.admin .ref-btn:focus-visible { outline: 2px solid rgba(110, 231, 183, 0.55); outline-offset: 1px; }
/* 刷新图标：加载态旋转，给出“正在刷新”的明确反馈 */
body.admin .ref-btn .ref-ic { display: inline-block; font-size: 13.5px; line-height: 1; }
body.admin .ref-btn.loading .ref-ic { animation: refSpin .7s linear infinite; }
@keyframes refSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 三行式卡片：占满可用宽度 */
body.admin #view-a-pricing #admin-pricing-list {
  width: 100%;
  box-sizing: border-box;
}
body.admin #view-a-pricing #admin-pricing-list .price-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 13px 14px;
  border-radius: 15px;
}

/* 第 1 行：套餐名 + 推荐标签 + 排序按钮 */
body.admin #view-a-pricing .price-card .pc-top {
  display: flex;
  flex-direction: row;
  align-items: center;
}
body.admin #view-a-pricing .price-card .pc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
body.admin #view-a-pricing .price-card .pc-name { font-size: 16px; }

/* 第 2 行：套餐规格（独立一行） */
body.admin #view-a-pricing .price-card .pc-spec {
  margin: 3px 0 0;
  padding: 9px 11px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}

/* 第 3 行：当前售价(点击编辑) + 推荐 + 保存 —— 强制单行（覆盖窄屏纵向堆叠） */
body.admin #view-a-pricing .price-card .pc-row3 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: 11px;
  padding: 8px 10px;
  gap: 10px;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.35);
}
body.admin #view-a-pricing .price-card .pc-cur {
  flex: 0 0 auto;
  min-width: 0;
}
body.admin #view-a-pricing .price-card .pc-cur-lb { display: block; }
body.admin #view-a-pricing .price-card .pc-price-current { font-size: 18px; }
body.admin #view-a-pricing .price-card .pc-input-wrap {
  position: relative;
  flex: 1 1 78px;
  min-width: 0;
  max-width: 130px;
}
body.admin #view-a-pricing .price-card .pp-input {
  width: 100%;
  min-width: 0;
  min-height: 29px;
  font-size: 13.5px;
  padding: 4px 8px 4px 22px;
  border-radius: 8px;
}
body.admin #view-a-pricing .price-card .pc-yen { left: 9px; font-size: 12px; }
body.admin #view-a-pricing .price-card .pc-save {
  align-self: center;
  flex: 0 0 auto;
  min-height: 29px;
  padding: 0 11px;
  font-size: 12.5px;
  border-radius: 8px;
}
body.admin #view-a-pricing .price-card .pc-rec-btn {
  align-self: center;
  flex: 0 0 auto;
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 8px;
}

/* ============================================================
   市场页 · 分类套餐弹窗：压缩卡片内部行距，降低卡片高度
   只降低卡片内部各行间距与内边距，不影响滚动与内容可读性。
   置于文件末尾，覆盖此前所有层。零逻辑改动。
   ============================================================ */
.cat-plan-list .plan {
  padding: 11px 15px 10px;   /* 卡片上下内边距收紧 14/12 → 11/10 */
}
.cat-plan-list .plan-top {
  margin-bottom: 6px;        /* 第 1 行(套餐名) 与 第 2 行(标签) 间距 9 → 6 */
}
.cat-plan-list .plan-meta {
  margin-bottom: 8px;        /* 第 2 行(标签) 与 第 3 行(价格) 间距 12 → 8 */
}
.cat-plan-list .plan-foot {
  padding-top: 4px;          /* 第 3 行(价格/购买) 上方间距 8 → 4 */
}
.cat-plan-list .plan-price { font-size: 17px; }   /* 价格字号 20 → 17，压低该行行高 */
.cat-plan-list .plan-price small { font-size: 11px; }  /* ¥ 符号随之收小，保持比例 */
.cat-plan-list .btn-plan-buy {                    /* 购买按钮紧凑化，避免撑高整行 */
  font-size: 12px;
  padding: 4.5px 15px;
}
.cat-plan-list .plan-badge { top: 5px; }   /* 推荐徽章随卡片变矮而上移，避免与名称重叠 */
.cat-plan-list .plan-hot .plan-top { padding-right: 44px; }

/* 激活套餐弹窗：续费目标的状态徽章（已失效套餐提示） */
.r-opt .r-opt-txt .r-opt-st {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- 管理 · 系统设置（上游配置）---------- */
#view-a-settings .cfg-lb {
  display: block; margin: 12px 0 6px;
  font-size: 13px; color: var(--c-text-secondary); font-weight: 600;
}
#view-a-settings input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--c-border, rgba(120,130,150,.3));
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px;
  padding: 10px 12px;
  box-sizing: border-box;
}
#view-a-settings input:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
#view-a-settings .cfg-src { margin-top: 8px; font-size: 12px; }
#view-a-settings .btn-row { margin-top: 14px; display: flex; gap: 10px; }
#view-a-settings .btn-row .btn { flex: 1; }

/* ============================================================
   总览页 · 核心指标卡片明显缩小 + 营收按天（近7天）明细
   （仅作用于 #view-a-overview；置于文件末尾覆盖此前所有层）
   ============================================================ */
/* ---------- 核心指标 4 卡：明显更小、更扁，2×2 更紧凑 ---------- */
body.admin #view-a-overview #admin-stats .stats-row { gap: 6px; margin: 0; }
body.admin #view-a-overview #admin-stats .stat-card.he {
  flex-direction: column; align-items: flex-start;
  padding: 7px 9px 7px;
  border-radius: 11px;
  gap: 0;
  min-height: 0;
}
body.admin #view-a-overview #admin-stats .stat-card.he .stat-he-ic {
  width: 20px; height: 20px; font-size: 11px; border-radius: 6px; line-height: 20px;
}
body.admin #view-a-overview #admin-stats .stat-card.he .stat-num { font-size: 17px; margin-top: 4px; line-height: 1.1; }
body.admin #view-a-overview #admin-stats .stat-card.he .stat-label { font-size: 10px; margin-top: 1px; opacity: 0.85; white-space: nowrap; }

/* ---------- 营收概况：近 7 天横向滑动卡片条 ---------- */
body.admin #view-a-overview #admin-rev-daily.rev-daily { margin-top: 9px; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-note {
  display: inline-block; font-size: 10px; color: #94a3b8; font-weight: 600;
  letter-spacing: 0.5px; margin: 2px 2px 6px;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail::-webkit-scrollbar { display: none; height: 0; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc {
  flex: 0 0 auto; min-width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(170deg, #1b2743 0%, #141d33 100%);
  border: 1px solid #2c3a57; border-radius: 13px;
  padding: 10px 9px 9px;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc .rdc-tag {
  font-size: 10.5px; font-weight: 700; color: #94a3b8; letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc .rdc-amt {
  font-size: 14.5px; font-weight: 800; color: #e2e8f0; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.has .rdc-amt { color: #34d399; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc .rdc-orders {
  font-size: 10px; color: #64748b; font-variant-numeric: tabular-nums;
}
/* 今日卡：高亮描边 + 顶部渐变标签 */
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today {
  border-color: #38bdf8; background: linear-gradient(170deg, #123047 0%, #0f2233 100%);
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today .rdc-tag {
  color: #38bdf8;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today .rdc-amt { color: #7dd3fc; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today .rdc-orders { color: #60a5fa; }

/* ---------- 极小屏（≤360px）进一步收敛：卡片数字/间距 ---------- */
@media (max-width: 360px) {
  body.admin #view-a-overview #admin-stats .stat-card.he { padding: 6px 8px 6px; }
  body.admin #view-a-overview #admin-stats .stat-card.he .stat-num { font-size: 15.5px; }
  body.admin #view-a-overview #admin-stats .stat-card.he .stat-label { font-size: 9.5px; }
  body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc { min-width: 66px; padding: 9px 8px 8px; }
  body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc .rdc-amt { font-size: 13.5px; }
}

/* ---------- 总览页：每日营收卡片可点击 + 订单列表（含退单） ---------- */
/* 每日营收卡片：可点击，悬停/选中高亮 */
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc {
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc:hover { border-color: #38bdf8; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc:active { transform: scale(0.96); }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.selected {
  border-color: #a78bfa;
  box-shadow: 0 0 0 1px #a78bfa, 0 4px 14px rgba(167, 139, 250, 0.22);
  background: linear-gradient(170deg, #2a2350 0%, #1e1938 100%);
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.selected .rdc-tag { color: #c4b5fd; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.selected .rdc-amt { color: #ddd6fe; }

/* 订单列表模块头部：标题 + 清除筛选 */
body.admin #view-a-overview .order-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-bottom: 10px;
}
body.admin #view-a-overview .order-list-head .module-head { flex: 1; min-width: 0; }
body.admin #view-a-overview .order-clear { flex-shrink: 0; }

/* 订单列表容器 */
body.admin #view-a-overview #admin-order-list { display: block; }
body.admin #view-a-overview #admin-order-list .note.state { padding: 18px 4px; }

/* 复用 .purchase-card 的订单卡片，做右侧金额 + 退单按钮布局 */
body.admin #view-a-overview .purchase-card .pur-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
body.admin #view-a-overview .purchase-card .pur-refund {
  min-height: 26px; padding: 4px 12px; font-size: 11.5px; border-radius: 8px;
}
/* 已退款订单：整体降饱和，弱化金额，标识退单 */
body.admin #view-a-overview .purchase-card.pur-refunded {
  opacity: 0.78;
  border-color: rgba(239, 68, 68, 0.30);
}
body.admin #view-a-overview .purchase-card.pur-refunded .pur-amount { color: #94a3b8; }
body.admin #view-a-overview .purchase-card.pur-refunded .pur-name { text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.7); }
body.admin #view-a-overview .purchase-card .pur-foot { align-items: flex-end; }

/* ---------- 用户端「套餐订单」列表：已退款状态展示 ---------- */
/* 小号「已退单」标签（与「续费」标签风格一致，但用退款红） */
.refund-tag-mini {
  font-size: 10px; font-weight: 700; color: #ef4444; background: #fee2e2;
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}
/* 已退款订单整卡：降饱和 + 弱化，明确区分于正常订单 */
.order.order-refunded { opacity: 0.75; }
.order.order-refunded .order-left b { text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, 0.6); }

/* ---------- 订单页（原购买页）：统一订单列表 ---------- */
/* hero 统计：4 项（总 / 已支付 / 待支付 / 已退款）用 4 列；窄屏退 2 列 */
body.admin #view-a-purchases .ph-stats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 380px) {
  body.admin #view-a-purchases .ph-stats { grid-template-columns: repeat(2, 1fr); }
}
/* 按日筛选条 */
body.admin #view-a-purchases .order-date-filter { margin: 2px 0 12px; }
body.admin #view-a-purchases .odf-rail {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.admin #view-a-purchases .odf-rail::-webkit-scrollbar { display: none; height: 0; }
body.admin #view-a-purchases .odf-btn {
  flex: 0 0 auto; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #cbd5e1;
  background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px; padding: 6px 13px; font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.admin #view-a-purchases .odf-btn:active { transform: scale(0.96); }
body.admin #view-a-purchases .odf-btn.active {
  background: rgba(167, 139, 250, 0.16); border-color: #a78bfa; color: #ddd6fe;
}
body.admin #view-a-purchases .odf-load { font-size: 12px; color: #94a3b8; }

/* ---------- 订单卡片：来源标签 / 激活码 ---------- */
/* 管理端：来源小标签（购买/兑换） */
body.admin #view-a-purchases .pur-src {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}
body.admin #view-a-purchases .pur-src.buy { color: #60a5fa; background: rgba(96, 165, 250, 0.14); }
body.admin #view-a-purchases .pur-src.redeem { color: #fbbf24; background: rgba(245, 158, 11, 0.14); }
/* 管理端：激活码（等宽，蓝色高亮） */
body.admin #view-a-purchases .pur-code {
  font-size: 11.5px; font-weight: 700; color: #a5b4fc; margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  word-break: break-all;
}
body.admin #view-a-purchases .pur-time { margin-top: 4px; }

/* 用户端：来源小标签 */
.ord-src {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}
.ord-src.buy { color: #1d4ed8; background: #dbeafe; }
.ord-src.redeem { color: #b45309; background: #fef3cd; }
/* 用户端：时间/激活码行 */
.ord-t { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.ord-code { font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace; font-weight: 700; color: #1d4ed8; }

/* ============================================================
   移动端适配 · 用户管理卡按钮 & 定价卡按钮布局
   采用「弹性换行 + 自动撑满」：每行按钮均分占满，无空位、无错位。
   ============================================================ */

/* ---------- 用户信息卡 · 操作按钮：单行均分，5 个一排 ---------- */
/* 强制单行（nowrap），所有按钮等分宽度，占满整行不溢出 */
body.admin .admin-user-card .ui-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  width: 100%;               /* 占满整卡宽度，按钮铺满屏幕 */
  flex: 1 1 100%;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  box-sizing: border-box;
}
body.admin .admin-user-card .ui-actions .admin-btn,
body.admin .admin-user-card .ui-actions .sys-acct {
  flex: 1 1 0;                /* 每个按钮均分，宽度完全一致 */
  min-width: 0;
  width: 0;                   /* 宽度完全由 flex 决定，确保等宽 */
  height: 36px;               /* 固定统一高度 */
  padding: 0 4px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 36px;          /* 文字垂直居中，与高度一致 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
body.admin .admin-user-card .ui-actions .sys-acct { color: #94a3b8; background: rgba(148,163,184,0.10); border-radius: 10px; font-weight: 600; }
body.admin .admin-user-card .ui-actions .admin-btn { border-radius: 10px; }

/* 超窄屏（≤360px）：单行仍放 5 个，字号略收小，高度保持一致 */
@media (max-width: 360px) {
  body.admin .admin-user-card .ui-actions { gap: 4px; }
  body.admin .admin-user-card .ui-actions .admin-btn,
  body.admin .admin-user-card .ui-actions .sys-acct {
    height: 34px;
    line-height: 34px;
    font-size: 11px;
  }
}

/* ---------- 定价卡 · 第三行：输入与按钮分行，均分无错位 ---------- */
/* 宽屏保持一行；窄屏把「推荐 / 保存」按钮整体换到第二行，均分撑满 */
body.admin #view-a-pricing .price-card .pc-row3 {
  flex-wrap: wrap;
  row-gap: 9px;
  align-items: center;
}
/* 售价与输入框：第一行，输入框吃掉剩余宽度，把按钮挤到第二行 */
body.admin #view-a-pricing .price-card .pc-row3 .pc-cur { flex: 0 0 auto; }
body.admin #view-a-pricing .price-card .pc-row3 .pc-input-wrap { flex: 1 1 auto; max-width: none; min-width: 0; }

/* 推荐 / 保存按钮：两个并排均分；只有一个时自动撑满整行 */
body.admin #view-a-pricing .price-card .pc-row3 .pc-rec-btn,
body.admin #view-a-pricing .price-card .pc-row3 .pc-save {
  flex: 1 1 44%;
  max-width: none;
  min-height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 560px) {
  /* 宽屏：按钮不换行，仍与售价/输入同排（保持原单行） */
  body.admin #view-a-pricing .price-card .pc-row3 { flex-wrap: nowrap; }
  body.admin #view-a-pricing .price-card .pc-row3 .pc-input-wrap { flex: 1 1 78px; max-width: 130px; }
  body.admin #view-a-pricing .price-card .pc-row3 .pc-rec-btn,
  body.admin #view-a-pricing .price-card .pc-row3 .pc-save { flex: 0 0 auto; }
}

/* 极窄屏（≤360px）：按钮整体占整行、文字稍缩，触控更大 */
@media (max-width: 360px) {
  body.admin #view-a-pricing .price-card .pc-row3 { row-gap: 8px; }
  body.admin #view-a-pricing .price-card .pc-row3 .pc-rec-btn,
  body.admin #view-a-pricing .price-card .pc-row3 .pc-save { min-height: 34px; }
}

/* ============================================================
   卡片占满宽度：宽屏/桌面浏览器下，
   取消管理端 520px 居中列宽限制，让卡片铺满整个可用宽度。
   ============================================================ */
@media (min-width: 521px) {
  body.admin #app { max-width: none; }
}

/* ============================================================
   用户管理卡片占满整行宽度（参考用户端「我的」页卡片）：
   列表容器 #admin-users-list 带 .note.state（align-items:center），
   会让子项只按内容宽度居中、不拉伸。这里令每张卡片 width:100%，
   铺满整行；不改变容器 align-items，因此加载/空态仍保持居中。
   ============================================================ */
body.admin #admin-users-list .admin-user-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 按钮行同步铺满卡片宽度（占满屏幕） */
body.admin .admin-user-card .ui-actions {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   兑换码 & 定价页面卡片占满整行宽度（与用户管理一致）：
   用户管理容器无左右padding、卡片 width:100% 即可顶满；
   而兑换码容器 .note.state 自带 padding:26px 16px（左右16px），
   导致卡片左右留白。这里直接去掉兑换码容器的左右 padding，
   卡片 width:100% 即铺满整行（与用户管理写法完全一致）。
   ============================================================ */
body.admin #admin-codes-list,
body.admin #admin-pricing-list {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body.admin #admin-codes-list .code-item,
body.admin #admin-pricing-list .price-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* 去掉兑换码容器自带的左右 padding（保留少量上下间距） */
body.admin #view-a-codes #admin-codes-list {
  padding-left: 0;
  padding-right: 0;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ============================================================
   高度压缩重设计（砍掉约 1/3 高度 + 内部 UI 精修）
   ①「新建兑换码」卡片 ②「定价套餐」卡片
   收紧内边距 / 行距 / 控件高度，重新对齐比例，置于文件末尾覆盖。
   ============================================================ */

/* ---------- ① 兑换码 · 新建卡片：更紧凑 ---------- */
body.admin #view-a-codes .create-code-card {
  padding: 9px 12px;
  border-radius: 13px;
  margin-bottom: 14px;
}
body.admin #view-a-codes .create-code-card .code-create-head {
  font-size: 12.5px;
  margin-bottom: 6px;
  gap: 6px;
}
body.admin #view-a-codes .create-code-card .cc-fields { gap: 8px; }
body.admin #view-a-codes .create-code-card .cc-row { margin-bottom: 0; }
body.admin #view-a-codes .create-code-card .cc-row > label,
body.admin #view-a-codes .create-code-card .cc-field-count > label {
  font-size: 10.5px;
  margin-bottom: 3px;
  letter-spacing: .2px;
}
body.admin #view-a-codes .create-code-card .form-select {
  min-height: 31px;
  font-size: 12.5px;
  padding: 0 24px 0 9px;
}
body.admin #view-a-codes .create-code-card .count-row { gap: 4px; }
body.admin #view-a-codes .create-code-card .count-btn {
  width: 25px; height: 30px; min-height: 0; font-size: 14px;
}
body.admin #view-a-codes .create-code-card .count-input {
  min-height: 30px; font-size: 12.5px;
}
body.admin #view-a-codes .create-code-card .count-hint { font-size: 10px; }
body.admin #view-a-codes #admin-code-gen.cc-gen {
  min-height: 29px;
  height: 29px;
  padding: 0 18px;
  font-size: 12px;
}

/* ---------- ② 定价 · 套餐卡片：更紧凑 ---------- */
body.admin #view-a-pricing #admin-pricing-list .price-card {
  padding: 10px 12px;
  border-radius: 13px;
}
body.admin #view-a-pricing .price-card .pc-title { gap: 7px; }
body.admin #view-a-pricing .price-card .pc-name { font-size: 15px; }
body.admin #view-a-pricing .price-card .pc-spec {
  margin: 6px 0 0;
  padding: 6px 10px;
  font-size: 11.5px;
  line-height: 1.45;
}
body.admin #view-a-pricing .price-card .pc-row3 {
  margin-top: 8px;
  padding: 6px 9px;
  gap: 9px;
  border-radius: 10px;
}
body.admin #view-a-pricing .price-card .pc-price-current { font-size: 16px; }
body.admin #view-a-pricing .price-card .pc-cur-lb { font-size: 10.5px; }
body.admin #view-a-pricing .price-card .pp-input {
  min-height: 26px;
  font-size: 12.5px;
  padding: 3px 8px 3px 20px;
}
body.admin #view-a-pricing .price-card .pc-save {
  min-height: 26px;
  font-size: 12px;
  padding: 0 10px;
}
body.admin #view-a-pricing .price-card .pc-rec-btn {
  padding: 3px 8px;
  font-size: 10.5px;
}

/* ============================================================
   订单页 · 顶部营收卡片：高度砍半 + 内容重设计
   改为紧凑两行式：第 1 行「标签 + 金额」左右并排，
   第 2 行 4 项统计铺满；内边距/字号全面收紧。
   置于文件末尾覆盖。零逻辑改动。
   ============================================================ */
body.admin #view-a-purchases .purchase-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 8px;
  row-gap: 6px;
  padding: 11px 12px;
  border-radius: 14px;
  margin-bottom: 13px;
}
/* 第 1 行：左侧标签 + 右侧金额，同一条基线 */
body.admin #view-a-purchases .purchase-hero .ph-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .3px;
}
body.admin #view-a-purchases .purchase-hero .ph-amount {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.3px;
}
/* 第 2 行：4 项统计铺满 */
body.admin #view-a-purchases .purchase-hero .ph-stats {
  flex: 1 1 100%;
  margin: 2px 0 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
body.admin #view-a-purchases .purchase-hero .ph-stat {
  padding: 7px 3px;
  border-radius: 10px;
}
body.admin #view-a-purchases .purchase-hero .ph-stat .ph-n {
  font-size: 15px;
}
body.admin #view-a-purchases .purchase-hero .ph-stat .ph-lb {
  font-size: 10px;
  margin-top: 1px;
}

/* ============================================================
   管理后台 v17 —— 「套餐页（原『定价』）：卡片高度压缩 + 宽度不溢出」
   ① 入口更名为「套餐」（页面标题 + 底部导航）
   ② 列表容器完全对齐「订单页」#admin-purchase-list 的宽度写法
      （padding:0 / min-width:0 / align-items:stretch），
      覆盖 .note.state 继承来的 align-items:center，卡片 width:100% 铺满不掉边
   ③ 操作行强制单行，并显式 width:auto 覆盖历史层
      @media(max-width:380px) 的 `.pc-save{width:100%}`
      —— 这正是此前小屏卡片横向溢出的根因
   ④ 去掉规格说明的灰色嵌套盒子、行距收紧，单卡高度约降低 1/3
   选择器统一带 #view-a-pricing #admin-pricing-list 双 id，
   置于文件末尾，可稳定覆盖此前所有层；零逻辑改动。
   ============================================================ */

/* ============================================================
   活动模块（用户端「活动」Tab + 管理端「活动」Tab）
   说明：配色一律走 var(--c-*)，管理端 body.admin 会自动切换为深色主题。
   ============================================================ */

/* ---- 管理端活动页：5 个审核分类 Tab（复用 .wallet-tab 外观，压缩到一行不换行）---- */
.act-tabs { gap: 6px; }
.act-tabs .wallet-tab {
  padding: 8px 2px;
  font-size: 11.5px;
  border-width: 1px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 分类 Tab 上的数量徽标（待审 / 通过 / 驳回） */
.act-tabs .wallet-tab .act-tab-n {
  display: inline-block;
  min-width: 15px;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.20);
  color: inherit;
  vertical-align: 1px;
}
.act-tabs .wallet-tab.active .act-tab-n {
  background: rgba(16, 185, 129, 0.25);
  color: #a7f3d0;
}

/* ---- 活动卡片（用户端列表）---- */
.act-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--c-shadow);
  cursor: pointer;
  transition: transform .18s var(--ease-spring), box-shadow .25s var(--ease);
}
.act-card:active { transform: scale(0.985); }
.act-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.act-card-title { font-size: 16.5px; font-weight: 800; color: var(--c-text); letter-spacing: -0.2px; }
.act-card-sub { font-size: 12px; color: var(--c-text-secondary); margin-top: 3px; line-height: 1.5; }

/* 奖励金额强调块 */
.act-hero {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-red) 0%, #f97316 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.24);
}
body.admin .act-hero { background: linear-gradient(135deg, #059669 0%, #10b981 100%); box-shadow: 0 8px 22px rgba(16,185,129,.22); }
.act-hero-amt { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.act-hero-lb { font-size: 12px; opacity: .92; }

/* 参与次数提示（剩余次数 / 不限） */
.act-limit {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-text-secondary);
  background: var(--c-border-light);
  border-radius: 10px;
  padding: 8px 11px;
}
.act-limit b { color: var(--c-red); font-weight: 800; }

/* 我的参与统计小胶囊 */
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.act-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--c-border-light);
  color: var(--c-text-secondary);
}
.act-chip.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
.act-chip.approved { background: var(--c-green-bg); color: #047857; }
.act-chip.rejected { background: var(--c-red-bg); color: #b91c1c; }
body.admin .act-chip.pending { color: #fbbf24; }

/* 卡片底部动作条 */
.act-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 10px; }
.act-go { font-size: 12.5px; font-weight: 700; color: var(--c-primary); }

/* ---- 活动页：会员优惠卡（常驻活动，无需审核；金色调与「提交型活动」区分） ---- */
.vip-act {
  background: linear-gradient(135deg, #fffdf6 0%, #fffbeb 100%);
  border-color: rgba(245, 158, 11, 0.35);
}
.vip-act.is-vip {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.16);
}
.vip-act-state {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: #f1f5f9;
  color: var(--c-text-secondary);
  white-space: nowrap;
}
.vip-act-state.on {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  color: #7c2d12;
}
/* 三个数据块：折扣 / 我的累计消费 / 还差多少 */
.vip-act-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 11px;
}
.vip-act-facts > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(245, 158, 11, 0.18);
}
.vip-act-facts b {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vip-act-facts i {
  font-size: 10.5px;
  font-style: normal;
  color: var(--c-text-secondary);
  white-space: nowrap;
}
.vip-act .vip-bar { margin: 0; background: rgba(245, 158, 11, 0.18); }
.vip-act .vip-bar > i { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

/* ---- 活动详情：分页 tab（外观复用「使用指南」的 .docs-tabs；标题过长时裁剪，不撑破布局）---- */
#act-detail-tabs { margin: 4px 0 12px; }
#act-detail-tabs .docs-tab {
  font-size: 13px; padding: 10px 8px;
  min-width: 0; overflow: hidden; white-space: nowrap;
}
@media (max-width: 360px) {
  #act-detail-tabs .docs-tab { font-size: 12px; padding: 9px 5px; }
}

/* ---- 活动详情：规则 ---- */
.act-rules {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--c-shadow);
}
.act-rules h3 { font-size: 14.5px; font-weight: 800; color: var(--c-text); margin-bottom: 9px; }
.act-rules ol { margin: 0; padding-left: 18px; }
.act-rules li { font-size: 12.5px; color: var(--c-text-secondary); line-height: 1.75; margin-bottom: 3px; }

/* ---- 活动详情：提交表单 ---- */
.act-form { background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 16px; padding: 15px 16px; margin-bottom: 12px; box-shadow: var(--c-shadow); }
.act-form h3 { font-size: 14.5px; font-weight: 800; color: var(--c-text); margin-bottom: 10px; }
.act-field { margin-bottom: 12px; }
.act-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-text-secondary); margin-bottom: 5px; }
.act-field input,
.act-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-bg);
  font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.admin .act-field input, body.admin .act-field textarea { background: #0f172a; }
.act-field input:focus,
.act-field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.act-field textarea { resize: vertical; min-height: 62px; }
.act-hint { font-size: 11.5px; color: var(--c-text-tertiary); margin-top: 5px; line-height: 1.5; }

/* 参与订单下拉框（用户端；.form-select 只在管理端作用域内有样式，此处自备） */
.act-select-wrap { position: relative; }
.act-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display: block; width: 100%; box-sizing: border-box;
  padding: 12px 36px 12px 13px;
  border: 1.5px solid var(--c-border); border-radius: 12px;
  background: var(--c-bg); color: var(--c-text);
  font-size: 14px; font-family: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.admin .act-select { background: #0f172a; }
.act-select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.act-select option { background: var(--c-surface); color: var(--c-text); font-size: 13px; }
.act-select-arrow {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-tertiary); font-size: 13px; pointer-events: none;
}

/* 图片选择区 */
.act-upload {
  border: 1.5px dashed var(--c-border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
body.admin .act-upload { background: #0f172a; }
.act-upload:active { border-color: var(--c-primary); background: var(--c-primary-bg); }
.act-upload-ic { font-size: 24px; display: block; margin-bottom: 4px; }
.act-upload-tx { font-size: 12.5px; color: var(--c-text-secondary); font-weight: 600; }

/* 已选图片缩略图 */
.act-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.act-thumb { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-bg); }
.act-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-thumb-del {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; border-radius: 50%;
  background: rgba(15, 23, 42, .68); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
}

/* ---- 我的参与记录 ---- */
.act-sub-item {
  background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 14px;
  padding: 13px 14px; margin-bottom: 9px; box-shadow: var(--c-shadow);
}
.act-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.act-sub-order { font-size: 13px; font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-sub-meta { font-size: 11px; color: var(--c-text-tertiary); margin-top: 4px; }
.act-sub-remark { font-size: 12px; color: var(--c-text-secondary); margin-top: 6px; line-height: 1.5; word-break: break-all; }
.act-sub-reason { font-size: 12px; color: #b91c1c; margin-top: 6px; line-height: 1.5; word-break: break-all; }
body.admin .act-sub-reason { color: #fca5a5; }

/* 状态徽标 */
.act-status { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.act-status.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
.act-status.approved { background: var(--c-green-bg); color: #047857; }
.act-status.rejected { background: var(--c-red-bg); color: #b91c1c; }
body.admin .act-status.pending { color: #fbbf24; }

/* 凭证图片网格（列表内小图） */
.act-img-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.act-img-grid img {
  width: 66px; height: 66px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--c-border); background: var(--c-bg); cursor: zoom-in; display: block;
}
.act-img-grid img.broken { opacity: .35; }

/* ---- 管理端：待审核 / 记录条目 ---- */
.act-audit-item {
  background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 14px;
  padding: 13px 14px; margin-bottom: 10px; box-shadow: var(--c-shadow);
}
.act-audit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.act-audit-user { font-size: 13px; font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-audit-act { font-size: 11px; color: var(--c-text-tertiary); }
.act-audit-rows { margin-top: 8px; }
.act-audit-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.7; color: var(--c-text-secondary); }
.act-audit-row > span:first-child { color: var(--c-text-tertiary); flex-shrink: 0; min-width: 52px; }
.act-audit-row > span:last-child { color: var(--c-text); word-break: break-all; }
.act-audit-btns { display: flex; gap: 8px; margin-top: 11px; }
.act-audit-btns .btn {
  flex: 1 1 0%; width: auto; min-width: 0; margin: 0;
  padding: 9px 4px; font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* 驳回按钮：危险色（项目 .btn-secondary 仅在 #view-docs 作用域内有样式，此处自备） */
.act-audit-btns .btn-danger { background: var(--c-red-bg); color: #b91c1c; }
.act-audit-btns .btn-danger:active { background: #fecaca; }
body.admin .act-audit-btns .btn-danger { background: rgba(239, 68, 68, .16); color: #fca5a5; }

/* 审核记录条目：动作徽标 */
.act-log-item {
  background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 13px;
  padding: 11px 13px; margin-bottom: 8px; box-shadow: var(--c-shadow);
}
.act-log-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.act-log-act { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.act-log-act.approve { background: var(--c-green-bg); color: #047857; }
.act-log-act.reject { background: var(--c-red-bg); color: #b91c1c; }
.act-log-act.resubmit { background: var(--c-primary-bg); color: var(--c-primary); }
.act-log-amt { font-size: 13.5px; font-weight: 800; color: var(--c-green); font-variant-numeric: tabular-nums; }
.act-log-line { font-size: 11.5px; color: var(--c-text-secondary); margin-top: 5px; line-height: 1.6; word-break: break-all; }
.act-log-time { font-size: 10.5px; color: var(--c-text-tertiary); margin-top: 3px; }

/* 管理端汇总条 */
.act-sum {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 11px; box-shadow: var(--c-shadow);
}
.act-sum-item { flex: 1 1 30%; min-width: 84px; }
.act-sum-item b { display: block; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.act-sum-item span { font-size: 11px; color: var(--c-text-tertiary); }

/* ---- 管理端活动卡片：紧凑三段式（概览 → 关键参数 → 审核统计），完整配置默认收起 ---- */
.act-cfg {
  background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: 16px;
  padding: 13px 14px; margin-bottom: 12px; box-shadow: var(--c-shadow);
}
.act-cfg-head { display: flex; align-items: center; gap: 8px; }
.act-cfg-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-cfg-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.act-cfg-badge.on { background: var(--c-green-bg); color: #047857; }
.act-cfg-badge.off { background: var(--c-red-bg); color: #b91c1c; }
.act-cfg-toggle {
  flex-shrink: 0; border: 1px solid var(--c-border); background: transparent;
  color: var(--c-text-secondary); font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.act-cfg-toggle:active { background: var(--c-primary-bg); color: var(--c-primary); }

/* 关键参数：三格并排，一眼可见 */
.act-cfg-facts { display: flex; gap: 8px; margin-top: 10px; }
.act-cfg-facts > span {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--c-bg); border-radius: 11px; padding: 7px 4px;
}
body.admin .act-cfg-facts > span { background: #0f172a; }
.act-cfg-facts b {
  font-size: 15px; font-weight: 800; color: var(--c-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.act-cfg-facts i { font-style: normal; font-size: 10px; color: var(--c-text-tertiary); }

/* 审核统计：单行小字，不占高度 */
.act-cfg-stats {
  display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 9px;
  font-size: 11.5px; color: var(--c-text-tertiary);
}
.act-cfg-stats b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.act-cfg-stats .p b { color: #b45309; }
.act-cfg-stats .a b { color: var(--c-green); }
.act-cfg-stats .r b { color: var(--c-red); }
.act-cfg-stats .m b { color: var(--c-text); }
body.admin .act-cfg-stats .p b { color: #fbbf24; }

/* 展开区：完整配置表单 */
.act-cfg-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--c-border); }
.act-cfg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.act-cfg-grid .act-field { margin-bottom: 0; }
.act-cfg-grid .act-field label { font-size: 11px; }
.act-cfg-grid input { padding: 9px 6px; font-size: 13px; text-align: center; }

/* ---- 活动提交详情弹窗 ---- */
.act-detail-box { max-height: 82vh; overflow-y: auto; text-align: left; }
.act-detail-box h3 { text-align: center; }
.act-detail-sec { margin-top: 14px; }
.act-detail-sec > h4 { font-size: 13px; font-weight: 800; color: var(--c-text); margin-bottom: 7px; }
.act-detail-sec .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--c-border-light); }
.act-detail-sec .kv > span { color: var(--c-text-tertiary); flex-shrink: 0; }
.act-detail-sec .kv > b { color: var(--c-text); font-weight: 700; word-break: break-all; text-align: right; }
.act-detail-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.act-detail-imgs img { width: 88px; height: 88px; object-fit: cover; border-radius: 11px; border: 1px solid var(--c-border); cursor: zoom-in; display: block; }
.act-detail-imgs img.broken { opacity: .35; }

/* ---- 大图预览 ---- */
.act-img-box {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.act-img-box img {
  width: 100%; max-height: 68vh; object-fit: contain;
  border-radius: 16px; background: #0b1220; box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.act-img-box .btn { margin: 0; }

/* 窄屏适配：活动卡片与缩略图进一步压缩 */
@media (max-width: 380px) {
  .act-card { padding: 14px; border-radius: 16px; }
  .act-hero-amt { font-size: 21px; }
  .act-thumb { width: 66px; height: 66px; }
  .act-img-grid img { width: 58px; height: 58px; }
  .act-tabs .wallet-tab { font-size: 10.5px; }
  .act-tabs .wallet-tab .act-tab-n { font-size: 9px; min-width: 13px; margin-left: 3px; padding: 0 4px; line-height: 14px; }
}

/* 普通用户底导新增「活动」后为 6 项（此前 5 项）：窄屏收紧字号，
 * 避免「套餐管理 / 套餐兑换 / 使用指南」等 4 字标签在 320~380px 屏上换行溢出。
 * 仅作用于非管理端，且仅窄屏生效，不影响宽屏既有观感。 */
@media (max-width: 380px) {
  body:not(.admin) .tab-btn { font-size: 10px; padding: 6px 1px 9px; }
  body:not(.admin) .tab-btn span { font-size: 19px; }
}

/* ---------- 列表容器：与订单页 #admin-purchase-list 完全一致 ---------- */
body.admin #view-a-pricing #admin-pricing-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  justify-content: flex-start;
  align-items: stretch;   /* 关键：覆盖 .note.state 的 center */
  text-align: left;
  box-sizing: border-box;
}

/* ---------- 卡片外壳：更薄的内边距与圆角（宽度写法同订单卡片） ---------- */
body.admin #view-a-pricing #admin-pricing-list .price-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 11px 12px 10px;
  border-radius: 13px;
  box-sizing: border-box;
}

/* ---------- 第 1 行：套餐名 + 推荐角标（单行、超长省略） ---------- */
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-top {
  display: flex; flex-direction: row; align-items: center;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-title {
  flex-wrap: nowrap; gap: 6px; min-width: 0; overflow: hidden;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-name {
  min-width: 0; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .over-tag {
  flex: 0 0 auto; font-size: 9.5px; line-height: 1.35; padding: 2px 7px; border-radius: 999px;
}

/* ---------- 第 2 行：规格描述（去掉灰色盒子，压成一行小字） ---------- */
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-spec {
  margin: 2px 0 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #8b9bb0;
}

/* ---------- 第 3 行：当前售价 + 输入框 + 推荐 + 保存（强制单行） ---------- */
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-row3 {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 7px;
  border-radius: 9px;
  width: auto; max-width: 100%; min-width: 0; box-sizing: border-box;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-cur {
  flex: 0 0 auto; min-width: 0; gap: 0;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-cur-lb {
  font-size: 9.5px; line-height: 1.25; letter-spacing: .2px; color: #64748b;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-price-current {
  font-size: 15px; line-height: 1.25; letter-spacing: -0.2px;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-input-wrap {
  position: relative; flex: 1 1 62px; min-width: 44px; max-width: none;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pp-input {
  width: 100%; min-width: 0; height: 30px; min-height: 30px;
  padding: 0 6px 0 17px; font-size: 12.5px; border-radius: 8px;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-yen {
  left: 7px; font-size: 11.5px;
}
/* 推荐 / 保存：宽度按内容自适应（width:auto 顶掉老层 @media(max-width:380px) 的 width:100%） */
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-row3 .pc-rec-btn,
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-row3 .pc-save {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  align-self: center;
  min-height: 0;
  height: 30px;
  border-radius: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-row3 .pc-rec-btn {
  padding: 0 8px; font-size: 10.5px;
}
body.admin #view-a-pricing #admin-pricing-list .price-card .pc-row3 .pc-save {
  padding: 0 11px; font-size: 11.5px; box-shadow: none;
}

/* ============================================================
   用户页 · 高度压缩（用户卡片 / 统计卡片 / 搜索框间距）
   ① 用户卡片：内边距、次行留白、统计与操作行间距、按钮高度全面收紧；
   ② 列表容器：#admin-users-list 带 .note.state，其 padding:32px 0 是
      「搜索框 ↔ 第一张卡片」大间隔的根因，这里清零（空态靠 min-height 兜底）；
   ③ 列表头（含搜索框）：底部外边距 12 → 6px，进一步贴近卡片；
   ④ 顶部统计卡片：内边距/数字字号/行间距整体收小。
   选择器带 #view-a-users / #admin-users-list 提升权重，置于文件末尾覆盖，
   零逻辑改动。
   ============================================================ */
/* ---------- ① 用户卡片：再压一档 ---------- */
body.admin #admin-users-list { gap: 8px; }
body.admin #admin-users-list .admin-user-card {
  padding: 8px 10px;
  border-radius: 13px;
  margin-bottom: 0;       /* 卡片间距由列表 gap 统一控制 */
}
body.admin #admin-users-list .admin-user-card .auc-title { font-size: 13.5px; gap: 5px; }
body.admin #admin-users-list .admin-user-card .auc-id { padding: 1px 7px; font-size: 10px; }
body.admin #admin-users-list .admin-user-card .pill-admin { font-size: 10px; padding: 2px 8px; }
body.admin #admin-users-list .admin-user-card .auc-sub {
  margin-top: 5px;
  padding: 5px 9px;
}
body.admin #admin-users-list .admin-user-card .auc-foot { margin-top: 6px; }
body.admin #admin-users-list .admin-user-card .ui-actions {
  margin-top: 6px;
  padding-top: 6px;
}
body.admin #admin-users-list .admin-user-card .ui-actions .admin-btn,
body.admin #admin-users-list .admin-user-card .ui-actions .sys-acct {
  height: 28px;
  line-height: 28px;
  font-size: 11px;
  border-radius: 8px;
}

/* ---------- ② 列表容器：清掉 .note.state 的 32px 上下内边距 ---------- */
body.admin #admin-users-list.note.state {
  padding: 0 0 2px;
}

/* ---------- ③ 列表头（标题 + 搜索框）与列表的间隔 ---------- */
body.admin #view-a-users .users-list-head { margin: 0 0 6px; }
body.admin #view-a-users .users-list-head .sec-head { margin: 0 0 6px; }
body.admin #view-a-users .users-list-head .admin-search { margin-bottom: 0; }

/* ---------- ④ 顶部统计卡片（类型筛选 chips）：降低高度 ---------- */
body.admin #view-a-users .u-stat-row { margin: 0 0 8px; gap: 5px; }
body.admin #view-a-users .u-stat {
  padding: 8px 3px;
  border-radius: 11px;
}
body.admin #view-a-users .u-stat b { font-size: 16px; }
body.admin #view-a-users .u-stat span { font-size: 10px; margin-top: 1px; }

/* ---------- 超窄屏（≤360px）：同比例收紧 ---------- */
@media (max-width: 360px) {
  body.admin #admin-users-list .admin-user-card { padding: 7px 9px; }
  body.admin #admin-users-list .admin-user-card .ui-actions .admin-btn,
  body.admin #admin-users-list .admin-user-card .ui-actions .sys-acct {
    height: 27px;
    line-height: 27px;
    font-size: 10px;
  }
  body.admin #view-a-users .u-stat { padding: 7px 2px; }
  body.admin #view-a-users .u-stat b { font-size: 15px; }
}

/* ============================================================
   兑换码页 · 「新建兑换码」卡片改为三行布局
   第 1 行：套餐分类（单行横向滑动 chips）
   第 2 行：选择套餐下拉框（整行）
   第 3 行：数量步进器 + 批量生成按钮
   去掉两个字段标签（选择套餐 / 生成数量），行间只靠 .cc-fields 的 gap
   分隔，整体更简洁；分类行保持 nowrap，分类再多也不会撑成多行。
   置于文件末尾覆盖，零逻辑改动。
   ============================================================ */
/* 第 1 行：分类 chips —— 去掉 .pricing-cats 自带的外边距，收紧 chip */
body.admin #view-a-codes .create-code-card .cc-row-cat .pricing-cats { margin: 0; gap: 6px; }
/* 分类行/chips 为空（无套餐或加载失败）时整行隐藏：
 * .cc-row 的 display:block 与 .pricing-cats 的 display:flex 都会顶掉
 * [hidden] 的默认 display:none，这里显式声明，避免空行残留间距 */
body.admin #view-a-codes .create-code-card .cc-row-cat[hidden],
body.admin #view-a-codes .create-code-card .cc-row-cat .pricing-cats[hidden] { display: none; }
body.admin #view-a-codes .create-code-card .cc-row-cat .pc-cat {
  padding: 6px 12px;
  font-size: 12px;
}
/* 第 3 行：数量与按钮居中对齐（去掉标签后不再需要底对齐） */
body.admin #view-a-codes .create-code-card .cc-row-action {
  align-items: center;
  gap: 8px;
}

/* ============================================================
   订单页 · 订单卡片：高度压缩约 1/3 + 字号优化
   ① 卡片内边距 / 圆角收紧，列表行距同步减小；
   ② 金额与「退单」按钮改为横向并排（原先竖排把卡片右半区撑高），
      右侧高度由「金额 + 按钮」两行降为一行；
   ③ 字号整体下调一档并统一，行高收紧，保证信息清晰不拥挤。
   选择器带 #view-a-purchases #admin-purchase-list 双 id +
   .purchase-card，稳定覆盖此前所有层（含 4427 等 .purchase-card 层）。
   置于文件末尾，零逻辑改动。
   ============================================================ */

/* ---------- 列表容器：行距收紧 ---------- */
body.admin #view-a-purchases #admin-purchase-list { gap: 8px; }

/* ---------- 卡片外壳：更薄的内边距与圆角 ---------- */
body.admin #view-a-purchases #admin-purchase-list .purchase-card {
  padding: 9px 11px;
  border-radius: 13px;
}

/* ---------- 行 1：套餐名 + 来源/续费标签 + 状态徽标 ---------- */
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-top { gap: 8px; }
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-name {
  font-size: 12.5px;
  gap: 5px;
  line-height: 1.3;
}
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-renew,
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-src {
  font-size: 9.5px;
  padding: 1px 6px;
}
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-status {
  font-size: 11px;
  padding: 2px 9px;
  gap: 4px;
}
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-status i {
  width: 6px;
  height: 6px;
}

/* ---------- 行 2：买家 / 订单号 ---------- */
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-buyer {
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.35;
}

/* ---------- 行 3：时间 + 金额 / 退单 ---------- */
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-foot {
  margin-top: 6px;
  padding-top: 6px;
  align-items: center;
}
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-time {
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.3;
}
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-code {
  font-size: 11px;
  margin-top: 3px;
}
/* 金额与退单按钮并排（关键：消除右侧竖排撑高） */
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-amount {
  font-size: 16px;
}
body.admin #view-a-purchases #admin-purchase-list .purchase-card .pur-refund {
  min-height: 24px;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 7px;
}

/* ============================================================
   总览页 · 排版重构（v19）
   ------------------------------------------------------------
   零逻辑改动，仅调整信息分组与视觉节奏：
   ① 去掉重复数值：原「营收概况」双卡与「营收明细」三行里，
      「已支付营收＝已支付订单金额」「今日入账」共重复出现三处。
      现合并为「一张营收主卡 + 一个订单数据网格」，每个数字只出现一次。
   ② 节奏统一：经营概况 → 核心指标 → 每日营收 三个模块，
      统一 16px 模块间距与「小标题 + 细线」的模块头。
   ③ 尺寸均衡：核心指标由 4 列拥挤小卡改为 2×2 数据网格；
      列宽用 minmax(0, 1fr) 兜底，任何屏宽都不会横向溢出、不掉字。
   选择器统一带 #view-a-overview（双 id/类提升权重）并置于文件末尾，
   可稳定覆盖此前所有层。
   ============================================================ */

/* ---------- 页头 ---------- */
body.admin #view-a-overview .page-head { padding: 14px 2px 12px; }

/* ---------- 模块节奏：与其它管理页保持一致的间距与标题层级 ---------- */
body.admin #view-a-overview .admin-module + .admin-module { margin-top: 16px; }
body.admin #view-a-overview .module-head { margin-bottom: 8px; }
body.admin #view-a-overview .module-title { font-size: 12.5px; color: #9fb0c7; }
body.admin #view-a-overview .module-sub { font-size: 10px; }

/* ---------- ① 营收主卡：全页唯一的营收金额展示位 ---------- */
body.admin #view-a-overview .ov-hero {
  position: relative; overflow: hidden;
  border-radius: 16px;
  padding: 14px 16px 15px;
  margin-bottom: 10px;
  background: linear-gradient(150deg, #065f46 0%, #0d7c67 100%);
  border: 1px solid #14604a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.admin #view-a-overview .ov-hero-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.admin #view-a-overview .ov-hero-lb {
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.78);
}
body.admin #view-a-overview .ov-hero-today {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: #a7f3d0;
  background: rgba(0, 0, 0, 0.22); border-radius: 999px; padding: 3px 9px;
  white-space: nowrap;
}
body.admin #view-a-overview .ov-hero-today b {
  color: #ecfdf5; font-weight: 800; font-variant-numeric: tabular-nums;
}
body.admin #view-a-overview .ov-hero-num {
  margin-top: 5px;
  font-size: clamp(26px, 7.8vw, 32px); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.6px; color: #f0fdf9;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
  overflow-wrap: anywhere;
}

/* ---------- 数据条（订单概况 / 核心指标 / 运营概况共用同一套规格） ----------
   4 列紧凑条：1px gap 配深色底即成分隔线，数字居中、标签压在下方，
   比 2×2 空卡更密集、更像仪表盘；minmax(0,1fr) 兜底任何屏宽不横向溢出。 ---------- */
body.admin #view-a-overview .ov-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #334155;
  border: 1px solid #334155;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
body.admin #view-a-overview .ov-cell {
  min-width: 0;
  padding: 10px 4px 9px;
  background: #1e293b;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
body.admin #view-a-overview .ov-num {
  max-width: 100%;
  font-size: clamp(13.5px, 4.2vw, 16px); font-weight: 800; line-height: 1.2;
  letter-spacing: -0.2px; color: #e8eef7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.admin #view-a-overview .ov-lb {
  max-width: 100%;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.2px; color: #8b9cb3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 组内小标题：细线收尾，层级轻于模块头 */
body.admin #view-a-overview .ov-sub {
  display: flex; align-items: center; gap: 8px;
  margin: 11px 2px 6px;
  font-size: 11px; font-weight: 700; color: #9fb0c7; letter-spacing: 0.3px;
}
body.admin #view-a-overview .ov-sub::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.14), transparent);
}
body.admin #view-a-overview .ov-sub:first-of-type { margin-top: 0; }
/* 数字配色：与指标语义对应，整体保持克制 */
body.admin #view-a-overview .ov-num.t-green { color: #34d399; }
body.admin #view-a-overview .ov-num.t-blue { color: #60a5fa; }
body.admin #view-a-overview .ov-num.t-sky { color: #38bdf8; }
body.admin #view-a-overview .ov-num.t-amber { color: #fbbf24; }
body.admin #view-a-overview .ov-num.t-red { color: #f87171; }

/* ---------- ④ 每日营收：与上方卡片统一为扁平实色 ---------- */
body.admin #view-a-overview #admin-rev-daily.rev-daily { margin-top: 0; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail::-webkit-scrollbar { display: none; height: 0; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc {
  flex: 0 0 auto; min-width: 76px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 10px 9px;
  background: #1e293b; border: 1px solid #334155; border-radius: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc .rdc-tag {
  font-size: 10.5px; font-weight: 700; color: #94a3b8; letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc .rdc-amt {
  font-size: 14.5px; font-weight: 800; color: #e2e8f0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.has .rdc-amt { color: #34d399; }
/* 净额为负（当日退款 > 收款）：红色金额 + 淡红描边，一眼识别异常日 */
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.neg { border-color: rgba(248, 113, 113, 0.38); }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.neg .rdc-amt { color: #f87171; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.neg .rdc-orders { color: #fca5a5; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc .rdc-orders {
  font-size: 10px; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 今日卡：淡蓝描边突出，但不抢营收主卡的分量 */
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today {
  border-color: #38bdf8; background: #14293a;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today .rdc-tag { color: #38bdf8; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today .rdc-amt { color: #7dd3fc; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc.today .rdc-orders { color: #60a5fa; }

/* ---------- 窄屏（≤380px）：整体同比例收紧一档 ---------- */
@media (max-width: 380px) {
  body.admin #view-a-overview .ov-cell { padding: 9px 3px 8px; }
  body.admin #view-a-overview .ov-lb { font-size: 9px; }
  body.admin #view-a-overview .ov-hero { padding: 13px 14px 14px; }
  body.admin #view-a-overview .ov-hero-num { font-size: 26px; }
  body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc { min-width: 70px; padding: 9px 9px 8px; }
}

/* ============================================================
   管理员底部导航 · 遮挡修复（v20）
   ------------------------------------------------------------
   问题定位（真机视口实测）：
   管理端底栏有 6 个 Tab（比用户端多一个「设置」），每个按钮还带
   2px 外边距 + 4px 左右内边距。在 ≤340px 窄屏（或系统字体放大）时，
   3 字标签「兑换码」宽度不足被折成两行，底栏高度由 72px 涨到 88px；
   而 body 只预留了写死的 88px，于是底栏顶边上移压住最后一行内容。
   另外：全局选中态指示条定位为 bottom:6px / 高 3px（占 6–9px 区间），
   用户端 Tab 的底内边距是 10px 刚好容得下；而管理端为塞下 6 个 Tab
   把底内边距压到 5px，导致**指示条压在文字上**，选中特效被「遮挡」。
   修复：
     ① 标签一律禁止换行 → 底栏高度恒定，不再随文字折行长高；
     ② 管理端 Tab 收紧左右边距与字号 → 320px 宽也能单行排下；
     ③ 选中态对齐用户端底栏（柔和渐变微底 + 顶部高光 + 底部短指示条），
        并把底内边距恢复到 10px，给指示条让位，不再压字；
     ④ 内容底部预留改为「由底栏高度推导」（变量化），不再写死 88px，
        预留量 = 栏高 + 16px 悬浮偏移 + 24px 视觉间隙。
   置于文件末尾覆盖此前所有层，零逻辑改动。
   ============================================================ */

/* ① 标签单行：从根上切断「折行 → 底栏变高 → 压住内容」的连锁问题 */
.tab-btn { white-space: nowrap; }

/* ② 管理端 Tab：只收紧左右，底内边距保持 10px（与用户端一致，给指示条让位） */
body.admin #tabbar-admin.tabbar { padding: 6px 5px; }
body.admin #tabbar-admin .tab-btn {
  margin: 2px 1px;
  padding: 6px 1px 10px;
  font-size: 11px;
}
body.admin #tabbar-admin .tab-btn span { font-size: 18px; }

/* ③ 选中态：与普通用户底栏同款效果（柔和渐变微底 + 顶部高光 + 底部短指示条） */
body.admin #tabbar-admin .tab-btn.active {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.08));
  border: none;                    /* 去掉 1px 边框：避免选中瞬间内容盒变化导致文字抖动 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #6ee7b7;
}
body.admin #tabbar-admin .tab-btn.active::after {
  content: ''; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 16px; height: 3px; border-radius: 3px;
  background: #34d399; opacity: 0.95;
}
body.admin #tabbar-admin .tab-btn.active span { transform: translateY(-2px) scale(1.05); }

/* ③ 内容底部预留：由底栏高度推导，避免两处写死值互相脱节 */
body.admin {
  --admin-tabbar-h: 80px;   /* 6 Tab 单行时底栏高度上限（含边框与选中指示条占位，留余量） */
  padding-bottom: calc(var(--admin-tabbar-h) + 40px);   /* + 16px 悬浮偏移 + 24px 视觉间隙（底栏上方还有 12px 投影） */
}
/* 底部留白统一交给 body 预留，避免 #app 与底栏两处叠加/脱节 */
body.admin #app { padding-bottom: 0; }

/* ④ 极窄屏（≤360px）：图标与标签略收，保证 6 个 Tab 依旧单行、不拥挤 */
@media (max-width: 360px) {
  body.admin #tabbar-admin.tabbar { padding: 6px 4px; }
  body.admin #tabbar-admin .tab-btn { font-size: 10.5px; }
  body.admin #tabbar-admin .tab-btn span { font-size: 17px; }
}

/* ============================================================
   管理 · 系统设置页 · 与管理端既有零件对齐（v22）
   ------------------------------------------------------------
   上一版只在设置页内部做了统一，未与其它管理页对齐。实测对比兑换码页
   （同为「表单 + 列表」页）后确认三处「大一号」，根因是设置页用了
   用户端的大号组件而非管理端零件：
     · 卡片    15px 内边距 / 16px 圆角  → 原生 9~11px / 13px
     · 输入框  38px 高 / 底 #16202e     → 原生 31px / 底 #0f172a
     · 按钮    用户端 .btn 48px/圆角 14 → 管理端 .admin-btn 32~36px
   本层改为完整复用管理端既有零件（DOM 也已改为总览页同款「模块头 + 卡片」）：
     ① 模块头：.admin-module + .module-head（小标题 + 右侧 .module-sub 徽标，
        徽标即「配置来源」），不引入任何自定义头部结构。
     ② 卡片：padding 10px 12px 12px / radius 13px（对齐兑换码「新建」卡）。
     ③ 字段标签 10.5px #64748b、输入框 31px/12.5px/radius 9px/底 #0f172a
        —— 与 .form-select 完全一致。
     ④ 按钮：改用 .admin-btn（-solid 主按钮 / -green 次按钮），高度 31~32px，
        与输入框同一节奏；顺带消除了上一版 .btn-secondary 无样式导致的
        「白底浅字」问题。
     ⑤ 说明文字 11px #8b9bb0，与定价卡 .pc-spec 同级。
   仅作用于 #view-a-settings，置于文件末尾覆盖此前所有层。
   ============================================================ */

/* ---------- ① 模块头：来源徽标直接复用 .module-sub（绿色=数据库配置） ---------- */
body.admin #view-a-settings .module-sub {
  color: #6ee7b7; background: rgba(16, 185, 129, 0.14);
}
body.admin #view-a-settings .module-sub.env {
  color: #94a3b8; background: rgba(148, 163, 184, 0.12);
}

/* ---------- ② 卡片：对齐兑换码「新建」卡规格 ---------- */
body.admin #view-a-settings .cfg-card {
  padding: 10px 12px 12px;
  border-radius: 13px;
}

/* ---------- ③ 说明 / 字段标签 / 输入框 ---------- */
body.admin #view-a-settings .cfg-desc {
  margin: 0; font-size: 11px; line-height: 1.55; color: #8b9bb0;
}
body.admin #view-a-settings .cfg-lb {
  display: block;
  margin: 11px 0 4px;
  font-size: 10.5px; font-weight: 600; color: #64748b; letter-spacing: .2px;
}
body.admin #view-a-settings .cfg-key {
  margin-left: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: #475569;
}
body.admin #view-a-settings .cfg-card input {
  width: 100%; box-sizing: border-box;
  height: 31px; min-height: 31px;
  padding: 0 9px;
  font-family: var(--font); font-size: 12.5px;
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 9px;
}
body.admin #view-a-settings .cfg-card input::placeholder { color: #64748b; }
body.admin #view-a-settings .cfg-card input:focus {
  outline: none; border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* 令牌框：右侧留出 👁 的位置 */
body.admin #view-a-settings .cfg-pwd { position: relative; }
body.admin #view-a-settings .cfg-pwd input { padding-right: 38px; }
body.admin #view-a-settings .cfg-pwd .eye { right: 2px; font-size: 14px; color: #94a3b8; }

/* ---------- ④ 操作行：管理端 .admin-btn，与输入框同节奏 ---------- */
body.admin #view-a-settings .cfg-actions .admin-btn,
body.admin #view-a-settings .cfg-row .admin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 12.5px; font-weight: 700;
}
body.admin #view-a-settings .cfg-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 12px;
}
body.admin #view-a-settings .cfg-actions .admin-btn {
  min-height: 32px; height: 32px; padding: 0 12px;
}
body.admin #view-a-settings .cfg-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 8px; margin-top: 0;
}
body.admin #view-a-settings .cfg-row .admin-btn {
  min-height: 31px; height: 31px; padding: 0 16px;
}

body.admin #view-a-settings .field-err { margin-top: 7px; }
body.admin #view-a-settings .admin-exit { margin-top: 16px; }

/* 极窄屏（≤340px）：按钮行退回上下排列，避免文字被压 */
@media (max-width: 340px) {
  body.admin #view-a-settings .cfg-actions { grid-template-columns: 1fr; }
  body.admin #view-a-settings .cfg-row { grid-template-columns: 1fr; }
  body.admin #view-a-settings .cfg-row .admin-btn { width: 100%; }
}

/* ============================================================
   管理 · 用户管理页 · 操作按钮缩小（v23）
   ------------------------------------------------------------
   现象：用户卡片里那一排操作按钮（充值 / 清空钱包 / 跳转登录 / 禁用 /
   重置密码 / 解锁）明显偏大，与卡片里 11px 的正文不成比例。
   两个根因：
     ① 全局 body.admin .admin-btn 带 min-height: 36px，而后面几层压缩
        样式只写了 height: 28px —— min-height 优先级更高把 height 顶掉，
        所以按钮实测一直是 36px（同排 .sys-acct 没有 min-height 才是 28px）。
     ② 原样式给按钮设了 flex:1 1 0 + width:0（强制等宽），6 个按钮时每个
        仅约 52px，4 字标签（重置密码 / 清空钱包）放不下 → 被省略号截断。
   修复：
     · min-height:0 让压缩尺寸真正生效，按钮收到 28px / 11px（≤360px 26px/10px）；
     · 改为 flex:1 1 auto + min-width:fit-content 按内容分配宽度，
       6 个按钮在 390px 下实测总宽约 282px < 340px，仍是一行且不再截断；
     · 同时允许换行，极窄屏放不下时自动折成两行，而不是压掉文字。
   仅作用于 #admin-users-list 内的操作行，置于文件末尾覆盖。
   ============================================================ */
body.admin #admin-users-list .admin-user-card .ui-actions {
  flex-wrap: wrap;                    /* 放不下时折行，而不是压缩文字 */
  gap: 4px;                           /* 列间距收紧，给 6 个按钮留出单行空间 */
  row-gap: 5px;
}
body.admin #admin-users-list .admin-user-card .ui-actions .admin-btn,
body.admin #admin-users-list .admin-user-card .ui-actions .sys-acct {
  min-height: 0;                      /* 关键：覆盖 .admin-btn 的 min-height:36px，否则 height 不生效 */
  flex: 1 1 auto;                     /* 按内容宽度分配（替代原来的 flex:1 1 0 等宽） */
  width: auto;                        /* 覆盖原来的 width:0 */
  min-width: fit-content;             /* 不因压缩而截断文字 */
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  font-size: 11px;
  border-radius: 8px;
}

/* 极窄屏（≤360px）：再收一档 */
@media (max-width: 360px) {
  body.admin #admin-users-list .admin-user-card .ui-actions .admin-btn,
  body.admin #admin-users-list .admin-user-card .ui-actions .sys-acct {
    height: 26px;
    line-height: 26px;
    padding: 0 5px;
    font-size: 10px;
  }
}

/* ============================================================
   总览页 v24 —— 总营收卡精修 + 指标四分类 + 钱包余额排行
   ------------------------------------------------------------
   ① 总营收主卡：加顶部/右下装饰光斑与细描边，金额排版更聚焦；
   ② 指标重新分组为「营收 / 订单 / 用户 / 其他」四组
      （分组小标题复用 .ov-sub，网格复用 .ov-grid/.ov-cell，仅补组间距）；
   ③ 新增「钱包余额」列表：排名徽标 + 名称/邮箱 + 余额，前三名高亮。
   全部选择器带 #view-a-overview，置于文件末尾可稳定覆盖此前所有层。
   ============================================================ */

/* ---------- ① 总营收主卡：更聚焦的经营仪表 ---------- */
body.admin #view-a-overview .ov-hero {
  padding: 16px 18px 18px;
  border-radius: 18px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(52, 211, 153, 0.30) 0%, rgba(52, 211, 153, 0) 55%),
    linear-gradient(150deg, #064e3b 0%, #0b6b58 58%, #0a7a5f 100%);
  border: 1px solid rgba(16, 185, 129, 0.34);
  box-shadow: 0 10px 26px rgba(3, 30, 24, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* 右下角装饰光斑 */
body.admin #view-a-overview .ov-hero::after {
  content: ''; position: absolute; right: -46px; bottom: -58px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.22) 0%, rgba(110, 231, 183, 0) 68%);
  pointer-events: none;
}
body.admin #view-a-overview .ov-hero-head { position: relative; z-index: 1; }
body.admin #view-a-overview .ov-hero-lb {
  display: inline-flex; flex-direction: column; gap: 1px;
  font-size: 12.5px; font-weight: 700; color: rgba(236, 253, 245, 0.94);
}
body.admin #view-a-overview .ov-hero-lb-sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(167, 243, 208, 0.72);
}
body.admin #view-a-overview .ov-hero-today {
  font-weight: 700; color: #d1fae5;
  background: rgba(4, 47, 37, 0.5);
  border: 1px solid rgba(110, 231, 183, 0.22);
}
body.admin #view-a-overview .ov-hero-num {
  position: relative; z-index: 1;
  margin-top: 8px;
  font-size: clamp(28px, 8.4vw, 34px);
  letter-spacing: -1px; color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

/* ---------- ② 指标四分类：组间距（首组贴紧模块头） ---------- */
body.admin #view-a-overview .ov-sub { margin: 14px 2px 7px; }
body.admin #view-a-overview .admin-module .module-head + .ov-sub { margin-top: 0; }

/* ---------- ③ 钱包余额排行：卡片列表 ---------- */
body.admin #view-a-overview .wallet-rank {
  display: flex; flex-direction: column; gap: 1px;
  background: #334155; border: 1px solid #334155; border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
/* 加载 / 空 / 错态：复用状态样式并清零 grid 背景 */
body.admin #view-a-overview .wallet-rank.note.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 92px; padding: 22px 14px;
  background: transparent; border: none;
  color: #94a3b8; font-size: 12.5px; text-align: center;
}
body.admin #view-a-overview .wallet-rank .state-emoji { font-size: 20px; }
body.admin #view-a-overview .wallet-rank .wr-item {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; padding: 10px 12px;
  background: #1e293b;
}
body.admin #view-a-overview .wallet-rank .wr-rank {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  font-variant-numeric: tabular-nums;
}
/* 前三名：绿色渐变徽标 */
body.admin #view-a-overview .wallet-rank .wr-item.wr-top .wr-rank {
  color: #052e22;
  background: linear-gradient(135deg, #6ee7b7, #34d399);
}
body.admin #view-a-overview .wallet-rank .wr-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
body.admin #view-a-overview .wallet-rank .wr-name {
  font-size: 13px; font-weight: 700; color: #e8eef7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.admin #view-a-overview .wallet-rank .wr-mail {
  font-size: 10.5px; color: #7c8ba1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.admin #view-a-overview .wallet-rank .wr-amt {
  flex: 0 0 auto;
  font-size: 14px; font-weight: 800; color: #34d399;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.admin #view-a-overview #admin-wallet-more { margin-top: 10px; }

/* ---------- 窄屏（≤380px）：整体同比例收紧一档 ---------- */
@media (max-width: 380px) {
  body.admin #view-a-overview .ov-hero { padding: 14px 15px 16px; }
  body.admin #view-a-overview .ov-hero-num { font-size: 27px; }
  body.admin #view-a-overview .wallet-rank .wr-item { padding: 9px 10px; }
  body.admin #view-a-overview .wallet-rank .wr-name { font-size: 12.5px; }
  body.admin #view-a-overview .wallet-rank .wr-amt { font-size: 13px; }
}

/* ============================================================
   钱包在线充值 + 管理端「充值」页（v23）
   ------------------------------------------------------------
   底栏新增第 8 个 Tab 后，原先 6/7 Tab 的间距已偏宽，
   这里把管理端底栏整体再压一档（标签 2 字仍单行不换行）。
   ============================================================ */
body.admin #tabbar-admin .tab-btn {
  margin: 2px 0;
  padding: 6px 0 10px;
  font-size: 10.5px;
}
body.admin #tabbar-admin .tab-btn span { font-size: 17px; }
@media (max-width: 360px) {
  body.admin #tabbar-admin .tab-btn { font-size: 10px; letter-spacing: -0.2px; }
  body.admin #tabbar-admin .tab-btn span { font-size: 16px; }
}

/* ---- 用户端 · 我的钱包卡片上的「＋ 充值」按钮 ---- */
.wallet-btn-row { position: relative; z-index: 1; margin-top: 12px; }
.wallet-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 18px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.3px;
  color: #0369a1; background: rgba(255,255,255,0.94);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(2,132,199,0.28);
  transition: transform .14s var(--ease-spring), background .18s var(--ease);
}
.wallet-btn:active { transform: scale(0.97); background: #fff; }

/* 三态容器：显式声明，避免被 .pay-box 的其它 display 规则覆盖 */
#recharge-pick[hidden], #recharge-pay[hidden], #recharge-done[hidden] { display: none !important; }

/* ---- 用户端 · 充值弹窗：扫码支付态 ---- */
.rpay-amount {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  margin: 6px 0 12px; color: #0f172a;
}
.rpay-amount span { font-size: 17px; font-weight: 700; }
.rpay-amount b { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.rpay-qr {
  display: flex; align-items: center; justify-content: center;
  width: 214px; height: 214px; margin: 0 auto;
  padding: 12px; background: #fff; border-radius: 14px;
  border: 1px solid #e5e7eb; box-shadow: 0 6px 18px rgba(2,6,16,0.08);
}
.rpay-qr canvas, .rpay-qr img { display: block; }
.rpay-qr-fail { font-size: 11.5px; color: #94a3b8; text-align: center; line-height: 1.6; }
.rpay-tip { margin: 12px 0 4px; font-size: 12px; color: #64748b; line-height: 1.7; text-align: center; }
.rpay-count { margin: 0 0 14px; font-size: 11.5px; color: #94a3b8; text-align: center; font-variant-numeric: tabular-nums; }
.rpay-link {
  display: block; margin-top: 12px; font-size: 11.5px; color: #0ea5e9;
  text-decoration: none; text-align: center;
}
.rpay-link:active { opacity: .7; }

/* ---- 用户端 · 充值弹窗面额选择 ---- */
.recharge-opts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.recharge-opt {
  flex: 1 1 calc(33.333% - 10px); min-width: 92px; min-height: 46px;
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #0f172a; background: #f1f5f9;
  border: 1.5px solid transparent; border-radius: 13px; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.recharge-opt.active {
  color: #047857; background: #ecfdf5; border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16,185,129,0.18);
}
.recharge-empty {
  display: block; width: 100%; padding: 14px 0; text-align: center;
  font-size: 12.5px; color: #94a3b8;
}

/* ---- 管理端 · 充值页：面额配置 ---- */
.rp-card { margin-bottom: 12px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rp-title { font-size: 13px; font-weight: 800; color: #e8eef7; }
.rp-sub { font-size: 11px; color: #64748b; }
.rp-form { display: flex; gap: 8px; align-items: center; }
.rp-input {
  flex: 1 1 0; min-width: 0; height: 32px; padding: 0 10px;
  font-size: 12.5px; color: #e8eef7; background: #0f172a;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; outline: none;
}
.rp-input:focus { border-color: rgba(16,185,129,0.55); }
.rp-input-amt { flex: 0 0 96px; }
.rp-form .admin-btn { flex: 0 0 auto; height: 32px; min-height: 0; }
.rp-tip { margin: 9px 0 2px; font-size: 10.5px; line-height: 1.6; color: #64748b; }
.rp-list { margin-top: 6px; }
.rp-empty { display: block; padding: 12px 0; font-size: 11.5px; color: #64748b; }
.rp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 2px; border-top: 1px solid rgba(255,255,255,0.06);
}
.rp-item:first-child { border-top: none; }
.rp-item-main { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
.rp-amt { font-size: 15px; font-weight: 800; color: #34d399; font-variant-numeric: tabular-nums; }
.rp-key {
  font-size: 11px; color: #7c8ba1; font-family: ui-monospace, Menlo, Consolas, monospace;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-used { font-size: 10.5px; color: #64748b; }
.rp-off-tag {
  font-size: 10px; color: #fca5a5; background: rgba(239,68,68,0.12);
  padding: 1px 6px; border-radius: 999px;
}
.rp-item-off .rp-amt { color: #64748b; }
.rp-item-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.rp-item-btns .admin-btn { height: 26px; min-height: 0; padding: 0 10px; font-size: 10.5px; }

/* ---- 管理端 · 充值页：面额卡片折叠 ---- */
#view-a-recharges .rp-toggle-head {
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  padding: 2px 2px; border-radius: 10px; transition: background .15s var(--ease);
}
#view-a-recharges .rp-toggle-head:active { background: rgba(148,163,184,0.10); }
#view-a-recharges .rp-caret {
  display: inline-block; margin-left: 7px; font-size: 10px; color: #64748b;
  transition: transform .18s var(--ease); transform-origin: 50% 50%;
}
#view-a-recharges .rp-card.rp-collapsed { display: none !important; }
#view-a-recharges .admin-module + .admin-module { margin-top: 14px; }

/* ---- 管理端 · 充值页：概览四格（窄屏也不横向溢出） ---- */
#view-a-recharges .rchg-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: #334155; border: 1px solid #334155; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
#view-a-recharges .rchg-cell {
  min-width: 0; padding: 10px 4px 9px; background: #1e293b;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
#view-a-recharges .rchg-num {
  max-width: 100%; font-size: clamp(13px, 3.9vw, 16px); font-weight: 800; line-height: 1.2;
  letter-spacing: -0.2px; color: #e8eef7; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-a-recharges .rchg-num.t-green { color: #34d399; }
#view-a-recharges .rchg-num.t-sky { color: #38bdf8; }
#view-a-recharges .rchg-lb {
  max-width: 100%; font-size: 10px; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-a-recharges .rchg-cnt { font-size: 9.5px; font-style: normal; color: #475569; }

/* ---- 管理端 · 充值页：记录条目（单行三段式，超长内容省略而非撑宽） ---- */
#view-a-recharges .rchg-item {
  padding: 10px 12px; margin-bottom: 8px;
  background: #131c2b; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
}
#view-a-recharges .rchg-main {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0;
}
#view-a-recharges .rchg-badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
#view-a-recharges .rchg-badge.admin { color: #93c5fd; background: rgba(59,130,246,0.16); }
#view-a-recharges .rchg-badge.online { color: #6ee7b7; background: rgba(16,185,129,0.16); }
#view-a-recharges .rchg-email {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  font-size: 12px; font-weight: 700; color: #e8eef7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-a-recharges .rchg-amt {
  flex: 0 0 auto; margin-left: auto;
  font-size: 14px; font-weight: 800; color: #34d399; font-variant-numeric: tabular-nums;
}
#view-a-recharges .rchg-sub, #view-a-recharges .rchg-time {
  flex: 1 1 100%; min-width: 0; font-size: 10.5px; color: #64748b;
  overflow-wrap: anywhere; word-break: break-all;
}
#view-a-recharges .load-more { width: 100%; max-width: 100%; min-width: 0; margin-top: 10px; }
body.admin .admin-btn-danger { color: #fca5a5; border-color: rgba(239,68,68,0.35); }

/* 面额表单：极窄屏自动换行，避免三个控件挤在一行溢出 */
@media (max-width: 380px) {
  #view-a-recharges .rp-form { flex-wrap: wrap; }
  #view-a-recharges .rp-input { flex: 1 1 100%; }
  #view-a-recharges .rp-input-amt { flex: 1 1 0; }
  #view-a-recharges .rp-form .admin-btn { flex: 0 0 auto; }
}

/* ============================================================
   消息中心（用户端公告 + 管理端消息公告）
   ------------------------------------------------------------
   配色只用 var(--c-*)，因此在管理端深色主题下自动适配。
   ============================================================ */

/* ---------- 顶栏铃铛 + 未读数字红点 ---------- */
.msg-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring), background 0.15s var(--ease);
}
.msg-bell:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.32); }
.msg-dot {
  position: absolute;
  top: -4px;
  right: -7px;
  z-index: 2;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: #ef4444;
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}
.msg-dot.hidden { display: none !important; }

/* ---------- 首页公告条 ---------- */
.home-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 13px 14px;
  text-align: left;
  font-family: inherit;
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  box-shadow: var(--c-shadow);
  cursor: pointer;
  transition: transform 0.14s var(--ease-spring), box-shadow 0.18s var(--ease);
}
.home-notice:active { transform: scale(0.985); }
.home-notice.hidden { display: none !important; }
.home-notice .hn-ic { font-size: 19px; flex-shrink: 0; }
.home-notice .hn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-notice .hn-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-notice .hn-sub { font-size: 11.5px; color: var(--c-text-secondary); }
.home-notice .hn-go { font-size: 18px; color: var(--c-primary); flex-shrink: 0; }

/* ---------- 「我的」菜单里的未读数字 ---------- */
.me-item-n {
  margin-left: auto;
  margin-right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--c-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.me-item-n.hidden { display: none !important; }

/* ---------- 消息中心弹窗 ---------- */
.msg-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
  max-height: 82vh;
  background: var(--c-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.24);
  animation: popIn 0.3s var(--ease-spring);
  overflow: hidden;
}
.msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  flex-shrink: 0;
}
.msg-head-l { display: flex; align-items: center; gap: 7px; min-width: 0; }
.msg-head-ic { font-size: 17px; }
.msg-head-title { font-size: 16px; font-weight: 800; color: var(--c-text); }
.msg-head-n {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--c-red-bg);
  color: var(--c-red);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.msg-head-n.hidden { display: none !important; }
.msg-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-border-light);
  color: var(--c-text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.14s var(--ease-spring);
}
.msg-close:active { transform: scale(0.88); }
.msg-tools { padding: 0 16px 8px; flex-shrink: 0; }
.msg-readall {
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.msg-readall:disabled { opacity: 0.45; cursor: default; }
.msg-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 14px 16px;
}
.msg-list .note.state { min-height: 120px; }

/* 单条消息：未读左侧有竖条高亮，点击展开正文 */
.msg-item {
  position: relative;
  margin-bottom: 9px;
  padding: 12px 13px 12px 15px;
  border: 1px solid var(--c-border-light);
  border-radius: 14px;
  background: var(--c-surface);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.msg-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
}
.msg-item.unread { background: var(--c-primary-bg); border-color: rgba(79, 70, 229, 0.18); }
.msg-item.unread::before { background: var(--c-primary); }
.msg-item.open { border-color: rgba(79, 70, 229, 0.3); }
.msg-item-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-right: 14px;
}
.msg-item-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--c-text);
  line-height: 1.4;
}
.msg-item.unread .msg-item-title { font-weight: 800; }
.msg-item-time {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--c-text-tertiary);
}
.msg-item-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.msg-item-body {
  display: none;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--c-border);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-item.open .msg-item-body { display: block; }
.msg-item-arrow {
  position: absolute;
  top: 12px;
  right: 11px;
  font-size: 16px;
  line-height: 1;
  color: var(--c-text-tertiary);
  transition: transform 0.2s var(--ease);
}
.msg-item.open .msg-item-arrow { transform: rotate(90deg); color: var(--c-primary); }

/* 标签（用户端与管理端共用） */
.msg-tag {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
  background: var(--c-border-light);
  color: var(--c-text-secondary);
}
.msg-tag.new { background: var(--c-red-bg); color: var(--c-red); }
.msg-tag.imp { background: #fef3c7; color: #b45309; }
.msg-tag.on { background: var(--c-green-bg); color: #047857; }
.msg-tag.off { background: var(--c-border-light); color: var(--c-text-tertiary); }

/* ---------- 管理端：消息公告表单 ---------- */
body.admin #view-a-settings .cfg-card textarea.cfg-textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 8px 9px;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.6;
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 9px;
  resize: vertical;
  min-height: 76px;
}
body.admin #view-a-settings .cfg-card textarea.cfg-textarea::placeholder { color: #64748b; }
body.admin #view-a-settings .cfg-card textarea.cfg-textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.msg-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.msg-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
}
/* 覆盖设置页「cfg-card input 100% 宽高」规则，避免复选框被拉成输入框 */
body.admin #view-a-settings .cfg-card .msg-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-height: 15px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #10b981;
}
/* ---------- 重要消息强制弹窗：正文全展开 + 底部确认按钮 ---------- */
.msg-tools.hidden { display: none !important; }
.msg-item.popup {
  cursor: default;
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffbeb;
}
.msg-item.popup::before { background: #f59e0b; }
.msg-item.popup .msg-item-body { display: block; }
.msg-item.popup .msg-item-title { padding-right: 0; }
.msg-foot {
  flex-shrink: 0;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-border-light);
  background: var(--c-surface);
}
.msg-foot.hidden { display: none !important; }
.msg-ack {
  display: block;
  width: 100%;
  padding: 13px 10px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.32);
  transition: transform 0.14s var(--ease-spring), filter 0.15s var(--ease);
}
.msg-ack:active { transform: scale(0.97); filter: brightness(0.94); }
.msg-ack:disabled { opacity: 0.6; }

/* ---------- 管理端：已发布消息列表 ---------- */
.msg-list-head { margin-bottom: 10px; }
.msg-admin-list { display: flex; flex-direction: column; gap: 9px; }
.msg-admin-list .note.state { min-height: 90px; }
.msg-admin-item {
  padding: 11px 12px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.05);
}
.msg-admin-top { display: flex; align-items: baseline; gap: 8px; }
.msg-admin-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
}
.msg-admin-time { flex-shrink: 0; font-size: 10.5px; color: var(--c-text-tertiary); }
.msg-admin-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}
.msg-admin-read { margin-left: auto; font-size: 10.5px; color: var(--c-text-tertiary); }
.msg-admin-body {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-admin-ops { display: flex; gap: 7px; margin-top: 10px; }
.msg-admin-ops .admin-btn { flex: 1; }

/* 普通用户端（浅色）下 .msg-tag 的固定色保持不变即可；管理端深色下轻微提亮 */
body.admin .msg-tag.imp { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
body.admin .msg-tag.on { background: rgba(16, 185, 129, 0.16); color: #34d399; }
body.admin .msg-tag.new { background: rgba(239, 68, 68, 0.16); color: #f87171; }
body.admin .msg-item { background: rgba(148, 163, 184, 0.04); }
body.admin .msg-item.unread { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.24); }
body.admin .msg-item.unread::before { background: #10b981; }
body.admin .msg-check { color: #94a3b8; }

/* ============================================================
   「调用凭证」弹窗：加宽，充分利用手机屏幕宽度
   仅作用于 #cred-mask（兑换方式选择弹窗同样用 .cred-box，不受影响）
   ============================================================ */
#cred-mask { padding: 20px 10px; }
#cred-mask .cred-box {
  max-width: 480px;
  padding: 24px 16px 20px;
}
@media (max-width: 360px) {
  #cred-mask { padding: 16px 8px; }
  #cred-mask .cred-box { padding: 20px 14px 16px; }
}

/* ============================================================
   「调用凭证」测连通：主/备地址各一个小按钮 + 结果文案
   按钮放在「标签行」和「备用地址提示行」右侧，不占 URL 的显示宽度
   ============================================================ */
.cred-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cred-test {
  flex-shrink: 0;
  border: 1px solid rgba(79, 70, 229, 0.38);
  background: #fff;
  color: var(--c-primary);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.12s var(--ease-spring), opacity 0.15s var(--ease);
}
.cred-test:active { transform: scale(0.95); background: var(--c-primary-bg); }
.cred-test:disabled { opacity: 0.55; cursor: default; }
.cred-url-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* JS 用 .hidden 隐藏备用行时，必须压过上面/原有 flex 的 display（UA 的 [hidden] 优先级低于作者样式） */
.cred-url-tip[hidden], .cred-url-row[hidden], .cred-test-out[hidden] { display: none !important; }
.cred-test-out {
  width: 100%;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-text-secondary);
  word-break: break-word;
}
.cred-test-out.testing { color: var(--c-text-tertiary); }
.cred-test-out.ok { color: #059669; }
.cred-test-out.warn { color: #b45309; }
.cred-test-out.fail { color: #dc2626; }
/* 管理端深色底（同 .cred-box 已有的深色适配口径） */
body.admin .cred-test { background: rgba(148, 163, 184, 0.08); color: #a5b4fc; border-color: rgba(148, 163, 184, 0.32); }
body.admin .cred-test-out { color: #94a3b8; }
body.admin .cred-test-out.ok { color: #34d399; }
body.admin .cred-test-out.warn { color: #fbbf24; }
body.admin .cred-test-out.fail { color: #f87171; }

/* ---------- 「测连通」与「复制」按钮尺寸统一（同高 32px / 同宽 64px / 同字号圆角） ----------
 * 两者文案字数不同（测连通 3 字、复制 2 字），靠 min-width 拉齐，视觉上完全等大。
 * 「测连通」有 1px 描边，用内边距各减 1px 抵消，保证与无描边的「复制」完全同尺寸。 */
.cred-copy,
.cred-test {
  min-width: 64px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 8px;
  letter-spacing: normal;   /* 按钮在 .cred-label 内会继承 0.3px 字距，先抹平保证等宽 */
  white-space: nowrap;
  text-align: center;
}
.cred-test { padding: 6px 13px; }
/* 管理端窄屏给「复制」放大到 40px 高时，「测连通」同步放大，保持等大 */
@media (max-width: 480px) {
  body.admin .cred-test { min-height: 40px; padding: 8px 15px; }
}

/* ============================================================
   会员优惠（VIP 折扣）
   —— 个人中心身份徽章 + 会员卡片、套餐卡片折后价、管理端活动页配置卡
   —— 折扣金额与门槛全部来自后端（/api/me.vip、/api/plans.vipPrice），前端只做展示
   ============================================================ */

/* ---------- 个人中心：身份徽章 ---------- */
.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 2.5px 9px;
  border-radius: var(--radius-pill);
  background: #f1f5f9;
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border);
}
.vip-badge.is-vip {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  color: #7c2d12;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.30);
}
.vip-badge[hidden] { display: none !important; }

/* ---------- 顶栏身份徽标（VIP / 普通用户用不同图标区分，跨页面展示） ---------- */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.5;
  padding: 2.5px 8px;
  border-radius: 8px;
  margin-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  /* 普通用户：半透明白底，弱于 VIP 的金色，一眼能区分但不抢眼 */
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.30);
}
.role-chip .rc-ic { font-size: 10.5px; line-height: 1; font-style: normal; }
.role-chip.is-vip {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  color: #7c2d12;
  border-color: rgba(251, 191, 36, 0.9);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.role-chip.is-admin {
  background: rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.35);
  margin-right: 0;
}

/* ---------- 个人中心：资料卡（资料 + 会员优惠内嵌区块 + 注册时间） ---------- */
.me-card { padding: 16px; }
.me-id {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.me-id-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.me-id-txt .profile-name { font-size: 19px; line-height: 1.3; }
.me-id .vip-badge { margin-top: 1px; flex-shrink: 0; }
/* 注册时间：资料卡的最后一行，用细分隔线收尾 */
.me-meta {
  margin: 0;
  padding: 12px 0 0;
  border-bottom: none;
  border-top: 1px solid var(--c-border-light);
  font-size: 12.5px;
}
.me-meta span { font-size: 12px; }
.me-meta b { font-weight: 600; color: var(--c-text-secondary); }

/* 会员优惠区块：内嵌在资料卡里的浅色块（不再是独立卡片，去掉阴影与白底） */
.vip-card {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #f8fafc;
  border: 1px solid var(--c-border-light);
}
.vip-card.is-vip {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: rgba(245, 158, 11, 0.40);
}
.vip-card.hidden { display: none !important; }
.vip-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.vip-card-title { font-size: 14px; font-weight: 800; color: var(--c-text); }
.vip-card-tag {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
  padding: 2.5px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.vip-card:not(.is-vip) .vip-card-tag { color: var(--c-text-secondary); background: #f1f5f9; }
.vip-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
  margin: 11px 0 8px;
}
.vip-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-accent-light), var(--c-accent));
}
.vip-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
.vip-card-foot .vip-pct { font-weight: 700; color: #b45309; }

/* ---------- 套餐卡片：折后价 + 折扣提示 ---------- */
.plan-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plan-vip-tip {
  font-size: 10.5px;
  font-weight: 700;
  color: #b45309;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.plan-vip-tip s { color: var(--c-text-tertiary); font-weight: 600; }
.plan.plan-vip { border-color: rgba(245, 158, 11, 0.5); }

/* ---------- 购买弹窗：原价 / 折扣行（无折扣时整行隐藏，不占位） ---------- */
#wpay-origin-row[hidden],
#wpay-vip-row[hidden] { display: none !important; }
#wpay-vip b { color: #b45309; }
#wpay-origin b { color: var(--c-text-secondary); font-weight: 600; }

/* ---------- 管理端：会员优惠配置卡 ---------- */
.vip-cfg-grid { grid-template-columns: 1fr 1fr; }
.vip-cfg .act-cfg-title { color: var(--c-text); }
body.admin .vip-cfg {
  background: #111c33;
  border-color: rgba(148, 163, 184, 0.22);
}
body.admin .vip-cfg .act-cfg-title { color: #f1f5f9; }
body.admin .vip-cfg .act-cfg-facts > span { background: #0f172a; }
body.admin .vip-cfg input { background: #0f172a; color: #e2e8f0; border-color: #334155; }
.act-hint.err-text { color: var(--c-red); font-weight: 700; }
body.admin .act-hint.err-text { color: #f87171; }

/* ============================================================
   管理端 · 数据总览 v2（ovp-*）
   ------------------------------------------------------------
   排版分层：① 营收 KPI（主卡 + 2 辅卡）→ ② 每日营收 → ③ 订单/用户/资源 三卡
   → ④ 钱包余额 Top。
   旧结构（.ov-hero / .ov-grid / .ov-sub）已废弃，这里用新前缀独立命名，
   避免与历史上叠加的 6 层覆盖规则互相打架。
   颜色只保留语义：绿 = 收款 / 正常，红 = 退款 / 注销，琥珀 = 待处理，蓝 = 新增。
   ============================================================ */
body.admin #view-a-overview .ovp-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body.admin #view-a-overview .ovp-kpi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px 14px;
  border-radius: 16px;
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
/* 主卡：总营收，手机端占满整行 */
body.admin #view-a-overview .ovp-kpi-main {
  grid-column: 1 / -1;
  gap: 7px;
  background: linear-gradient(150deg, #065f46 0%, #0d7c67 100%);
  border-color: #14604a;
}
body.admin #view-a-overview .ovp-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.admin #view-a-overview .ovp-lb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #9fb0c7;
}
body.admin #view-a-overview .ovp-lb em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}
body.admin #view-a-overview .ovp-kpi-main .ovp-lb { color: rgba(255, 255, 255, 0.82); }
body.admin #view-a-overview .ovp-kpi-main .ovp-lb em { color: rgba(255, 255, 255, 0.55); }
body.admin #view-a-overview .ovp-num {
  /* 金额一律单行：宁可缩字号/省略，也不要被拆成两行（¥3,280.7 / 5） */
  font-size: clamp(17px, 5.4vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.admin #view-a-overview .ovp-kpi-main .ovp-num {
  font-size: clamp(28px, 8.4vw, 34px);
  color: #f0fdf9;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}
body.admin #view-a-overview .ovp-today {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  color: #a7f3d0;
  background: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}
body.admin #view-a-overview .ovp-today b {
  color: #ecfdf5;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* 主卡底部：收款 / 退款构成 */
body.admin #view-a-overview .ovp-split {
  display: flex;
  gap: 18px;
  margin-top: 1px;
}
body.admin #view-a-overview .ovp-split > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
body.admin #view-a-overview .ovp-split i {
  font-style: normal;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
body.admin #view-a-overview .ovp-split b {
  font-size: 12.5px;
  font-weight: 700;
  color: #d1fae5;
  font-variant-numeric: tabular-nums;
}
body.admin #view-a-overview .ovp-split > span:last-child b { color: #fecaca; }
body.admin #view-a-overview .ovp-hint {
  font-size: 10px;
  line-height: 1.45;
  color: #64748b;
}

/* 区块与三张指标卡 */
body.admin #view-a-overview .ovp-block { margin-top: 12px; }
body.admin #view-a-overview .ovp-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 9px;
}
body.admin #view-a-overview .ovp-block-head h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #e2e8f0;
}
body.admin #view-a-overview .ovp-block-head > span {
  font-size: 10.5px;
  color: #7c8da6;
  text-align: right;
}
body.admin #view-a-overview .ovp-cards {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
body.admin #view-a-overview .ovp-card {
  padding: 13px 14px 14px;
  border-radius: 16px;
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
body.admin #view-a-overview .ovp-card .ovp-block-head { margin-bottom: 10px; }
body.admin #view-a-overview .ovp-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.admin #view-a-overview .ovp-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 9px 11px 10px;
  border-radius: 11px;
  background: #16213a;
  border: 1px solid rgba(148, 163, 184, 0.12);
}
body.admin #view-a-overview .ovp-metric b {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin #view-a-overview .ovp-metric span {
  font-size: 10px;
  color: #8b9cb3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.admin #view-a-overview .ovp-metric b.is-ok { color: #34d399; }
body.admin #view-a-overview .ovp-metric b.is-wait { color: #fbbf24; }
body.admin #view-a-overview .ovp-metric b.is-bad { color: #f87171; }
body.admin #view-a-overview .ovp-metric b.is-new { color: #60a5fa; }

/* ---------- 分析区：横向滑动卡片条（手机每卡 252px 横排，滑动查看）
 * 卡内改成「标签左 / 数值右」的键值行：同样的 8 个指标，不再是一个个带底色的方块，
 * 纵向长度直接砍掉 3/4（4 张卡并排滑，而不是上下排 4 段）。 ---------- */
body.admin #view-a-overview .ovp-analysis {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
}
body.admin #view-a-overview .ovp-analysis::-webkit-scrollbar { display: none; height: 0; }
body.admin #view-a-overview .ovp-analysis > .ovp-card {
  /* 210px：480 宽的 H5 里正好完整放下两张，第三张几乎不露出（避免露出半条字） */
  flex: 0 0 210px;
  padding: 12px 14px 10px;
  scroll-snap-align: start;
}
/* 窄卡里卡头只留标题，右侧口径说明会挤成两行，手机端隐藏（PC 显示） */
body.admin #view-a-overview .ovp-analysis .ovp-block-head > span { display: none; }
body.admin #view-a-overview .ovp-analysis .ovp-block-head h3 { white-space: nowrap; }
body.admin #view-a-overview .ovp-analysis .ovp-metrics {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.admin #view-a-overview .ovp-analysis .ovp-metric {
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6.5px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 0;
}
body.admin #view-a-overview .ovp-analysis .ovp-metric:last-child { border-bottom: none; }
body.admin #view-a-overview .ovp-analysis .ovp-metric b { font-size: 15.5px; text-align: right; }
body.admin #view-a-overview .ovp-analysis .ovp-metric span { font-size: 11.5px; }

/* 每日营收：外层 .ovp-block 已给间距，抵消旧规则里的 margin-top */
body.admin #view-a-overview #admin-rev-daily.rev-daily { margin-top: 0; }
body.admin #view-a-overview #admin-wallet-more { margin-top: 10px; }

/* 两个榜单：手机上下堆叠；桌面由 style-pc.css 改成并排两列 */
body.admin #view-a-overview .ovp-rank-cards {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
body.admin #view-a-overview .ovp-rank-cards > .ovp-block { margin-top: 0; }
body.admin #view-a-overview .ovp-rank-cards .load-more { margin-top: 10px; }

/* ---------- 今日速览：手机横向滑动（4 格横排，滑动查看），PC 一行 4 段 ---------- */
body.admin #view-a-overview .ovp-day {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
body.admin #view-a-overview .ovp-day::-webkit-scrollbar { display: none; height: 0; }
body.admin #view-a-overview .ovp-day-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 140px;
  min-width: 0;
  padding: 11px 13px 12px;
  border-radius: 14px;
  background: #16213a;
  border: 1px solid rgba(148, 163, 184, 0.14);
}
body.admin #view-a-overview .ovp-day-lb {
  font-size: 10.5px;
  font-weight: 600;
  color: #8b9cb3;
  letter-spacing: 0.2px;
}
body.admin #view-a-overview .ovp-day-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.admin #view-a-overview .ovp-day-num.is-ok { color: #34d399; }
body.admin #view-a-overview .ovp-day-num.is-new { color: #60a5fa; }
body.admin #view-a-overview .ovp-day-sub {
  font-size: 9.5px;
  line-height: 1.35;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.admin #view-a-overview .ovp-day-sub b { color: #94a3b8; font-weight: 700; }

/* ---------- 套餐销量 Top5 列表 ---------- */
body.admin #view-a-overview .ovp-rank {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #334155;
  border: 1px solid #334155;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
body.admin #view-a-overview .ovp-rank.note.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 20px 14px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12.5px;
  text-align: center;
}
body.admin #view-a-overview .ovp-rank .state-emoji { font-size: 20px; }
body.admin #view-a-overview .ovp-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  background: #1e293b;
}
body.admin #view-a-overview .ovp-rank-no {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  font-variant-numeric: tabular-nums;
}
body.admin #view-a-overview .ovp-rank-no.top {
  color: #052e22;
  background: linear-gradient(135deg, #6ee7b7, #34d399);
}
body.admin #view-a-overview .ovp-rank-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.admin #view-a-overview .ovp-rank-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #e8eef7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin #view-a-overview .ovp-rank-bar {
  display: block;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}
body.admin #view-a-overview .ovp-rank-bar em {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #34d399, #22d3ee);
}
body.admin #view-a-overview .ovp-rank-val {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
body.admin #view-a-overview .ovp-rank-val b {
  font-size: 12.5px;
  font-weight: 800;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
}
body.admin #view-a-overview .ovp-rank-val i {
  font-style: normal;
  font-size: 10.5px;
  color: #34d399;
  font-variant-numeric: tabular-nums;
}