/* 全局样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f6fa; color: #1f2937; font-size: 14px; }
a { text-decoration: none; color: inherit; cursor: pointer; }

/* 布局 */
.layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: var(--sidebar-w, 220px); background: #1e293b; color: #cbd5e1; padding: 20px 0; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .18s ease; }
.sidebar .logo { padding: 0 20px 20px; font-size: 18px; font-weight: 600; color: white; border-bottom: 1px solid #334155; margin-bottom: 16px; }
.sidebar .logo span { color: #10b981; }

/* ── 左侧导航栏宽度可调 + 一键收起/展开（2026-10-14 用户上报后定案）───────────────
   用户口径：① 主要想更窄；② 打开时可**拖拽调宽**，同时支持**一键收起/展开**；
   ③ 两档是「展开」↔「完全折叠」（不是收成图标条）；④ 电脑 / 平板 / 手机（含横屏）都要；
   ⑤ ≤640 的手机竖屏抽屉也要跟随这个宽度。
   实现：宽度由 common.js 写在 :root 的 --sidebar-w（默认 220，范围 160-400，localStorage 记住），
   拖拽把手 .sidebar-resizer 贴在侧栏右边缘（手机上不拖，维持原样）。
   ⚠️ 折叠规则只在 641px 以上生效 —— 手机上侧栏是抽屉，把它压成 0 宽会让菜单点不开。 */
/* 拖拽滑块（2026-10-15 用户改口径：不要细线，做成**导航栏右上角的小滑块**）─────────
   · 用 position: fixed，而不是贴在侧栏里面 —— 这样**导航栏内容下滑时滑块也不动**（用户明确要求）；
   · 位置随宽度实时变：left = 侧栏宽 − 34px（CSS 变量算，拖拽时跟着走），所以不会盖住菜单文字；
   · 手机上抽屉从 left:0 滑出，同一个公式照样贴在**抽屉右上角**（抽屉关着时由窄屏段隐藏）。 */
.sidebar-resizer { position: fixed; top: 12px; left: calc(var(--sidebar-w, 220px) - 34px); width: 26px; height: 26px; border-radius: 8px; z-index: 270; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #cbd5e1; font-size: 13px; line-height: 1; cursor: col-resize; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .15s ease, color .15s ease, left .18s ease; }
.sidebar-resizer::before { content: '\21d4'; }   /* ⇔ */
.sidebar-resizer:hover,
body.sidebar-resizing .sidebar-resizer { background: #10b981; border-color: #10b981; color: #fff; }
body.sidebar-resizing .sidebar { transition: none; }
body.sidebar-resizing .sidebar-resizer { transition: none; }
@media (min-width: 641px) {
  body.sidebar-collapsed .sidebar { width: 0 !important; overflow: hidden !important; }
  body.sidebar-collapsed .sidebar-resizer { display: none; }   /* 已完全折叠：没有导航栏可调 */
}
.menu-item { padding: 11px 20px; cursor: pointer; display: block; color: #cbd5e1; }
.menu-item:hover { background: #334155; color: white; }
.menu-item.active { background: #10b981; color: white; }
.menu-group { font-size: 12px; color: #64748b; padding: 16px 20px 8px; }
/* 2026-10-09（未决清单第 15 条）：菜单分组可折叠 —— 点分组标题收起/展开 */
.menu-group-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.menu-group-toggle:hover { color: #334155; }
.mg-arrow { display: inline-block; width: 10px; font-size: 10px; color: #94a3b8; }

/* 2026-10-13 用户要求：窄屏（平板/手机）下宽表格「右边的列看不见、也不能左右滑」。
   ⚠️ 病因不在表格本身 —— 表格容器早就有 overflow-x:auto（见 customers.html 第 23 行）。
   真因是这条：flex 子项默认 min-width:**auto**，主区**不肯被压缩**、被内容撑到 1264px，
   于是最外层 .layout（overflow:hidden）把右边 716px 直接裁掉，表格容器也就永远撑得
   跟表格一样宽、永远不会滚。给主区允许压缩（min-width:0）后，横向滚动才真正生效。
   ✅ 电脑端零影响：min-width:0 只在「内容比屏幕宽」时才起作用；电脑端放得下，等于没改
      （实测 1680 宽时，改动前后各层数值逐位一致）。 */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { background: white; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
/* 2026-10-14：顶栏里多了 ☰（一键收起/展开侧栏）这第三个子元素，
   靠 space-between 会把它后面的面包屑推到正中间 —— 让面包屑吃掉中间的空档（文字仍然靠左）。 */
.topbar .crumb { color: #6b7280; flex: 1 1 auto; min-width: 0; }
.topbar .crumb b { color: #1f2937; }
.topbar .user { display: flex; align-items: center; gap: 8px; }
.topbar .avatar { width: 32px; height: 32px; border-radius: 50%; background: #10b981; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; }

.content { padding: 24px; flex: 1; overflow: auto; }

/* 通用组件 */
.btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.btn-primary { background: #10b981; color: white; }
.btn-primary:hover { background: #059669; }
.btn-ghost { background: white; color: #1f2937; border: 1px solid #e5e7eb; }
.btn-ghost:hover { background: #f9fafb; }
.btn-danger { background: #ef4444; color: white; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

.card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.page-title { font-size: 20px; font-weight: 600; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; background: white; padding: 4px; border-radius: 8px; width: fit-content; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.tab { padding: 8px 16px; border-radius: 4px; cursor: pointer; color: #6b7280; font-size: 13px; }
.tab.active { background: #10b981; color: white; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.tag-s0 { background: #f1f5f9; color: #475569; }
.tag-s1 { background: #dbeafe; color: #2563eb; }
.tag-s2 { background: #ddd6fe; color: #7c3aed; }
.tag-s3 { background: #fef3c7; color: #d97706; }
.tag-s4 { background: #fed7aa; color: #ea580c; }
.tag-s5 { background: #d1fae5; color: #047857; }
.tag-s6 { background: #a7f3d0; color: #065f46; }
.tag-s7 { background: #c7d2fe; color: #4338ca; }
.tag-s8 { background: #fee2e2; color: #dc2626; }
.tag-agent { background: #f3e8ff; color: #7c3aed; }
.tag-warn { background: #fee2e2; color: #dc2626; }
.tag-pool { background: #dbeafe; color: #1e40af; }

/* 表格 */
table { width: 100%; border-collapse: collapse; }
th { background: #f8fafc; padding: 12px; text-align: left; color: #6b7280; font-size: 12px; font-weight: 500; border-bottom: 1px solid #f1f5f9; }
td { padding: 12px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
tr:hover { background: #f8fafc; }

/* 输入框 */
input, select, textarea { padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 13px; outline: none; font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: #10b981; }
label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }

/* 登录页 */
.login-page { min-height: 100vh; background: linear-gradient(135deg, #10b981 0%, #059669 100%); display: flex; align-items: center; justify-content: center; }
.login-card { background: white; border-radius: 16px; padding: 40px; width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.login-logo { text-align: center; font-size: 28px; font-weight: 700; color: #047857; margin-bottom: 8px; }
.login-logo span { color: #10b981; }
.login-sub { text-align: center; color: #6b7280; font-size: 13px; margin-bottom: 30px; }
.login-form .form-row { margin-bottom: 16px; }
.login-form input { width: 100%; padding: 10px 14px; font-size: 14px; }
.login-form .btn { width: 100%; padding: 12px; font-size: 15px; justify-content: center; margin-top: 8px; }
.quick-accounts { margin-top: 24px; padding-top: 20px; border-top: 1px solid #f1f5f9; }
.quick-accounts .title { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.quick-account { display: flex; align-items: center; gap: 8px; padding: 10px; background: #f8fafc; border-radius: 6px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; }
.quick-account:hover { background: #ecfdf5; border: 1px solid #10b981; }
.quick-account .name { font-weight: 500; flex: 1; }
.quick-account .role { font-size: 11px; color: #6b7280; }

/* 弹窗 */
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: white; border-radius: 12px; padding: 24px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; }
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-close { cursor: pointer; color: #6b7280; font-size: 20px; }
.modal-body { padding: 4px 0; }
.form-row { margin-bottom: 14px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; }
.form-row textarea { min-height: 80px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9; }

/* 仪表盘卡片 */
/* 2026-10-14（平板 768 撑宽修复）：列宽由 1fr 改成 minmax(0, 1fr)。
   1fr 的最小宽度＝内容的 min-content，内容压不下去时整行会被顶出容器
   （dashboard 在 768 实测：内容区 548px、这排卡片算出来 548px 却顶到 620px）。
   minmax(0,1fr) 允许列压到 min-content 以下；仍是 4 列，宽度有余量时观感一模一样。 */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.metric { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.metric .label { color: #6b7280; font-size: 13px; }
.metric .value { font-size: 28px; font-weight: 700; color: #1f2937; margin: 8px 0 4px; }
.metric .delta { font-size: 12px; }
.delta.up { color: #10b981; }
.delta.down { color: #ef4444; }

/* 2026-10-14（平板 768 撑宽修复）：宽表格改成就地横向滚动，不再把整页顶宽。
   provider-performance 在 768 实测：表格 666px 顶破内容区 548px。
   桌面宽度够时这一行不产生任何变化（表格本来就放得下）。 */
#tableWrap { overflow-x: auto; }
/* 同上的列表容器（试用列表/客户中心在用）：宽内容在容器里自己横滑，不带动整页。
   trials 在 768 实测：列表内容顶到 642px（内容区 548px）。 */
#listContainer { overflow-x: auto; }

.todo-list { }
.todo-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; align-items: center; }
.todo-item:last-child { border-bottom: none; }
.todo-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.todo-icon.urgent { background: #fee2e2; color: #dc2626; }
.todo-icon.warn { background: #fef3c7; color: #d97706; }
.todo-icon.normal { background: #dbeafe; color: #2563eb; }
.todo-body { flex: 1; }
.todo-title { font-weight: 500; }
.todo-meta { color: #6b7280; font-size: 12px; margin-top: 2px; }

/* 看板 */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.column { background: #f1f5f9; border-radius: 8px; min-width: 240px; flex: 1; }
.col-header { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.col-title { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.col-count { background: white; color: #475569; padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.col-cards { padding: 0 8px 8px; }
.kanban-card { background: white; padding: 10px 12px; border-radius: 6px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.kanban-card .kc-name { font-weight: 500; font-size: 13px; margin-bottom: 4px; }
.kanban-card .kc-meta { color: #6b7280; font-size: 11px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 客户详情 */
.cust-header { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f1f5f9; margin-bottom: 16px; }
.cust-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #34d399); color: white; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; }
.cust-name { font-size: 20px; font-weight: 600; }
.cust-meta { color: #6b7280; font-size: 13px; margin-top: 4px; }
.cust-stats { display: flex; gap: 24px; margin-top: 12px; }
.stat-item { }
.stat-label { color: #6b7280; font-size: 12px; }
.stat-value { font-size: 18px; font-weight: 600; margin-top: 4px; }
.stat-value.warn { color: #d97706; }
.stat-value.danger { color: #dc2626; }
.stat-value.ok { color: #10b981; }

.timeline { padding: 12px 0; }
.tl-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e5e7eb; }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; z-index: 1; color: white; }
.tl-dot.comm { background: #3b82f6; }
.tl-dot.trial { background: #f59e0b; }
.tl-dot.order { background: #8b5cf6; }
.tl-dot.stage { background: #6366f1; }
.tl-content { flex: 1; }
.tl-time { color: #6b7280; font-size: 11px; }
.tl-title { font-weight: 500; font-size: 14px; margin-top: 2px; }
.tl-detail { color: #6b7280; font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* 列表视图 */
.list-card { background: white; border-radius: 8px; }
.empty { padding: 60px 20px; text-align: center; color: #94a3b8; }
.actions-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filter-bar select, .filter-bar input { min-width: 120px; }

/* 工具 */
.muted { color: #9ca3af; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.flex { display: flex; }
.gap-8 { gap: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.font-mono { font-family: 'SF Mono', 'Monaco', monospace; }

.geocode-hint { font-size: 12px; color: #6b7280; padding: 2px 0; word-break: break-all; min-height: 16px; }
.geocode-hint.ok { color: #059669; }
.geocode-hint.err { color: #dc2626; }

/* ── 2026-10-14 移动端地基（用户定案：载体走 H5，先做地基）──────────────────────────
   背景（都是查实的，见 docs/03-报告与留痕/新增-移动端地基-2026-10-14.md）：
     · 41 个页面里 30 个没有手机视口设置 → 手机上浏览器按"电脑宽度"排版再整体缩小，
       字小到看不清；已有视口的 11 个页面又没有配套的手机布局。
     · 本文件此前**没有任何 @media**（全站 0 条手机适配规则）；左侧菜单固定占 220px，
       手机上会被它挤掉一大半。
   做法：**只在 ≤640px 生效** ——
     · 左侧菜单收成抽屉，由顶栏左上角的 ☰ 开合（按钮由 common.js 的 mountMobileMenu 插入，
       宽屏下 display:none、完全不占位）。
     · 内容区占满整屏、内边距收窄；顶栏在手机上允许换行（右上角元素本来就多）。
   ⚠️ 边界（重要）：641px 及以上**一行规则都不生效** —— 用户验证过的平板 768 与电脑 1680
      布局保持原样。**不要把这个断点改成 768**，那会把平板也收进抽屉、破坏已验证的平板布局。
   ⚠️ 本段只改"手机上怎么摆"，不动任何业务逻辑与权限；电脑端零影响。 */
/* 2026-10-14：☰ 从「只在窄屏显示」改成**一直显示** ——
   宽屏下它是「一键收起 / 展开左侧导航栏」的开关，窄屏下仍是手机抽屉的开关
   （由 common.js 按窗口宽度分流：>640 折叠侧栏，≤640 开合抽屉）。 */
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 10px; flex-shrink: 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; color: #1f2937; font-size: 18px; line-height: 1; cursor: pointer; }
.menu-toggle:hover { background: #f1f5f9; }
.menu-mask { display: none; }

@media (max-width: 640px) {
  /* 抽屉宽度跟随用户拖过的宽度（--sidebar-w）；但不能超过屏幕 85%，否则手机上会顶出屏幕。
     （2026-10-14 用户定：抽屉也用这个宽度） */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100%;
    max-width: 85vw;
    z-index: 260; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: 0 0 24px rgba(15, 23, 42, .35);
  }
  /* 手机/平板竖屏：抽屉关着时滑块藏起来，抽屉打开才出现在**抽屉右上角**（手指可以拖它调宽） */
  .sidebar-resizer { display: none; }
  body.menu-open .sidebar-resizer { display: flex; }
  body.menu-open .sidebar { transform: translateX(0); }

  .menu-mask {
    display: block; position: fixed; inset: 0; z-index: 250;
    background: rgba(15, 23, 42, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.menu-open .menu-mask { opacity: 1; pointer-events: auto; }

  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-right: 8px; flex-shrink: 0; padding: 0;
    border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
    color: #1f2937; font-size: 18px; line-height: 1; cursor: pointer;
  }

  .topbar { padding: 10px 12px; flex-wrap: wrap; row-gap: 8px; }
  .topbar .crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .user { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

  .content { padding: 16px 12px 24px; }
  .page-header { flex-wrap: wrap; gap: 10px; }
  .page-title { font-size: 18px; }

  /* 右上角通知面板宽度是内联写死的 380px，手机上会溢出屏幕 —— 这里拉满宽度。
     （内联样式优先级高于样式表，所以这两条必须带 !important。） */
  #notif-panel { width: auto !important; right: 12px !important; left: 12px; }

  /* ── ② 报表页手机化（2026-10-14）─────────────────────────────────────────────
     实测（手机 375，改动前）：业绩统计 .content 375/772、数据分析 375/452、
     工作台 375/608、商机业绩 375/698 —— 四页都被"撑宽整页"（右边要横滑才看得到）。
     叶子级溢出的元凶只有两类：
       ① 统计卡片是固定列数的栅格（repeat(4,1fr)），卡里数字的 min-content 撑破了列宽；
       ② 宽表格没有自己的横滑容器，直接把 .content 顶宽。
     对策：卡片在手机上两列、并排栏改单列、表格改成"卡片内部自己横滑"。
     ⚠️ 电脑/平板（>640px）一行都不生效；这些页面在 1680 下的基线是
        .content 1460/1460、无任何溢出 —— 改完必须仍然一致。 */
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .metric { padding: 14px; }
  .metric .value { font-size: 20px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat-mini { padding: 12px; }
  .stat-mini .v { font-size: 18px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
  /* 卡片标题栏是 nowrap 的 flex（标题 + 一长串数字），它自身的最小宽度会把卡片撑宽
     （实测业绩统计的两张卡片被撑到 372px > 可用的 351px）→ 手机上允许换行。
     注意 1fr 不够：1fr 的下限是内容最小宽度，必须写 minmax(0, 1fr) 才压得住。 */
  .card-h, .card-header { flex-wrap: wrap; gap: 4px; }

  /* 宽表格放进"卡片内部横滑"，不带动整页（数据分析的表格在 .card-b 里，商机业绩在 #tableWrap） */
  .card-b, .card-body, #tableWrap { overflow-x: auto; }
  /* ③ 2026-10-14：追试用列表页的宽表格（实测手机 375 下内容 588 宽、把整页撑宽）
     —— 和上面同样的做法，让表格在列表容器里自己横滑。该容器只有客户中心/试用列表在用，
     客户中心本来就有这条规则，所以对它是无变化的。 */
  #listContainer { overflow-x: auto; }

  /* 页内用内联样式写死的固定列数栅格（业绩统计/工作台）—— 不改任何现有标记，
     只按内联样式的原文匹配，在手机上压成 2 列或 1 列。
     ⚠️ 这几个页面若改了内联写法，这些规则就不再匹配（不会出错，只是不生效）。 */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 平板（641–768px）──────────────────────────────────────────────────────────
   2026-10-14（用户定：先修平板 768 的撑宽）。平板下侧边栏还在（这是用户验证过的布局，
   手机断点不许扩到 768），内容区只剩 ~548px，于是页面内部的固定列宽栅格与宽表格会把整页顶宽
   （实测：业绩统计 784、经营看板 620、商机业绩 710，都是 548 的内容区被顶开）。
   这里只做两件事：把栅格"列的最小宽度＝内容最小宽"这个死限解开（**列数不变**）、宽表格就地横滑。
   641 以下由上面的手机段负责、768 以上一行都不生效 —— 电脑端与手机端完全不受影响。 */
@media (min-width: 641px) and (max-width: 768px) {
  /* 各页自带的栅格类（**列数一律保持各页自己的**，只让列能压窄） */
  .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .grid-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; }
  /* 页内用内联样式写死的列宽 —— 内联优先于类选择器，只能用属性选择器 + !important 覆盖。
     ⚠️ 与手机段同一个前提：页面若改了内联写法，这些规则就不再匹配（不会出错，只是不生效）。 */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:2fr 1fr"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; }
  [style*="grid-template-columns:1fr 2fr"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}