/* ============================================================================
   素材市场 · 页面样式（配套 /js/pages/material.js）
   ----------------------------------------------------------------------------
   规矩（《视觉规范-全站-20261031》）：
     · 颜色/圆角/阴影/字号只取 token，不写死色值（本文件除遮罩的 rgba 外无 # 色）；
     · 一页一个文件，样式随页面走，不往 index.html 里堆；
     · 断点跟全站一致：≤1000 收两栏，≤820 单列，≤640 手机档。
   ========================================================================== */

/* 容器不再限宽：1440 上限 1280 会在右侧留一大片空白（老板截图点名）。
   铺满可用宽度，列数交给栅格自适应，超宽屏用下方断点兜住。 */
.mt{display:flex; flex-direction:column; gap:18px;}

/* ---------- 顶部指标 ---------- */
.mt-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.mt-kpi{
  position:relative; padding:16px 18px 15px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--panel); box-shadow:var(--sh-1); min-width:0;
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.mt-kpi[data-go]{cursor:pointer;}
.mt-kpi[data-go]:hover{border-color:var(--ac-line); box-shadow:var(--sh-2); transform:translateY(-1px);}
.mt-kpi .n{
  font-size:27px; font-weight:650; line-height:1.1; letter-spacing:-.8px;
  color:var(--txt); font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mt-kpi .n small{font-size:13px; font-weight:500; color:var(--txt-3); letter-spacing:0; margin-left:4px;}
.mt-kpi .l{font-size:12px; color:var(--txt-2); margin-top:7px;}
.mt-kpi .f{font-size:11px; color:var(--txt-3); margin-top:3px; line-height:1.6;}
.mt-kpi.warn{border-color:var(--red-line);}
.mt-kpi.warn .n{color:var(--red);}

/* ---------- 工具条 ---------- */
/* 电脑端一行：来源分段 + 搜索 + 排序 + 已入库 + 重读（老板 2026-11-01 定）
   手机上这一串放不下，来源分段由 order 让位到第二行 —— 见 ≤640 断点。 */
.mt-bar{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
.mt-seg-wrap{display:flex; min-width:0; flex:0 0 auto;}
/* 控件组统一右对齐；搜索框 flex 吃掉剩余宽度，控件自然贴右 */
.mt-bar-r{display:flex; align-items:center; gap:8px; margin-left:auto;}
.mt-icon-btn{
  width:34px; height:34px; flex:0 0 34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.05);
  color:var(--txt-2); cursor:pointer; transition:.15s; padding:0;
}
.mt-icon-btn svg{width:15px; height:15px;}
.mt-icon-btn:hover{border-color:var(--ac-line); color:var(--txt); background:rgba(255,255,255,.08);}
html[data-theme="light"] .mt-icon-btn{background:rgba(16,24,40,.03);}
/* 已入库是「开关型」图标按钮：按下时常亮，和普通按钮一眼分得清 */
.mt-icon-btn.on{
  border-color:var(--ac-line); color:var(--ac); background:var(--ac-soft); font-weight:600;
}
.mt-icon-btn.on svg{stroke-width:2;}
.mt-search{position:relative; flex:1 1 200px; min-width:110px; max-width:560px;}
.mt-search input{
  width:100%; height:38px; padding:0 34px 0 34px; font-size:13px; font-family:inherit;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); color:var(--txt);
  transition:border-color .15s, box-shadow .15s;
}
.mt-search input:focus{outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-soft);}
.mt-search .ic{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px;
  stroke:var(--txt-3); fill:none; stroke-width:1.7; pointer-events:none;}
.mt-search .clr{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:0;
  border-radius:50%; background:var(--line-soft); color:var(--txt-3); font-size:12px; line-height:1;
  cursor:pointer; display:none; font-family:inherit;
}
.mt-search.has-q .clr{display:block;}

/* 排序：图标 + 原生下拉。图标尺寸/线宽与搜索、已入库、重读完全一致，
   四个控件放在一排时是同一套视觉语言（老板 2026-11-01：图标要统一）。 */
.mt-ico-sel{position:relative; display:inline-flex; align-items:center; flex:0 0 auto;}
.mt-ico-sel .ic{
  position:absolute; left:11px; width:15px; height:15px; flex:0 0 15px;
  stroke:var(--txt-3); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none; z-index:1;
}
.mt-seg{
  display:inline-flex; gap:2px; padding:3px 8px 3px 3px; background:rgba(255,255,255,.035);
  border:1px solid var(--line); border-radius:var(--r-md);
  flex:0 0 auto; max-width:100%; overflow-x:auto; scrollbar-width:none; scroll-padding-inline:end:8px;
}
.mt-seg::-webkit-scrollbar{display:none;}
html[data-theme="light"] .mt-seg{background:rgba(16,24,40,.035);}
.mt-seg button{
  height:30px; padding:0 12px; border:0; border-radius:8px; background:none; color:var(--txt-2);
  font-size:12.5px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:.14s;
}
.mt-seg button:hover{color:var(--txt);}
.mt-seg button.on{background:var(--panel); color:var(--ac); box-shadow:var(--sh-1); font-weight:600;}
.mt-seg button.off{opacity:.42; cursor:not-allowed;}
.mt-seg button .dot{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--red); margin-left:5px; vertical-align:middle;}

.mt-sel{
  height:38px; padding:0 30px 0 33px; font-size:12.5px; font-family:inherit; color:var(--txt-2);
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 16px, calc(100% - 10px) 16px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.mt-sel:focus{outline:none; border-color:var(--ac);}

/* ---------- 区块标题 ---------- */
.mt-sec>h3{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px;
  font-size:13.5px; font-weight:600; color:var(--txt);
}
.mt-sec>h3 .hint{font-size:11.5px; font-weight:400; color:var(--txt-3);}
.mt-sec>h3 .ck-go{margin-left:auto; border:0; background:none; color:var(--txt-3); font-size:11.5px; cursor:pointer; padding:2px 0; font-family:inherit;}
.mt-sec>h3 .ck-go:hover{color:var(--ac);}

/* ---------- 今日推荐 ---------- */
/* 老板 2026-11-01：「不要区别对待，加一个推荐的角标就行，排版方式跟普通的一样」。
   于是不再有独立的 .mt-rec 栅格：今日推荐直接复用 .mt-grid，列宽/间距/断点全跟主网格一致，
   唯一区别是封面左上角多一个「荐」角标。 */
.mt-bdg.rec{
  background:var(--ac); color:#fff; border:0; padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:700; letter-spacing:.5px;
}

/* ---------- 主体：筛选 + 网格 ---------- */
/* 卡片区占满整幅：题材标签改成上方横带后，不再有左栏挤压 */
.mt-main{display:block;}
.mt-main>*{min-width:0;}

/* 题材标签带：一行横滑，紧贴工具栏，不占卡片宽度 */
.mt-tagbar{
  display:flex; align-items:center; gap:7px; overflow-x:auto; overflow-y:hidden;
  padding:1px 8px 3px 1px; scrollbar-width:none; scroll-padding-inline:end:8px;
}
.mt-tagbar::-webkit-scrollbar{display:none;}
.mt-tag{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:12px; color:var(--txt-2); cursor:pointer; white-space:nowrap; font-family:inherit; transition:.14s;
}
.mt-tag:hover{color:var(--txt); border-color:var(--ac-line); background:rgba(255,255,255,.07);}
.mt-tag.on{background:var(--ac-soft); border-color:var(--ac-line); color:var(--ac); font-weight:600;}
.mt-tag .c{font-size:10.5px; color:var(--txt-3); font-variant-numeric:tabular-nums; font-weight:400;}
.mt-tag.on .c{color:var(--ac);}
html[data-theme="light"] .mt-tag{background:rgba(16,24,40,.035);}

/* minmax 收窄到 196：1440 下从 4 列变 5 列，单张封面不再被拉成一堵墙 */
/* 卡片墙：老板定的指标是「电脑全屏 5~6 张」。
   212 起跳 → 1440 五张、1600 五张、1920 六张、2200+ 七张，且永远铺满（右侧不留白）。 */
.mt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:16px;}
@media (min-width:1700px){.mt-grid{grid-template-columns:repeat(6,minmax(0,1fr));}}
@media (min-width:2200px){.mt-grid{grid-template-columns:repeat(7,minmax(0,1fr));}}

.mt-card{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card-bg);
  overflow:hidden; cursor:pointer; box-shadow:var(--sh-1); min-width:0;
  display:flex; flex-direction:column;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.mt-card:hover{border-color:var(--ac-line); box-shadow:var(--sh-hover); transform:translateY(-3px);}
.mt-card:hover .mt-shot img{transform:scale(1.045);}
.mt-card.on{border-color:var(--ac); box-shadow:0 0 0 2px var(--ac-soft);}
/* 封面通用容器：任何地方（推荐条 / 卡片 / 抽屉）都用这一套，
   尺寸由外层类决定，图片永远铺满裁切 —— 之前只约束 .mt-cv，
   推荐条用的是 .cv，图按原图 640px 铺出来把整页撑宽了（实测溢出 343px）。 */
.mt-shot{position:relative; overflow:hidden; border-radius:var(--r-md); background:linear-gradient(160deg,#1d222b,#0d0f14);}
.mt-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.mt-shot .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:600; color:rgba(255,255,255,.22);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,98,66,.10), transparent 62%),
    linear-gradient(160deg,#1a1e26 0%,#0b0d12 100%);
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.mt-cv{aspect-ratio:3/4; border-radius:0;}
/* 封面底部暗角：名次签与徽标压在图上才看得清 */
.mt-cv:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,6,10,.52));
}
/* ★2026-11-01 破案：封面 img 是 z-index:1，而角标容器没有 z-index，
   于是「荐 / 新上榜 / 已入库」全被封面画在上面 —— DOM 里有、眼睛看不见。
   老板说「加一个角标就行」结果什么都没看到，就是这条。 */
.mt-badges{position:absolute; left:8px; top:8px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; z-index:2;}
.mt-bdg{
  padding:2px 7px; border-radius:6px; font-size:10px; font-weight:600; line-height:1.6; letter-spacing:.2px;
  background:rgba(8,12,18,.62); color:#fff; backdrop-filter:blur(4px);
}
.mt-bdg.new{background:rgba(255,98,66,.16); color:var(--ac); border:1px solid var(--ac-line);}
.mt-bdg.got{background:var(--ok, #0f7b46); color:#fff;}
.mt-bdg.smp{background:rgba(8,12,18,.62); color:#fff;}
.mt-pick{
  position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:6px;
  border:1.5px solid rgba(255,255,255,.85); background:rgba(8,12,18,.30); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; padding:0; z-index:2;
}
.mt-card.on .mt-pick{background:var(--ac); border-color:var(--ac);}
.mt-num{
  position:absolute; left:8px; bottom:8px; padding:1px 6px; border-radius:5px; font-size:10px;
  background:var(--ac); color:#fff; font-weight:600; font-variant-numeric:tabular-nums; z-index:2;
}
.mt-cb{padding:11px 12px 12px; display:flex; flex-direction:column; gap:7px; flex:1;}
.mt-cb .t{
  /* 用固定 height 而不是 min-height：-webkit-box 配合 min-height 时，单行标题不会撑到两行高度，
     同一行的卡片标签/数字就会错位（截图靠肉眼才能发现，机器断言查不出来）。 */
  /* 老板验收：主标题要压过下方数据成为视觉焦点——之前标题 13.5/600 与数值 12.5/600 几乎同权，
     头轻脚重。放大到 15/700、收紧字距，数值一侧同步压低（见 .mt-stats b）。 */
  font-size:15px; font-weight:700; color:var(--txt); line-height:1.4; height:2.9em; letter-spacing:-.2px; margin-bottom:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* 三项数据横排会被窄卡挤成两行，还压到标签上（实测）。
   改三列等宽、标签在上数字在下，卡片再窄也不折行。 */
.mt-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:auto;
  padding-top:9px; border-top:1px solid var(--line-soft);
  font-size:10px; color:var(--txt-3); font-variant-numeric:tabular-nums;}
.mt-stats span{display:flex; flex-direction:column; gap:2px; min-width:0; border:0; background:none; padding:0;}
/* 数值退为次要信息：字号压到 11.5、字重降到 550、用次级色而非主文字色，
   与上方 15/700 的标题拉开层级（老板点名的「主标与数字不协调」）。 */
.mt-stats b{color:var(--txt-2); font-weight:550; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.2px;}
.mt-tags{display:flex; gap:5px; overflow:hidden; min-height:20px; max-height:20px;}
.mt-tags span{
  padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.06); color:var(--txt-3);
  font-size:10.5px; white-space:nowrap; line-height:16px;
}
html[data-theme="light"] .mt-tags span{background:rgba(16,24,40,.05);}

/* ---------- 瀑布流尾巴（替代分页） ---------- */
.mt-more{display:flex; align-items:center; justify-content:center; gap:9px; padding:26px 0 10px;
  font-size:12.5px; color:var(--txt-3);}
.mt-more.end{padding:26px 0 10px; opacity:.75;}
.mt-more .spin{
  width:16px; height:16px; border-radius:50%; flex:0 0 16px;
  border:2px solid rgba(255,255,255,.14); border-top-color:var(--ac);
  animation:mtspin .8s linear infinite;
}
html[data-theme="light"] .mt-more .spin{border-color:rgba(16,24,40,.12); border-top-color:var(--ac);}
@keyframes mtspin{to{transform:rotate(360deg);}}
.mt-sentinel{height:1px;}

/* 首屏骨架 */
.mt-skel{
  aspect-ratio:3/3.4; border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(100deg,#14171d 0%,#1e232c 50%,#14171d 100%);
  background-size:220% 100%; animation:mtsk 1.3s ease-in-out infinite;
}
html[data-theme="light"] .mt-skel{background:linear-gradient(100deg,#eef1f5 0%,#f8fafc 50%,#eef1f5 100%);}
@keyframes mtsk{to{background-position:-220% 0;}}

/* ---------- 批量条（勾了才出现） ---------- */
.mt-batch{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:10px; padding:9px 12px 9px 16px;
  border:1px solid var(--line); border-radius:999px; background:var(--panel); box-shadow:var(--sh-2);
  font-size:12.5px; color:var(--txt-2); max-width:calc(100% - 32px);
}
.mt-batch b{color:var(--txt); font-variant-numeric:tabular-nums;}
/* 浅色主题：默认那条 rgba(0,0,0,.5) 深投影在白底上糊成一圈黑边，换淡投影 */
html[data-theme="light"] .mt-batch{
  box-shadow:0 10px 26px rgba(16,24,40,.16), 0 0 0 1px rgba(16,24,40,.06) inset;
}

/* ---------- 空态 ---------- */
.mt-empty{
  border:1px dashed var(--line); border-radius:var(--r-lg); padding:44px 24px; text-align:center;
  color:var(--txt-3); font-size:12.5px; line-height:1.9; background:var(--panel);
}
.mt-empty .t{font-size:13.5px; font-weight:600; color:var(--txt-2); margin-bottom:5px;}

/* ---------- 详情抽屉 ---------- */
.mt-drawer{position:fixed; inset:0; z-index:70;}
.mt-drawer .mask{position:absolute; inset:0; background:rgba(8,12,18,.42);}
.mt-drawer .panel{
  position:absolute; right:0; top:0; bottom:0; width:min(500px,100%);
  background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--sh-2);
  display:flex; flex-direction:column;
}
.mt-dh{
  display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--txt); flex:0 0 auto;
}
.mt-dh .x{margin-left:auto; border:0; background:none; color:var(--txt-3); font-size:18px; cursor:pointer;
  width:28px; height:28px; border-radius:8px; font-family:inherit;}
.mt-dh .x:hover{background:var(--line-soft); color:var(--txt);}
.mt-db{padding:18px; overflow:auto; flex:1;}
.mt-dtop{display:flex; gap:14px;}
.mt-dtop .cv{width:96px; height:128px; flex:0 0 96px; border-radius:10px; overflow:hidden; background:var(--line-soft);}
.mt-dtop .cv img{width:100%; height:100%; object-fit:cover; display:block;}
.mt-dtop .t{font-size:16px; font-weight:650; color:var(--txt); line-height:1.5;}
.mt-dtop .m{font-size:11.5px; color:var(--txt-3); margin-top:5px;}
.mt-dgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:16px 0; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.mt-dgrid .it{background:var(--panel); padding:10px 8px; text-align:center;}
.mt-dgrid .v{font-size:14px; font-weight:650; color:var(--txt); font-variant-numeric:tabular-nums;}
.mt-dgrid .k{font-size:10.5px; color:var(--txt-3); margin-top:3px;}
.mt-doc{font-size:12.5px; color:var(--txt-2); line-height:1.95;}
.mt-doc p{margin:0 0 10px;}
.mt-dtags{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 14px;}
.mt-dtags span{padding:2px 9px; border-radius:6px; background:var(--line-soft); color:var(--txt-2); font-size:11px;}
.mt-dsub{font-size:11.5px; font-weight:600; color:var(--txt-3); letter-spacing:.3px; margin:16px 0 8px;}
.mt-dact{display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--line); flex:0 0 auto; flex-wrap:wrap;}

/* ---------- 实时热榜（方案 A：边缘代理 + 前端轮询，真数据不编） ---------- */
/* 设计语言与网格一致：小海报卡 + 标题；每行 = 源站标签（固定）+ 右侧横滑条。
   抖音未接入 → strip 位置换成灰字「采集中·原因」，照样占位，绝不摆假数据。 */
.mt-live{margin-top:2px;}
.mt-live>h3 .mt-live-pill{
  display:inline-flex; align-items:center; gap:5px; margin-left:2px;
  font-size:11px; font-weight:600; color:var(--ac); background:var(--ac-soft);
  border:1px solid var(--ac-line); padding:2px 9px; border-radius:999px; letter-spacing:.3px;
}
.mt-live-pill i{width:6px; height:6px; border-radius:50%; background:var(--ac); animation:livepulse 1.4s ease-in-out infinite;}
@keyframes livepulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.35; transform:scale(.65);}}
.mt-live-time{font-size:11px; color:var(--txt-3); font-variant-numeric:tabular-nums;}
.mt-live>h3 .mt-icon-btn.sm{margin-left:auto; width:26px; height:26px; flex:0 0 26px;}
.mt-live>h3 .mt-icon-btn.sm svg{width:13px; height:13px;}

.mt-live-row{display:flex; align-items:stretch; gap:10px; margin-bottom:10px;}
.mt-live-row:last-child{margin-bottom:0;}
.mt-live-lab{
  flex:0 0 56px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:12.5px; font-weight:600; color:var(--txt-2);
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r-md);
}
html[data-theme="light"] .mt-live-lab{background:rgba(16,24,40,.035);}
.mt-live-strip{
  display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  padding:1px 8px 3px 1px; min-width:0; flex:1; scroll-padding-inline:end:8px;
  /* 右缘渐隐：提示「还能横滑更多」，与上方题材/来源横滑带同一语言（老板认可的方案） */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
}
.mt-live-strip::-webkit-scrollbar{display:none;}
.mt-live-card{flex:0 0 116px; min-width:0; cursor:pointer;}
.mt-live-card .mt-shot.mt-cv{border-radius:var(--r-md);}
.mt-live-card:hover .mt-shot.mt-cv{box-shadow:0 0 0 2px var(--ac-soft);}
.mt-live-card:hover .mt-shot img{transform:scale(1.045);}
.mt-live-card .mt-lc-t{
  margin-top:5px; font-size:11px; line-height:1.45; color:var(--txt-2); height:2.8em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mt-live-empty{font-size:11.5px; color:var(--txt-3); align-self:center; padding-left:2px;}

/* ---------- 断点 ---------- */
@media (max-width:1180px){
}
@media (max-width:1000px){
  .mt-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mt-tagbar{gap:6px;}
}
@media (max-width:640px){
  .mt{gap:14px;}
  /* 手机端不显示 KPI（老板令：手机端隐藏，省竖向空间） */
  .mt-kpis{display:none;}
  .mt-sec>h3 .hint{flex-basis:100%;}
  .mt-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  /* 实时热榜手机端：标签窄一点、卡片小一点，一行能塞 3 张 */
  .mt-live-lab{flex:0 0 44px; font-size:11px;}
  .mt-live-card{flex-basis:100px;}
  .mt-live-card .mt-lc-t{font-size:10.5px;}
  /* 手机端：第一行 搜索 + 排序 + 已入库 + 刷新（老板令：这四个排一行）；
     来源分段整行让位到第二行横滑 —— 五样东西挤一行必然把搜索框压成一条缝。 */
  .mt-bar{flex-wrap:wrap; gap:8px;}
  /* basis 必须是 0：写 200px 时 搜索+排序+2 图标 会超出整行，flex-wrap 把搜索顶到单独一行 */
  .mt-bar .mt-search{order:1; flex:1 1 0; min-width:56px; max-width:none;}
  .mt-bar-r{order:1; flex:0 0 auto; width:auto; margin-left:0; gap:8px; padding-right:env(safe-area-inset-right,0);}
  .mt-seg-wrap{order:2; flex:1 0 100%; min-width:0;}
  .mt-bar-r .mt-ico-sel{flex:0 0 auto; max-width:96px;}
  .mt-bar-r .mt-sel{flex:0 0 auto; min-width:0; width:100%; max-width:96px; padding:0 22px 0 30px; font-size:12px;}
  /* 横滑带末项贴边被裁：补右侧留白（原来 padding:2px 把右边距压没了），并保留横滑 */
  .mt-seg{padding:2px 16px 2px 2px;}
  .mt-tagbar{padding:1px 16px 3px 1px;}
  /* 横滑带右缘渐隐：未滚动时末项贴边不再生硬「被裁」，同时提示「可横滑更多」（桌面不溢出不加） */
  .mt-seg, .mt-tagbar{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);
  }
  .mt-seg button{height:28px; padding:0 10px; font-size:12px;}
  .mt-dtop .cv{width:76px; height:101px; flex-basis:76px;}
  .mt-dgrid{grid-template-columns:repeat(2,1fr);}
  /* 手机底部有 .tabbar（fixed / z-index:70 / 含安全区约 56px）。
     批量条原来是 bottom:12px + z-index:40，整条被导航栏压住 ——
     勾了卡片却看不见「入库」按钮（老板 2026-11-01：「被遮住了」）。
     抬到导航栏之上，层级也压过它。 */
  /* 造型也按手机 App 重做：原来的 999px 胶囊横跨整屏像一根香肠，
     字小、按钮 28px、三块松散。改成规整圆角卡：左边计数（数字放大）、
     右边「清空 / 入库」成组等宽，主按钮最右。 */
  .mt-batch{
    left:12px; right:12px; transform:none; max-width:none; justify-content:flex-start;
    bottom:calc(64px + env(safe-area-inset-bottom, 0px)); z-index:80;
    gap:8px; padding:10px 10px 10px 16px; border-radius:16px;
    background:var(--panel); box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px var(--line-soft) inset;
  }
  .mt-batch>span{margin-right:auto; font-size:12.5px; white-space:nowrap;}
  .mt-batch b{font-size:17px; font-weight:700; margin:0 2px;}
  .mt-batch .btn{height:38px; min-width:72px; padding:0 16px; border-radius:11px; font-size:13.5px;}
  .mt-batch .btn.sm{height:38px; padding:0 16px; font-size:13.5px;}
  /* 手机窄卡：标题保持突出（14/700），数值再压一档并允许折行，
     避免「8876万」「405万」被省略号截成半截（旧版在窄屏实测截断）。 */
  .mt-cb .t{font-size:14px; font-weight:700;}
  .mt-stats{font-size:9.5px; padding-top:8px;}
  .mt-stats b{font-size:11px; white-space:normal; word-break:break-word;}
}