/*******************************
 * 210m 分类页（最终整理）
 *******************************/

/* 顶部 */
.m210m-wrap .cat-head{
  background:#fff;border:1px solid var(--m210m-border);border-radius:14px;
  box-shadow:var(--m210m-shadow);padding:10px 14px;margin:12px 0;
}
.m210m-wrap .cat-line{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid #edf2f7;flex-wrap:wrap;
}
.m210m-wrap .cat-line:last-child{border-bottom:none}
.m210m-wrap .cat-label{color:#64748b;min-width:48px}
.m210m-wrap .cat-label.cat-label--gap{margin-left:14px}

/* tabs & chips */
.m210m-wrap .cat-tabs,.m210m-wrap .cat-tags{display:flex;gap:8px;flex-wrap:wrap}
.m210m-wrap .cat-tab,.m210m-wrap .cat-chip{
  border:1px solid var(--m210m-border);background:#fff;color:#334155;
  padding:6px 12px;border-radius:999px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:6px;
}
.m210m-wrap .cat-tab.active,.m210m-wrap .cat-chip.active{background:#e8f2ff;border-color:#cfe3ff;color:#1f4ed8}
.m210m-wrap .cat-tab:hover,.m210m-wrap .cat-chip:hover{background:#f0f7ff;border-color:#60a5fa}

/* 排序 + 视图切换 */
.m210m-wrap .cat-sort{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m210m-wrap .cat-select{border:1px solid var(--m210m-border);border-radius:10px;padding:8px 10px;background:#fff}
.m210m-wrap .cat-view{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--m210m-border);
  background:#fff;cursor:pointer;display:grid;place-items:center;
}
.m210m-wrap .cat-view.active{background:#2563eb;color:#fff;border-color:#2563eb}
.m210m-wrap .cat-view:hover{border-color:#60a5fa}

/* 布局：网格 / 列表 */
.m210m-wrap #grid.m210m-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:20px;}
@media (max-width:1280px){ .m210m-wrap #grid.m210m-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1024px){ .m210m-wrap #grid.m210m-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .m210m-wrap #grid.m210m-grid{ grid-template-columns:1fr; } }

.m210m-wrap #list.list-grid{display:none;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:1100px){ .m210m-wrap #list.list-grid{ grid-template-columns:1fr; } }

/* 网格卡片 */
.m210m-wrap .m210m-app{
  position:relative;background:#fff;border:1px solid var(--m210m-border);border-radius:18px;
  box-shadow:var(--m210m-shadow);padding:16px;display:flex;flex-direction:column;gap:12px;
  box-sizing:border-box;height:auto;min-height:300px;
}

/* 标题（两行，像素行高 + 缓冲，绝不截半行） */
.m210m-wrap .m210m-title,
.m210m-wrap .m210m-title a{
  margin:0;text-align:center;color:#111827;text-decoration:none;
  font-size:15px;line-height:22px;font-weight:600;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:44px; /* 2×22 */
  padding-bottom:6px; /* 与下方留出安全隙 */
  overflow-wrap:anywhere;word-break:break-word;
  position:relative;z-index:2;flex:0 0 auto;
}

/* meta */
.m210m-wrap .m210m-meta{
  color:#94a3b8;font-size:12px;display:flex;gap:6px;justify-content:center;min-height:16px;
  margin-top:2px;margin-bottom:8px;position:relative;z-index:2;flex:0 0 auto;
}
.m210m-wrap .m210m-dot{opacity:.5}

/* 下载按钮：药丸，靠左 & 贴底 */
.m210m-wrap .m210m-btn-download{
  margin-top:auto;width:100%;display:flex;align-items:center;justify-content:flex-start;text-align:left;
  padding:10px 14px;border-radius:999px;border:1px solid #cfd6df;background:#fff;cursor:pointer;
  transition:all .18s;color:#111827;-webkit-appearance:none;appearance:none;box-shadow:none;text-transform:none;
  position:relative;z-index:1;
}
.m210m-wrap .m210m-btn-download:hover{
  background:var(--m210m-green);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(22,163,74,.25);
}
.m210m-wrap a.m210m-btn-download{ text-decoration:none }

/* 列表卡片 */
.m210m-wrap .item-list{
  position:relative;display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:center;
  padding:16px;border-radius:18px;background:#fff;border:1px solid var(--m210m-border);box-shadow:var(--m210m-shadow);
}
.m210m-wrap .item-left{display:grid;place-items:center}
.m210m-wrap .item-icon{
  width:96px;height:96px;border-radius:22px;background:#f3f6fb;border:1px solid #e8edf4;
  display:grid;place-items:center;font-weight:800;color:#445066;
}
.m210m-wrap .item-title,
.m210m-wrap .item-title a{
  margin:0 0 6px;color:#111827;text-decoration:none;
  font-size:15px;line-height:22px;font-weight:600;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:44px;padding-bottom:6px;
  overflow-wrap:anywhere;word-break:break-word;
}
.m210m-wrap .item-ex{color:#6b7280;margin-bottom:6px}
.m210m-wrap .item-meta{color:#94a3b8;font-size:12px}
.m210m-wrap .item-actions{display:flex;gap:10px;align-items:center}
.m210m-wrap .item-dl{
  padding:8px 16px;border-radius:999px;border:1px solid #cfd6df;background:#fff;cursor:pointer;
  transition:all .18s;-webkit-appearance:none;appearance:none;box-shadow:none;text-transform:none;
}
.m210m-wrap .item-dl:hover{
  background:var(--m210m-green);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(22,163,74,.25);
}
.m210m-wrap a.item-dl{ text-decoration:none }

/* 角标 */
.m210m-wrap .rb{position:absolute;top:0;right:0;pointer-events:none;z-index:3}
.m210m-wrap .m210m-app .rb-grid{width:72px;height:72px;border-top-right-radius:18px;overflow:hidden}
.m210m-wrap .item-list .rb-list{width:64px;height:64px;border-top-right-radius:18px;overflow:hidden}
.m210m-wrap .rb span{
  position:absolute;display:block;background:#2f3640;color:#fff;text-align:center;
  font-size:12px;letter-spacing:.5px;height:22px;line-height:22px;min-width:110px;
  transform:rotate(45deg);box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.m210m-wrap .m210m-app .rb-grid span{top:12px;right:-32px}
.m210m-wrap .item-list .rb-list span{top:10px;right:-34px}
@media (max-width:640px){
  .m210m-wrap .m210m-app .rb-grid{width:64px;height:64px}
  .m210m-wrap .item-list .rb-list{width:58px;height:58px}
  .m210m-wrap .rb span{height:20px;line-height:20px;min-width:96px;font-size:12px}
  .m210m-wrap .m210m-app .rb-grid span{top:10px;right:-28px}
  .m210m-wrap .item-list .rb-list span{top:9px;right:-30px}
}

/* 分页（与你的 HTML 对齐） */
.m210m-wrap .cat-pager{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 10px;
}
.m210m-wrap .pager-numbers{display:flex;gap:6px}
.m210m-wrap .page-btn,.m210m-wrap .page-num{
  min-width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--m210m-border);background:#fff;border-radius:10px;cursor:pointer;
  transition:all .18s;color:#111827;text-decoration:none;
}
.m210m-wrap .page-btn:hover,.m210m-wrap .page-num:hover{border-color:#60a5fa;background:#f0f7ff}
.m210m-wrap .page-num.current,
.m210m-wrap .page-num[data-active="1"]{background:#2563eb;color:#fff;border-color:#2563eb}
.m210m-wrap .page-btn.is-disabled,.m210m-wrap .page-btn[disabled]{opacity:.45;cursor:not-allowed}
.m210m-wrap .page-ellipsis{padding:0 6px;color:#9aa5b5;display:flex;align-items:center}

/* 无 JS 兜底：默认显示网格 */
.m210m-wrap #grid{ display:grid; }
.m210m-wrap #list{ display:none; }

/* 防父主题 margin 干扰 */
.m210m-wrap .m210m-grid > * , .m210m-wrap .list-grid > * { margin:0; }

/* ===== 1) 标题：严格两行，强制省略，不允许出现第 3 行 ===== */
/* 网格标题 */
.m210m-wrap .m210m-title,
.m210m-wrap .m210m-title a{
  font-size:15px !important;
  line-height:22px !important;            /* 像素行高更稳 */
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;        /* 只显示两行 */
  overflow:hidden !important;
  text-overflow:ellipsis !important;      /* 强制省略号 */
  max-height:44px !important;             /* 2 × 22px，硬上限 */
  min-height:44px !important;             /* 与 max 一致，避免抖动 */
  margin:0 0 6px !important;
  padding:0 !important;
  word-break:break-word !important;       /* 保留断词，避免 anyhwere 破坏省略 */
  overflow-wrap:break-word !important;
}

/* 列表标题 */
.m210m-wrap .item-title,
.m210m-wrap .item-title a{
  font-size:15px !important;
  line-height:22px !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-height:44px !important;
  min-height:44px !important;
  margin:0 0 6px !important;
  padding:0 !important;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
}

/* 给标题与下方 meta/按钮留出安全间距 */
.m210m-wrap .m210m-meta{ margin-top:2px !important; margin-bottom:10px !important; }
.m210m-wrap .m210m-btn-download{ margin-top:auto !important; }

/* ===== 2) “M 系列”角标：用 SVG  兜底，跨平台稳定 ===== */
.m210m-wrap .rb span{
  position:absolute; display:block;
  height:22px; line-height:22px; min-width:118px;      /* 略加长，给图标留位 */
  right:-32px; top:12px; transform:rotate(45deg);
  background:#2f3640; color:#fff; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  font-size:12px; letter-spacing:.5px;
}

/* 如果系统字体没有 ，用 ::before 插入 SVG 图标 */
.m210m-wrap .rb span::before{
  content:""; display:inline-block; vertical-align:middle;
  width:12px; height:12px; margin-right:4px; margin-top:-2px;
  background-repeat:no-repeat; background-size:100% 100%;
  /* 内联 SVG（苹果 Logo），颜色跟随白色 */
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 315'>\
  <path fill='%23ffffff' d='M213 167c0-37 30-55 31-56-17-25-43-29-52-30-22-2-43 12-54 12-11 0-28-12-46-12-24 0-47 14-60 36-26 44-7 109 19 145 13 19 28 40 48 39 19-1 26-13 49-13 23 0 29 13 49 13 20-1 33-19 46-38 15-22 21-43 22-44-1 0-43-17-43-52zM176 43c10-12 17-28 15-43-14 1-31 9-41 21-9 10-17 27-15 42 16 1 31-8 41-20z'/></svg>");
}

/* 保证文本仍然有 “M系列” 两个字（SVG 前加空格更美观） */
.m210m-wrap .rb span{ padding:0 10px 0 14px; }
/* ===== 封面图（网格） ===== */
.m210m-wrap .m210m-cover{
  display:block; width:100%;
}
.m210m-wrap .m210m-thumb{
  width:100%; aspect-ratio:1/1;           /* 正方形封面 */
  object-fit:cover; border-radius:18px;   /* 与卡片保持圆角协调 */
  border:1px solid #e8edf4; background:#f3f6fb;
  display:block;
}

/* 字母块（作为无图回退） */
.m210m-wrap .m210m-icon{
  width:100%; aspect-ratio:1/1;
  border-radius:18px; background:#f3f6fb; border:1px solid #e8edf4;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#445066; font-size:26px;
}

/* ===== 列表视图封面 ===== */
.m210m-wrap .item-cover{ display:block; }
.m210m-wrap .item-thumb{
  width:96px; height:96px; object-fit:cover; border-radius:22px;
  border:1px solid #e8edf4; background:#f3f6fb; display:block;
}
/* 保持无图时字母块样式一致（你原来就有） */
.m210m-wrap .item-icon{
  width:96px;height:96px;border-radius:22px;background:#f3f6fb;border:1px solid #e8edf4;
  display:grid;place-items:center;font-weight:800;color:#445066;
}

/* 标题仍然强制两行（防第三行），和你之前一致 */
.m210m-wrap .m210m-title,
.m210m-wrap .m210m-title a,
.m210m-wrap .item-title,
.m210m-wrap .item-title a{
  font-size:15px; line-height:22px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; min-height:44px; max-height:44px; margin:0 0 6px; padding:0;
}
/* ===== 网格模式：封面图/字母块 尺寸一致 ===== */
.m210m-wrap .m210m-cover{
  display:flex; justify-content:center; align-items:center;
  width:100%;
}
.m210m-wrap .m210m-thumb,
.m210m-wrap .m210m-icon{
  width:96px; height:96px;               /* 固定大小，和原来字母块一致 */
  border-radius:22px;
  background:#f3f6fb;
  border:1px solid #e8edf4;
  object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#445066;
  margin:0 auto;                         /* 居中 */
}

/* 字母块里的文字稍微大点 */
.m210m-wrap .m210m-icon{ font-size:22px; }

/* ===== 列表模式：封面图/字母块 保持原来大小 ===== */
.m210m-wrap .item-thumb,
.m210m-wrap .item-icon{
  width:96px; height:96px;
  border-radius:22px;
  background:#f3f6fb;
  border:1px solid #e8edf4;
  object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#445066;
}