会被浏览器 foster-parent 移动到表格之外，CSS 无法居中
—— 说明：`table.list td` 的 text-align:left 特异性为 (0,0,1,2)，
故空态需写 `table.list td.empty` 才能让 text-align:center 生效
--------------------------------------------------------------------------- */
table.list td.empty {
text-align: center;
vertical-align: middle;
height: 140px;
}
/* M70：内联 grid 抽为工具类
—— 内联 style 的优先级高于样式表，媒体查询无法覆盖，故响应式布局必须使用类名 */
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-2-wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.grid-2-wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 900px) {
/* 筛选项 / 状态标签：横向滚动，避免换行占满多行 */
.tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.tabs a { flex: 0 0 auto; }
#status-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
#status-tabs a { flex: 0 0 auto; }
/* 内联 grid 工具类：窄屏统一单列 */
.grid-2,
.grid-2-wide-left,
.grid-2-wide-right,
.grid-auto { grid-template-columns: minmax(0, 1fr); }
/* 卡片列表：表格 → 卡片（标签 / 值） */
.table-wrap { overflow-x: visible; }
.list-cards thead { display: none; }
.list-cards,
.list-cards tbody,
.list-cards tr,
.list-cards td { display: block; width: 100%; }
.list-cards tr {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-soft);
padding: 10px 12px;
margin-bottom: 10px;
}
.list-cards td {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px 10px;
border-bottom: 0;
padding: 5px 0;
white-space: normal;
word-break: break-word;
}
.list-cards td::before {
content: attr(data-label);
flex: 0 0 72px;
color: var(--muted);
font-size: 12px;
line-height: 1.75;
}
/* 未声明 data-label 的单元格不渲染标签（避免出现空占位） */
.list-cards td:not([data-label])::before { content: none; }
.list-cards td.ops { white-space: normal; }
.list-cards td.ops .link { white-space: nowrap; line-height: 1.9; }
/* 空态行不参与「标签 / 值」布局 */
.list-cards td.empty { display: block; height: auto; padding: 22px 0; text-align: center; }
.list-cards td.empty::before { content: none; }
.list-cards tbody tr:last-child td { border-bottom: 0; }
/* 分页条：窄屏换行不挤压 */
.pager-bar { flex-wrap: wrap; }
/* 键值对与详情操作按钮：窄屏可换行 */
.kv { gap: 10px; word-break: break-word; }
#order-detail .kv { gap: 10px; word-break: break-word; }
#order-detail .row > * { flex: 1 1 auto; }
/* 站内消息：标题与时间在窄屏可换行（避免标题被挤成竖排） */
.notice-item .notice-head { flex-wrap: wrap; }
.notice-item .notice-time { margin-left: auto; }
}
/* ---------------------------------------------------------------------------
M73：用户中心「左右结构」（左侧菜单 + 右侧内容）
—— 桌面：两栏 grid（212px 菜单 + 自适应内容），菜单竖排并吸顶随页面滚动
—— 手机（≤900px）：**不显示用户菜单**（页头账户抽屉已提供同样入口），内容单列铺满
--------------------------------------------------------------------------- */
.uc-layout {
display: grid;
grid-template-columns: 212px minmax(0, 1fr);
gap: 22px;
align-items: start;
margin-top: 10px;
}
.uc-side {
position: sticky;
top: 74px;
min-width: 0;
}
/* 菜单：竖排列表（覆盖 .tabs 的横向胶囊样式） */
.uc-side .tabs {
flex-direction: column;
flex-wrap: wrap;
overflow: visible;
gap: 6px;
margin-bottom: 0;
}
.uc-side .tabs a {
display: block;
width: 100%;
padding: 9px 14px;
border-radius: 10px;
white-space: nowrap;
}
.uc-main { min-width: 0; }
@media (max-width: 900px) {
.uc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* 手机端不显示用户菜单 */
.uc-side { display: none; }
}
/* ---------------------------------------------------------------------------
M92：充值信息「图片」字段（用户中心订单详情等只读展示）→ 缩略图
点击图片在新窗口查看原图（.acc-img 为
包裹 ![]()
）。
--------------------------------------------------------------------------- */
.acc-img { display: inline-block; }
.acc-img img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
/* ---------------------------------------------------------------------------
M95：推广合作页拆分为多页（概览 / 推广列表 / 订单列表 / 提现记录）
—— 复用用户中心的左右结构（.uc-layout / .uc-side / .uc-main）
—— 窄屏左栏隐藏（M73 规则），故正文顶部再放一份横向导航 #af-mobile-nav；
宽屏隐藏该副本，避免与左栏重复。
--------------------------------------------------------------------------- */
@media (min-width: 901px) {
#af-mobile-nav { display: none; }
}
#af-mobile-nav { margin-bottom: 14px; }
/* 空态与说明文字在推广各页统一留白 */
.af-tip { color: var(--muted); font-size: 13px; margin: 6px 0 12px; }
/* M96：卡片标题与右侧操作按钮「左右分布」（如「提现记录」+「申请提现」） */
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.card-head h3 { margin: 0; }
/* ---------------------------------------------------------------------------
M105：用户端订单详情「分区 + 描述行」
—— 不再使用 grid card；参考管理端订单详情：分区标题 + 「左标签 / 右值」描述行
--------------------------------------------------------------------------- */
.desc-sec { margin: 0 0 16px; }
.desc-sec-title {
margin: 0 0 8px;
padding-left: 9px;
border-left: 3px solid var(--primary);
font-size: 14px;
font-weight: 600;
}
.desc {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.desc-row {
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
gap: 8px;
align-items: start;
padding: 9px 12px;
border-bottom: 1px dashed var(--line);
font-size: 13px;
}
.desc-row:last-child { border-bottom: 0; }
.desc-k { color: var(--muted); }
.desc-v { min-width: 0; word-break: break-word; }
.desc-empty { padding: 9px 12px; color: var(--muted); font-size: 13px; }
/* ---------------------------------------------------------------------------
M106：字段类分区改为「一行 3~4 列」（与管理端订单详情同口径）
—— 商品与金额 / 支付信息 / 充值信息等**字段类**分区加 `.desc-grid`；
交付进度 / 时间线等**记录类**分区不加，保持整行铺开。
--------------------------------------------------------------------------- */
.desc.desc-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0 18px;
padding: 4px 12px;
}
/* 网格内每格为「标签 + 值」内联排布（不再占满整行，仍保留虚线分隔便于扫读） */
.desc.desc-grid .desc-row {
display: flex;
align-items: baseline;
gap: 8px;
padding: 7px 0;
border-bottom: 1px dashed var(--line);
grid-template-columns: none;
}
.desc.desc-grid .desc-k { flex: 0 0 auto; min-width: 76px; }
.desc.desc-grid .desc-v { flex: 1 1 auto; min-width: 0; }
/* 宽屏 4 列 → 中屏 3 列 → 平板 2 列 → 手机 1 列 */
@media (max-width: 1500px) {
.desc.desc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
.desc.desc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 窄屏：标签与值改为上下两行，避免标签列挤压内容 */
@media (max-width: 720px) {
.desc-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.desc.desc-grid { grid-template-columns: minmax(0, 1fr); }
.desc.desc-grid .desc-row { flex-wrap: wrap; }
}
/* 订单详情时间线（并入分区体系后统一字号） */
#order-timeline { font-size: 13px; }