/* 收款系统 · TDesign 主题微调
   ★ 只改「TDesign 没提供默认值」的地方；默认值（品牌色/圆角/字号/间距）一律不碰。
   品牌色 #0052d9 就是腾讯蓝，直接用。 */

html, body { margin: 0; min-height: 100%; }

/* ★ 必须同时命中 html[theme-mode="light"]：TDesign 把整套变量定义在那个作用域里，
   只写 :root 会被它盖掉（页面看起来"改了没生效"，实际是优先级输了）。 */
:root,
html,
html[theme-mode="light"],
html[theme-mode="dark"],
body {
  /* 内容区最大宽度：超过就居中留白（官方 Starter 同款做法） */
  --td-page-max: 1280px;

  /* ══ 品牌色阶（2026-10-27）══
     TDesign 默认 #0052d9 是腾讯蓝，和商城前台的青绿/亮青完全两套。
     老板：「管理后台跟前端页面差距太大了」⇒ 换成品牌色 #0EA5E9 的完整 10 级色阶。
     ★ 必须整条覆盖：只改 --td-brand-color 会留下默认蓝的 hover / focus / 浅底。 */
  /* ★ 直接取商城前台的主色 #16b597（青绿），后台和前台同一个色相。
     上一版用了亮青 #0EA5E9，和商城的青绿并排看还是两个牌子。 */
  --td-brand-color-1: #e9f8f3;
  --td-brand-color-2: #c6ecdf;
  --td-brand-color-3: #9edeC9;
  --td-brand-color-4: #70cfb0;
  --td-brand-color-5: #45bf98;
  --td-brand-color-6: #25b189;
  --td-brand-color-7: #16b597;
  --td-brand-color-8: #0f9c82;
  --td-brand-color-9: #0a806a;
  --td-brand-color-10: #066353;
  --td-brand-color: var(--td-brand-color-7);
  --td-brand-color-hover: var(--td-brand-color-6);
  --td-brand-color-focus: var(--td-brand-color-1);
  --td-brand-color-active: var(--td-brand-color-8);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-light-hover: var(--td-brand-color-2);

  /* 圆角对齐商城（商城卡片 8px，TDesign 默认 3px 太硬） */
  --td-radius-small: 4px;
  --td-radius-default: 8px;
  --td-radius-medium: 8px;
  --td-radius-large: 12px;

  /* 页面底色/描边也用商城那套浅灰 */
  --td-bg-color-page: #f5f6f7;
  --td-component-stroke: #ebedf0;
  --td-shadow-1: 0 0 10px rgba(116,116,116,.08);
  --td-shadow-2: 0 0 16px rgba(116,116,116,.12);
}
/* ★ 全局兜底：页面永远不许横向滚动。
   仪表盘这类页面一旦横向溢出，手机上会看到卡片被切一半。 */
html, body { overflow-x: hidden; max-width: 100%; }
/* body 的高度交给内容决定，不要锁 100%（锁了会截断文档滚动） */
body { height: auto; }
.t-layout, .t-layout__content { max-width: 100%; overflow-x: hidden; }
body {
  font: var(--td-font-body-medium);
  background: var(--td-bg-color-page);
  color: var(--td-text-color-primary);
  -webkit-font-smoothing: antialiased;
}

/* 顶栏 */
.td-header {
  height: 56px !important;
  padding: 0 20px !important;
  display: flex; align-items: center; gap: 14px;
  background: var(--td-bg-color-container);
  border-bottom: 1px solid var(--td-component-stroke);
  flex: 0 0 auto;
}
.td-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.td-logo {
  width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto;
  background: var(--td-brand-color); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.td-headmid { flex: 1; color: var(--td-text-color-placeholder); font: var(--td-font-body-small); }

/* 侧栏
   ★ 踩过：只写 width 到 style 上，实际渲染出来只有 1px —— 被 flex 压塌了。
     TDesign 的 .t-layout 是 flex 容器，aside 作为 flex item 必须显式
     flex: 0 0 <width> 且 min-width 不能是 auto，否则内容再宽也会被压到最小。
     同时 aside 自己 rolling 滚动，不能让内部把高度撑开。 */
.td-aside {
  background: var(--td-bg-color-container) !important;
  border-right: 1px solid var(--td-component-stroke);
  flex: 0 0 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.td-aside .t-menu { height: 100%; }

/* 根布局：桌面端固定视口 + 内部滚动（应用式）
   ★ 手机端在下面的媒体查询里改成文档流滚动（见文末） */
.td-root { height: 100vh; }
.td-content { overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════
   内容区
   ───────────────────────────────────────────────────────────
   ★★ 老板：「感觉整个页面奇奇怪怪的」—— 根因是【宽屏没有最大宽度】：
      桌面 1400px+ 时卡片被拉到 1150px 宽，文字行太长、卡片又扁又空，
      而且统计条是全宽、下面的卡片又是半宽，宽度不齐，看着歪。

   对齐官方 TDesign Starter 的做法：内容区【居中 + 限制最大宽度】。
   ⇒ 一行只动这里，9 个页面一起受益。
   ═══════════════════════════════════════════════════════════ */
.td-page {
  /* ★ 2026-10-26 修：原来没写 box-sizing，content-box + width:100% + padding
     ⇒ 总宽 = 100% + 48px，页面比容器宽，右侧溢出（表格最后一列被切）。
     一行 box-sizing 修掉全部 9 个后台页面。 */
  box-sizing: border-box;
  padding: 20px 24px 48px;
  max-width: var(--td-page-max, 1280px);
  margin: 0 auto;          /* 宽屏时居中，不再贴左 */
  width: 100%;
}
.td-headrow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.td-headrow h1 { margin: 0; font: var(--td-font-headline-medium); }
.td-desc { margin-top: 4px; color: var(--td-text-color-placeholder); font: var(--td-font-body-small); }

/* 通用 */
.card + .card, .gap { margin-top: 16px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* 统计数字（TDesign 没这个紧凑排版，自己拼） */
.statrow { display: flex; gap: 44px; flex-wrap: wrap; }
.statrow .n { font: var(--td-font-headline-large); font-variant-numeric: tabular-nums; }
.statrow .k { margin-top: 6px; color: var(--td-text-color-placeholder); font: var(--td-font-body-small); }

/* 文档页排版 */
.doc { font: var(--td-font-body-medium); line-height: 2; max-width: 860px; }
.doc h2 { font: var(--td-font-title-large); margin: 28px 0 10px; padding-bottom: 8px;
          border-bottom: 1px solid var(--td-component-stroke); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font: var(--td-font-title-small); margin: 18px 0 6px; }
.doc p { color: var(--td-text-color-secondary); margin: 8px 0; }
.doc code { font-family: ui-monospace, Menlo, monospace; font-size: 12px;
            background: var(--td-bg-color-secondarycontainer); padding: 2px 6px; border-radius: 3px; }
.doc pre { background: var(--td-bg-color-secondarycontainer); border: 1px solid var(--td-component-stroke);
           border-radius: 3px; padding: 14px 16px; overflow-x: auto; margin: 12px 0; font-size: 12px; line-height: 1.8; }
.doc pre code { background: none; padding: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.doc th { text-align: left; padding: 9px 12px; background: var(--td-bg-color-secondarycontainer);
          color: var(--td-text-color-placeholder); font-weight: 600; border-bottom: 1px solid var(--td-component-stroke); }
.doc td { padding: 9px 12px; border-bottom: 1px solid var(--td-component-stroke); color: var(--td-text-color-secondary); }

/* 窄屏：侧栏变成可开合的抽屉
   ★ 踩过：原来窄屏直接 `display:none` —— 导航【彻底消失且回不来】，
     顶栏那个折叠按钮只是把宽度缩到 64px，对 display:none 无效。
     老板在窄窗口下打开就会觉得"导航点不动/没有导航"。
     正确做法：侧栏浮起来做抽屉，点按钮滑入滑出，点遮罩关闭。 */
.td-mask {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
  background: rgba(0, 0, 0, .35);
  z-index: 40;
}
.td-menu-btn { display: none !important; }

/* ★★★ 2026-10-25 手机端表格：必须能横向滑动
   踩过：订单/收款号/报表这些表格列宽合计超过手机屏宽，
   直接被截断且无法滑动 ⇒ 右侧列（时间/操作）永远看不到。
   给表格外层加横向滚动容器，内层保持最小宽度。 */
.tbl-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll::-webkit-scrollbar { height: 6px; }
.tbl-scroll::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }

@media (max-width: 900px) {
  /* TDesign 表格自带滚动容器，但宽度需要被限制才生效 */
  .t-table { width: 100% !important; }
  .t-table__content { min-width: 620px; }
  .t-table__pagination { padding: 10px 0 0 !important; }

  /* 小屏下表格字号略降，减少滚动距离 */
  .t-table td, .t-table th { font-size: 13px !important; }
  .t-table--size-small td, .t-table--size-small th { padding: 8px 8px !important; }
}
/* 桌面端的折叠按钮：宽屏显示，窄屏隐藏（窄屏改用抽屉按钮） */
.td-desktop-toggle { display: inline-flex !important; }
@media (max-width: 900px) {
  .td-desktop-toggle { display: none !important; }
}

@media (max-width: 900px) {
  .td-page { padding: 14px; }
  .td-headmid { display: none; }
  .td-menu-btn { display: inline-flex !important; }
  .td-desktop-btn { display: none !important; }

  .td-aside {
    position: fixed !important;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 232px !important;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .08);
  }
  .td-aside.td-open { transform: none; }
  .td-mask.td-open { display: block; }
}

/* ═══════════════════════════════════════════════════════════
   仪表盘 KPI 卡（对齐官方 TDesign Starter）
   ★ 参照 https://tdesign.tencent.com/starter/vue-next/
     官方第一张是【品牌蓝实心卡】，其余白卡；都带环比箭头。
     我原来全是白卡片堆文字 —— 那不像仪表盘。
   ═══════════════════════════════════════════════════════════ */
.kpi {
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-component-stroke);
  border-radius: var(--td-radius-medium);
  padding: 20px;
  height: 100%;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow .2s;
}
.kpi:hover { box-shadow: var(--td-shadow-1); }
.kpi-head {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--td-text-color-placeholder);
  font: var(--td-font-body-medium);
  margin-bottom: 12px;
}
.kpi-num {
  font: var(--td-font-headline-large);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.kpi-unit { font: var(--td-font-body-medium); margin-left: 4px; color: var(--td-text-color-placeholder); }
.kpi-foot {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--td-component-stroke);
  display: flex; align-items: center; gap: 8px;
  color: var(--td-text-color-placeholder);
  font: var(--td-font-body-small);
}
.kpi-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.kpi-delta.up { color: var(--td-success-color); }
.kpi-delta.down { color: var(--td-error-color); }

/* 品牌蓝实心卡（官方左上那张） */
.kpi-primary {
  background: var(--td-brand-color);
  border-color: var(--td-brand-color);
  color: #fff;
}
.kpi-primary .kpi-head { color: rgba(255,255,255,.78); }
.kpi-primary .kpi-num { color: #fff; }
.kpi-primary .kpi-unit { color: rgba(255,255,255,.78); }
.kpi-primary .kpi-foot { border-top-color: rgba(255,255,255,.22); color: rgba(255,255,255,.78); }
.kpi-primary .kpi-delta.up, .kpi-primary .kpi-delta.down { color: #fff; }

.card-sub { color: var(--td-text-color-placeholder); font: var(--td-font-body-small); font-weight: 400; margin-left: 8px; }

/* ═══════════════════════════════════════════════════════════
   ★★ 手机适配（老板："这个页面比例？都不符合移动端"）
   ───────────────────────────────────────────────────────────
   我之前只在 1560 宽屏截图，从没测过手机 —— 这是硬伤。
   手机上原来每张 KPI 占满整屏宽、min-height 148px，
   滑五屏才看完四个数字。现在：
     · KPI 一行两张（栅格 xs=6）
     · 卡高降到 104px，字号收小
     · 图表高度 300→200、环图 230→170
     · 表格横向滚动（窄屏塞不下十列）
     · 侧栏改抽屉（已做）
   ═══════════════════════════════════════════════════════════ */

.chart-trend { width: 100%; height: 300px; }
.chart-chan  { width: 100%; height: 230px; }

@media (max-width: 900px) {
  /* KPI 收紧 */
  .kpi { min-height: 104px; padding: 14px; border-radius: var(--td-radius-default); }
  .kpi-head { margin-bottom: 8px; font: var(--td-font-body-small); }
  .kpi-num { font: var(--td-font-headline-medium); }
  .kpi-foot { margin-top: 10px; padding-top: 8px; font: var(--td-font-body-extraSmall); }

  /* 图表降高 */
  .chart-trend { height: 210px; }
  .chart-chan  { height: 180px; }

  /* 页面留白收紧 */
  .td-page { padding: 12px 12px 40px; }
  .td-headrow { margin-bottom: 12px; }
  .td-headrow h1 { font: var(--td-font-title-large); }
  .td-desc { font: var(--td-font-body-extraSmall); }

  /* 卡片间距收紧 */
  .t-card { margin-bottom: 12px; }
  .t-card__body { padding: 12px; }

  /* 表格：窄屏横向滚动
     ★★ 踩过：只写 min-width:640px 会让【整页】横向溢出 ——
       表格撑破父容器 → body 变宽 → KPI 的 50% 按更宽的算 → 第二列跑到屏幕外。
       正确做法：表格在【一个受限的滚动容器】里变宽，不能撑破页面。
       所以给 table 的包裹层加 overflow-x + max-width:100%，并让 body 禁止横向滚动。 */
  .t-table__content,
  .t-table__content-inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .t-table { min-width: 560px; }
  /* 关键：任何卡片内部都不许把页面撑宽 */
  .t-card, .t-card__body { max-width: 100%; overflow-x: hidden; }
  .t-card__body > .t-table__content { overflow-x: auto; }

  /* ★ 筛选表单：手机上两列排布
     踩过：原来 7 个筛选项各占一整行，滑三屏才看到表格 —— 老板说"比例不符合移动端"。
     现在两项一行，输入控件撑满各自的格。 */
  .t-form-inline { display: flex; flex-wrap: wrap; gap: 10px; }
  .t-form-inline .t-form__item {
    width: calc(50% - 5px) !important;
    /* ★ 必须覆盖 TDesign 的 min-width:200px ——
       390 屏放不下两个 200px 的格，所以它永远换行成一列。
       这就是"手机上每项占一整行"的真正原因。 */
    min-width: 0 !important;
    max-width: calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px) !important;
    margin: 0 !important;
    display: block !important;
  }
  .t-form-inline .t-form__item .t-form__label {
    display: block; width: auto !important; margin-bottom: 4px; text-align: left;
    font: var(--td-font-body-small);
  }
  .t-form-inline .t-form__item .t-form__controls { margin: 0 !important; width: 100%; }
  .t-form-inline .t-form__item .t-form__controls-content { width: 100%; }
  .t-form-inline .t-form__item .t-input,
  .t-form-inline .t-form__item .t-input__wrap,
  .t-form-inline .t-form__item .t-select,
  .t-form-inline .t-form__item .t-date-picker { width: 100% !important; min-width: 0 !important; }
  /* 提交按钮独占一行，靠左 */
  .t-form-inline .t-form__item:last-child { width: 100% !important; }

  /* 统计条（无栅格的老页面）也两列 */
  .statrow { gap: 20px 28px; }
  .statrow > div { min-width: calc(50% - 28px); }
  .statrow .n { font: var(--td-font-headline-small); }
}

/* 超窄屏（360 及以下）再收一档 */
@media (max-width: 380px) {
  .kpi { min-height: 96px; padding: 12px; }
  .kpi-num { font: var(--td-font-title-large); }
  .chart-trend { height: 180px; }
}


/* ═══════════════════════════════════════════════════════════
   手机细节修正（第二轮）
   ───────────────────────────────────────────────────────────
   ① 卡片标题 + 右侧操作挤成两行 → 标题不换行、操作允许换到下一行
   ② 图表 X 轴日期太密 → 手机上隔一个显示
   ③ KPI 卡的「较昨日」在 360 屏会挤 → 收字号
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 卡片头：标题压缩，操作换行不挤压 */
  .t-card__header { padding: 12px; flex-wrap: wrap; gap: 8px; }
  .t-card__title { font: var(--td-font-title-small); white-space: nowrap; }
  .t-card__actions { flex-shrink: 0; }

  /* ★ 日期范围选择器：TDesign 默认给它撑到 384px，360 屏装不下被切。
     实测：t-date-range-picker 宽 384、右边界 409 > 视口 360。
     必须限宽 + 允许收缩。 */
  .t-card__actions { max-width: 100%; }
  .t-date-range-picker,
  .t-range-input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }

  /* 卡片标题里的副标题（"近 14 天"）在手机上隐藏，避免换行 */
  .card-sub { display: none; }

  /* 待处理列表：数字不换行 */
  .t-list-item__action { flex-shrink: 0; }
}

/* 图表容器永远不撑破父级 */
.chart-trend, .chart-chan { max-width: 100%; overflow: hidden; }


/* ═══════════════════════════════════════════════════════════
   ★★ 手机端滚动模型（这是"没考虑移动端"的根因）
   ───────────────────────────────────────────────────────────
   桌面版我用 `height:100vh` + `<t-content overflow-y:auto>` ——
   那是**桌面应用**的写法（固定视口、内部滚动区）。
   在手机上会造成三个真问题：
     ① 浏览器地址栏永远不收起来（页面被判定为"不可滚动"）
     ② 出现双滚动条（文档 + 内部容器）
     ③ 下拉刷新、滚动回弹全部失效 —— 手感不像网页
   正确做法：手机端**放弃固定视口**，让整页走文档流滚动，
   顶栏改成 sticky 钉在顶部。这才像正常的移动网页。
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 解除固定视口（必须 !important 压过 TDesign 与桌面规则） */
  html, body { height: auto !important; }
  .td-root,
  .t-layout,
  .t-layout--with-sider { height: auto !important; min-height: 100vh !important; overflow: visible !important; }
  .td-content,
  .t-layout__content { overflow: visible !important; height: auto !important; flex: none !important; }

  /* 顶栏 sticky（钉住但不占死视口） */
  .td-header {
    position: sticky !important;
    top: 0;
    z-index: 30;
    height: 48px !important;
    padding: 0 12px !important;
    gap: 8px;
  }
  .td-brand { font-size: 15px; }
  .td-logo { width: 24px; height: 24px; font-size: 13px; border-radius: 5px; }

  /* 侧栏抽屉也要跟着粘在 sticky 顶栏下面 */
  .td-aside { top: 48px !important; }
  .td-mask { inset: 48px 0 0 0 !important; }
}


/* ═══════════════════════════════════════════════════════════
   手机上的宽表格：给出「可以横向滑」的视觉提示
   ───────────────────────────────────────────────────────────
   老板看到的「只显示两列就断了」其实是表格在横向滚动 ——
   但没有提示，用户以为坏了。加右侧渐隐 + 滚动条可见。
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 表格外框：相对定位，好放渐隐 */
  .t-card__body { position: relative; }
  .t-table__content { position: relative; }

  /* 右侧渐隐提示（提示还有内容） */
  .t-card__body:has(.t-table__content)::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
    z-index: 2;
  }

  /* 滚动条常显一点，让人知道能滑 */
  .t-table__content::-webkit-scrollbar { height: 4px; }
  .t-table__content::-webkit-scrollbar-thumb { background: #d5d5d5; border-radius: 2px; }
  .t-table__content::-webkit-scrollbar-track { background: transparent; }

  /* 表格字号收小，能多显示一列 */
  .t-table { font-size: 12px; }
  .t-table th, .t-table td { padding: 8px 10px; }
}

/* ★ TDesign 没有 Paragraph 组件（t-paragraph 会渲染成空标签、文字挤成一行）。
   用普通 p 加行距代替。 */
.tp {
  margin: 0 0 12px;
  line-height: 1.9;
  color: var(--td-text-color-secondary);
}
.tp:last-child { margin-bottom: 0; }
.tp b { color: var(--td-text-color-primary); font-weight: 600; }
.tp code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: var(--td-bg-color-secondarycontainer); padding: 2px 6px; border-radius: 3px;
}

/* ── 出码自检：二维码展示 ── */
.qrbox {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: #fff;
  border: 1px solid var(--td-component-stroke);
  border-radius: var(--td-radius-medium);
}
.qrimg { width: 220px; height: 220px; display: block; image-rendering: pixelated; }
.qrscan { text-align: center; margin-top: 10px; color: var(--td-text-color-placeholder); font: var(--td-font-body-small); }
.qracts { display: flex; justify-content: center; margin-top: 12px; }

/* 判断说明表 */
.checktbl { width: 100%; border-collapse: collapse; font: var(--td-font-body-small); }
.checktbl th {
  text-align: left; padding: 9px 12px; font-weight: 600;
  color: var(--td-text-color-placeholder);
  background: var(--td-bg-color-secondarycontainer);
  border-bottom: 1px solid var(--td-component-stroke);
}
.checktbl td { padding: 11px 12px; border-bottom: 1px solid var(--td-component-stroke); color: var(--td-text-color-secondary); }
.checktbl tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) {
  .qrimg { width: 190px; height: 190px; }
  .checktbl th:nth-child(3), .checktbl td:nth-child(3) { display: none; }
}

/* ── 扫码登录页 ── */
.logstate { display: inline-flex; align-items: center; gap: 7px; font: var(--td-font-body-small); color: var(--td-text-color-placeholder); }
.logstate .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--td-text-color-placeholder); }
.logstate.ok .dot { background: var(--td-success-color); }
.logstate.ok { color: var(--td-success-color); }
.logstate.err .dot { background: var(--td-error-color); }
.logstate.err { color: var(--td-error-color); }

.qrbox {
  display: flex; align-items: center; justify-content: center;
  padding: 14px; background: #fff;
  border: 1px solid var(--td-component-stroke);
  border-radius: var(--td-radius-medium);
}
.qrimg { width: 100%; max-width: 260px; height: auto; display: block; image-rendering: pixelated; }
.qrscan { text-align: center; margin-top: 10px; color: var(--td-text-color-placeholder); font: var(--td-font-body-small); }
.qracts { display: flex; justify-content: center; margin-top: 10px; }

/* 三步说明 */
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step .n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--td-brand-color-light); color: var(--td-brand-color);
  display: flex; align-items: center; justify-content: center;
  font: var(--td-font-body-small); font-weight: 600; margin-top: 2px;
}
.step b { font: var(--td-font-body-medium); font-weight: 600; }
.step .d { color: var(--td-text-color-placeholder); font: var(--td-font-body-small); margin-top: 2px; }

/* 登录成功 */
.okwrap { text-align: center; padding: 26px 16px; }
.oktitle { font: var(--td-font-headline-medium); margin-top: 14px; }
.okname { margin-top: 8px; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); }
.okname .mono { margin-left: 8px; color: var(--td-text-color-placeholder); font-size: 12px; }
.okpool { margin-top: 6px; color: var(--td-text-color-placeholder); font: var(--td-font-body-small); }
.okcd { margin: 18px 0 14px; color: var(--td-text-color-placeholder); font: var(--td-font-body-small); }

@media (max-width: 900px) {
  .qrimg { max-width: 210px; }
}

/* ── 收款通道卡（微信 / 支付宝）── */
.chan {
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-component-stroke);
  border-radius: var(--td-radius-medium);
  padding: 18px;
  height: 100%;
  display: flex; flex-direction: column;
}
.chan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chan-name { display: inline-flex; align-items: center; gap: 7px; font: var(--td-font-title-small); }
.chan-name .t-icon { color: var(--td-text-color-placeholder); }
.chan-wechat .chan-name .t-icon { color: var(--td-success-color); }
.chan-alipay .chan-name .t-icon { color: var(--td-brand-color); }
.chan-num {
  font: var(--td-font-headline-large);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.chan-desc { color: var(--td-text-color-placeholder); font: var(--td-font-body-small); margin-top: 4px; }
.chan-bar {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--td-bg-color-secondarycontainer);
  margin-top: 14px;
}
.chan-used { height: 100%; background: var(--td-brand-color); transition: width .3s; }
.chan-wechat .chan-used { background: var(--td-success-color); }
.chan-foot { margin-top: 8px; color: var(--td-text-color-placeholder); font: var(--td-font-body-extraSmall); }
.chan .t-space { margin-top: auto; }

.qrbox {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: #fff; min-height: 200px;
  border: 1px solid var(--td-component-stroke);
  border-radius: var(--td-radius-medium);
}
.qrimg { width: 100%; max-width: 200px; height: auto; display: block; image-rendering: pixelated; }
.qrnone { color: var(--td-text-color-placeholder); font: var(--td-font-body-small); text-align: center; }
.qrscan { text-align: center; margin-top: 8px; color: var(--td-text-color-placeholder); font: var(--td-font-body-extraSmall); }
.lab { color: var(--td-text-color-placeholder); font: var(--td-font-body-small); margin-bottom: 6px; }

@media (max-width: 900px) {
  .chan-num { font: var(--td-font-headline-medium); }
  .qrimg { max-width: 170px; }
}

/* ═══════════════════════════════════════════════════════════
   ★★ 修 TDesign Dialog 的显隐（2026-10-05 老板："账户没法停用也没法删除"）
   ───────────────────────────────────────────────────────────
   症状：页面一打开，「添加收款号」和「测试出码」两个弹窗【全部显示出来】，
        永远关不掉。于是点「删除」看到的是「添加收款号」弹窗 ——
        看起来就是「停用/删除按钮没反应」。

   根因（实测 DOM）：
     .t-dialog__ctx   → display: none      ← TDesign 正确隐藏了外层
       └ .t-dialog__wrap → display: block  ← 但有 position: fixed
     ★ position:fixed 的元素，父级 display:none 【管不住它】，
       它照样按视口定位渲染出来。
     （这是 CSS 规范行为：fixed 定位脱离常规流，不继承父级 display 的隐藏）

   修法：父级 ctx 隐藏时，明确把里面的 wrap 也藏掉。
   ═══════════════════════════════════════════════════════════ */
.t-dialog__ctx.t-not-display,
.t-dialog__ctx[style*="display: none"] {
  display: none !important;
}
/* 关键：父级隐藏时，里面的 fixed 子元素也要藏 */
.t-dialog__ctx.t-not-display .t-dialog__wrap,
.t-dialog__ctx[style*="display: none"] .t-dialog__wrap {
  display: none !important;
}


/* ── 顶栏品牌（2026-10-27）──
   原来是一个青绿方块里写「收」+ 文字「收款系统」。
   现在换成 zeefox 的品牌图形 + Audiowide 文字，和商城前台一致。 */
@font-face {
  font-family: 'Audiowide';
  src: url('/brand/Audiowide-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
.td-brand { display: flex; align-items: center; gap: 9px; }
.td-brand .td-logo-img { width: 24px; height: 24px; object-fit: contain; display: block; }
.td-brand b {
  font-family: 'Audiowide', 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: 1.4px; color: var(--td-text-color-primary);
}
.td-brand .td-brand-sub {
  font-size: 12px; color: var(--td-text-color-placeholder);
  padding-left: 9px; border-left: 1px solid var(--td-component-stroke);
  line-height: 1; margin-left: 2px;
}


/* 筛选条（商品管理等列表页） */
.filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.filterbar-count { font-size: 13px; color: var(--td-text-color-placeholder); }
.filterbar-count span { color: var(--td-text-color-placeholder); }


/* 商品缩略图 / 封面编辑 / 批量条 */
.pthumb { width: 44px; height: 44px; border-radius: 6px; display: block; flex: none;
  background-color: var(--td-bg-color-secondarycontainer);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.pthumb-empty { display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--td-text-color-placeholder); }
.bulkbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px;
  background: var(--td-brand-color-light); border-radius: 8px; font-size: 13px; }
.bulkbar b { color: var(--td-brand-color); }
.coverbox { display: flex; align-items: center; gap: 14px; }
.coverprev { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex: none;
  background: var(--td-bg-color-secondarycontainer); display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--td-text-color-placeholder); }
.coverprev img { width: 100%; height: 100%; object-fit: cover; }
.coverhint { font-size: 12px; color: var(--td-text-color-placeholder); margin-bottom: 8px; }


/* 商品名 + 缩略图（并在一列，避免 TDesign 自动布局把独立图列压成一条） */
.ptcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ptname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* 商城概览卡片（仪表盘顶部） */
.mallcard { margin-bottom: 0; }
.mallgrid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px; }
.mallitem {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border-radius: 8px; background: var(--td-bg-color-secondarycontainer);
  text-decoration: none; color: inherit; transition: background .15s;
}
a.mallitem:hover { background: var(--td-brand-color-light); }
.mallitem span { font-size: 12.5px; color: var(--td-text-color-secondary); }
.mallitem b { font-size: 22px; font-weight: 600; color: var(--td-text-color-primary); line-height: 1.2; }
.mallitem b.warn { color: var(--td-warning-color); }
.mallitem i { font-style: normal; font-size: 12px; color: var(--td-text-color-placeholder); }
.mallitem i::before { content: ''; }
@media (max-width: 1200px) { .mallgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 760px) { .mallgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }




/* 手机端表格横向滚动：TDesign 默认容器不一定带惯性滚动，
   老板反馈「左右滑动不好使」⇒ 显式打开触摸滚动 + 让操作列吸右。 */
@media (max-width: 900px) {
  .t-table,
  .t-table__content,
  .t-table__content > div {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
  .t-table { overflow-x: auto !important; }
  .t-table__content { min-width: 720px; }
  .t-table td, .t-table th { white-space: nowrap; }
  /* 固定列在手机上给一点左侧投影，能看出"这里冻住了" */
  .t-table__content .t-table__cell--fixed-right,
  .t-table__content td:last-child {
    box-shadow: -6px 0 10px -8px rgba(0,0,0,.25);
  }
}


/* ══ 手机端卡片列表（替代表格）══════
   390px 下表格：商品名被压成「香…」、售价只露「¥16」、编辑/删除在滚动区外点不到。
   手机上直接换成一卡一条，所有信息和按钮都在视口内。 */
.moblist { display: flex; flex-direction: column; gap: 10px; }
.mobcard {
  border: 1px solid var(--td-component-stroke); border-radius: 8px; padding: 12px 13px;
  background: var(--td-bg-color-container);
}
.mobhead { display: flex; align-items: center; gap: 10px; }
.mobhead .pthumb { width: 46px; height: 46px; }
.mobtitle { flex: 1; min-width: 0; }
.mobtitle b { display: block; font-size: 14px; font-weight: 500; color: var(--td-text-color-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobtitle span { display: block; font-size: 12px; color: var(--td-text-color-placeholder); margin-top: 3px; }
.mobmeta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12.5px;
  color: var(--td-text-color-secondary); }
.mobmeta b { font-weight: 600; }
.mobacts { display: flex; gap: 8px; margin-top: 12px; }
.mobacts .t-button { flex: 1; }
.mobempty { text-align: center; padding: 32px 0; color: var(--td-text-color-placeholder); font-size: 13px; }
.mobpager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0 4px;
  font-size: 13px; color: var(--td-text-color-secondary); }


/* 手机卡片批量条 + 勾选位 */
.mobbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 8px; background: var(--td-bg-color-secondarycontainer);
  font-size: 13px; }
.mobbar-sel { color: var(--td-brand-color); font-weight: 500; }
.mobcard { position: relative; }
.mobpick { position: absolute; top: 10px; right: 12px; }
.mobcard .mobhead { padding-right: 30px; }


/* ══ 卡片观感对齐商城前台（2026-10-27）══
   TDesign 默认卡片是「1px 描边 + 无阴影」，商城是「无描边 + 柔阴影 + 8px 圆角」。
   两套摆一起就是两个产品。 */
.t-card {
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 10px rgba(116,116,116,.08) !important;
}
.t-card__header { border-bottom: 1px solid #f0f1f3 !important; }
.t-table { --td-table-border-color: #f0f1f3; }
.t-table th { background: #fafbfc !important; font-weight: 500 !important; }
.t-table tbody tr:hover > td { background: #f7fbfa !important; }
/* 顶栏和侧栏同样是白底 + 细线，别用灰底 */
.td-header { box-shadow: 0 1px 0 rgba(0,0,0,.03); }


/* 商城概览四格（简化版） */
.ms { padding: 4px 0 2px; }
.ms span { display: block; font-size: 13px; color: var(--td-text-color-secondary); margin-bottom: 6px; }
.ms b { font-size: 26px; font-weight: 600; color: var(--td-text-color-primary); line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.ms b.warn { color: var(--td-warning-color); }


/* 系统设置页 */
.tipbox { margin: 0 0 18px; padding: 10px 13px; border-radius: 8px; font-size: 13px; line-height: 1.7;
  background: var(--td-brand-color-light); color: var(--td-text-color-secondary); }
.gwcard { border: 1px solid var(--td-component-stroke); border-radius: 8px; padding: 14px 16px;
  margin-bottom: 14px; }
.gwhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gwhead b { flex: 1; font-size: 14px; font-weight: 500; }
.savebar { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--td-component-stroke); }
.savehint { font-size: 13px; color: var(--td-error-color); }


/* AI 客服设置 */
.swhint { margin-left: 10px; font-size: 13px; color: var(--td-text-color-placeholder); }
.testreply { margin: 4px 0 0 0; padding: 12px 14px; border-radius: 8px; font-size: 13.5px;
  line-height: 1.8; background: var(--td-bg-color-secondarycontainer); white-space: pre-wrap; }




/* ── 设置页 tab 条 ──
   TDesign 的 tabs 窄屏是横向滚动 + 箭头，不好用，自己画。
   桌面：一行胶囊；手机：2 列等宽网格，方角 8px（胶囊在窄屏会挤成三行）。 */
.tabbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tabbtn{
  height:32px;padding:0 14px;border:1px solid transparent;border-radius:16px;cursor:pointer;
  background:var(--td-bg-color-secondarycontainer);color:var(--td-text-color-secondary);
  font:inherit;font-size:13px;line-height:1;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.tabbtn:hover{background:var(--td-brand-color-2)}
.tabbtn.on{background:var(--td-brand-color);color:#fff;font-weight:500}

@media (max-width:900px){
  /* 手机：7 个入口用网格排，一眼看全，不用滑也不用折成三行 */
  .tabbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
  .tabbtn{height:38px;border-radius:8px;font-size:13.5px;padding:0 10px;
    background:#fff;border-color:var(--td-component-stroke);color:var(--td-text-color-primary)}
  .tabbtn.on{background:var(--td-brand-color);border-color:var(--td-brand-color);color:#fff}
  /* 7 个入口是单数，最后一行会只剩半个格子 ⇒ 最后一个跨满两列 */
  .tabbtn:last-child:nth-child(odd){grid-column:span 2}
  /* 选中的 tab 已经说明这是哪一块，卡片里再写一遍标题是重复 */
  .page > .t-card > .t-card__header{display:none}
  .page > .t-card > .t-card__body{padding:16px 14px}
  .page .t-form__item{margin-bottom:18px}
  .page .t-form__label{padding-bottom:6px;font-size:13px}
  /* 保存栏固定在视口底部（sticky 在 .page 里没足够高度，不贴底） */
  .savebar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--td-component-stroke);
    display:flex;align-items:center;gap:10px;
    box-shadow:0 -2px 12px rgba(0,0,0,.05)}
  .savebar .t-button{flex:1 1 auto}
  .savebar .savehint{flex:none;font-size:12px;max-width:45%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 给固定栏留出底部空间，最后一项不被遮住 */
  .page{padding-bottom:76px}
}


/* ★ iOS Safari：输入框 < 16px 时聚焦会放大整页 —— 后台同理，移动端统一 16px */
@media (max-width: 900px) {
  input, textarea, select,
  .t-input__inner, .t-textarea__inner { font-size: 16px !important; }
}


/* 实名认证 tab */
.kycgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.kycitem { padding: 12px 14px; border-radius: 8px; background: var(--td-bg-color-secondarycontainer); }
.kycitem span { display: block; font-size: 12.5px; color: var(--td-text-color-secondary); margin-bottom: 4px; }
.kycitem b { font-size: 22px; font-weight: 600; }
.kycitem.ok b { color: var(--td-success-color); }
.kycitem.bad b { color: var(--td-error-color); }
.kycrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px;
  background: var(--td-bg-color-secondarycontainer); font-size: 13px; }
.kycrow > span:first-child { color: var(--td-text-color-secondary); }
@media (max-width: 760px) { .kycgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }


/* 顶栏右侧操作区（菜单 / 刷新 / 退出）右对齐，别挤在 logo 前面 */
.td-header .td-headops { margin-left: auto; }
.td-header .td-brand { margin-right: 0; }


/* ── 顶栏管理员头像 + 下拉菜单（2026-10-27）──
   原来「退出」是一个裸文字按钮，现在收进头像菜单：修改密码 / 退出登录。 */
.td-headops { display: flex; align-items: center; gap: 6px; margin-left: auto; position: relative; }
.td-me { position: relative; }
.td-av {
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: linear-gradient(140deg, #21c39f, #159b82); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 30px; text-align: center;
  transition: box-shadow .15s; overflow: hidden;
}
.td-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-av:hover, .td-me.open .td-av { box-shadow: 0 0 0 3px var(--td-brand-color-2); }
.td-memenu {
  position: absolute; right: 0; top: 38px; z-index: 60; min-width: 168px;
  background: #fff; border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(20,40,50,.16); border: 1px solid var(--td-component-stroke);
}
.td-mename { padding: 8px 10px 10px; border-bottom: 1px solid var(--td-component-stroke); margin-bottom: 4px; }
.td-mename b { display: block; font-size: 13.5px; font-weight: 600; }
.td-mename span { font-size: 12px; color: var(--td-text-color-placeholder); }
.td-memenu button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: 13.5px; color: var(--td-text-color-primary); cursor: pointer;
}
.td-memenu button:hover { background: var(--td-bg-color-secondarycontainer); }
.td-menu-btn { order: 9; }
.td-refresh { order: 1; }
.td-me { order: 8; }
@media (max-width: 900px) {
  .td-lbl { display: none; }
  .td-av { width: 28px; height: 28px; line-height: 28px; font-size: 12px; }
}


/* 未匹配到账明细 */
.unm { margin-top: 14px; border-top: 1px solid var(--td-component-stroke); padding-top: 12px; }
.unm-hd { font-size: 12.5px; color: var(--td-text-color-secondary); margin-bottom: 8px; }
.unm-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.unm-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.unm-info b { font-size: 14px; color: var(--td-warning-color); font-variant-numeric: tabular-nums; flex: none; }
.unm-info b.noise { color: var(--td-text-color-placeholder); }
.unm-raw { font-size: 12px; color: var(--td-text-color-placeholder); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }


/* 订单详情弹层 */
.od-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f4f5f7; font-size: 13.5px; }
.od-row > span { width: 76px; flex: none; color: var(--td-text-color-secondary); }
.od-row > b { flex: 1; min-width: 0; font-weight: 500; word-break: break-all; }
.od-block { margin-top: 12px; font-size: 13.5px; }
.od-block > span { display: block; color: var(--td-text-color-secondary); margin-bottom: 6px; }
.od-block pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--td-bg-color-secondarycontainer);
  font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; color: var(--td-text-color-primary); }
.od-log { font-size: 12.5px; color: var(--td-text-color-secondary); line-height: 1.9; }


/* ══ 手机端表格兜底（2026-10-27）══
   后台还有 12 个页面是纯表格（订单/通道/云服务器/套餐…），逐个改卡片工作量大。
   这里给一个通用兜底：表格容器可横向滚动 + 内容设最小宽度，
   保证不"被截断看不完整"，需要看右边的列时能滑过去。
   ★ 高频页面（商品/商城订单/会员）已有专门的卡片版，不走这条。 */
@media (max-width: 900px) {
  .t-table,
  .t-table__content,
  .t-table__content > div,
  .t-table__wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .t-table__content table,
  .t-table table {
    min-width: 620px;
  }
  .t-table th, .t-table td { white-space: nowrap; }
  /* 卡片里的大表格（订单详情等）允许换行 */
  .t-dialog .t-table th, .t-dialog .t-table td { white-space: normal; }
}


/* ══ 手机端弹层不越界（2026-10-27）══
   踩过：会员「余额流水」写死 width="720px"，390 宽屏幕上弹层一半在屏外、
   关闭按钮点不到、左边文字被切。所有弹层统一按视口收窄，不依赖各页面自己写宽度。 */
@media (max-width: 900px) {
  .t-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
  }
  .t-dialog__body { padding: 16px !important; }
  .t-dialog__header { padding: 16px 16px 8px !important; }
  .t-dialog__footer { padding: 12px 16px 16px !important; }
  /* 弹层里的表格：不要沿用 620px 最小宽（那会让 366px 的弹层只能看到左边几列） */
  .t-dialog .t-table { max-width: 100%; }
  /* ★ TDesign 表格是 table-layout:fixed + 每列带 width，只改 width 没用 —— 必须换 layout */
  .t-dialog .t-table table,
  .t-dialog .t-table__content table {
    min-width: 0 !important; width: 100% !important;
    table-layout: auto !important;
  }
  .t-dialog .t-table colgroup col,
  .t-dialog .t-table col { width: auto !important; }
  .t-dialog .t-table th, .t-dialog .t-table td {
    white-space: normal !important; word-break: break-word; font-size: 12.5px;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .t-dialog .t-form { max-width: 100%; }
}


/* 手机端余额流水列表（弹层里不用表格，避免 TDesign 撑宽） */
.wl { max-height: 420px; overflow-y: auto; }
.wl-row { padding: 10px 0; border-bottom: 1px solid #f4f5f7; }
.wl-row:last-child { border-bottom: 0; }
.wl-top { display: flex; align-items: baseline; gap: 8px; }
.wl-top b { font-size: 15px; font-variant-numeric: tabular-nums; }
.wl-kind { font-size: 12px; color: var(--td-text-color-secondary); }
.wl-after { margin-left: auto; font-size: 12px; color: var(--td-text-color-placeholder); }
.wl-sub { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--td-text-color-placeholder); }
.wl-memo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 工单对话附图（2026-10-27） */
.tkmsg-img{display:block;margin-top:8px}
.tkmsg-img img{max-width:100%;max-height:260px;border-radius:8px;border:1px solid #e7eaee;display:block}
.tkmsgs{display:flex;flex-direction:column;gap:14px;padding:4px 0 16px;max-height:44vh;overflow-y:auto}
.tkmsg{max-width:78%;display:flex;flex-direction:column;gap:5px}
.tkmsg.me{align-self:flex-end;align-items:flex-end}
.tkmsg.admin{align-self:flex-start;align-items:flex-start}
.tkmsg-b{padding:10px 13px;border-radius:10px;font-size:13.5px;line-height:1.65;color:#1f2329;
  background:#fff;border:1px solid #e7eaee;word-break:break-word;white-space:pre-wrap}
.tkmsg.me .tkmsg-b{background:#e8f7f3;border-color:#bde8dd}
.tkmsg-t{font-size:11.5px;color:#a3a9b3}
.tkreply{margin-top:6px}
.tkreply-ft{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.tkmeta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12.5px;color:#8a919b;padding-bottom:10px}
.tkmeta b{color:#1f2329;font-weight:500}

/* ═══════════════════════════════════════════════════════════
   ★ 2026-10-27 移动端后台滚动兜底
   老板：「移动端管理员后台好多地方都滑动不了看不到完整的界面内容」
   根因：TDesign 表格在窄屏有固定列宽（商品表 720px），
         外层没给横向滚动 ⇒ 右侧列直接被截断，页面也滚不过去。
   兜底：所有表格容器允许横向滚；手机上再收紧内边距。
   ═══════════════════════════════════════════════════════════ */
.t-table, .t-table__content, .t-table__header-wrapper,
.t-table__body-wrapper, .t-table--layout-fixed,
.t-card__body > .t-table { overflow-x: auto; -webkit-overflow-scrolling: touch }
.t-table__content::-webkit-scrollbar,
.t-table__body-wrapper::-webkit-scrollbar { height: 6px }
.t-table__content::-webkit-scrollbar-thumb,
.t-table__body-wrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px }

@media (max-width: 900px) {
  /* 主内容区留出可滚动手感，别把高度写死 */
  .t-layout__content { overflow-x: hidden; overflow-y: auto }
  /* 卡片与弹窗收紧，避免撑破 */
  .t-card__body { padding-left: 12px !important; padding-right: 12px !important }
  .t-dialog { max-width: calc(100vw - 16px) !important }
  .t-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; -webkit-overflow-scrolling: touch }
  .t-table td, .t-table th { white-space: nowrap }
  /* 弹窗里的表格不能超出弹窗宽度（商品卡密表、云服务器表） */
  .t-dialog .t-table, .t-dialog .t-table__content { max-width: 100%; overflow-x: auto }
  /* ★ 表格真正撑破的是它的父容器：t-card__body 366px 里塞 560px 表格。
     容器允许横向滚，右侧列才看得见（商品表的"操作"列原来完全够不到）。 */
  .t-card__body, .t-loading__parent, .td-page { overflow-x: auto; -webkit-overflow-scrolling: touch }
}

/* ═══════════════════════════════════════════════════════════
   云服务器后台 · 手机端卡片列表（2026-10-27）
   老板：「移动端的管理员后台云服务器页要重新设计，这样不行」
   原来表格 720px 塞进 390 宽，表头被截断、右侧操作够不到。
   ═══════════════════════════════════════════════════════════ */
.clmob{display:flex;flex-direction:column;gap:10px}
.clcard{background:#fff;border:1px solid var(--td-component-stroke);border-radius:10px;
  padding:13px 14px;display:flex;flex-direction:column;gap:9px}
.clcard-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.clcard-hd b{font-size:14px;font-weight:600;color:var(--td-text-color-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clcard-row{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.clcard-row .k{color:var(--td-text-color-placeholder);flex:0 0 44px}
.clcard-row .v{color:var(--td-text-color-primary);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clcard-row .v.mono{font-family:ui-monospace,Menlo,monospace}
.clcopy{border:1px solid var(--td-brand-color);background:none;color:var(--td-brand-color);
  font-size:11.5px;padding:2px 8px;border-radius:6px;flex:none}
.clcard-ft{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px;
  padding-top:11px;border-top:1px solid var(--td-component-stroke)}
.clbtn{height:32px;border-radius:7px;border:1px solid var(--td-component-stroke);
  background:#fff;color:var(--td-text-color-primary);font-size:12.5px}
.clbtn:disabled{opacity:.42}
.clnone{padding:44px 0;text-align:center;color:var(--td-text-color-placeholder);font-size:13px}
@media (max-width: 900px) {
  .clfilter{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
  .clfilter .t-input{width:100% !important}
  .clfilter .t-radio-group{display:flex;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .clfilter .t-radio-button{flex:none}
  .clfilter > span[title]{display:none !important}
}

.clcard-row .vsub{font-size:11.5px;color:var(--td-text-color-placeholder)}

.clbtn-wide{width:100%;margin-top:8px;border-color:var(--td-brand-color);
  color:var(--td-brand-color);height:34px}

.clcard-tap{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.clcard-tap:hover{border-color:var(--td-brand-color);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.t-table tbody tr{cursor:pointer}

.clcard-ft2{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.clbtn-ban{height:32px;border-radius:7px;border:1px solid #e34d59;background:#fff;
  color:#e34d59;font-size:12.5px}
.clbtn-unban{height:32px;border-radius:7px;border:1px solid var(--td-brand-color);background:#fff;
  color:var(--td-brand-color);font-size:12.5px}

/* ═══════ 后台服务器详情抽屉（2026-10-27）═══════ */
.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--td-component-stroke);
  border:1px solid var(--td-component-stroke);border-radius:9px;overflow:hidden}
.cd-cell{background:#fff;padding:10px 13px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cd-cell span{font-size:11.5px;color:var(--td-text-color-placeholder)}
.cd-cell b{font-size:13px;font-weight:500;color:var(--td-text-color-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-cell b.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.cd-cell .t-link{font-size:11.5px;align-self:flex-start}
.cd-sec{font-size:12.5px;color:var(--td-text-color-placeholder);margin-bottom:9px}
.cd-ban{padding:10px 13px;border-radius:8px;background:#fdecee;color:#c9353f;
  font-size:12.5px;line-height:1.6}
.cd-empty{padding:26px 0;text-align:center;color:var(--td-text-color-placeholder);font-size:12.5px}
.cd-charts{display:flex;flex-direction:column;gap:12px}
.cd-chart{border:1px solid var(--td-component-stroke);border-radius:9px;padding:10px 12px}
.cd-chart-hd{font-size:12px;color:var(--td-text-color-placeholder);margin-bottom:8px}
.cd-chart-hd b{color:var(--td-text-color-primary);font-weight:600;margin-left:6px}
.cd-bars{display:flex;align-items:flex-end;gap:2px;height:96px;background:#fafbfc;
  border-radius:6px;padding:6px}
.cd-bars i{flex:1;background:var(--td-brand-color);border-radius:2px;min-height:2px;opacity:.8}
.cd-bars.mem i{background:#0d9bd4}
.cd-bars.disk i{background:#e8a33d}
@media (max-width: 900px) {
  .cd-grid{grid-template-columns:1fr}
}

/* ★ 移动端：抽屉里图表不许超出容器（canvas 会按 init 时的宽度定死，可能 600px） */
.cd-chart{overflow:hidden;max-width:100%}
.cd-chart > div[id^="cd_"]{max-width:100%}
.cd-chart canvas{max-width:100% !important}
.t-drawer, .t-drawer__content, .t-drawer__body{max-width:100vw;overflow-x:hidden}
.t-drawer__body{overflow-y:auto}
html, body{max-width:100%;overflow-x:clip}
body{touch-action:pan-y}

/* 工单详情：客户名下服务器 */
.tkassets{margin:10px 0 4px;border:1px solid var(--td-component-stroke);border-radius:9px;overflow:hidden}
.tkassets-hd{padding:8px 12px;background:#f7f8fa;font-size:12px;color:var(--td-text-color-placeholder)}
.tkasset{display:flex;align-items:center;gap:10px;padding:9px 12px;flex-wrap:wrap;
  border-top:1px solid var(--td-component-stroke);font-size:12.5px}
.tkasset b{font-weight:600;color:var(--td-text-color-primary)}
.tkasset .mono{font-family:ui-monospace,Menlo,monospace;color:var(--td-text-color-secondary)}
.tkasset-p{color:var(--td-text-color-placeholder);font-size:12px}
.tkassets-none{padding:12px;font-size:12.5px;color:var(--td-text-color-placeholder);
  border:1px dashed var(--td-component-stroke);border-radius:9px;text-align:center}

/* ══════ 工单会话：微信式（用户左 / 客服右）══════ */
.tkmsgs{display:flex;flex-direction:column;gap:14px;max-height:46vh;overflow-y:auto;
  padding:14px 4px 10px;background:#f7f8fa;border-radius:10px;margin:12px 0}
.tkrow{display:flex;align-items:flex-start;gap:9px;padding:0 12px}
.tkrow.is-admin{flex-direction:row-reverse}
.tkava{width:32px;height:32px;border-radius:8px;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  background:#e8eaed;color:#8a9099;font-weight:600}
.tkava img{width:100%;height:100%;object-fit:cover;display:block}
.tkrow.is-user .tkava{background:#e6f6f2;color:#0b8a72}
.tkava-me{background:var(--td-brand-color);color:#fff;font-size:13px}
.tkbub-wrap{display:flex;flex-direction:column;gap:5px;max-width:calc(100% - 90px);min-width:0}
.tkrow.is-admin .tkbub-wrap{align-items:flex-end}
.tkbub{padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.65;
  background:#fff;color:var(--td-text-color-primary);white-space:pre-wrap;word-break:break-word;
  border:1px solid var(--td-component-stroke)}
.tkrow.is-admin .tkbub{background:var(--td-brand-color);color:#fff;border-color:transparent}
.tkrow.is-admin .tkbub a{color:#fff;text-decoration:underline}
.tkbub-t{font-size:11px;color:var(--td-text-color-placeholder);white-space:nowrap}
.tkmsg-img img{max-width:180px;border-radius:8px;margin-top:6px;display:block}
@media (max-width:900px){
  .tkmsgs{max-height:none}
  .tkbub-wrap{max-width:calc(100% - 76px)}
}

/* 表单字段网格：数值 + 单位贴在一起，单位不换行 */
.fld-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;width:100%}
.fld{display:flex;align-items:center;gap:6px;min-width:0}
.fld .t-input-number,.fld .t-input{flex:1 1 auto;min-width:0}
.fld i{font-style:normal;font-size:12.5px;color:var(--td-text-color-placeholder);
  white-space:nowrap;flex:none}
@media (max-width:900px){
  .fld-grid{grid-template-columns:1fr 1fr}
}

/* ★ 移动端：面包屑已经写了页面名，下面再来个大标题就重复（老板指出系统设置那页）
   ⇒ 手机上隐藏 h1 */
@media (max-width:900px){
  .td-headrow h1{display:none}
  .td-headrow{margin-bottom:0}
  .td-headrow .td-desc{margin-top:0;color:var(--td-text-color-placeholder);font-size:12.5px}
  .td-page > .t-breadcrumb{margin-bottom:8px}
}

/* 到账记录的支付宝 PID 是 16 位数字，窄屏允许横向滚动而不是压断 */
.t-table__body-wrapper{overflow-x:auto}
.t-table td{word-break:keep-all}

/* ══════ 收款号：移动端卡片（替掉横向滚动的 8 列宽表）══════ */
.acclist{display:flex;flex-direction:column;gap:10px}
.acccard{border:1px solid var(--td-component-stroke);border-radius:10px;padding:11px 13px;
  display:flex;flex-direction:column;gap:8px;background:#fff}
.acccard-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acccard-hd b{font-size:14.5px;font-weight:600;color:var(--td-text-color-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.acccard-id{font-size:11.5px;color:var(--td-text-color-placeholder);
  font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acccard-bar{height:5px;border-radius:3px;background:#eef0f3;overflow:hidden}
.acccard-bar i{display:block;height:100%;background:var(--td-brand-color);border-radius:3px;
  transition:width .2s}
.acccard-bar i.warn{background:#e8a33d}
.acccard-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  color:var(--td-text-color-placeholder);flex-wrap:wrap}
.acccard-row b{color:var(--td-text-color-primary);font-weight:600}
.acccard-limit{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--td-text-color-placeholder)}
.acccard-limit .t-input-number{width:120px}
.acccard-limit i{font-style:normal}
.acccard-acts{display:flex;gap:8px;flex-wrap:wrap}
.acccard-acts .t-button{flex:1 1 auto;min-width:0}
.accnone{padding:30px 0;text-align:center;color:var(--td-text-color-placeholder);font-size:13px}

/* 通知开关矩阵 */
.subtitle{font-size:13.5px;font-weight:600;color:var(--td-text-color-primary);
  margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--td-component-stroke)}
.notifygrid{max-width:420px;margin-bottom:18px;border:1px solid var(--td-component-stroke);
  border-radius:8px;overflow:hidden}
.ngrow{display:grid;grid-template-columns:1fr 72px 72px;align-items:center;
  padding:9px 14px;font-size:13px;border-top:1px solid var(--td-component-stroke)}
.ngrow:first-child{border-top:0}
.nghead{background:#f7f8fa;font-size:12px;color:var(--td-text-color-placeholder);font-weight:500}
.ngrow > span:nth-child(2),.ngrow > span:nth-child(3){text-align:center}
.nghead > span:nth-child(2),.nghead > span:nth-child(3){text-align:center}

.nggroup{grid-column:1/-1;padding:7px 14px;background:#fafbfc;font-size:11.5px;
  color:var(--td-text-color-placeholder);font-weight:600;letter-spacing:.3px;
  border-top:1px solid var(--td-component-stroke)}
.notifygrid .nggroup:first-of-type{border-top:0}

/* 导航菜单 / 社交入口 编辑列表 */
.navlist{display:flex;flex-direction:column;gap:8px;max-width:820px}
.navrow,.socrow{border:1px solid var(--td-component-stroke);border-radius:8px;padding:10px 12px;
  background:#fff;display:flex;flex-direction:column;gap:8px}
.navrow{flex-direction:row;align-items:center;gap:10px}
.navno{width:20px;font-size:12px;color:var(--td-text-color-placeholder);text-align:center;flex:none}
.socrow-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.socrow-bd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.socupload{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  height:24px;padding:0 10px;border:1px solid var(--td-component-stroke);border-radius:6px;
  font-size:12px;color:var(--td-text-color-secondary);cursor:pointer;flex:none}
.socupload:hover{border-color:var(--td-brand-color);color:var(--td-brand-color)}
.socupload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.socqr img{max-height:64px;border-radius:6px;border:1px solid var(--td-component-stroke);display:block}
.navempty{padding:20px;text-align:center;font-size:13px;color:var(--td-text-color-placeholder);
  border:1px dashed var(--td-component-stroke);border-radius:8px}
@media (max-width:900px){
  .navrow{flex-direction:column;align-items:stretch}
  .navrow .t-input{width:100%!important}
}

/* 首屏轮播图缩略图网格 */
.imglist{display:flex;flex-wrap:wrap;gap:12px;max-width:820px;margin-bottom:6px}
.imgcell{width:150px;border:1px solid var(--td-component-stroke);border-radius:8px;
  overflow:hidden;background:#fafbfc;display:flex;flex-direction:column}
.imgcell img{width:100%;height:88px;object-fit:cover;display:block}
.imgph{height:88px;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--td-text-color-placeholder)}
.imgacts{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;gap:4px}
.imgadd{height:132px;align-items:center;justify-content:center;cursor:pointer;
  font-size:22px;color:var(--td-text-color-placeholder);border-style:dashed}
.imgadd:hover{border-color:var(--td-brand-color);color:var(--td-brand-color)}


/* ═══ 上游预览抽屉（重排） ═══ */
.pv2{display:flex;flex-direction:column;gap:14px}
.pv2-sec{background:#fff}
.pv2-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.pv2-t{font-size:13.5px;font-weight:600;color:var(--td-text-color-primary)}
.pv2-sub{font-size:12px;color:var(--td-text-color-placeholder)}

/* 定价规则 */
.pv2-rule{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  padding:14px;background:#fafbfc;border-radius:10px;border:1px solid var(--td-component-stroke)}
.pv2-fld{display:flex;flex-direction:column;gap:6px}
.pv2-fld > span{font-size:12px;color:var(--td-text-color-secondary)}
.pv2-pct{display:flex;align-items:center;gap:6px}
.pv2-pct .t-input-number{width:110px}
.pv2-pct em{font-style:normal;font-size:13px;color:var(--td-text-color-placeholder)}
.pv2-rule .t-select{width:150px}
.pv2-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:5px}
.pv2-quick > span{font-size:12px;color:var(--td-text-color-placeholder);margin-right:2px}
.pv2-chip{height:26px;padding:0 10px;border-radius:6px;border:1px solid var(--td-component-stroke);
  background:#fff;font:inherit;font-size:12px;color:var(--td-text-color-secondary);cursor:pointer;
  transition:all .15s}
.pv2-chip:hover{border-color:var(--td-brand-color);color:var(--td-brand-color)}
.pv2-chip.on{background:var(--td-brand-color);border-color:var(--td-brand-color);color:#fff;font-weight:500}

/* 筛选 */
.pv2-filter{display:flex;gap:8px;flex-wrap:wrap}
.pv2-filter .pv2-kw{flex:1 1 220px;min-width:180px}
.pv2-filter .t-select{width:160px;flex:0 0 auto}
.pv2-bulk{display:flex;align-items:center;gap:12px;margin-top:10px;min-height:24px}
.pv2-picked{font-size:12.5px;font-weight:500;color:var(--td-brand-color)}
.pv2-clear{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  color:var(--td-text-color-placeholder);cursor:pointer;text-decoration:underline}
.pv2-clear:hover{color:var(--td-text-color-primary)}

/* 汇总 */
.pv2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--td-component-stroke);border:1px solid var(--td-component-stroke);
  border-radius:10px;overflow:hidden}
.pv2-stats > div{background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.pv2-stats b{font-size:19px;font-weight:600;color:var(--td-text-color-primary);line-height:1.2}
.pv2-stats b.good{color:#0b8a72}
.pv2-stats span{font-size:11.5px;color:var(--td-text-color-placeholder)}

/* 手机卡片列表 */
.pv2-cards{display:flex;flex-direction:column;gap:8px}
.pv2-cards.loading{opacity:.55}
.pv2-card{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;
  border:1px solid var(--td-component-stroke);
  border-radius:10px;background:#fff;cursor:pointer}
.pv2-card > .t-checkbox{flex:none;margin-top:1px}
.pv2-card:active{background:#fafbfc}
.pv2-cmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.pv2-ctitle{font-size:13.5px;font-weight:500;color:var(--td-text-color-primary);
  line-height:1.45;word-break:break-word}
.pv2-cmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:var(--td-text-color-placeholder)}
.pv2-tag{font-size:11px;padding:1px 6px;border-radius:4px;
  background:var(--td-component-stroke);color:var(--td-text-color-secondary)}
.pv2-tag.ok{background:#e9f8f3;color:#0b8a72}
.pv2-cprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12.5px}
.pv2-cprice .cost{color:var(--td-text-color-placeholder)}
.pv2-cprice .sale{font-weight:600;color:var(--td-text-color-primary)}
.pv2-cprice .margin{color:#0b8a72}
.pv2-cstock{font-size:11.5px;color:var(--td-text-color-placeholder)}
.pv2-cstock b{color:var(--td-text-color-secondary);font-weight:500}
.pv2-cstock b.bad{color:#c33}
.pv2-empty{padding:36px 0;text-align:center;font-size:13px;color:var(--td-text-color-placeholder)}

/* 底部操作条 */
.pv2-foot{display:flex;align-items:center;gap:10px}

@media (max-width:900px){
  .pv2{gap:12px}
  .pv2-rule{padding:12px;gap:12px}
  .pv2-fld{flex:1 1 100%}
  .pv2-pct .t-input-number{width:100%}
  .pv2-rule .t-select{width:100%}
  .pv2-quick{flex:1 1 100%;padding-bottom:0}
  .pv2-filter .pv2-kw,
  .pv2-filter .t-select{flex:1 1 100%;width:100%}
  .pv2-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv2-stats > div{padding:10px 12px}
  .pv2-stats b{font-size:17px}
  .pv2-foot{flex-wrap:wrap}
  .pv2-foot .t-button{flex:1 1 auto}
  .pv2-foot .t-button:last-child{flex:1 1 100%}
}

.coverpv{width:56px;height:40px;object-fit:cover;border-radius:6px;
  border:1px solid var(--td-component-stroke);display:block;flex:none}