@usethink/cf-admin-fe 0.1.0

package/src/styles/admin-primitives.css

@@ -0,0 +1,2006 @@
+/* ═══════════════════════════════════════════════════════
+   @usethink/cf-admin-fe — Admin primitives (from cf-shop admin.css)
+   Products import this + tokens; page-only rules stay product-local.
+   ═══════════════════════════════════════════════════════ */
+
+/* ── 页面切换过渡（Vue <Transition> 配合 AdminLayout） ── */
+.admin-fade-enter-active,
+.admin-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.admin-fade-enter-from,
+.admin-fade-leave-to {
+  opacity: 0;
+}
+
+/* ── 页面容器 ──
+ * 垂直区块间距唯一真相：--admin-stack-gap（base.css）。
+ * 子块（notice / stats / chips / table）禁止再写 margin-bottom 叠距。
+ */
+.admin-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--admin-stack-gap, 8px);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+/* ── 工具栏 ── */
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--admin-control-gap, 8px);
+  padding: var(--admin-card-pad, 10px) 12px;
+  background: var(--tg-secondary-bg, #151b28);
+  border-radius: var(--r-lg, 12px);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-control-gap, 8px);
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+ * 工具栏文本控件（input / select）垂直居中铁律：
+ * - 固定 height: 34px（border-box）时，禁止再加上下 padding（8+8 会挤爆行高导致字被圆角裁切）
+ * - 只用左右 padding；line-height = 内容高度 32px（34 − 上下 border 各 1）
+ * - 覆盖 body 的 line-height: 1.6，否则中文底沿会被裁
+ */
+.filters input:not([type='checkbox']):not([type='radio']),
+.filters select {
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--r-md, 8px);
+  /* 不透明底：半透明 surface 在暗色下易导致 select 字色发灰、选中态异常 */
+  background-color: var(--tg-secondary-bg, #151b28);
+  color: var(--tg-text, #f0f2f5);
+  -webkit-text-fill-color: var(--tg-text, #f0f2f5);
+  font-size: 13px;
+  line-height: 32px;
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 120px;
+  max-width: 260px;
+  color-scheme: dark;
+  vertical-align: middle;
+}
+
+/* 工具栏内筛选项勾选（如「仅余额 > 0」） */
+.filters .filter-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--r-md, 8px);
+  background: var(--surface, rgba(255, 255, 255, 0.04));
+  color: var(--tg-text, #f0f2f5);
+  font-size: 13px;
+  line-height: 1.3;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: none;
+  transition: background-color var(--duration-fast, 150ms) ease,
+    border-color var(--duration-fast, 150ms) ease;
+}
+
+.filters .filter-check:hover {
+  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
+  border-color: var(--border-strong, rgba(255, 255, 255, 0.16));
+}
+
+.filters .filter-check:has(input:focus-visible) {
+  border-color: var(--admin-accent, #f59e0b);
+}
+
+.filters .filter-check input[type='checkbox'] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  flex: 0 0 auto;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  min-width: 0;
+  max-width: none;
+  accent-color: var(--admin-accent, #f59e0b);
+  cursor: pointer;
+}
+
+.filters .filter-check span {
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.filters .filter-check:has(input:checked) span {
+  color: var(--tg-text, #f0f2f5);
+}
+
+.filters select {
+  /* 右侧留给箭头；上下 padding 必须保持 0（见上方铁律） */
+  padding: 0 32px 0 10px;
+  appearance: none;
+  -webkit-appearance: none;
+  /* 与 background-color 拆开写，避免 background 简写冲掉箭头 */
+  background-color: var(--tg-secondary-bg, #151b28);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 12px;
+}
+
+/* 工具栏下拉：展开项与选中态（配合 base color-scheme: dark） */
+.filters select option,
+.modal-form select option {
+  background-color: var(--tg-secondary-bg, #151b28);
+  color: var(--tg-text, #f0f2f5);
+}
+
+.filters select option:checked,
+.modal-form select option:checked {
+  background-color: var(--admin-accent-soft, rgba(245, 158, 11, 0.28));
+  color: var(--tg-text, #f0f2f5);
+}
+
+.filters .btn {
+  flex: 0 0 auto;
+  height: 34px;
+  padding: 0 14px;
+  font-size: 14px;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-inline-gap, 8px);
+  flex-shrink: 0;
+}
+
+/* ── 表格容器 ──
+ * 滚动裁剪发生在这里（overflow: auto）。sticky 表头相对 .table-wrap 吸顶。
+ * 禁止在页面 scoped 再写一套 table-wrap / th sticky。
+ */
+.table-wrap {
+  background: var(--tg-secondary-bg, #151b28);
+  border-radius: var(--r-lg, 12px);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  flex: 1;
+  min-height: 0;
+  /* 建立独立层叠上下文，避免表头与外部 sticky toolbar 抢 z-index */
+  isolation: isolate;
+}
+
+/* ── 表格 ──
+ *
+ * 【强制】sticky 表头不得透出滚动中的 tbody 文字（线上曾出现表头与行内容叠字）。
+ * 根因与禁令（必须同时满足，缺一就会复发）：
+ * 1. 表头背景必须「实色不透明」：禁止仅用 --surface-2 / rgba(255,255,255,0.07)
+ *    等半透明底；半透明会让上滑行内容从 th 底下透出来。
+ * 2. z-index 必须明显高于 tbody（含行内 .btn / .tag）：至少 5；tbody 锁在 0。
+ * 3. 使用 border-collapse: separate + border-spacing: 0（collapse 模式下部分
+ *    浏览器 sticky 边框/层叠异常，表头会被盖住或闪烁）。
+ * 4. 新 Admin 表格只许用 .table-wrap > .admin-table，禁止页内重写 th 背景为透明。
+ * 门禁：scripts/27-verify-admin-styles.mjs 会扫描半透明 th 与缺失 sticky/z-index。
+ * 规约：docs/049_Admin共享样式与开发约束规约_2026-07-23.md
+ */
+.admin-table {
+  width: 100%;
+  /* separate：sticky thead/th 在 Chrome/Safari/Firefox 行为一致；collapse 易透字/错层 */
+  border-collapse: separate;
+  border-spacing: 0;
+  /* 主字号小一号、行高紧凑：token 在 base.css --admin-font-base / --admin-cell-pad */
+  font-size: var(--admin-font-base, 13px);
+  line-height: 1.35;
+  table-layout: auto;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.admin-table th,
+.admin-table td {
+  padding: var(--admin-cell-pad, 6px 8px);
+  text-align: left;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  white-space: normal;
+  overflow-wrap: break-word;
+  min-width: 50px;
+  line-height: 1.35;
+}
+
+/* 表体整体压在表头之下，避免单元格内定位元素盖住 sticky 表头 */
+.admin-table tbody {
+  position: relative;
+  z-index: 0;
+}
+
+/*
+ * sticky 表头：唯一权威实现。
+ * background-color = 与 .table-wrap 相同的不透明底；
+ * background-image = 再叠一层 surface 色调（视觉仍偏「表头略亮」），但整体不透明。
+ * 禁止改回：background: var(--surface-2) 或任意 alpha < 1 的单层背景。
+ */
+.admin-table thead th,
+.admin-table th {
+  color: var(--tg-hint, #9aa4b2);
+  font-weight: 600;
+  font-size: var(--admin-font-sm, 11px);
+  /* 实色底：与滚动容器同色，保证上滑行内容无法透出 */
+  background-color: var(--tg-secondary-bg, #151b28);
+  /* 叠表面 tint（画在实色之上；合成结果仍不透明） */
+  background-image: linear-gradient(
+    var(--surface-2, rgba(255, 255, 255, 0.07)),
+    var(--surface-2, rgba(255, 255, 255, 0.07))
+  );
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  /* 滚动时与正文的分界（不依赖 border-collapse 画线） */
+  box-shadow: inset 0 -1px 0 var(--border, rgba(255, 255, 255, 0.1));
+  /* 防止子节点创建异常层叠 */
+  vertical-align: middle;
+}
+
+.admin-table tbody tr:hover {
+  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
+}
+
+.admin-table tbody tr {
+  transition: background-color 0.12s ease;
+}
+
+/* 单元格内交互控件不得抬到表头之上 */
+.admin-table tbody td {
+  position: relative;
+  z-index: 0;
+}
+
+/* 选中行：琥珀体系（禁止 rgba(96,165,250) 等弱蓝） */
+.admin-table tbody tr.is-selected,
+.admin-table tbody tr.is-selected:nth-child(even) {
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.14));
+}
+
+.admin-table tbody tr.is-selected:hover,
+.admin-table tbody tr.is-selected:nth-child(even):hover {
+  background: var(--admin-accent-hover, rgba(245, 158, 11, 0.22));
+}
+
+/* 暗色表面用白透明分层，黑透明在深底上几乎不可见 */
+.admin-table tbody tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.admin-table tbody tr:nth-child(even):hover {
+  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
+}
+
+/* ── 空状态 ── */
+.empty-text {
+  padding: 18px;
+  text-align: center;
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 13px;
+}
+
+.table-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--admin-control-gap, 8px);
+  padding: 8px 12px;
+  border: 0.5px solid rgba(239, 68, 68, 0.24);
+  border-radius: var(--r-lg, 12px);
+  background: rgba(239, 68, 68, 0.07);
+  color: var(--tg-destructive, #dc2626);
+  font-size: 13px;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.table-error .btn {
+  flex: 0 0 auto;
+}
+
+/* ── 标签（暗色表面对比：字色略提亮，底用低饱和 tint） ── */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 550;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid transparent;
+}
+
+.tag-success {
+  background: rgba(52, 211, 153, 0.14);
+  color: #6ee7b7;
+  border-color: rgba(52, 211, 153, 0.22);
+}
+
+.tag-warning {
+  background: rgba(251, 191, 36, 0.14);
+  color: #fbbf24;
+  border-color: rgba(251, 191, 36, 0.22);
+}
+
+/* info 标签与 accent 对齐，暗底可读 */
+.tag-info {
+  background: var(--admin-info-soft, rgba(245, 158, 11, 0.14));
+  color: var(--admin-info, #fbbf24);
+  border-color: var(--admin-info-border, rgba(245, 158, 11, 0.38));
+}
+
+.tag-muted {
+  background: var(--surface-2, rgba(255, 255, 255, 0.07));
+  color: var(--tg-hint, #9aa4b2);
+  border-color: var(--border, rgba(255, 255, 255, 0.1));
+}
+
+.muted-text {
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.tag-danger {
+  background: rgba(248, 113, 113, 0.14);
+  color: #fca5a5;
+  border-color: rgba(248, 113, 113, 0.24);
+}
+
+/* ── 小按钮 ── */
+.btn-xs,
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: var(--r-sm, 6px);
+}
+
+/* ── 键盘 focus 可见样式（Admin 强调色，避免弱蓝描边） ── */
+:focus-visible {
+  outline: 2px solid var(--admin-accent, #f59e0b);
+  outline-offset: 2px;
+}
+
+/* ── 滚动条（Webkit；暗底用白透明才可见） ── */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.18);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.28);
+}
+
+/* ── 危险操作按钮 ── */
+.btn-danger {
+  background: var(--tg-destructive, #ef4444);
+  color: #fff;
+  border-color: transparent;
+}
+.btn-danger:hover {
+  background: #dc2626;
+  border-color: transparent;
+}
+
+/* ── 表格操作按钮组（同一单元格内多个按钮） ──
+ * 默认允许换行：抽奖/订单等行内按钮多时，nowrap 会把整表横向撑爆。
+ * 需要单行滚动时再加 .table-actions-nowrap。
+ */
+.table-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.table-actions-nowrap {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  max-width: none;
+}
+
+/* ── 表格内上架/启用类开关（紧凑，与 btn-xs 齐高） ── */
+.status-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  min-height: 28px;
+  padding: 0 2px 0 0;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.status-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  pointer-events: none;
+}
+
+.status-switch-track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 32px;
+  height: 18px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.28);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.status-switch-thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #f8fafc;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
+  transition: transform 0.15s ease;
+}
+
+.status-switch.is-on {
+  color: var(--admin-success, #6ee7b7);
+}
+
+.status-switch.is-on .status-switch-track {
+  background: rgba(16, 185, 129, 0.42);
+  border-color: rgba(52, 211, 153, 0.45);
+}
+
+.status-switch.is-on .status-switch-thumb {
+  transform: translateX(14px);
+}
+
+.status-switch-text {
+  min-width: 2em;
+  font-weight: 500;
+}
+
+.status-switch.is-disabled,
+.status-switch:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.status-switch input:focus-visible + .status-switch-track {
+  outline: 2px solid var(--admin-accent, #f59e0b);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .status-switch-track,
+  .status-switch-thumb {
+    transition: none;
+  }
+}
+
+/* ── 模态框表单 ── */
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--admin-card-gap, 10px);
+  /* 防止焦点环被父级裁切：表单自身不裁剪 */
+  overflow: visible;
+  min-width: 0;
+}
+
+.modal-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+  color: var(--tg-text, #f0f2f5);
+  min-width: 0;
+  overflow: visible;
+}
+
+.modal-form label span:first-child {
+  font-weight: 500;
+  font-size: 12px;
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.modal-form input:not([type='checkbox']):not([type='radio']),
+.modal-form textarea,
+.modal-form select {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--r-md, 8px);
+  background-color: var(--tg-secondary-bg, #151b28);
+  color: var(--tg-text, #f0f2f5);
+  -webkit-text-fill-color: var(--tg-text, #f0f2f5);
+  font-size: 13px;
+  color-scheme: dark;
+  /* 焦点环在控件盒外侧，避免被父级 overflow 裁切观感（配合 modal-body 内边距） */
+}
+
+.modal-form input:not([type='checkbox']):not([type='radio']),
+.modal-form select {
+  height: 34px;
+  padding: 0 10px;
+  line-height: 32px;
+}
+
+.modal-form textarea {
+  padding: 8px 10px;
+  line-height: 1.45;
+  min-height: 72px;
+  resize: vertical;
+}
+
+.modal-form select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0 32px 0 10px;
+  background-color: var(--tg-secondary-bg, #151b28);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 12px;
+}
+
+/* 表单内勾选行：横向排列，控件保持原生小尺寸 */
+.checkbox-label {
+  flex-direction: row !important;
+  align-items: center;
+  gap: 8px !important;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.checkbox-label input[type='checkbox'],
+.checkbox-label input[type='radio'],
+.modal-form input[type='checkbox'],
+.modal-form input[type='radio'] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  flex: 0 0 auto;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  accent-color: var(--admin-accent, #f59e0b);
+  cursor: pointer;
+}
+
+/* ── 详情弹窗 ── */
+.detail-box {
+  display: flex;
+  flex-direction: column;
+  gap: var(--admin-card-gap, 10px);
+}
+
+.detail-section {
+  padding: 10px 12px;
+  border-radius: var(--r-md, 8px);
+  background: var(--surface-2, rgba(255, 255, 255, 0.07));
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+}
+
+.detail-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.detail-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 4px 0;
+  font-size: 13px;
+}
+
+.detail-label {
+  color: var(--tg-hint, #9aa4b2);
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.detail-value {
+  font-weight: 500;
+  word-break: break-all;
+  text-align: right;
+  font-size: 13px;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.detail-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ── 骨架屏行（用于表格 loading） ── */
+@keyframes shimmer-row {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton-row td {
+  padding: 8px;
+}
+
+.skeleton-cell {
+  height: 14px;
+  background: linear-gradient(
+    90deg,
+    var(--surface, rgba(255, 255, 255, 0.04)) 25%,
+    var(--surface-hover, rgba(255, 255, 255, 0.1)) 50%,
+    var(--surface, rgba(255, 255, 255, 0.04)) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer-row 1.5s ease-in-out infinite;
+  border-radius: var(--r-sm, 6px);
+}
+
+/* ═══════════════════════════════════════════════════════
+   小桌面断点（≥770px，对应 sidebar 可见的最小宽度）
+   admin-content-pad / admin-cell-pad / stack-gap 由 base.css 变量驱动
+   禁止在此硬编码放大 .admin-page / .toolbar 的 gap（会叠出过大留白）
+   ═══════════════════════════════════════════════════════ */
+@media (min-width: 770px) {
+  .empty-text {
+    padding: 24px;
+    font-size: 13px;
+  }
+
+  .modal-form {
+    gap: var(--admin-card-gap, 12px);
+  }
+
+  .detail-box {
+    gap: var(--admin-card-gap, 12px);
+  }
+
+  .detail-section {
+    padding: var(--admin-card-pad, 12px);
+  }
+
+  .detail-row {
+    padding: 5px 0;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   桌面断点覆盖（≥1024px）
+   ═══════════════════════════════════════════════════════ */
+@media (min-width: 1024px) {
+  /* 禁止在此重写上下 padding / 放大字号；会再次裁切 select 文字 */
+  .filters input:not([type='checkbox']):not([type='radio']),
+  .filters select {
+    font-size: 13px;
+  }
+
+  .filters select {
+    padding: 0 32px 0 12px;
+  }
+
+  .table-wrap {
+    border-radius: var(--r-xl, 16px);
+  }
+
+  .admin-table th,
+  .admin-table td {
+    /* 沿用 token 紧凑 padding，勿在此写大一号硬编码 */
+    padding: var(--admin-cell-pad, 6px 10px);
+  }
+
+  .empty-text {
+    padding: 28px 24px;
+    font-size: 14px;
+  }
+
+  .modal-form {
+    gap: var(--admin-card-gap, 12px);
+  }
+
+  .modal-form label {
+    font-size: 13px;
+  }
+
+  .modal-form input:not([type='checkbox']):not([type='radio']) {
+    /* 保持 height + line-height 垂直居中，勿加上下 padding */
+    font-size: 13px;
+  }
+
+  .modal-form textarea {
+    padding: 8px 10px;
+    font-size: 13px;
+  }
+
+  .detail-box {
+    gap: var(--admin-card-gap, 12px);
+  }
+
+  .detail-section {
+    padding: var(--admin-card-pad, 12px);
+  }
+
+  .detail-row {
+    padding: 6px 0;
+    font-size: 13px;
+  }
+}
+
+/* ── 批量选择操作条 ── */
+.bulk-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--admin-control-gap, 8px);
+  padding: 8px 12px;
+  border: 1px solid var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  border-radius: var(--r-lg, 12px);
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.14));
+  color: var(--tg-text, #f0f2f5);
+  font-size: 13px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+  /* 间距交给 .admin-page gap，禁止 margin-bottom */
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.bulk-bar > span:first-child {
+  font-weight: 600;
+}
+
+.bulk-bar[aria-busy='true'] {
+  cursor: progress;
+}
+
+.bulk-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--admin-inline-gap, 8px);
+}
+
+.table-command-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--admin-inline-gap, 8px) var(--admin-control-gap, 8px);
+  min-height: 34px;
+  flex-wrap: wrap;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════
+   快捷筛选 Chip / 视图 Tab（对齐 /admin/cards 琥珀色）
+   页面可用 .quick-chip / .action-chip / .admin-tab 等
+   ═══════════════════════════════════════════════════════ */
+.quick-strip,
+.action-strip,
+.admin-tabs,
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--admin-inline-gap, 8px);
+  margin: 0;
+}
+
+.quick-chip,
+.action-chip,
+.admin-tab,
+.tab {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  white-space: nowrap;
+  padding: 7px 12px;
+  min-height: 32px;
+  border-radius: var(--r-full, 999px);
+  border: 1px solid var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.14));
+  color: var(--admin-accent-text, #fbbf24);
+  font-size: 13px;
+  font-weight: 550;
+  line-height: 1.3;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast, 150ms) ease,
+    border-color var(--duration-fast, 150ms) ease,
+    color var(--duration-fast, 150ms) ease,
+    box-shadow var(--duration-fast, 150ms) ease;
+}
+
+.quick-chip:hover,
+.action-chip:hover,
+.admin-tab:hover,
+.tab:hover {
+  background: var(--admin-accent-hover, rgba(245, 158, 11, 0.22));
+  border-color: rgba(245, 158, 11, 0.55);
+  color: #fcd34d;
+}
+
+.quick-chip:focus-visible,
+.action-chip:focus-visible,
+.admin-tab:focus-visible,
+.tab:focus-visible {
+  outline: 2px solid var(--admin-accent, #f59e0b);
+  outline-offset: 2px;
+}
+
+.quick-chip.is-active,
+.action-chip.is-active,
+.admin-tab.active,
+.admin-tab.is-active,
+.tab.active,
+.tab.is-active,
+.tab[aria-selected='true'] {
+  background: rgba(245, 158, 11, 0.28);
+  border-color: var(--admin-accent, #f59e0b);
+  color: #fff7ed;
+  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
+  font-weight: 600;
+}
+
+/* 矩形 Tab 变体（余额页 segmented 风格） */
+.admin-tab-bar {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 4px;
+  padding: 3px;
+  border-radius: var(--r-md, 8px);
+  background: var(--surface-2, rgba(255, 255, 255, 0.07));
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  width: fit-content;
+  max-width: 100%;
+}
+
+.admin-tab-bar .admin-tab,
+.admin-tab-bar .tab-btn {
+  border-radius: var(--r-sm, 6px);
+  min-height: 30px;
+  padding: 6px 14px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--tg-hint, #9aa4b2);
+  box-shadow: none;
+  font-weight: 500;
+}
+
+.admin-tab-bar .admin-tab:hover,
+.admin-tab-bar .tab-btn:hover {
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.14));
+  color: var(--admin-accent-text, #fbbf24);
+  border-color: transparent;
+}
+
+.admin-tab-bar .admin-tab.active,
+.admin-tab-bar .admin-tab.is-active,
+.admin-tab-bar .tab-btn.active {
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.14));
+  border-color: var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  color: var(--admin-accent-text, #fbbf24);
+  box-shadow: none;
+  font-weight: 600;
+}
+
+/* 说明 / 提示卡（cards notice 同色）
+ * 垂直间距仅靠 .admin-page gap；禁止页面再写 margin-bottom。
+ */
+.notice-card,
+.admin-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px var(--admin-inline-gap, 8px);
+  padding: 8px 12px;
+  border-radius: var(--r-md, 8px);
+  border: 1px solid var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.14));
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--tg-text, #f0f2f5);
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.notice-card strong,
+.admin-notice strong {
+  color: var(--admin-accent, #f59e0b);
+  font-weight: 650;
+}
+
+/* 小标签（同码库存等） */
+.same-code-tag,
+.admin-pill-amber {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 2px 6px;
+  border-radius: var(--r-full, 999px);
+  font-size: 11px;
+  line-height: 1.4;
+  font-weight: 550;
+  color: var(--admin-accent-text, #fbbf24);
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.14));
+  border: 1px solid var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+}
+
+.table-command-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+  margin-left: auto;
+  flex-wrap: wrap;
+}
+
+.selection-summary {
+  color: var(--tg-text, #f0f2f5);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.table-command-actions[aria-busy='true'] {
+  cursor: progress;
+}
+
+.select-cell {
+  width: 42px;
+  min-width: 42px !important;
+  text-align: center !important;
+}
+
+.select-cell input {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  accent-color: var(--admin-accent, #f59e0b);
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.select-cell input:disabled {
+  cursor: not-allowed;
+}
+
+@media (max-width: 640px) {
+  .toolbar {
+    align-items: stretch;
+  }
+
+  .toolbar-actions,
+  .toolbar > .actions {
+    flex: 1 0 100%;
+    width: 100%;
+  }
+
+  .filters {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    flex: 1 0 100%;
+    width: 100%;
+  }
+
+  .filters input:not([type='checkbox']):not([type='radio']),
+  .filters select {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .filters .filter-check {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .filters .btn {
+    width: 100%;
+  }
+
+  .toolbar-actions,
+  .toolbar > .actions {
+    overflow-x: auto;
+    padding-bottom: 2px;
+    scrollbar-width: thin;
+  }
+
+  .toolbar-actions .btn,
+  .toolbar > .actions .btn {
+    flex: 0 0 auto;
+  }
+
+  .bulk-bar {
+    align-items: stretch;
+  }
+
+  .bulk-actions {
+    width: 100%;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-bottom: 2px;
+    scrollbar-width: thin;
+  }
+
+  .bulk-actions .btn {
+    flex: 0 0 auto;
+  }
+
+  .table-command-bar {
+    align-items: stretch;
+  }
+
+  .table-command-actions {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    overflow: visible;
+    padding-bottom: 0;
+  }
+
+  .table-command-actions .selection-summary {
+    flex: 1 0 100%;
+  }
+
+  .table-command-actions .btn {
+    flex: 0 0 auto;
+  }
+
+  .select-cell input {
+    width: 18px;
+    height: 18px;
+  }
+
+  .admin-table .btn-xs {
+    min-height: 30px;
+    padding: 4px 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-table tbody tr {
+    transition: none;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Admin 设计系统 · 共享 primitives（页面禁止再复制一套）
+   ═══════════════════════════════════════════════════════ */
+
+/* ── 页面标题 ── */
+.page-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 650;
+  color: var(--tg-text, #f0f2f5);
+  letter-spacing: 0.01em;
+}
+
+/* ── 表单辅助说明 ── */
+.field-hint {
+  display: block;
+  margin-top: 4px;
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* ── 弹窗底部操作（页面 scoped 内可复用 class） ── */
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+/* ── JSON / 代码详情块 ── */
+.detail-json {
+  background: var(--surface-2, rgba(255, 255, 255, 0.07));
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  color: var(--tg-text, #f0f2f5);
+  padding: 12px;
+  border-radius: var(--r-md, 8px);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: auto;
+  max-height: 50vh;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── 骨架 ── */
+.skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton-line {
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    var(--surface, rgba(255, 255, 255, 0.04)) 25%,
+    var(--surface-hover, rgba(255, 255, 255, 0.1)) 50%,
+    var(--surface, rgba(255, 255, 255, 0.04)) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer-row 1.5s ease-in-out infinite;
+}
+
+.skeleton-line.w-40 { width: 40%; }
+.skeleton-line.w-60 { width: 60%; }
+.skeleton-line.w-80 { width: 80%; }
+
+/* ── 状态横幅 / 健康卡 / 余额开关卡 ── */
+.admin-banner,
+.status-banner,
+.health-card,
+.balance-card.tone-panel {
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border-radius: var(--r-lg, 12px);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.admin-banner strong,
+.status-banner strong,
+.health-card strong {
+  display: block;
+  margin-bottom: 4px;
+  color: inherit;
+}
+
+.admin-banner p,
+.health-card p {
+  margin: 0;
+  color: inherit;
+  opacity: 0.92;
+}
+
+/* 成功 / 危险 / 警告 / 信息（信息=琥珀，禁止弱蓝） */
+.tone-success,
+.admin-banner--success,
+.status-banner-success,
+.health-card-success,
+.balance-card-success {
+  background: var(--admin-success-soft, rgba(52, 211, 153, 0.12));
+  color: var(--admin-success, #6ee7b7);
+  border-color: var(--admin-success-border, rgba(52, 211, 153, 0.28));
+}
+
+.tone-danger,
+.admin-banner--error,
+.status-banner-error,
+.health-card-error {
+  background: var(--admin-danger-soft, rgba(248, 113, 113, 0.12));
+  color: var(--admin-danger, #fca5a5);
+  border-color: var(--admin-danger-border, rgba(248, 113, 113, 0.28));
+}
+
+.tone-warning,
+.admin-banner--warning,
+.status-banner-warning {
+  background: var(--admin-warning-soft, rgba(251, 191, 36, 0.12));
+  color: var(--admin-warning, #fbbf24);
+  border-color: var(--admin-warning-border, rgba(251, 191, 36, 0.28));
+}
+
+.tone-info,
+.admin-banner--info,
+.status-banner-info,
+.balance-card-muted {
+  background: var(--admin-info-soft, rgba(245, 158, 11, 0.14));
+  color: var(--admin-info, #fbbf24);
+  border-color: var(--admin-info-border, rgba(245, 158, 11, 0.38));
+}
+
+/* 关闭/中性信息态：正文用主字色，标题用琥珀，避免整段弱蓝 */
+.balance-card-muted,
+.status-banner-info {
+  color: var(--tg-text, #f0f2f5);
+}
+
+.balance-card-muted .balance-card-head strong,
+.status-banner-info strong {
+  color: var(--admin-accent-text, #fbbf24);
+}
+
+.balance-card-muted .balance-card-head p,
+.balance-card-muted .balance-card-hint {
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.balance-card {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  border-radius: var(--r-lg, 12px);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: var(--tg-secondary-bg, #151b28);
+}
+
+.balance-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.balance-card-head strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.balance-card-head p,
+.balance-card-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.balance-card-success .balance-card-head strong {
+  color: var(--admin-success, #6ee7b7);
+}
+
+.balance-card-success .balance-card-head p,
+.balance-card-success .balance-card-hint {
+  color: rgba(110, 231, 183, 0.88);
+}
+
+.balance-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.balance-card-hint code {
+  font-size: 12px;
+  color: var(--admin-accent-text, #fbbf24);
+}
+
+/* ── 列表卡片（支付渠道 / 配置块） ── */
+.admin-card,
+.provider-card {
+  background: var(--tg-secondary-bg, #151b28);
+  border-radius: var(--r-lg, 12px);
+  padding: 12px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex: 0 0 auto;
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+}
+
+.admin-card:hover,
+.provider-card:hover {
+  border-color: var(--border-strong, rgba(255, 255, 255, 0.16));
+}
+
+.admin-card-list,
+.provider-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding: 1px 2px 2px 1px;
+}
+
+.admin-card-list:focus-visible,
+.provider-list:focus-visible {
+  outline: 2px solid var(--admin-accent, #f59e0b);
+  outline-offset: 2px;
+}
+
+/* ── 事实网格 ── */
+.fact-grid,
+.provider-facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.fact-grid > div,
+.provider-facts > div {
+  min-width: 0;
+  padding: 8px 10px;
+  border-radius: var(--r-md, 8px);
+  background: var(--surface-2, rgba(255, 255, 255, 0.07));
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+}
+
+.fact-grid dt,
+.provider-facts dt {
+  margin: 0 0 3px;
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+}
+
+.fact-grid dd,
+.provider-facts dd {
+  margin: 0;
+  color: var(--tg-text, #f0f2f5);
+  font-size: 13px;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+/* ── 配置网格 ── */
+.config-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.config-grid.two-cols {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.config-grid input:disabled,
+.modal-form input:disabled {
+  color: var(--tg-hint, #9aa4b2);
+  background: var(--surface-2, rgba(255, 255, 255, 0.07));
+  cursor: not-allowed;
+}
+
+/* ── 分段按钮（支付方式等） ── */
+.segmented {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.segment-btn {
+  min-height: 34px;
+  padding: 0 12px;
+  white-space: nowrap;
+  border: 1px solid var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  border-radius: var(--r-sm, 6px);
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.1));
+  color: var(--admin-accent-text, #fbbf24);
+  font-size: 13px;
+  font-weight: 550;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.segment-btn:hover {
+  background: var(--admin-accent-hover, rgba(245, 158, 11, 0.2));
+  border-color: rgba(245, 158, 11, 0.55);
+  color: #fcd34d;
+}
+
+.segment-btn.active,
+.segment-btn.is-active,
+.segment-btn[aria-pressed='true'] {
+  border-color: var(--admin-accent, #f59e0b);
+  background: rgba(245, 158, 11, 0.28);
+  color: #fff7ed;
+  font-weight: 600;
+}
+
+/* ── 快捷设置行 ── */
+.quick-setting {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--r-md, 8px);
+  background: var(--surface, rgba(255, 255, 255, 0.04));
+}
+
+.quick-label {
+  color: var(--tg-text, #f0f2f5);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.quick-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.quick-copy small {
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+/* ── 回调 / 代码框 ── */
+.callback-box {
+  display: grid;
+  gap: 6px;
+  padding: 10px;
+  border: 1px dashed var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  border-radius: var(--r-md, 8px);
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.08));
+}
+
+.callback-box span {
+  color: var(--admin-accent-text, #fbbf24);
+  font-size: 12px;
+  font-weight: 550;
+}
+
+.callback-box code {
+  color: var(--tg-text, #f0f2f5);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+/* ── 双行关系单元格 ── */
+.relation-cell {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  /* 覆盖默认 min-width:auto：超长 failureReason / SQL 不得把整表撑成只剩名称列 */
+  min-width: 0;
+  max-width: 280px;
+}
+
+.relation-cell small {
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.relation-cell .failure-snippet {
+  color: var(--admin-danger, #fca5a5);
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.35;
+  max-width: 100%;
+}
+
+/* ── 金额正负 ── */
+.is-positive {
+  color: var(--admin-success, #6ee7b7);
+  font-weight: 600;
+}
+
+.is-negative {
+  color: var(--admin-danger, #fca5a5);
+  font-weight: 600;
+}
+
+/* ── 辅助文案 ── */
+.admin-helper,
+.balance-helper {
+  margin: 0 0 12px;
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.admin-helper code,
+.balance-helper code {
+  font-size: 11px;
+  color: var(--admin-accent-text, #fbbf24);
+}
+
+/* ── 生成结果（优惠码 / 充值码批量输出） ── */
+.generated-result {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.generated-result p {
+  margin: 0;
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 13px;
+}
+
+.generated-result textarea {
+  width: 100%;
+  resize: vertical;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+}
+
+/* ── 图片上传控件（商品封面 / 渠道 Logo） ── */
+.image-upload-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.image-upload-button {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.image-upload-button.is-disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.image-upload-button input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ── 等宽单元格 / 密钥单元格 ── */
+.mono-cell {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-size: 12px;
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.secret-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+/* ── 统计小卡（充值码概览等） ──
+ * 垂直间距仅靠 .admin-page gap；禁止 margin-bottom 叠距。
+ */
+.stat-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(120px, 1fr));
+  gap: var(--admin-inline-gap, 8px);
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.stat-item {
+  min-height: 76px;
+  padding: 10px 12px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--r-md, 8px);
+  background: var(--tg-secondary-bg, #151b28);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.stat-item span,
+.stat-item small {
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+}
+
+.stat-item strong {
+  font-size: 20px;
+  color: var(--tg-text, #f0f2f5);
+}
+
+/* ── 段切换别名：dir-btn 与 segment-btn 同语义（余额加减方向等） ── */
+.dir-btn {
+  appearance: none;
+  min-height: 34px;
+  padding: 8px 10px;
+  white-space: nowrap;
+  border: 1px solid var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  border-radius: var(--r-md, 8px);
+  background: var(--admin-accent-soft, rgba(245, 158, 11, 0.1));
+  color: var(--admin-accent-text, #fbbf24);
+  font-size: 13px;
+  font-weight: 550;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.dir-btn:hover {
+  background: var(--admin-accent-hover, rgba(245, 158, 11, 0.2));
+  border-color: rgba(245, 158, 11, 0.55);
+  color: #fcd34d;
+}
+
+.dir-btn.active,
+.dir-btn.is-active,
+.dir-btn[aria-pressed='true'] {
+  border-color: var(--admin-accent, #f59e0b);
+  background: rgba(245, 158, 11, 0.28);
+  color: #fff7ed;
+  font-weight: 600;
+}
+
+/* ── 配置区 section（系统配置页骨架，可跨页复用） ── */
+.config-section {
+  background: var(--tg-secondary-bg, #151b28);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--r-xl, 16px);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.config-section-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+}
+
+.config-section-head h3 {
+  margin: 0;
+  font-size: 15px;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.config-section-head p {
+  margin: 4px 0 0;
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.config-count {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: var(--surface-2, rgba(255, 255, 255, 0.07));
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 12px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+}
+
+/* ── 支付渠道卡标题区 ── */
+.provider-header {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.provider-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.provider-name {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.provider-desc {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--tg-hint, #9aa4b2);
+  line-height: 1.45;
+}
+
+.provider-status {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.provider-actions {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.callback-value {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+@media (max-width: 640px) {
+  .admin-card,
+  .provider-card {
+    flex-direction: column;
+  }
+
+  .config-grid.two-cols,
+  .fact-grid,
+  .provider-facts {
+    grid-template-columns: 1fr;
+  }
+
+  .quick-setting {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .segmented {
+    justify-content: flex-start;
+  }
+
+  .stat-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .provider-actions {
+    justify-content: flex-start;
+    width: 100%;
+  }
+}
+
+/* ── 表单分区（抽奖创建/商品编辑等共享） ───────────────────
+ * 必须暗色 token：曾误用 #333/#e0e0e0 浅色 fallback，暗色 Admin 下分区标题几乎不可读。
+ * 与商品页 product-editor 分区语义对齐；页面 scoped 可再细化，但全局 fallback 必须可读。
+ */
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--admin-card-gap, 10px);
+  padding: var(--admin-card-pad, 12px);
+  margin: 0;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--r-md, 8px);
+  background: var(--tg-secondary-bg, rgba(0, 0, 0, 0.18));
+  min-width: 0;
+}
+
+.form-section-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+}
+
+.form-section-title {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--tg-text, #e5e7eb);
+  line-height: 1.35;
+}
+
+/* fieldset + legend 时取消浏览器默认浮标样式 */
+.form-section > legend.form-section-title {
+  float: none;
+  padding: 0;
+}
+
+.form-section-desc {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--tg-hint, #9ca3af);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px 12px;
+  min-width: 0;
+}
+
+.form-grid.two-cols {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.form-grid > label,
+.form-grid .field-span-2 {
+  min-width: 0;
+}
+
+.form-grid .field-span-2,
+.form-grid > label.field-span-2 {
+  grid-column: 1 / -1;
+}
+
+/* datetime-local：暗色原生控件 + 足够宽度，避免 macOS/Chrome 裁切日期时间段 */
+.modal-form input[type='datetime-local'],
+.modal-form input[type='date'],
+.modal-form input[type='time'] {
+  color-scheme: dark;
+  min-width: 0;
+  width: 100%;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+
+/* 时间快捷条（创建抽奖等） */
+.time-preset-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.time-preset-row .btn {
+  flex: 0 0 auto;
+}
+
+.time-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: var(--r-md, 8px);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  background: var(--tg-bg, rgba(0, 0, 0, 0.15));
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--tg-hint, #9ca3af);
+}
+
+.time-timeline strong {
+  color: var(--tg-text, #e5e7eb);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.time-timeline.is-invalid {
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.08);
+  color: var(--tg-destructive, #fca5a5);
+}
+
+.time-timeline.is-invalid strong {
+  color: var(--tg-destructive, #fca5a5);
+}
+
+.admin-table .col-name {
+  max-width: 220px;
+  min-width: 100px;
+  vertical-align: middle;
+}
+
+.admin-table .col-name .draw-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.admin-table .col-name .draw-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 紧凑数字/时间列，避免抽奖表被长 ISO 撑开 */
+.admin-table .col-num {
+  width: 1%;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.admin-table .col-status {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.admin-table .col-actions {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.admin-table .time-stack {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.admin-table .time-stack-end {
+  align-items: flex-end;
+  width: 100%;
+}
+
+.admin-table .time-stack small {
+  color: var(--tg-hint, #9aa4b2);
+  font-size: 11px;
+}
+
+@media (max-width: 640px) {
+  .form-grid.two-cols {
+    grid-template-columns: 1fr;
+  }
+
+  .table-actions {
+    flex-wrap: wrap;
+    white-space: normal;
+  }
+}