:root{
  --blue:#2563eb; --blue-dark:#1d4ed8; --blue-deep:#1e3a8a; --blue-soft:#dbeafe; --blue-light:#eff6ff;
  --red:#ef4444; --red-dark:#dc2626; --red-soft:#fee2e2;
  --green:#22c55e; --green-dark:#15803d; --green-soft:#dcfce7;
  --amber:#f59e0b; --amber-dark:#b45309; --amber-soft:#fef3c7;
  --purple:#8b5cf6; --purple-soft:#ede9fe;
  --cyan:#06b6d4; --cyan-soft:#cffafe;
  --bg:#f1f5f9; --card:#FFFFFF; --ink:#0f172a; --sub:#475569; --line:#e2e8f0;
  /* 第 31 轮：--muted 专供「不需要用户处理」的弱化文字（空值占位、未申请、—）。
     比 --sub 再浅一档但仍守住 4.5:1（#64748b 对白底 4.68:1），
     避免出现「浅到看不见」和「深到抢焦点」两个极端。 */
  --muted:#64748b;
  --side:#0f172a; --side-line:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.05);
  --shadow-hover:0 10px 30px rgba(15,23,42,.12);
  --radius:14px; --radius-sm:10px; --radius-lg:18px;
}
/* 三级灰字对比度（2026-09-18 巡检）：白底上原先的 #94a3b8 / #9aa4b2 / #a8b3c2
   对比度只有 2.1~2.6:1，远低于 WCAG AA 对正文要求的 4.5:1，小字（11.5px 提示、
   统计列标题、空状态、字段说明）读起来发虚。已统一改用 --sub(#64748b → 4.68:1)。
   注意：侧栏是深色底（#0f172a），那里的 #94a3b8 对比度有 7.5:1，保持不动。 */
*{box-sizing:border-box;margin:0;padding:0}
/* 第 62 轮：全站 SVG 线性图标（替代原 emoji，杜绝无 emoji 字体环境下的「□」豆腐块）。
   currentColor 继承文字色；flex 行内不压缩；vertical-align 让图标与相邻文字基线对齐。 */
.ic{display:inline-block;vertical-align:-0.18em;flex:0 0 auto;pointer-events:none}
body{font-family:"Segoe UI","Microsoft YaHei",-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
/* 键盘可达性（第 28 轮）：统一焦点环 —— 之前只有 input/select 有 focus 样式，
   按钮/菜单项/卡片链接用键盘 Tab 全程无落点。:focus-visible 只在键盘导航时出现，鼠标点击不受影响。 */
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:4px}
input,select,textarea{font-family:inherit;font-size:14px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);width:100%;background:#fff;color:var(--ink);transition:.2s;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* 第 66 轮（用户反馈）：手机端点输入框会出现一个突兀的蓝色方框 —— 原因是文本框在触屏点击时
   也命中 :focus-visible（规范规定文本框永远匹配），把 2.5px 蓝色 outline 画了出来。
   触屏设备上一律去掉 outline/光晕，聚焦只用边框变蓝表达；桌面键盘 Tab 的焦点环保留不动。 */
@media (hover: none) and (pointer: coarse) {
  input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
  input:focus,select:focus,textarea:focus{box-shadow:none;border-color:var(--blue)}
  input,select,textarea,button,label,.btn{-webkit-tap-highlight-color:transparent}
}
/* 下拉箭头（2026-09-18）：浏览器原生箭头几乎贴住右边框，视觉上「挤在边上」。
   统一换成自绘 chevron 并内缩到距右边 12px；padding-right 同步留出空间，文字不会压到箭头。 */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
select:disabled{cursor:not-allowed;opacity:.6}
textarea{resize:vertical;min-height:64px}
label{display:block}

/* 按钮：扁平利落，主色蓝 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border:none;border-radius:var(--radius-sm);background:var(--blue);color:#fff;font-weight:600;font-size:14px;transition:.2s;box-shadow:0 1px 2px rgba(15,23,42,.1)}
.btn:hover{background:var(--blue-dark)}
.btn:active{transform:translateY(1px)}
.btn.red{background:var(--red)}
.btn.red:hover{background:var(--red-dark)}
.btn.ghost{background:#fff;color:#334155;border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:9px}
.btn.danger{background:#fff;color:var(--red);border:1.5px solid var(--red-soft);box-shadow:none}
.btn.danger:hover{background:var(--red-soft)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* 徽章（软色药丸） */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6}
.badge.blue{background:var(--blue-soft);color:var(--blue-dark)}
.badge.red{background:var(--red-soft);color:var(--red-dark)}
.badge.green{background:var(--green-soft);color:var(--green-dark)}
.badge.gray{background:#f1f5f9;color:var(--sub)}
.badge.amber{background:var(--amber-soft);color:var(--amber-dark)}
/* 可点徽章：维修保养列表的「审批状态」列（第 65 轮，用户要求车管员/管理员能看到审批流程）。
   做成「徽章 + 细箭头」的轻按钮而不是主按钮 —— 不能抢行尾 ⋯ 菜单的视觉，但 hover 有淡蓝底、
   鼠标变手，明确告诉用户这列可点。负数 margin 抵消内边距，让徽章仍与列内其他内容左对齐。 */
.ap-view{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:transparent;border:0;padding:3px 7px;margin:-3px -7px;border-radius:10px;
  cursor:pointer;font:inherit;line-height:1.35;text-align:left;color:inherit;transition:background .15s ease}
.ap-view:hover,.ap-view:active{background:var(--blue-soft)}
.ap-view:focus-visible{outline:2.5px solid var(--blue);outline-offset:1px}
.ap-view-t{display:inline-flex;align-items:center;gap:3px}
/* 箭头默认弱化（只是「可点」的暗示），hover 时点亮 */
.ap-view .ic{opacity:.38;transition:opacity .15s ease}
.ap-view:hover .ic{opacity:1}
/* 窄屏转卡片布局：单元格可能是居中/拉伸的，命中区跟着变奇怪 —— 这里统一回左对齐、收掉负 margin */
@media (max-width:820px){
  .ap-view{margin:0;padding:3px 6px;align-items:center}
}

/* 布局 */
.layout{display:flex;min-height:100vh}
.sidebar{width:236px;background:var(--side);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex:0 0 auto}
.sidebar .brand{padding:20px 18px 16px;display:flex;align-items:center;gap:11px}
/* 品牌块用红：整体是「红+蓝」双色，红色只留这一处品牌锚点，面积小不抢戏 */
.brand-logo{background:linear-gradient(135deg,var(--red),#f87171);border-radius:11px;padding:8px 9px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(239,68,68,.4)}
.brand-svg{width:24px;height:24px;display:block}
.sidebar .brand b{font-size:15px;line-height:1.25;color:#f1f5f9;letter-spacing:.3px}
.sidebar .brand small{display:block;font-size:11px;color:#94a3b8;font-weight:400;margin-top:2px}
.sidebar nav{flex:1;overflow-y:auto;padding:2px 12px 12px}
.sidebar nav::-webkit-scrollbar{width:4px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.nav-group-label{font-size:11px;color:#475569;padding:16px 12px 6px;letter-spacing:2.5px;font-weight:600}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:9.5px 12px;color:#94a3b8;font-size:13.5px;border-radius:10px;margin-bottom:2px;transition:.18s;position:relative}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#e2e8f0}
.sidebar nav a .nav-ico{width:27px;height:27px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.sidebar nav a.active{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(37,99,235,.4)}
.sidebar nav a.active .nav-ico{background:rgba(255,255,255,.25)!important;color:#fff!important}
.sidebar .user-card{margin:10px 12px 14px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--side-line);display:flex;align-items:center;gap:10px}
.user-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.user-meta{min-width:0}
.user-meta b{font-size:13px;color:#e2e8f0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta small{font-size:11px;color:#94a3b8}
.user-out{margin-left:auto;color:#94a3b8;background:none;border:none;font-size:15px;padding:6px;border-radius:8px;transition:.18s}
.user-out:hover{color:#fca5a5;background:rgba(239,68,68,.12)}
/* 「修改密码」与「退出」并排：margin-left:auto 只给第一个（🔑），退出跟在它右边 */
.user-card #change-pwd{margin-left:auto}
.user-card #logout{margin-left:0}
.user-card #change-pwd:hover{color:#93c5fd;background:rgba(37,99,235,.16)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:0 24px;height:60px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:5}
.topbar .crumb{font-size:15px;font-weight:700;color:var(--ink);flex:0 0 auto}
.topbar .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.bell-wrap{position:relative}
.bell-btn{width:38px;height:38px;border-radius:10px;background:transparent;border:none;font-size:16px;position:relative;transition:.18s}
.bell-btn:hover{background:#f1f5f9}
.bell-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff;box-sizing:content-box}
.bell-menu{position:absolute;right:0;top:46px;width:280px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 48px rgba(15,23,42,.16);padding:8px;display:none;z-index:60}
.bell-menu.open{display:block;animation:menuIn .18s cubic-bezier(.4,0,.2,1)}
.bell-title{font-size:12px;color:var(--sub);font-weight:600;padding:6px 10px 4px}
.bell-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-size:13px;color:var(--ink);transition:.15s}
.bell-item:hover{background:#f8fafc}
.bell-item .b-ico{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.bell-item .cnt{margin-left:auto;font-weight:700;color:var(--blue);font-size:13px}
.bell-item .cnt.zero{color:var(--sub);font-weight:500}
.top-user{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--line)}
.top-ava{width:33px;height:33px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}
.top-user b{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.content{padding:22px 24px;overflow:auto;flex:1}

/* 页面顶部工具条（取代原蓝色 Hero 横幅）：
   顶栏已显示页面名，渐变横幅是重复信息且独占 109px 高度 → 整块删除，
   改为一条轻量白条，右侧固定放本页操作按钮，各页位置统一。 */
.page-bar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.page-bar .pb-desc{font-size:13px;color:var(--sub);min-width:0;line-height:1.5}
.page-bar .pb-desc:empty{display:none}
.page-bar .pb-actions{display:flex;align-items:center;gap:9px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}

/* 看板模块卡片 */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:20px}
.mod-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px 14px;box-shadow:var(--shadow);transition:.25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.mod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--blue)}
.mod-card .mc-top{display:flex;align-items:center;gap:12px}
.mod-card .mc-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.25s}
.mod-card:hover .mc-icon{transform:scale(1.08)}
.mod-card .mc-top b{font-size:15px;font-weight:700}
.mod-card .mc-go{margin-left:auto;font-size:12px;color:var(--blue);opacity:0;transition:.25s;font-weight:600;display:flex;align-items:center;gap:4px}
.mod-card:hover .mc-go{opacity:1}
.mod-card .mc-num{margin:13px 0 8px;font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;transition:.25s}
.mod-card:hover .mc-num{color:var(--blue-dark)}
.mod-card .mc-num small{font-size:12px;color:var(--sub);font-weight:400;margin-left:10px}
.mod-card .mc-months{display:flex;justify-content:space-between;font-size:11px;color:var(--sub);margin-top:5px}
.mod-card .mc-months span{flex:1;text-align:center}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:.25s}
.card:hover{box-shadow:var(--shadow-hover)}
/* card.flush 不再 overflow:hidden —— 保留表格圆角由 th/首末行 td 半径负责，避免裁剪行操作下拉 */
.card.flush{padding:6px;width:100%}

/* 到期提醒 / 待办列表（药丸行式）——2026-09-18：行距/字号/高度上限整体收紧，避免提醒卡过高 */
.due-list{display:flex;flex-direction:column;gap:1px;max-height:188px;overflow-y:auto}
.due-row{display:flex;align-items:center;gap:12px;padding:5px 10px;border-radius:10px;transition:.15s}
.due-row:hover{background:#f8fafc}
.due-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:0 0 auto;box-shadow:0 0 0 3px var(--amber-soft)}
.due-dot.red{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.due-info{min-width:0;flex:1}
.due-info b{font-size:13px;line-height:1.45;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due-info small{font-size:11.5px;line-height:1.45;color:var(--sub);display:block;margin-top:0}
.due-pill{margin-left:auto;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--amber-soft);color:var(--amber-dark);flex:0 0 auto;white-space:nowrap}
.due-pill.red{background:var(--red-soft);color:var(--red-dark)}
.due-pill.green{background:var(--green-soft);color:var(--green-dark)}
.due-dot.dim{background:#cbd5e1;box-shadow:0 0 0 3px #f1f5f9}
.due-pill.dim{background:#f1f5f9;color:#64748b}
/* .due-next 已废弃：提醒卡的「接下来的到期」小标题取消，改为并入 .rb-col-title 同一行 */
/* 提醒卡贴底说明已改为卡头右侧的一行小字（.reminder-hint），整卡少一行、更矮更「横向」 */
.due-more{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding-top:12px;border-top:1px solid #f1f5f9;color:var(--blue);font-size:13px;font-weight:600;width:100%;transition:.15s}
.due-more:hover{color:var(--blue-dark);gap:7px}

/* 顶部提醒条（维修保养 / 保险 / 事故）：2026-09-18 起为「提醒 + 统计」合并整行卡 */
.reminder-bar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.reminder-head{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);margin-bottom:8px;min-width:0}
/* 卡头右侧的检查说明：原来是卡脚独立一行，占掉约 33px 高度；并到卡头后整卡更矮 */
.reminder-head .reminder-hint{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.reminder-ico{width:32px;height:32px;border-radius:9px;background:var(--amber-soft);display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.reminder-head .badge{margin-left:2px}
.reminder-empty{color:var(--green-dark);font-size:13.5px;font-weight:600;padding:6px 4px;display:flex;align-items:center;gap:8px}
.reminder-empty::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.reminder-loading{color:var(--sub);font-size:13px}

/* 紧凑图表卡片：2026-09-17 走势图横向铺满整行（原 max-width:760px 居中导致两侧大片空白），高度同步拉高 */
.chart-card.compact-chart{padding:16px 18px;margin-bottom:18px}
.chart-card.compact-chart .chart-box{max-width:none;margin:6px 0 0;min-height:150px}
/* 仅趋势折线图满宽铺排（宽而短的视图框）；甜甜圈等固定尺寸图不受此规则拉伸 */
.chart-card.compact-chart .chart-box .trend-svg{width:100%;height:auto;max-height:300px}
.mod-top-left .chart-card.compact-chart .chart-box{max-width:none;margin:6px 0 0}
.card.flush #tbl{width:100%}
.card.flush table{width:100%;min-width:100%;border-radius:var(--radius-sm)}
.grid{display:grid;gap:16px}
.section-title{font-size:15px;font-weight:700;margin:2px 0 14px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.section-sub{font-size:12px;color:var(--sub);font-weight:400;margin-left:auto}
.legend{display:inline-flex;align-items:center;gap:0}
.legend span{display:inline-flex;align-items:center;font-size:12px;color:var(--sub);margin-right:12px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}

/* KPI：图标芯片 + 角标 + 大数字 */
/* 首页 6 个 KPI 卡：原用 auto-fit 自适应列数，在某些宽度下会排成「5 + 1」——
   最后一张孤零零占一行、右边一大片空白，看着像没做完。
   固定为 3 列（2 行、每行 3 张，6 能整除）与 6 列（超宽屏一行铺满），
   任何宽度下都不会出现孤行；900/520px 以下依次退成 2 列 / 1 列。
   6 列断点取 1500px（不是 1400）：1400px 时每张卡只有 172px 宽，
   「沪A2J5Q3 等 3 项」这类副行会被省略号截掉，1500px 起每张卡 ≥190px 才放得下。 */
/* 第 42 轮：KPI 卡从 6 张减为 5 张（删「维修中车辆」），网格改 5 列均匀铺满，不留空位；
   ≤900px 两列，第 5 张（奇数张收尾）横跨整行补满，避免半行空块。 */
.kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:20px}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{padding:14px 12px}}
/* .kpi 改成 flex 列 + 每行固定 min-height：6 张卡的「图标行 / 标题行 / 数字行 / 副行」
   四行在不同卡片里必须落在同一水平线上。之前各卡内容行高不一（角标换行、标题长短不同），
   一排 6 张卡的标题和数字会各自错开，看着像没对齐。 */
.kpi{position:relative;display:flex;flex-direction:column;padding:18px 20px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:.25s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px}
.kpi-chip{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.kpi-chip.blue{background:var(--blue-soft)}
.kpi-chip.purple{background:var(--purple-soft)}
.kpi-chip.amber{background:var(--amber-soft)}
.kpi-chip.cyan{background:var(--cyan-soft)}
.kpi-chip.red{background:var(--red-soft)}
.kpi-chip.green{background:var(--green-soft)}
/* 角标一律不换行：一旦「月均 ¥28,700」这种长角标折成两行，该卡的标题行就会比别人低一截 */
.kpi .trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dark);white-space:nowrap}
.kpi .trend.up{background:var(--blue-soft);color:var(--blue-dark)}
.kpi .trend.down{background:var(--green-soft);color:var(--green-dark)}
.kpi .trend.warn{background:var(--red-soft);color:var(--red-dark)}
.kpi-lbl{color:var(--sub);margin-top:14px;font-size:12.5px;font-weight:500;line-height:17px;min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .num{font-size:27px;font-weight:800;color:var(--ink);letter-spacing:.3px;font-variant-numeric:tabular-nums;margin-top:3px;line-height:34px;min-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 6 列窄卡（≥1500px 一行铺满 6 张）时收紧内边距与徽章尺寸：
   否则「月均 ¥28,700」这类长徽章会和 38px 图标一起把卡片顶行挤到换行。 */
@media(min-width:1500px){
  .kpi{padding:16px 15px}
  .kpi-top{min-height:34px}
  .kpi-chip{width:34px;height:34px;font-size:15px;border-radius:10px}
  .kpi .trend{font-size:11.5px;padding:3px 8px}
  .kpi-lbl{font-size:12px;margin-top:12px}
}
/* 副行固定一行高度 + 溢出省略号：车牌 + 险种这类长文案在各卡里长度差异最大，
   不锁死就会把卡片高度撑得参差不齐（悬停有 title 可看全文）。 */
.kpi-sub{color:var(--sub);margin-top:3px;font-size:12px;line-height:17px;min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 第 6 张 KPI 卡：卡内直接列「保险 / 年检到期提醒」明细，替代原来的大数字。
   行高锁成和大数字行一样的 34px（两行 × 17px），所以标题行、副行仍与其余 5 张卡逐行对齐。 */
.kpi .num.kpi-due-num{font-size:12px;font-weight:500;letter-spacing:0;line-height:17px;
  height:34px;min-height:34px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.kpi-due-num .dm-row{display:flex;align-items:center;gap:6px;min-width:0}
.kpi-due-num .due-dot{width:6px;height:6px;box-shadow:0 0 0 2px var(--amber-soft)}
.kpi-due-num .due-dot.red{box-shadow:0 0 0 2px var(--red-soft)}
.dm-name{flex:1 1 auto;min-width:0;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-name.dm-empty{color:var(--sub);font-weight:400}
.dm-day{flex:0 0 auto;color:var(--amber-dark);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dm-day.red{color:var(--red-dark)}
.dm-link{color:var(--blue);font-weight:600}
.dm-link:hover{color:var(--blue-dark);text-decoration:underline}

/* 统计区（4 张卡 = 2 列 × 2 行）：
   四张卡是**直接格子**，不再左右各套一列 flex —— 原来右列矮、第二行的起点比左边高一截，
   用户反馈「你这也不整齐」。作为同格子的相邻项，每一行的顶边与底边都会自动对齐。
   拉伸出来的空白：图表 svg / 提醒列表各用 margin:auto 在卡内垂直居中。 */
.stats-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:20px}
.stats-wrap>.chart-card{display:flex;flex-direction:column;min-width:0}
.stats-wrap>.chart-card>svg{margin:auto 0}
/* 提醒卡被拉高时：列表贴标题、链接沉到卡底，中间留白自然分散，不会顶出一块「空心的中段」 */
.stats-wrap>.chart-card>.due-more{margin-top:auto}
.chart-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:.25s}
.chart-card:hover{box-shadow:var(--shadow-hover)}
.chart-card .chart-box{margin-top:8px}
@media(max-width:980px){.stats-wrap{grid-template-columns:1fr}}

/* 查询面板 */
.query-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);margin-bottom:18px;transition:.25s}
.query-panel:hover{box-shadow:var(--shadow-hover)}
.query-panel .row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.query-panel .qp-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.query-panel .field-min{display:flex;flex-direction:column;gap:6px}
.query-panel .field-min label{font-size:12.5px;color:var(--sub);font-weight:600}
.query-panel .field-min select,.query-panel .field-min input{width:auto;min-width:140px}
.query-panel .field-min.grow{flex:1}
.query-panel .field-min.grow input{width:100%}
.cnt{color:var(--sub);font-size:12.5px;font-weight:500}

/* 表格 */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .spacer{flex:1}
.toolbar input,.toolbar select{max-width:200px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:#fff;border-radius:var(--radius-sm)}
thead th{background:#f8fafc;color:#475569;font-weight:600;text-align:left;padding:13px 16px;font-size:12.5px;letter-spacing:.3px;white-space:nowrap;position:sticky;top:0;z-index:2;border-bottom:1.5px solid var(--line)}
/* 第 20 轮补：粘性表头不设 z-index 时，行内 position:relative 的 td.actions-cell（DOM 靠后）会画在表头之上 ——
   内部滚动列表一拉，行的「⋯」按钮就浮到表头上（用户截图实证）。z-index:2 让表头恒压在行内容之上；
   .action-menu 的 z-index:25 高于表头(2)、低于抽屉遮罩(30)与弹窗遮罩(50) —— 抽屉/弹窗打开时菜单不会被误托到遮罩上层。 */
thead th:first-child{border-top-left-radius:var(--radius-sm)}
thead th:last-child{border-top-right-radius:var(--radius-sm)}
tbody td{padding:13px 16px;border-bottom:1px solid #f1f5f9;white-space:nowrap;color:var(--ink);transition:.15s}
tbody td{color:#334155}
tbody tr:last-child td{border-bottom:none}
tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-sm)}
tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-sm)}
tbody tr:hover{background:#f8fafc}
tbody tr{transition:.15s}
td.wrap{white-space:normal;min-width:220px;max-width:380px;line-height:1.55}
/* 台账记录明细弹窗：点列表行（手机卡片/桌面行）弹出 */
.tbl-scroll tbody tr[data-id]{cursor:pointer}
/* 第 62 轮兼容修补：dvh 单位老浏览器不支持 → 先写 vh 兜底，支持的浏览器自动用后面的 dvh */
.rec-detail{width:min(560px,96vw);max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;overflow:hidden}
.rec-detail .body{overflow-y:auto}
.rd-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.rd-item span{font-size:11.5px;font-weight:600;color:var(--sub);letter-spacing:.2px}
.rd-item b{font-size:14px;color:var(--ink);font-weight:700;word-break:break-word}
.rd-item.full{grid-column:1/-1}
/* 只读角色（第 18 轮）：详情弹窗底部不给编辑/删除，改用一行灰字说明，避免空 footer 像渲染坏了 */
.rd-readonly{font-size:12.5px;color:var(--sub);font-weight:600}
/* 金额列：右对齐 + 等宽数字，列里小数位对齐才好扫读 */
/* 金额列与文字列统一左对齐（用户 2026-09-22：加油金额 / 保险保费改左对齐） */
td.num{text-align:left;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.actions-cell{position:relative}
/* 行操作下拉：JS 打开时改 fixed 定位（脱离任何 overflow 裁剪），故此处仅作静态兜底 */
.action-menu{display:none;position:absolute;right:6px;top:calc(100% - 4px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 12px 36px rgba(15,23,42,.16);min-width:120px;z-index:25;overflow:hidden}
.action-menu.up{top:auto;bottom:calc(100% - 4px)}
.action-menu.open{display:block;animation:menuIn .2s cubic-bezier(.4,0,.2,1)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.action-menu button{display:block;width:100%;text-align:left;padding:11px 16px;border:none;background:none;font-size:13px;color:var(--ink);cursor:pointer;transition:.15s}
.action-menu button:hover{background:var(--blue-light);color:var(--blue-dark)}
.action-menu button.del{color:var(--red)}
.action-menu button.del:hover{background:var(--red-soft)}
.btn.op{background:#fff;color:#475569;border:1.5px solid var(--line);box-shadow:none;font-size:13px;padding:6px 13px;border-radius:9px;transition:.2s}
.btn.op:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.empty{padding:42px;text-align:center;color:var(--sub);font-size:15px}

/* 弹窗 */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal{background:#fff;border-radius:16px;width:min(680px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.25);animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);background:#fff;border-radius:16px 16px 0 0}
.modal header h3{font-size:16px;color:var(--ink);font-weight:700}
.modal header .close{color:var(--sub);font-size:22px;background:none;border:none;cursor:pointer;line-height:1;transition:.2s}
.modal header .close:hover{color:var(--red);transform:rotate(90deg)}
.modal .body{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.modal .body .full{grid-column:1/-1}
.modal footer{padding:14px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#f8fafc;border-radius:0 0 16px 16px}
.field label{display:block;font-size:13px;color:var(--sub);margin-bottom:6px;font-weight:600}
.fld-note{font-size:11.5px;color:var(--sub);line-height:1.45;margin-top:6px}
.close{cursor:pointer;font-size:22px;color:var(--sub);border:none;background:none;transition:.2s}
.close:hover{color:var(--red);transform:rotate(90deg)}

/* 登录 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a,#1e3a8a);position:relative;overflow:hidden}
.login-wrap::before{content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:rgba(37,99,235,.18)}
.login-wrap::after{content:"";position:absolute;right:-100px;bottom:-140px;width:380px;height:380px;border-radius:50%;background:rgba(37,99,235,.12)}
.login-card{background:#fff;border-radius:20px;padding:44px;width:min(400px,92vw);box-shadow:0 28px 80px rgba(0,0,0,.35);text-align:center;animation:modalIn .4s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}
/* 第 62 轮：login-logo 原先指向 /assets/logo.png —— 服务器上从来没有这个文件（裂图）。
   现改用同目录 client/assets/logo.svg（express.static(clientDir) 直接服务，随版本发布）。 */
.login-logo{width:min(280px,84%);aspect-ratio:831/163;height:55px;margin:0 auto 22px;background:url('/assets/logo.svg') no-repeat center/100% auto}
/* 第 84 轮：登录卡大标题已按用户要求删除，原标题字号规则一并移除，避免死样式 */
.login-card p{color:var(--sub);margin-bottom:28px;font-size:14px}
.login-card input{margin-bottom:16px}
.login-card .btn{width:100%;justify-content:center;padding:13px;font-size:15px}

/* 提示 */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast-item{background:#1e293b;color:#fff;padding:12px 22px;border-radius:12px;font-size:14px;box-shadow:0 8px 28px rgba(0,0,0,.3);animation:toastIn .4s cubic-bezier(.4,0,.2,1)}
.toast-item.err{background:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* 移动端扫码页 —— 独立全屏表单，扫码后不进入后台外壳 */
.mobile-wrap{min-height:100vh;min-height:100dvh;background:linear-gradient(180deg,#1e3a8a,#0f172a);padding:24px 16px;color:#fff;
  /* 刘海屏 / 手势条避让，否则底部按钮会被系统条压住 */
  padding-top:calc(24px + env(safe-area-inset-top,0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  padding-left:calc(16px + env(safe-area-inset-left,0px));
  padding-right:calc(16px + env(safe-area-inset-right,0px))}
.mobile-card{background:#fff;color:var(--ink);border-radius:18px;padding:28px;max-width:460px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.mobile-card .plate{font-size:30px;font-weight:800;color:var(--blue-dark);text-align:center;letter-spacing:3px;padding:16px;border:2px dashed var(--blue);border-radius:var(--radius-sm);margin-bottom:22px;
  word-break:break-all;overflow-wrap:anywhere}
.mobile-field{margin-bottom:18px}
.mobile-field label{display:block;font-size:14px;color:var(--sub);margin-bottom:6px;font-weight:600}
.mobile-submit{background:var(--blue);color:#fff;width:100%;padding:16px;font-size:17px;font-weight:700;border-radius:12px;border:none;box-shadow:0 8px 24px rgba(37,99,235,.35);transition:.25s;cursor:pointer;min-height:52px}
.mobile-submit:hover{background:var(--blue-dark)}
.mobile-submit:active{transform:scale(.985)}
.mobile-submit:disabled{opacity:.65;cursor:not-allowed}
/* 司机端的只读提示条：告诉他扫的是哪辆车、只需填这一张表 */
.mobile-tip{display:flex;gap:8px;align-items:flex-start;background:var(--blue-soft);color:var(--blue-dark);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.6;margin-bottom:20px}
.mobile-tip i{font-style:normal;flex:none}
.success-box{text-align:center;padding:32px 12px}
.success-box .check{font-size:68px;color:var(--green);animation:checkPop .5s cubic-bezier(.4,0,.2,1)}
@keyframes checkPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

/* 手机端适配：<560px 时收紧留白、输入框放大到 16px（iOS 上小于 16px 会自动放大页面，
   司机填一个字屏幕就跳一下），并保证所有可点元素 ≥44px 的触控高度 */
@media(max-width:560px){
  .mobile-wrap{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .mobile-card{padding:20px 16px;border-radius:16px}
  .mobile-card .plate{font-size:24px;letter-spacing:2px;padding:13px;margin-bottom:18px}
  .mobile-field{margin-bottom:15px}
  .mobile-field label{font-size:13.5px}
  .mobile-field input,.mobile-field select{font-size:16px;padding:12px 14px;min-height:46px}
  .mobile-submit{font-size:16px;padding:15px}
  .mobile-card h2{font-size:19px}
  /* ★ 第 37 轮：补齐通用可点元素的触控高度（原先只覆盖 .mobile-*，.btn/.user-out 漏掉，
     巡检实测「＋新增车辆」41px、「月报生成」43px、侧栏 🔑33×32 / ⏻22×32 均 <44px）。 */
  .btn,.btn.sm,.btn.ghost,.top-actions .btn{min-height:44px;padding-top:11px;padding-bottom:11px}
  .sidebar .user-out{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* 极窄屏（iPhone SE 等 320px）：进一步压缩，保证不横向滚动 */
@media(max-width:360px){
  .mobile-wrap{padding-left:calc(10px + env(safe-area-inset-left,0px));padding-right:calc(10px + env(safe-area-inset-right,0px))}
  .mobile-card{padding:16px 12px}
  .mobile-card .plate{font-size:21px}
}

/* 月报预览：直接渲染「与导出 Excel / PDF 同源」的表格，故用真实表格网格而非卡片 */
.rpt-frame{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px 16px}
.rpt-hint{font-size:12px;color:var(--sub);margin-bottom:10px}
.rpt-scroll{overflow-x:auto}
/* 月报预览表：宽度 = 容器 88%、水平居中（与「导出 PDF」版式一致，两侧各留 6%）。
   第 68 轮：合并进 table.rpt 基础规则并去掉基础 min-width:880px —— 原来拆两条，
   中等宽度窗口下 88% < 880px 会顶出横向滚动条，看起来仍像「横着全屏」；
   窄屏可读性由下方 ≤860px 媒体查询里的 min-width:820px 单独兜底 */
table.rpt{width:88%;margin:0 auto;border-collapse:collapse;table-layout:fixed;font-size:11.5px;color:#1a2a3a;background:#fff}
table.rpt td{border:1px solid #7b8a99;padding:2px 3px;text-align:center;vertical-align:middle;line-height:1.25;word-break:break-word;overflow-wrap:anywhere}
table.rpt td.b{font-weight:700}
table.rpt tr:first-child td{font-size:16.5px;font-weight:700;letter-spacing:.5px}
table.rpt tr:nth-child(2) td{font-size:12.5px;color:#3a4a5a}
.rpt-warn{margin-top:10px;font-size:12px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:8px 10px}
.kv-line{display:flex;flex-wrap:wrap;gap:8px 28px;padding:12px 14px;font-size:13px}
.kv-line b{color:var(--blue-dark)}

/* ============ 台账页新布局（2026-09-16 改版，同日二次修订） ============
   横条 .mod-strip：只剩「提醒卡 / 走势图」，独占整行（原右栏的关键字搜索面板已整块删除，
   因各台账页已有「车辆 / 年份 / 月份 / 状态」等筛选下拉，关键字搜索属重复功能）。
   筛选行 .filter-row：新增固定在最左（列表左上角），其余筛选项紧随其后，右侧本页条数。
   无提醒/无图表的页（司机档案、油卡充值）不再渲染 .mod-strip，直接进筛选行。
   说明条 .page-bar 已从台账页移除（顶栏 crumb 已有页面名），页面操作按钮移到顶栏 .top-actions。 */
.mod-strip{display:block;margin-bottom:14px}
.mod-strip>.chart-card,.mod-strip>.reminder-bar{margin-bottom:0}
.ms-cards{min-width:0;display:flex;flex-direction:column}
/* 卡片撑满整行宽度；同一页有多张卡（如「其他费用」的年/月双图）时横向并排 */
.ms-cards>.chart-card,.ms-cards>.reminder-bar{flex:1 1 auto;display:flex;flex-direction:column;margin-bottom:0}
.ms-cards>.chart-card .chart-box{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
/* 筛选行 */
.filter-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);margin-bottom:18px;transition:.25s}
.filter-row:hover{box-shadow:var(--shadow-hover)}
.filter-row .fr-fields{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;flex:1;min-width:0}
.filter-row .field-min{display:flex;flex-direction:column;gap:6px}
.filter-row .field-min label{font-size:12.5px;color:var(--sub);font-weight:600}
.filter-row .field-min select,.filter-row .field-min input{min-width:140px}
.filter-row .qp-pair{display:contents}
.filter-row #add{flex:0 0 auto;height:43px;padding:0 20px}
/* 条数不再垂直居中悬浮（旧写法 align-self:center 会让它飘在标签与控件之间的半空），
   改为与「新增」及右侧下拉控件同一条底边，并用 padding-bottom 对齐控件内的文字基线。 */
.filter-row .cnt{margin-left:auto;font-size:12.5px;color:var(--sub);font-weight:600;white-space:nowrap;align-self:flex-end;padding-bottom:12px}
/* 顶栏动作区（取代原全局搜索框）：常驻跨路由，由 setTopActions() 填充 */
.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.top-actions:empty{display:none}
.top-actions .btn{padding:8px 15px;font-size:13.5px;border-radius:10px;white-space:nowrap}
/* 其余段落沿用旧类名（综合查询 / 月报页仍用 .query-panel） */
/* 综合查询 / 月报页仍用 .query-panel；说明文字收进面板顶部浅字一行 */
.query-panel .qp-hint{font-size:12.5px;color:var(--sub);line-height:1.5;margin-bottom:12px}
.query-panel.single .row{align-items:flex-end}
.query-panel .cnt{font-size:12.5px;color:var(--sub);font-weight:600;white-space:nowrap;margin-left:auto;align-self:flex-end;padding-bottom:12px}
.query-panel .qp-pair{display:contents}
/* 注：原先这里有一条 900px 断点把 .mod-strip 由两栏压成一栏。搜索面板删除后 .mod-strip
   只剩卡片、本来就是整行，该断点已无用，移除。 */

/* ============ 2026-09-17 三次修订 ============ */
/* ① 车辆档案顶部统计卡（可点击筛选）：总车辆 / 正常 / 维修中 / 已报废 */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;transition:.2s;display:flex;flex-direction:column;gap:4px;border-left:4px solid var(--blue)}
.stat-block:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.stat-block.active{background:var(--blue-light);border-color:var(--blue)}
.stat-block .sb-num{font-size:26px;font-weight:800;color:var(--ink);line-height:1.2}
.stat-block .sb-num small{font-size:13px;font-weight:600;color:var(--sub);margin-left:3px}
.stat-block .sb-label{font-size:12.5px;color:var(--sub);font-weight:600;display:flex;align-items:center;gap:6px}
.stat-block.st-ok{border-left-color:var(--green)}
.stat-block.st-warn{border-left-color:var(--amber)}
.stat-block.st-dead{border-left-color:var(--sub)}
.stat-block.st-warn .sb-num{color:var(--amber-dark)}

/* ② 维修/保险/事故顶部横条：提醒 + 统计「合并为一张整行卡」（2026-09-18 改版）
   原为「左提醒卡 + 右 3 个独立统计框」，两列高度天然对不齐；现去掉右侧 3 个独立框、
   把提醒卡拉大到整行，统计作为卡内右侧一列（保留全部功能）。
   卡结构：.reminder-head（图标/标题/待办数 + 右侧检查说明）→ .reminder-body（左待办列表 / 右统计列）。
   （原先卡脚还有一行 .reminder-foot 说明，2026-09-18 并进卡头右侧，整卡再矮约 33px）
   2026-09-18 二次调整：用户反馈「尽量左右分布、上下别那么高」——3 项统计由竖排改成
   横向并排（.rs-list 用 grid 三列），卡身高度从「3 行统计」压到「1 行」，整体明显变矮。
   2026-09-18 三次调整：用户要求待办列表「一列变成两列」——左栏加宽到 1.32fr 才放得下
   两列待办行（否则车牌+副文会被省略号截断），`.reminder-left .due-list` 改 2 列 grid。 */
.reminder-body{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:24px;align-items:stretch;margin-top:2px}
.reminder-left{min-width:0;display:flex;flex-direction:column}
/* 待办列表两列排布（仅限提醒卡内；看板上的 .due-list 仍是单列，那张卡更窄放不下两列） */
.reminder-left .due-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;align-content:start}
/* 两列共用的列标题，保证左右两列内容顶边对齐 */
.rb-col-title{font-size:11.5px;font-weight:800;color:var(--sub);letter-spacing:.6px;line-height:16px;height:16px;margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 「一切正常」的绿色短语：并进列标题同一行，省掉原来的整行提示 */
.rb-ok{color:var(--green-dark);font-weight:700}
/* 右侧统计列：与待办列表同处一卡，用一条竖分隔线区分，不再单独成框。
   列标题固定在列顶（与左列标题同一条基线），3 项统计横向并排铺开。 */
.reminder-stats{min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:24px}
.rs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;align-items:start}
.rs-row{display:flex;flex-direction:column;gap:1px;min-width:0;padding-left:11px;position:relative}
.rs-row::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--blue)}
.rs-row.amber::before{background:var(--amber)}
.rs-row.blue::before{background:var(--blue)}
.rs-row.red::before{background:var(--red)}
.rs-row .rs-label{font-size:12px;font-weight:700;color:var(--sub);line-height:1.5;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-row .rs-main{min-width:0}
.rs-row .rs-num{font-size:19px;font-weight:800;color:var(--ink);line-height:1.32;font-variant-numeric:tabular-nums}
.rs-row .rs-num small{font-size:12px;font-weight:600;color:var(--sub);margin-left:2px}
.rs-row .rs-sub{font-size:11.5px;color:var(--sub);line-height:1.45;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.rs-row.loading .rs-num{color:var(--sub);font-size:13px;font-weight:600}

/* ③ 筛选行内的关键字搜索框（车辆档案 / 司机档案）：自动撑满剩余宽度 */
.search-mini{display:flex;align-items:center;gap:9px;background:#f1f5f9;border:1.5px solid transparent;border-radius:10px;padding:0 12px;height:43px;transition:.2s;flex:1 1 260px;min-width:200px;align-self:flex-end}
.search-mini:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.search-mini .s-ico{font-size:13px;opacity:.45;pointer-events:none}
.search-mini input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:13.5px;color:var(--ink);height:100%;padding:0}
/* 手机桌面版（980px 布局视口）下统计卡 2×2、合并卡内左右两列改为上下堆叠 */
@media(max-width:1024px){
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .reminder-body{grid-template-columns:1fr;gap:14px}
  .reminder-stats{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .rs-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
/* 更窄的手机（<640px）：两列待办会挤到只剩省略号，退回单列 */
@media(max-width:640px){
  .reminder-left .due-list{grid-template-columns:1fr}
  .reminder-head .reminder-hint{display:none}
}

/* ④ 其他费用：分布图卡内部左右分版（左统计 / 右环形图），撑满整行不空 */
.exp-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.6fr);gap:18px;align-items:center}
.exp-side{display:flex;flex-direction:column;gap:14px}
/* 2026-09-18：原来是 3 个独立小框、框之间留 14px 空隙，用户反馈「形状和形状之间有点间隔」。
   改成「一块面板 + 内部发丝分隔线」：既不是之前那种糊在一起的灰条，也没有了框间空隙。 */
#exp-stats{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.exp-side .exp-kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 16px;background:transparent;border:none;border-radius:0;font-size:13px;color:var(--sub)}
.exp-side .exp-kv + .exp-kv{border-top:1px solid #f1f5f9}
.exp-side .exp-kv b{font-size:15px;color:var(--ink);white-space:nowrap}
@media(max-width:1024px){.exp-grid{grid-template-columns:1fr}}
/* 2026-09-24：分布图换成「外置标签环形图 + 分类占比条列表」组合版（原小环+底部图例太空太丑） */
.exp-donut-wrap{display:flex;align-items:center;gap:22px;min-height:230px}
.exp-donut{flex:1.15;min-width:0;display:flex;justify-content:center}
.exp-donut svg{width:100%;height:auto;max-width:430px}
.exp-lg{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px}
.exp-lg-row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.exp-lg-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.exp-lg-nm{color:#334155;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36%}
.exp-lg-bar{flex:1;height:8px;border-radius:99px;background:#eef2f7;overflow:hidden;min-width:40px}
.exp-lg-bar i{display:block;height:100%;border-radius:99px}
.exp-lg-amt{color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap}
.exp-lg-pct{color:#64748b;font-size:11.5px;min-width:34px;text-align:right;white-space:nowrap}
@media(max-width:1024px){.exp-donut-wrap{flex-direction:column;align-items:stretch}.exp-donut svg{max-width:340px;margin:0 auto}.exp-lg{gap:9px}}

/* 加油台账：走势折线图（左）+ 每辆车综合平均油耗横向条形图（右）并排。
   2026-09-24：去掉 align-items:start → 两块 grid 拉伸等高；chart-box flex:1 +
   fitChart 按实测像素重绘 → 车辆多了上下变高时左边折线图自动跟着适应。 */
.fuel-grid{display:grid;grid-template-columns:minmax(320px,1.6fr) minmax(240px,1fr);gap:18px}
.fuel-side{display:flex;flex-direction:column;min-width:0;min-height:0}
.fuel-side .section-title{margin-bottom:0}
.fuel-side .chart-box{flex:1 1 auto;max-width:none;margin:6px 0 0;min-height:220px}
@media(max-width:1024px){.fuel-grid{grid-template-columns:1fr}}
/* 口径说明行：卡片底部一行浅色小字（如「哪几条没进油耗统计、为什么」），默认低调、不抢视线 */
.mini-note{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:12px;line-height:1.65;color:var(--sub)}
.mini-note b{color:var(--ink)}
/* 表格单元格里复用 .mini-note（审批节点备注等）：去掉虚线分隔与上间距。
   否则每个带备注的单元格都被撑出 19px 上边距 + 一条虚线，整列徽章对不齐、行高也忽高忽低。 */
td .mini-note{margin-top:3px;padding-top:0;border-top:none;line-height:1.5}
/* 仪表读数被判异常的单元格：带虚线下划线 + 问号，鼠标悬停给出原因（多见于读数多打一位） */
.anom{color:#d97706;font-weight:600;border-bottom:1px dashed #d97706;cursor:help}
/* 读数倒退（换表/清零或录错）：提示要紧但不必像「录错」那么刺眼，换一个冷色区分 */
.anom.reset{color:#0369a1;border-bottom-color:#0369a1}

/* 列多的台账（加油 9 列最宽，需 ~820px）在窄屏会被卡片裁掉最右的「操作」列 → 整列点不到。
   1120px 以下改为卡片内横向滑动：表格按内容自然宽度排版（不再压扁列），不足时撑满卡片。 */
@media(max-width:1120px){
  .card.flush{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card.flush table{width:max-content;min-width:100%}
}


/* ===== 系统设置 ===== */
.set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.set-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;transition:.25s}
.set-card:hover{box-shadow:var(--shadow-hover)}
.set-card.wide{grid-column:1/-1}
.set-head{display:flex;gap:12px;align-items:flex-start}
.set-ico{width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:linear-gradient(135deg,var(--blue-light),#e8f0fd);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;border:1px solid rgba(37,99,235,.16)}
.set-title{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:.2px}
.set-desc{font-size:12.5px;color:var(--sub);margin-top:3px;line-height:1.5}
.set-row{display:flex;gap:10px;align-items:center;margin-top:auto}
.set-row input{flex:1;min-width:0}
.set-row .btn{flex:0 0 auto;padding:10px 20px}
/* 二维码打印独立页 */
.qr-page{display:flex;flex-direction:column;gap:16px}
.qr-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.qr-hero-l{display:flex;gap:12px;align-items:flex-start;min-width:0}
.qr-hero-title{font-size:15.5px;font-weight:700;color:var(--ink)}
.qr-hero-desc{font-size:12.5px;color:var(--sub);margin-top:5px;line-height:1.65;max-width:640px}
.qr-hero-r{display:flex;gap:10px;flex-wrap:wrap}
.qr-empty{border:1.5px dashed var(--line);border-radius:var(--radius);padding:44px 20px;text-align:center;color:var(--sub);font-size:13px;background:#fbfcfe}
/* 本地/局域网地址下打印会产出「手机扫不开」的废码，用醒目横幅先拦住 */
.qr-warn{background:#fff7ed;border:1.5px solid #fdba74;color:#9a3412;border-radius:var(--radius);padding:13px 16px;font-size:13px;line-height:1.75}
.qr-warn strong{color:#7c2d12}
.qr-warn code{background:#fff;border:1px solid #fdba74;border-radius:5px;padding:1px 6px;font-size:12px;color:#7c2d12;word-break:break-all}
.qr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.qr-list:empty{display:none}
.qr-item{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;background:#fbfcfe}
.qr-item img{width:100%;max-width:130px;height:auto;display:block;margin:0 auto}
.qr-item b{display:block;margin-top:8px;font-size:13px;color:var(--ink);letter-spacing:.4px}
.qr-item .qr-url{display:block;margin-top:5px;font-size:11px;color:var(--sub);word-break:break-all;line-height:1.45}
@media(max-width:560px){
  .qr-hero{padding:14px 14px;flex-direction:column;align-items:stretch}
  .qr-hero-r .btn{flex:1}
  .qr-list{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
}
/* 系统参数：分组卡片 + 药丸标签 + 行内新增 */
.param-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.param-block{border:1px solid var(--line);border-radius:12px;background:#fbfcfe;padding:13px 14px;display:flex;flex-direction:column;gap:11px}
.param-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px dashed var(--line)}
.param-block-head b{font-size:13.5px;color:var(--blue-dark);font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:7px}
.param-block-head b::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--blue)}
.param-count{font-size:11.5px;color:var(--sub);font-weight:600;background:#eef2f7;border-radius:20px;padding:2px 9px;white-space:nowrap}
.param-tags{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.param-tag{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:4px 8px 4px 11px;font-size:12.5px;font-weight:600;line-height:1;transition:.18s}
.param-tag:hover{border-color:var(--blue);background:var(--blue-light)}
/* 删除按钮的点击区必须够大：17px 太小，鼠标 / 触屏都容易点空（WCAG 最小目标 24px）。
   做成 24×24，同时把标签的上下内边距收紧，整条标签高度基本不变。 */
.param-del{border:none;background:#f1f5f9;color:var(--sub);width:24px;height:24px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.18s;font-family:inherit;flex:0 0 auto}
.param-del:hover{background:var(--red);color:#fff}
.param-empty{font-size:12.5px;color:var(--sub);padding:2px 0}
.param-add{display:flex;gap:8px;margin-top:auto}
.param-add input{flex:1;min-width:0;font-size:13px;padding:8px 11px}
.param-add .btn{padding:8px 15px;font-size:13px;border-radius:9px;flex:0 0 auto}
@media(max-width:1180px){.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.set-grid{grid-template-columns:1fr}}

/* 档案列表：整行可点开汇总 */
.card.flush tbody tr[data-id]{cursor:pointer}
.card.flush tbody tr[data-id]:hover{background:var(--blue-light)}

/* 档案汇总弹窗（大尺寸、可滚动）：基本信息 + 汇总 KPI + 可视化 + 关联记录 */
.profile-modal{width:min(980px,96vw);max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden}
.profile-modal header{flex:0 0 auto}
.profile-modal .pf-name{color:var(--blue-dark)}
.profile-modal.driver .pf-name{color:var(--blue-dark)}
.pf-body{overflow-y:auto;padding:16px 20px 22px;background:#f8fafc;-webkit-overflow-scrolling:touch}
.pf-hero{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;align-items:center}
.pf-img{position:relative;width:196px;height:120px;flex:0 0 auto;border-radius:11px;overflow:hidden;background:linear-gradient(135deg,#1e3a8a,#2563eb 55%,#3b82f6);display:flex;align-items:center;justify-content:center}
.profile-modal.driver .pf-img{background:linear-gradient(135deg,#1e3a8a,#2563eb 55%,#60a5fa)}
.pf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.pf-img-ph{font-size:46px;opacity:.92;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.pf-hero-r{flex:1;min-width:0}
.pf-hero-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pf-hero-title .pf-name{font-size:20px;font-weight:800;letter-spacing:1px}
.pf-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px 14px}
.pf-spec{min-width:0}
.pf-spec span{display:block;font-size:11px;color:var(--sub);font-weight:600}
.pf-spec b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 里程算式行：初始里程 + 累计加油里程 = 当前总里程 */
.pf-mileline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px;background:var(--blue-light);border:1px solid #dbeafe;border-radius:12px;padding:11px 14px;font-size:13px;color:#334155}
.pf-mile-ico{font-size:15px}
.pf-mileline b{color:var(--blue-dark)}
.pf-mile-big{font-size:16px;font-weight:800}
.pf-mile-warn{color:var(--amber-dark);font-weight:700}
/* 车辆列表「当前总里程」列 */
.mile-num{color:var(--ink)}
.mile-unit{color:var(--sub);font-weight:500}
.pf-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));margin:16px 0 0}
.pf-kpis .kpi{padding:14px 15px}
.pf-kpis .kpi .num{font-size:18.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-kpis .kpi .kpi-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-kpis .kpi-chip{width:32px;height:32px;font-size:15px}
.pf-sec{margin-top:16px}
.pf-sec-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.pf-charts{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;margin-top:16px}
.pf-charts.one{grid-template-columns:1fr}
.pf-chart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.pf-chart .pf-sec-title{margin-bottom:4px}
.pf-chart-box{margin-top:4px}
.pf-none{color:var(--sub);font-size:13px;display:inline-block;padding:14px 0}
.pf-tbl{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pf-tbl table{font-size:12.5px}
.pf-tbl thead th{padding:9px 12px;font-size:11.5px;position:static}
.pf-tbl tbody td{padding:9px 12px}
.pf-tbl tbody tr[data-id]{cursor:default}
.pf-more{font-size:12px;color:var(--sub);margin-top:7px;text-align:right}
.pf-empty{background:#fff;border:1px dashed var(--line);border-radius:12px;color:var(--sub);font-size:13px;padding:16px;text-align:center}
.pf-notes{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:#334155;line-height:1.6;white-space:pre-wrap}
@media(max-width:900px){.pf-charts{grid-template-columns:1fr}.pf-hero{flex-direction:column;align-items:stretch}.pf-img{width:100%;height:150px}}


/* 模态图片字段 */
.img-field{display:flex;align-items:center;gap:14px}
.img-prev{width:88px;height:88px;border-radius:12px;object-fit:cover;border:1.5px solid var(--line);background:#f8fafc;box-shadow:var(--shadow)}
/* 第 85 轮：手写签名预览 —— 签名是宽扁形手写图，cover 会裁掉笔画，改 contain + 限高 */
.img-prev[data-prev="signature_url"]{width:150px;height:64px;object-fit:contain;background:#fff;padding:4px}
.img-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* 第 90 轮：行驶证类附件控件（图片 / PDF 均可）—— 预览 + 选择 + 移除 + 下载入口 */
.doc-field{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.doc-prev{display:flex;align-items:center;gap:10px;min-height:40px}
.doc-thumb{width:120px;height:86px;border-radius:10px;object-fit:cover;border:1.5px solid var(--line);background:#f8fafc;box-shadow:var(--shadow)}
.doc-dl,.doc-new{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--blue);text-decoration:none;font-weight:600}
.doc-dl:hover{text-decoration:underline}
.doc-none{color:var(--muted);font-size:13px}
.doc-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* 第 90 轮：车辆档案汇总弹窗里的行驶证下载入口 */
/* 第 91 轮重做：行驶证条目（缩略图 + 文件名 + 查看/下载），替代旧版单链接（文字挤压看不清） */
.pf-lic{display:flex;align-items:center;gap:14px;background:#f1f6ff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 4px}
.pf-lic-thumb{flex:none;width:64px;height:64px;border-radius:10px;border:1px solid var(--line);background:#fff;overflow:hidden;display:block}
.pf-lic-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pf-lic-ico{flex:none;width:64px;height:64px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--blue)}
.pf-lic-ico svg{width:28px;height:28px}
.pf-lic-info{min-width:0;flex:1}
.pf-lic-t{font-weight:800;font-size:15px;color:var(--ink);line-height:1.3}
.pf-lic-name{font-size:13px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-lic-btns{display:flex;gap:8px;flex:none}
.pf-lic-view,.pf-lic-dl{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.pf-lic-view{color:var(--blue);background:#fff;border:1px solid var(--blue)}
.pf-lic-view:hover{background:#eef4ff}
.pf-lic-dl{color:#fff;background:var(--blue);border:1px solid var(--blue)}
.pf-lic-dl:hover{filter:brightness(1.08)}
.pf-lic-view svg,.pf-lic-dl svg{width:16px;height:16px}
@media(max-width:640px){.pf-lic{flex-wrap:wrap}.pf-lic-info{flex-basis:calc(100% - 78px)}.pf-lic-btns{margin-left:78px}}

/* 第 85 轮：账号管理签名缩略图 + 审批时间线签名 */
.sig-thumb{height:34px;max-width:100px;object-fit:contain;display:block;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:5px;padding:2px}
/* 第 85 轮续：审批时间线签名放大成独立块（原先 22px 内联太小），大签名在上、日期在下 */
.ap-sig{display:block;height:auto;max-height:62px;max-width:210px;margin:8px 0 4px;padding:2px 10px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,.06);object-fit:contain}
@media (max-width:760px){.ap-sig{max-height:52px;max-width:170px}}

/* 表格行车辆缩略图 */
.thumb-cell{display:flex;align-items:center;gap:11px}
.row-thumb{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#eef2f7;box-shadow:0 2px 8px rgba(15,23,42,.1);transition:transform .2s}
tbody tr:hover .row-thumb{transform:scale(1.08)}
.row-thumb.ph{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;font-weight:800;font-size:15px}
.thumb-name{font-weight:600;color:var(--ink)}

/* 响应式（旧块只留与「抽屉 + 表格卡片化」新方案不冲突的规则；
   侧栏抽屉 / 顶栏两行式 / 表格卡片化 分别见下方 900 / 760 断点，
   ⚠️ 不要在这里再写 .sidebar 横排 / .layout 纵向 那套旧手机布局，会跟抽屉打架） */
@media(max-width:860px){
  .modal .body{grid-template-columns:1fr}
  th,td{padding:11px 11px;font-size:12.5px}
  table{display:block;overflow-x:auto;white-space:nowrap}
  /* 月报表格必须保持 table 布局与换行，否则会被上面的移动端 table 规则（display:block + nowrap）拆散 */
  table.rpt{display:table;white-space:normal;overflow:visible;min-width:820px}
  table.rpt td{white-space:normal}
  .rpt-frame{padding:10px 10px 12px}
  .page-bar{flex-direction:column;align-items:stretch;gap:10px}
  .page-bar .pb-actions{justify-content:flex-start}
  .filter-row{align-items:stretch;gap:10px}
  .filter-row .fr-fields{width:100%}
  .filter-row .cnt{margin-left:0;width:100%}
}

/* ===== 长列表折叠：列表页表格限高可展开；综合查询各版块可折叠 ===== */
.tbl-scroll{max-height:60vh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm);scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
/* 第 28 轮：列表滚动条原生默认太粗太抢眼，收细并与卡片底色融合 */
.tbl-scroll::-webkit-scrollbar{width:9px;height:9px}
.tbl-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid #fff}
.tbl-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.tbl-scroll::-webkit-scrollbar-track{background:transparent}
.tbl-scroll.full{max-height:none}
.fold-bar{display:flex;justify-content:center;padding:10px 0 4px}
.fold-bar .btn{padding:7px 16px;font-size:12.5px}
.fold-card .fold-head{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;user-select:none;transition:.15s}
.fold-card .fold-head:hover .section-title{color:var(--blue)}
.fold-card .fold-head .section-title{margin:0}
.fold-card .fold-toggle{font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.fold-card .fold-body{margin-top:4px}
.fold-card .fold-body[hidden]{display:none}
/* 0 条记录的版块：只留一行淡标题，不再撑出一整块「暂无」空白 */
.fold-card.is-empty .fold-head{cursor:default}
.fold-card.is-empty .fold-head:hover .section-title{color:inherit}
.fold-card .fold-none{font-size:12.5px;color:var(--sub);white-space:nowrap}

/* ============================================================================
   手机端适配（2026-09-20）
   目标：① 后台在手机上不再是「一条记录横向拉很长」的表格 —— 每条记录变一张信息卡；
        ② 侧栏收进抽屉，不再白占屏幕；
        ③ 扫码页做成小程序那种「顶部标题栏 + 灰底白卡 + 底部大按钮」的样子。
   断点取 900 / 760：手机浏览器开「桌面版网站」时布局视口约 980px，
   断点必须压在 980 以下才生效（见 responsive-web-verify 技能）。
   ============================================================================ */

/* --- 顶栏汉堡按钮 + 抽屉遮罩（宽屏完全隐藏，桌面端零影响）--- */
.nav-toggle{display:none;width:38px;height:38px;border:1.5px solid var(--line);background:#fff;border-radius:10px;
  font-size:17px;line-height:1;color:var(--ink);align-items:center;justify-content:center;flex:0 0 auto;padding:0}
.nav-toggle:hover{background:var(--blue-light);border-color:var(--blue-soft);color:var(--blue-dark)}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:30}

@media(max-width:900px){
  /* 侧栏 → 抽屉 */
  .nav-toggle{display:inline-flex}
  .sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;z-index:40;
    transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);box-shadow:0 0 44px rgba(15,23,42,.4)}
  .layout.nav-open .sidebar{transform:translateX(0)}
  .layout.nav-open .nav-backdrop{display:block}
  /* 抽屉打开时锁住背后页面，防止跟着滚。
     双保险：:has() 不被老浏览器支持时，由 JS 给 body 加 .nav-locked（见 app.js navToggle 绑定）。 */
  body:has(.layout.nav-open){overflow:hidden}
  body.nav-locked{overflow:hidden}
  /* 顶栏 → 两行式（修：原来固定 54px 不换行，导入/导出/定位/铃铛全挤一行溢出重叠）：
     第一行 = 汉堡 + 页面名 + 车辆定位 + 铃铛；第二行 = 本页操作按钮（横向滑，不挤压） */
  .topbar{flex-wrap:wrap;height:auto;min-height:54px;padding:9px 12px;gap:10px;row-gap:9px}
  .topbar .crumb{flex:1 1 auto;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .right{margin-left:0;gap:8px;flex:0 0 auto}
  .topbar .top-user{display:none}
  /* 第 28 轮触控目标：手机上铃铛/汉堡/弹窗关闭只有 38px 甚至更小，拇指难点中，统一抬到 44px */
  .bell-btn,.nav-toggle{width:44px;height:44px}
  .bell-menu{top:54px}
  .close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .topbar #loc-btn{padding:0 12px;font-size:12px;min-height:44px;flex:0 0 auto;white-space:nowrap}
  .topbar .bell-wrap{flex:0 0 auto}
  .top-actions{order:9;flex:1 1 100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
  .top-actions::-webkit-scrollbar{display:none}
  .top-actions .btn{flex:0 0 auto}
  .content{padding:14px 12px 22px}
  /* 页面标题区、统计卡、各模块栅格一律单列 */
  .stats-wrap{grid-template-columns:1fr 1fr}
  .mod-grid,.exp-grid,.set-grid,.pf-charts,.fuel-grid{grid-template-columns:1fr!important}
  .page-head{flex-wrap:wrap;gap:10px}
  /* 弹窗占满宽度，别挤在中间一小条 */
  .modal{width:calc(100vw - 24px)!important;max-width:520px!important;max-height:86vh;max-height:86dvh}
  .modal-backdrop{padding:12px}
}

/* --- 表格 → 卡片（本轮核心：手机上不再横滑长表格）--- */
@media(max-width:760px){
  /* 解除限高与横滑，整张表变成卡片流 */
  .tbl-scroll{max-height:none!important;overflow:visible!important}
  /* max-width 封顶：Chrome 对 display:block 的 table 仍按内容 min-content 计宽
     （操作按钮行 + minmax 轨道叠加会把表格顶到 ~390px），必须硬性压回容器宽 */
  .tbl-scroll table{display:block;width:100%;max-width:100%}
  .tbl-scroll thead{display:none}                 /* 表头信息下沉到每张卡里当字段名 */
  /* 卡片流改双列（用户要求「卡片从一列变成两列」）：grid 两列等宽，卡片等高 */
  .tbl-scroll tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
    align-items:stretch;max-width:100%}
  .tbl-scroll tbody tr{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:4px 12px 6px;margin:0;box-shadow:var(--shadow)}

  /* 窄卡里字段改为「字段名在上、值在下」竖排，避免左右挤爆 */
  .tbl-scroll tbody td{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    padding:7px 0;border-bottom:1px dashed var(--line);text-align:left;font-size:13px;
    white-space:normal;word-break:break-word}
  .tbl-scroll tbody td:last-child{border-bottom:none}
  /* 字段名由 JS 写进 data-label，这里用小标题显示 */
  .tbl-scroll tbody td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:11px;font-weight:600;color:var(--sub);letter-spacing:.2px}
  .tbl-scroll tbody td[data-label=""]::before,.tbl-scroll tbody td:not([data-label])::before{content:none}

  /* 第一列当卡片标题：独占一行、放大加粗，左侧一道蓝条 */
  .tbl-scroll tbody td:first-child{display:block;text-align:left;font-size:15.5px;font-weight:700;
    color:var(--ink);padding:13px 0 10px 11px;border-bottom:1px solid var(--line);position:relative;line-height:1.4}
  .tbl-scroll tbody td:first-child::before{content:none}
  .tbl-scroll tbody td:first-child::after{content:"";position:absolute;left:0;top:15px;bottom:12px;
    width:3px;border-radius:3px;background:var(--blue)}
  /* 缩略图列：图 + 车牌横排。必须显式 row —— 上面的通用 td 已改成 column（竖排字段），
     不写 direction 的话标题里「图/车牌」会竖着堆成两层 */
  .tbl-scroll tbody td.thumb-cell{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding-left:11px}
  .tbl-scroll tbody td.thumb-cell .thumb-name{font-size:15.5px;font-weight:700}
  .tbl-scroll tbody td.thumb-cell .row-thumb{width:38px;height:38px;border-radius:9px}

  .tbl-scroll tbody td.num{font-weight:700}
  .tbl-scroll tbody td .badge{font-size:12px}

  /* 操作列：不再用「⋯」弹菜单，按钮直接摊开成一行（手指一点就到）；
     margin-top:auto 把按钮行钉到卡片底部 —— 两列等高时所有卡的操作按钮对齐。
     「详情」按钮在手机卡片上是多余的（点卡片任意处即弹详情），藏掉，编辑/删除两等分 */
  .tbl-scroll tbody td.actions-cell{display:block;padding:11px 0 5px;text-align:left;margin-top:auto}
  .tbl-scroll tbody td.actions-cell::before{content:none}
  .tbl-scroll tbody td.actions-cell .btn.op{display:none}
  .tbl-scroll tbody td.actions-cell .action-menu button[data-detail]{display:none}
  /* 第 81 轮（用户：三个按钮挤在一起难看 / 油卡两个按钮太大）：改两列网格 ——
     审批/提交这类长文案按钮独占一行，编辑/删除（或充值/编辑油卡）两等分第二行；
     按钮整体收紧（小 padding 小字号），窄卡里不再挤压换行 */
  .tbl-scroll tbody td.actions-cell .action-menu{display:grid;grid-template-columns:1fr 1fr;position:static;border:none;background:none;
    box-shadow:none;min-width:0;gap:8px;overflow:visible;animation:none}
  .tbl-scroll tbody td.actions-cell .action-menu button{flex:none;min-width:0;text-align:center;padding:9px 4px;
    border:1.5px solid var(--line);border-radius:10px;font-size:12.5px;font-weight:600;background:#fff;line-height:1.3}
  .tbl-scroll tbody td.actions-cell .action-menu button[data-appr],
  .tbl-scroll tbody td.actions-cell .action-menu button[data-ap-submit]{grid-column:1 / -1}
  .tbl-scroll tbody td.actions-cell .action-menu button[data-edit]{color:var(--blue-dark);border-color:var(--blue-soft);background:var(--blue-light)}
  .tbl-scroll tbody td.actions-cell .action-menu button[data-edit]:active{background:#dbeafe}
  .tbl-scroll tbody td.actions-cell .action-menu button.del{color:var(--red);border-color:#fecaca;background:#fef2f2}
  .tbl-scroll tbody td.actions-cell .action-menu button.del:active{background:#fee2e2}
  .tbl-scroll tbody td.actions-cell .action-menu button svg.ic{width:14px;height:14px}
  /* 两列卡片防撑爆（20 轮巡检抓到的）：
     1) td.wrap 桌面上 min-width:220px 是给横滑表格用的，窄卡里必须归零，否则卡片被顶到 246px 宽；
     2) grid 项(tr) 默认 min-width:auto，操作按钮/长内容的 min-content 会把卡顶出列，
        显式允许收缩 + 内容可断行 */
  .tbl-scroll tbody td.wrap{min-width:0;max-width:none}
  .tbl-scroll tbody tr{min-width:0;max-width:100%}
  .tbl-scroll tbody tr > td{min-width:0}
  .tbl-scroll tbody tr > td > *{max-width:100%}

  /* 手机紧凑卡片（用户：上下别那么高 + 不要上下折叠）：卡片只留「标题 + 关键字段(m:true)」，
     不做原地展开/收起 —— 点卡片任意处（操作区除外）直接弹明细窗看全部字段；
     编辑/删除入口在明细弹窗底部（台账）或原有的档案汇总弹窗（车辆/司机） */
  .tbl-scroll tbody tr td:not(:first-child):not(.mkey):not(.actions-cell){display:none}
  .tbl-scroll tbody tr td:first-child{border-bottom:1px dashed var(--line)}

  /* 空数据行：退回单列整宽（不参与两列网格） */
  .tbl-scroll tbody:has(td.empty){display:block}
  .tbl-scroll tbody td.empty{display:block!important;text-align:center;padding:26px 0;color:var(--sub)}
  .tbl-scroll tbody td.empty::before{content:none}
  .tbl-scroll:has(tbody td.empty){background:none;border:none}

  /* 折叠条在手机上没必要（已经不限高） */
  .fold-bar{display:none}
  /* 综合查询的分区卡：内边距收紧，标题换行 */
  .fold-card .fold-head{flex-wrap:wrap;gap:6px}
  /* 筛选行纵向排布 */
  .filter-row{flex-wrap:wrap}
  .filter-row .fr-fields{width:100%;flex-wrap:wrap}
  .filter-row .fr-fields > *{flex:1 1 44%}
  /* 顶栏动作区按钮 */
  .top-actions .btn{padding:0 14px;min-height:44px;font-size:13.5px}
}

/* 极窄屏再收一档 */
@media(max-width:400px){
  .stats-wrap{grid-template-columns:1fr}
  .content{padding:12px 10px 20px}
  /* 字段已是「名上值下」竖排：只调字号，gap 交给 760 块的 3px（10px 是旧横排布局的遗留，会把字段撑很高） */
  .tbl-scroll tbody td{font-size:13px}
  .tbl-scroll tbody td::before{font-size:12px}
  /* 注意：两列卡片布局在 360~400px 也保持（字段已竖排不挤压），
     之前回退阈值误设 ≤400，把 390 宽的手机打回一列了 */
}
/* 真超窄（≤330，如 320 宽小屏）才退回单列：每列 <150px 放不下两张卡 */
@media(max-width:330px){
  .tbl-scroll tbody{grid-template-columns:1fr}
  .tbl-scroll tbody tr{margin-bottom:10px}
}

/* ============================================================================
   手机端 App 化（2026-09-20 二批）：后台在手机上向小程序 / App 观感靠拢
   —— 参照用户给的车生活类 App 首页：浅蓝灰画布 + 无硬描边的白色圆角卡浮在上面
   + 整体收紧留白。配色不变（蓝主色），只做「观感 + 密度」，不动布局结构，
   与上面 900 / 760 断点是叠加关系（本块在后，同优先级时覆盖前者）。
   ============================================================================ */
@media(max-width:900px){
  /* 画布：顶部一点天蓝渐到浅灰蓝，白卡浮在上面（App 首页的观感来源） */
  body{background:linear-gradient(180deg,#e6f0fb 0%,#eff3f8 300px) #eff3f8}
  /* 顶栏更像 App 头：去掉硬描边、换一层极轻的投影 */
  .topbar{border-bottom-color:transparent;box-shadow:0 1px 8px rgba(15,23,42,.07)}
  /* 卡片：描边减淡、圆角放大到 16、阴影更轻更「浮」 */
  .card,.mod-card,.chart-card,.query-panel,.reminder-bar,.page-bar,.stat-block,.kpi,.set-card,.param-block{
    border-color:rgba(226,232,240,.55);border-radius:16px;
    box-shadow:0 1px 2px rgba(15,23,42,.03),0 3px 12px rgba(15,23,42,.05)}
  /* 密度：手机上卡片普遍收薄（用户反馈「卡片上下太宽、看着太费劲」） */
  .content{padding:12px 10px 22px}
  .card,.chart-card,.query-panel{padding:14px}
  .mod-card{padding:13px 15px 11px}
  .mod-grid{gap:10px;margin-top:14px}
  .kpi{padding:13px 14px}
  .kpi-lbl{margin-top:10px}
  .kpi .num{font-size:23px}
  .stat-strip{gap:10px;margin-bottom:12px}
  .stat-block{padding:12px 14px}
  .stat-block .sb-num{font-size:22px}
  .section-title{margin-bottom:10px}
  .grid,.stats-wrap{gap:10px}
  .stats-wrap{margin-bottom:12px}
  .grid{margin-bottom:12px}
  /* 提醒卡（用户反馈「维修保养/保险提醒占地太多、上下太多」）：内边距与行距收紧 */
  .reminder-bar{padding:12px 14px;margin-bottom:12px}
  .reminder-body{gap:12px;margin-top:0}
  .reminder-head{margin-bottom:6px}
  .rb-col-title{margin-bottom:5px}
  .due-row{padding:4px 8px}
  .due-info b{font-size:12.5px}
  .due-info small{font-size:11px}
  .reminder-stats{padding-top:12px}
  .rs-row .rs-num{font-size:17px}
  /* 筛选行收薄 */
  .filter-row{padding:11px 13px;margin-bottom:12px;gap:8px}
  .filter-row .fr-fields{gap:8px}
}
/* ≤760：筛选区改「App 式分行」——第一行只放「新增」按钮，第二行整行给筛选项/搜索条，
   条数垫底。原来搜索条跟「新增」挤同一行、被 flex 拉到贴着卡片右缘（用户圈出的
   「距离右边太近」）；整行后左右对称、不再是半截框怼在右边。
   注意 search-mini 在 .fr-fields 里，只给它 100% 它仍在按钮旁边 —— 必须让
   .fr-fields 自己 flex-basis 100% 换行才行。
   同时修掉记录页年份/月份下拉的怪异堆叠：它们在 .qp-pair(display:contents) 里，
   上面的 `> *` 选择器够不到，补一条按 .field-min 匹配的规则让下拉两两成行。 */
@media(max-width:760px){
  .filter-row .fr-fields{flex:1 1 100%;order:9}
  .filter-row .cnt{order:10;padding-bottom:0}
  .filter-row .search-mini{flex:1 1 100%;min-width:0}
  .filter-row .fr-fields .field-min{flex:1 1 44%;min-width:0}
  .filter-row .field-min select,.filter-row .field-min input{min-width:0;width:100%}
  .filter-row .field-min select{padding-right:30px;background-position:right 9px center}
}

/* ============================================================================
   扫码页：小程序风格（2026-09-20）
   结构照搬小程序：顶部固定标题栏 + 浅灰底 + 白色圆角分组卡 + 行内 label/值 +
   底部固定大按钮。没有侧栏、没有顶栏、不出现任何后台元素。
   ============================================================================ */
/* 整页固定高：头尾常驻、只有中间滚动 —— 这就是小程序页面的行为，
   否则长表单会把「提交」按钮顶出屏幕（司机得先滚到底才看得到）。 */
.mp-page{height:100vh;height:100dvh;overflow:hidden;background:#f2f3f5;display:flex;flex-direction:column;
  font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
/* 顶部标题栏（常驻，含状态栏避让） */
.mp-nav{flex:0 0 auto;z-index:6;background:#fff;border-bottom:1px solid #ececec;
  padding-top:env(safe-area-inset-top,0px)}
.mp-nav-in{height:46px;display:flex;align-items:center;justify-content:center;position:relative}
.mp-nav-in h1{font-size:17px;font-weight:600;color:#111;letter-spacing:.3px;margin:0}
.mp-nav-in .mp-nav-badge{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:11px;color:#2563eb;background:#eff6ff;border:1px solid #dbeafe;border-radius:20px;padding:3px 9px}
/* 返回键（用户 2026-09-28：司机填写页要有返回键，回到上一页）。
   绝对定位在标题栏左侧，触控区 ≥44px；标题仍居中，视觉上保持小程序导航栏的平衡。 */
.mp-back{position:absolute;left:4px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:2px;height:44px;padding:0 10px;border:none;background:none;
  color:#2563eb;font-size:15px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mp-back:active{opacity:.55}
.mp-back .mp-back-ico{display:inline-flex;align-items:center;line-height:1}

.mp-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 0}

/* 车牌主卡：蓝色渐变 */
.mp-hero{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:14px;padding:20px 16px;
  color:#fff;text-align:center;margin-bottom:12px;box-shadow:0 8px 22px rgba(37,99,235,.28)}
.mp-hero .mp-hero-label{font-size:12.5px;opacity:.85;letter-spacing:1px;margin-bottom:8px}
.mp-hero .mp-plate{font-size:30px;font-weight:800;letter-spacing:4px;line-height:1.2;word-break:break-all}
.mp-hero .mp-hero-sub{font-size:12.5px;opacity:.88;margin-top:9px}

/* 分组卡 */
.mp-card{background:#fff;border-radius:14px;margin-bottom:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.05)}
.mp-card-title{font-size:12.5px;color:var(--sub);padding:13px 16px 7px;font-weight:600;letter-spacing:.4px}

/* 行：左标签 右输入（小程序 classic cell） */
.mp-cell{display:flex;align-items:center;gap:12px;padding:0 16px;min-height:54px;
  border-top:1px solid #f2f2f4}
.mp-card-title + .mp-cell{border-top:none}
.mp-cell > label{flex:0 0 108px;font-size:15px;color:#333;line-height:1.4;white-space:nowrap}
.mp-cell > label i{font-style:normal;font-size:11.5px;color:var(--sub);margin-left:3px}
.mp-cell > label em{font-style:normal;color:#ef4444;margin-left:2px}
.mp-cell .mp-val{flex:1;min-width:0;display:flex;justify-content:flex-end;align-items:center}
/* 输入框撑满整行高度：视觉上是「行内右对齐」，但可点区域必须是整行 52px，
   否则手指点到的是 36px 的小框，容易点空（触控下限 44px）。 */
.mp-cell input,.mp-cell select{width:100%;border:none!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;padding:0!important;font-size:16px;color:#111;text-align:right;min-height:0;height:52px}
.mp-cell input::placeholder{color:#6b7280;font-size:15px}
.mp-cell input:focus,.mp-cell select:focus{box-shadow:none!important}
.mp-cell select{text-align:right;text-align-last:right;padding-right:20px!important;
  background-position:right 2px center!important;background-size:11px 7px!important}
.mp-cell input[readonly]{color:var(--sub)}
/* 金额行强调 */
.mp-cell.mp-cell-strong input{font-weight:700;color:#1d4ed8;font-size:17px}
/* 校验不过时整行标红 */
.mp-cell.mp-err{background:#fff5f5}

.mp-tip{display:flex;gap:8px;align-items:flex-start;background:#eff6ff;color:#1e40af;border-radius:10px;
  padding:10px 12px;font-size:12.5px;line-height:1.65;margin-bottom:12px}
.mp-tip i{font-style:normal;flex:none}

/* 底部提交栏（常驻，含手势条避让） */
.mp-foot{flex:0 0 auto;z-index:6;background:#fff;border-top:1px solid #ececec;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.mp-submit{width:100%;height:48px;border:none;border-radius:10px;background:#2563eb;color:#fff;
  font-size:17px;font-weight:600;letter-spacing:1px;transition:.18s;
  box-shadow:0 6px 18px rgba(37,99,235,.3)}
.mp-submit:active{transform:scale(.99)}
.mp-submit:disabled{opacity:.6;box-shadow:none}
.mp-foot-note{text-align:center;font-size:11.5px;color:var(--sub);margin-top:8px}

/* 成功页 / 错误页 */
.mp-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
.mp-done .mp-done-ico{width:76px;height:76px;border-radius:50%;background:#dcfce7;color:#16a34a;
  display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:18px;
  animation:checkPop .5s cubic-bezier(.4,0,.2,1)}
.mp-done h2{font-size:19px;color:#111;margin-bottom:8px}
.mp-done p{font-size:14px;color:var(--sub);line-height:1.7;margin-bottom:26px}
.mp-done .mp-submit{width:auto;padding:0 34px}
/* 卡片内堆叠按钮（安全学习面板 / 移动端多按钮页）：留缝 + 去投影 */
.mp-card .mp-submit + .mp-submit{margin-top:8px}
.mp-card .mp-submit{box-shadow:none}

@media(max-width:360px){
  .mp-body{padding:10px 10px 0}
  .mp-hero .mp-plate{font-size:25px;letter-spacing:3px}
  .mp-cell{padding:0 13px;gap:9px}
  /* 极窄屏：标签收窄并去掉单位后缀，保证「当前公里数」这类长标签不折行 */
  .mp-cell > label{flex:0 0 88px;font-size:14px}
  .mp-cell > label i{display:none}
  .mp-foot{padding-left:10px;padding-right:10px}
}

/* ============================================================================
   扫码填写页 · 电脑端适配（2026-09-28 第 16 轮）
   用户反馈：「司机账号中点击填写这些东西时候，电脑端显示很难看；调整到移动端和电脑端都好看，
   电脑端就是列表就行、能看到历史提交的数据，移动端要自动适应的」。
   做法：移动端继续用上面的小程序版式（一行不动）；≥900px 起把整页还原成文档流 +
   内容居中限宽 + 表单卡内两列 + 底部按钮随内容排列，并在表单下方接「最近提交记录」。
   ============================================================================ */
@media(min-width:900px){
  .mp-page{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;display:block;padding-bottom:26px}
  .mp-nav{position:sticky;top:0}
  .mp-nav-in{max-width:1080px;margin:0 auto;padding:0 22px;justify-content:flex-start}
  .mp-nav-in h1{font-size:16px}
  .mp-nav-in .mp-nav-badge{position:static;transform:none;margin-left:10px}
  /* 桌面端导航条左对齐后，标题前面就是返回键，不再绝对定位 */
  .mp-back{position:static;transform:none;height:34px;padding:0 12px 0 2px;border-radius:8px;font-size:14px}
  .mp-back:hover{background:#eff6ff}
  .mp-body{max-width:1080px;margin:0 auto;padding:18px 22px 0;overflow:visible}

  /* 车牌主卡改横排：宽屏上不再占一整个大色块 */
  .mp-hero{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;text-align:left;padding:16px 20px}
  .mp-hero .mp-hero-label{margin:0}
  .mp-hero .mp-plate{font-size:26px;letter-spacing:3px}
  .mp-hero .mp-hero-sub{flex:1 1 100%;margin:2px 0 0}

  /* 两列表单卡（表单卡加 .mp-cols）：标签在上、控件在下，控件恢复带边框 —— 后台表单观感，
     而不是把手机版「左标签右输入」硬拉到 1000px 宽的屏上 */
  .mp-card.mp-cols{display:flex;flex-wrap:wrap;padding-bottom:4px}
  .mp-card.mp-cols .mp-card-title{flex:1 1 100%}
  .mp-card.mp-cols > .mp-cell{flex:1 1 calc(50% - 1px);min-width:0;border-top:1px solid #f2f2f4;
    flex-direction:column;align-items:stretch;gap:6px;min-height:0;padding:12px 18px}
  .mp-card.mp-cols > .mp-cell > label{flex:none;font-size:12.5px;font-weight:600;color:var(--sub)}
  .mp-card.mp-cols > .mp-cell .mp-val{justify-content:flex-start}
  .mp-card.mp-cols > .mp-cell input,.mp-card.mp-cols > .mp-cell select{
    width:100%;height:auto;min-height:40px;text-align:left;text-align-last:left;
    border:1.5px solid var(--line)!important;border-radius:9px!important;
    background:#fff!important;padding:8px 12px!important;font-size:14px;
    background-position:right 10px center!important}
  .mp-card.mp-cols > .mp-cell select{padding-right:32px!important}
  .mp-card.mp-cols > .mp-cell input:focus,.mp-card.mp-cols > .mp-cell select:focus{
    border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.12)!important}
  /* 跨整行：多行文本 / 说明块 */
  .mp-card.mp-cols > .full,.mp-card.mp-cols > div:not(.mp-cell):not(.mp-card-title){flex:1 1 100%}

  /* 底部按钮：不再钉在屏幕底部，跟内容一起排在表单下方并居中 */
  .mp-foot{background:none;border-top:none;padding:6px 0 0}
  .mp-foot .mp-submit{max-width:360px;margin:0 auto;display:block}
  .mp-foot-note{margin-top:10px}

  /* 成功页 / 错误页在文档流里要自己撑高，否则内容全挤在顶部 */
  .mp-done{min-height:56vh}
  .mp-done .mp-submit{width:auto;max-width:none}
}

/* 「最近提交记录」：移动端与桌面端共用一份 DOM，两端自适应
   （移动端跟着卡片走，桌面端因为上面限了宽也不会拉到满屏） */
.mp-hist .mp-hist-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:9px 16px;border-top:1px solid #f2f2f4;font-size:13.5px;color:#333}
.mp-hist .mp-hist-row:first-of-type{border-top:none}
.mp-hist .mp-hist-row .h-main{min-width:0;word-break:break-word}
.mp-hist .mp-hist-row .h-sub{font-size:12px;color:var(--sub);margin-top:2px;line-height:1.5}

/* ============================================================================
   安全学习 · 移动端答题（2026-09-28 第 17 轮）
   用户反馈：「安全学习中答题时候选择题，按钮和题目也不对应」。
   根因：mobileSafetyPage 用的是 .mp-row / .mp-card / .mp-submit 这套类名，但 .mp-row
   在 styles.css 里**根本没有定义** → 题干、选项、按钮全是裸块级元素，挤在一起往下堆，
   「交卷」「返回列表」两个按钮又浮在中间，看起来就跟题目对不上。
   做法：补齐 .mp-row，并把答题重排成「一题一张卡 + 选项整块可点 + 底部按钮成组」。
   ============================================================================ */
.mp-row{display:block;padding:12px 16px;border-top:1px solid #f2f2f4;font-size:14.5px;color:#333;line-height:1.6}
.mp-card-title + .mp-row{border-top:none}
.mp-row b{font-weight:600;color:#111}
.mp-quiz-head{font-size:12.5px;color:var(--sub);padding:13px 16px 7px;font-weight:600;letter-spacing:.4px}
/* 一题一张卡：题干在上、选项成列，题与题之间靠卡片间距区分 */
.mp-quiz{margin-bottom:12px}
.mp-quiz-q{padding:13px 16px 4px;font-size:15px;font-weight:600;color:#111;line-height:1.55}
.mp-quiz-q .mp-quiz-no{color:#2563eb;margin-right:6px}
.mp-quiz-opts{padding:4px 16px 13px}
/* 整行可点：命中区 48px，选中态用边框 + 浅蓝底（不加 :has 依赖，兼容旧内核） */
.mp-opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;margin-top:8px;
  border:1.5px solid var(--line,#e5e7eb);border-radius:10px;background:#fff;cursor:pointer;
  font-size:14.5px;color:#333;line-height:1.5;-webkit-tap-highlight-color:transparent}
.mp-opt:first-child{margin-top:0}
.mp-opt input[type=radio]{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:#2563eb}
.mp-opt .mp-opt-key{flex:0 0 22px;height:22px;border-radius:50%;background:#f1f5f9;color:#64748b;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mp-opt:active{background:#eff6ff}
.mp-opt.on{border-color:#2563eb;background:#eff6ff}
.mp-opt.on .mp-opt-key{background:#2563eb;color:#fff}
/* 交卷后逐题标对错（目前只提示总分，留好样式位） */
.mp-opt.right{border-color:#10b981;background:#ecfdf5}
.mp-opt.wrong{border-color:#ef4444;background:#fef2f2}
/* 答题页底部按钮成组：不再各自浮在内容流里，而是并排/竖排在题目下方 */
.mp-actions{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.mp-actions .mp-submit{margin:0}
.mp-quiz-empty{padding:20px 16px;color:var(--sub);font-size:14px;text-align:center}

/* ============================================================================
   待我审核提醒条（2026-09-28 第 17 轮）
   用户要求：审批不再单独一页，放在维修保养最上面，「有几条没审核」+ 该你审时给提醒。
   红色（有待审）= 需要动作；绿色（无待审）= 正向反馈，一眼可区分。
   ============================================================================ */
.approval-bar{border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.approval-bar.warn{background:linear-gradient(135deg,#fff1f2,#fff7ed);border:1px solid #fecdd3}
.approval-bar.ok{background:#f0fdf4;border:1px solid #bbf7d0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.approval-bar .apb-ico{font-size:17px;line-height:1}
.approval-bar .apb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.approval-bar .apb-head b{font-size:15px;color:#b91c1c}
.approval-bar .apb-head .apb-sub{font-size:12.5px;color:#9a3412;flex:1 1 200px;min-width:0}
.approval-bar.ok b{font-size:15px;color:#15803d}
.approval-bar.ok .apb-sub{font-size:12.5px;color:#166534}
.approval-bar .apb-list{display:flex;flex-direction:column;gap:2px}
.approval-bar .apb-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  background:#fff;border:1px solid #fecdd3;cursor:pointer;font-size:13.5px;color:#334155;flex-wrap:wrap}
.approval-bar .apb-row:hover{background:#fff1f2;border-color:#fda4af}
.approval-bar .apb-row .apb-plate{font-weight:700;color:#111;min-width:76px}
.approval-bar .apb-row small{color:var(--sub);flex:1 1 180px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.approval-bar .apb-row .apb-go{margin-left:auto;color:#b91c1c;font-weight:600;white-space:nowrap}
.approval-bar .apb-more{font-size:12.5px;color:#9a3412;margin-top:8px}
.mp-hist .mp-hist-row .h-val{flex:none;text-align:right;white-space:nowrap}

/* ==================== 首页 KPI 点击弹窗 + 本月费用总览 + 环形图引线标签（2026-09-23） ==================== */
/* KPI 卡可点击：hover 浮起 + 右下角箭头提示「点进去看明细」 */
.kpi.clickable{cursor:pointer}
.kpi.clickable:hover{transform:translateY(-2px);border-color:#93c5fd;box-shadow:0 10px 24px rgba(37,99,235,.12)}
.kpi.clickable::after{content:'›';position:absolute;right:13px;bottom:8px;color:#cbd5e1;font-size:17px;font-weight:700;line-height:1;transition:.2s}
.kpi.clickable:hover::after{color:#2563eb}
/* 第 6 卡：保险 X 项 / 年检 X 项 两行计数（行高与其他卡的大数字行一致 34px） */
.kpi .num.kpi-due-nums{display:flex;flex-direction:column;justify-content:center;gap:3px;font-size:14px;font-weight:600;color:#334155;min-height:34px;letter-spacing:0}
.kpi-due-nums .dn-row{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:15px}
.kpi-due-nums .dn-row .due-dot{flex:0 0 6px}
.kpi-due-nums b{font-size:16px;color:#b45309;font-weight:800}
/* 费用总览按月柱状图（2026-09-24：副标题/三块金额卡/「合计 ¥」说明行均已删除；
   flex:1 吃掉 grid 拉伸空间 + fitChart 按实测像素重绘 → 柱状图撑满卡片不留白） */
.cost-trend{margin-top:12px;flex:1 1 auto;min-height:240px}
.cost-trend svg{width:100%;height:100%;display:block}
/* 统计区第 2 行通栏（每辆车平均油耗） */
.stats-wrap>.chart-card.span2{grid-column:1/-1}
/* KPI 点击弹窗：单列布局 + 表格 */
.modal.dash-modal{width:min(760px,96vw);max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;overflow:hidden}
.modal.dash-modal .body{display:block;overflow-y:auto;padding:18px 22px}
.dm-sub{color:#64748b;font-size:13px;margin-bottom:10px;line-height:1.5}
.dm-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dm-table th{position:sticky;top:0;background:#f8fafc;z-index:1;text-align:left;padding:8px 10px;color:#475569;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap}
.dm-table td{padding:8px 10px;border-bottom:1px solid #f1f5f9;color:#1e293b}
.dm-table tbody tr:hover td{background:#f8fafc}
.dm-table tfoot td{font-weight:700;background:#f8fafc;border-top:1px solid var(--line);color:#0f172a}
@media(max-width:900px){
  .kpi.clickable::after{right:11px;bottom:7px;font-size:15px}
}
@media(max-width:560px){
  .modal.dash-modal .body{padding:14px}
}
/* 弹窗内表格在窄屏保持真表格布局（横向滚动看全字段），不走台账列表的「卡片化只留首列」规则 */
@media(max-width:760px){
  .modal.dash-modal .tbl-scroll{max-height:none!important;overflow-x:auto!important;overflow-y:auto!important}
  .modal.dash-modal .tbl-scroll table{display:table;width:100%;min-width:520px}
  .modal.dash-modal .tbl-scroll thead{display:table-header-group}
  .modal.dash-modal .tbl-scroll thead tr{display:table-row}
  .modal.dash-modal .tbl-scroll th{display:table-cell}
  .modal.dash-modal .tbl-scroll tbody{display:table-row-group}
  .modal.dash-modal .tbl-scroll tbody tr{display:table-row;background:#fff;border:none;margin:0}
  .modal.dash-modal .tbl-scroll tbody tr > td{display:table-cell!important;min-width:0;border-bottom:1px solid #f1f5f9}
  .modal.dash-modal .tbl-scroll tfoot{display:table-footer-group}
  .modal.dash-modal .tbl-scroll tfoot tr{display:table-row}
  .modal.dash-modal .tbl-scroll tfoot td{display:table-cell!important}
  .modal.dash-modal .tbl-scroll td::after{content:none!important}
}

/* ============================================================================
   keep-cols（2026-09-23）：「小表」手机端保留全部数据列
   首页「每辆车平均油耗」、综合查询「月度油耗汇总」及各记录版块 —— 这些表没有
   mkey 标记，全局紧凑卡片规则（只留标题列 + mkey）会让它们只剩车牌/月份/日期一列。
   加 .keep-cols 后恢复标准卡片字段布局：标题列（车牌/月份/日期）+ 全部带字段名的数据列。
   ========================================================================== */
@media(max-width:760px){
  .tbl-scroll.keep-cols tbody tr td:not(:first-child):not(.actions-cell){display:flex}
  .tbl-scroll.keep-cols tbody tr td:first-child{border-bottom:1px solid var(--line)}
}


/* ===== 第 10 轮：维修保养审批流 + 安全教育（2026-09-24） ===== */
/* 审批流时间线 */
.ap-flow{margin-top:14px;display:flex;flex-direction:column;gap:0}
.ap-line{display:flex;gap:10px;position:relative;padding-bottom:14px}
.ap-line:not(:last-child):before{content:'';position:absolute;left:5px;top:16px;bottom:0;width:2px;background:#e2e8f0}
.ap-dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:4px;position:relative;z-index:1}
.ap-body{flex:1;min-width:0}
.ap-head{display:flex;align-items:center;gap:8px;font-size:14px}
.ap-meta{font-size:12px;color:#64748b;margin-top:2px}
.ap-note{font-size:12.5px;color:#334155;background:#f8fafc;border-radius:8px;padding:6px 10px;margin-top:4px}
.ap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* 第 67 轮：充值申请弹窗的按钮行（提交/通过/驳回/打印/删除…）原来没有样式定义、靠默认堆叠；
   统一成 flex 行（同 .ap-actions），一行内的按钮横向排布 */
.ap-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* 第 82 轮（用户：流程设置「编辑节点」按钮移动端被拉高、文字折行很丑）：
   卡头专用弹性行 —— 桌面端按钮与标题同行右侧、垂直居中；窄屏左块占满换行后
   按钮单独一行并靠右（margin-left:auto），白-space:nowrap 保证「编辑节点」不折行 */
.fl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.fl-head>div:first-child{flex:1 1 240px;min-width:0}
.fl-head .btn{flex:0 0 auto;white-space:nowrap;margin-left:auto}
/* 安全教育卡片 */
.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:14px}
.sf-item{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.sf-head{display:flex;align-items:center;gap:8px}
.sf-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-ico{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.sf-meta{font-size:12px;color:#64748b}
.sf-ops{display:flex;gap:6px;flex-wrap:wrap}
/* 答题编辑 / 作答 */
.quiz-row{border:1px solid #e2e8f0;border-radius:10px;padding:10px;margin-bottom:8px}
/* 题头（2026-09-28 第 17 轮：加「删除本题」后需要一行放题号 + 提示 + 删除按钮） */
.qz-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.qz-head .qz-no{font-size:12.5px;font-weight:700;color:#2563eb;background:#eff6ff;
  border:1px solid #dbeafe;border-radius:20px;padding:2px 10px}
.qz-head .qz-ans-tip{font-size:12px;color:var(--sub)}
.qz-head .qz-del-q{margin-left:auto;color:#dc2626!important;border-color:#fecaca!important}
.qz-head .qz-del-q:hover:not(:disabled){background:#fef2f2!important}
.qz-del-opt{flex:0 0 auto!important;padding:2px 8px!important;color:#dc2626!important;
  border-color:#fecaca!important;line-height:1.2;font-size:14px!important}
.qz-del-opt:hover:not(:disabled){background:#fef2f2!important}
.qz-del-opt:disabled,.qz-del-q:disabled{opacity:.35;cursor:not-allowed}
.qz-q{width:100%;margin-bottom:6px}
.qz-opts{display:grid;gap:4px}
.qz-opt{display:flex;align-items:center;gap:6px}
.qz-opt input[type=text]{flex:1}
.qz-q-item{margin-bottom:12px}
.qz-opts-l{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.qz-pick{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer}
.qz-pick:hover{background:#f8fafc}
/* 学习内容展示 */
.sl-text{white-space:pre-wrap;font-size:14px;line-height:1.8;max-height:52vh;overflow:auto}
.sl-file{text-align:center;padding:14px 0}
/* 顶栏按钮里的辅助说明 */
.set-top-hint{font-size:12px;color:var(--sub)}
/* 手机端：审批/学习微调 */
@media(max-width:760px){
  .sf-grid{grid-template-columns:1fr}
  .ap-actions .btn{flex:1 1 auto}
}
/* 维修审批页状态筛选条：横向紧凑（区别于车辆档案的大卡，2026-09-24 第 12 轮） */
/* 司机端首页（2026-09-28 第 15 轮）：移动优先的一列卡片流，桌面端限宽居中 */
.drv-wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding-bottom:20px}
.drv-hero{background:linear-gradient(135deg,#1d4ed8,#0ea5e9);border-radius:16px;padding:18px 20px;color:#fff;box-shadow:0 6px 18px rgba(29,78,216,.22)}
.drv-hero-l{font-size:12px;letter-spacing:3px;opacity:.85}
.drv-name{font-size:22px;font-weight:800;margin:4px 0 6px;display:flex;align-items:baseline;gap:8px}
.drv-name small{font-size:13px;font-weight:400;opacity:.85}
.drv-plate{font-size:16px;font-weight:700;background:rgba(255,255,255,.16);border-radius:10px;padding:7px 12px;display:inline-block}
.drv-hero-sub{font-size:12.5px;opacity:.9;margin-top:8px}
.drv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.drv-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.drv-stat b{display:block;font-size:20px;font-weight:800;color:#0f172a;line-height:1.25}
.drv-stat small{font-size:12px;color:var(--sub)}
.drv-stat[data-d]{transition:transform .12s, box-shadow .12s}
.drv-stat[data-d]:active{transform:scale(.96)}
.drv-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.drv-flash{box-shadow:0 0 0 3px #38bdf8; transition:box-shadow .15s}
/* 第 19 轮：油卡管理页顶部统计 + 充值筛选 chips + 扫码选择入口 */
.sub{color:var(--sub);font-size:13px}
.fc-stats{display:flex;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.fc-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 18px;min-width:104px}
.fc-stat b{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1.2}
.fc-stat span{font-size:12px;color:var(--sub);font-weight:600}
/* 第 56 轮：删除原「N 张油卡」可点击统计卡样式（.fc-stat.click 三条）——第 47 轮已改纯展示，死样式会误导 */
/* 第 46 轮：维修保养统计卡移动端适配 —— 窄屏 3 卡竖排（每卡内部「本月|年度」两列保留） */
/* 第 78 轮（2026-10-15 用户要求）：统计卡合并为「费用合计 / 次数合计」两格，等宽两列更好看 */
.maint-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.maint-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.maint-stats-grid{grid-template-columns:1fr}}
/* 第 58 轮：移动端数据看板隐藏「新增车辆 / 月报生成」入口（用户 2026-10-12） */
@media(max-width:760px){.hide-m{display:none!important}}
/* 第 45 轮：顶部条 = 录入按钮 + 统计卡 + 余额不足警示，一行铺满 */
.fuel-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.fuel-topbar .fuel-tabs{flex:0 0 auto;margin-bottom:0}
.fuel-topbar .fc-stats{flex:1 1 auto;margin-bottom:0;justify-content:flex-end}
.fc-stat.warn b{color:#dc2626}
/* 第 47 轮：余额不足统计卡与警示合并成一个胶囊；第 48 轮（用户要求）：字号加大 + flex 垂直居中（省略号由内层 .lowbal-txt 负责） */
.lowbal-pill{flex:1 1 260px;min-width:220px;align-self:stretch;display:flex;align-items:center;background:#fff7ed;border:1px solid #fdba74;color:#9a3412;font-size:14px;font-weight:600;padding:8px 16px;border-radius:99px}
.lowbal-pill .lowbal-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rec-filter{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--sub);font-size:13px;padding:6px 14px;border-radius:99px;cursor:pointer;transition:.18s;font-family:inherit}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip-on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.hub-list{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.hub-item{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink);box-shadow:0 2px 10px rgba(15,23,42,.06);transition:.18s}
.hub-item:active{transform:scale(.98);background:#f8fafc}
.hub-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto;background:var(--blue-light);color:var(--blue-dark)}
.hub-item div b{font-size:16px;display:block}
.hub-item div small{display:block;font-size:12.5px;color:var(--sub);margin-top:3px}
.drv-card-t{font-weight:700;font-size:14.5px;margin-bottom:10px;color:#0f172a}
.drv-line{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.drv-line:last-child{border-bottom:none;padding-bottom:0}
/* 第 33 轮：整行可点（代替原来的「👁 看明细」按钮）。只加手势与悬停反馈，不改布局。 */
.drv-line-click{cursor:pointer;transition:background .15s}
.drv-line-click:hover{background:#f8fafc}
.drv-row-click{cursor:pointer}
.drv-row-click:hover{background:#f8fafc}
.drv-note{font-size:12.5px;color:var(--sub);margin-bottom:10px}
.drv-btn{display:block;text-align:center;background:#2563eb;color:#fff;border-radius:10px;padding:11px 14px;font-size:14.5px;font-weight:600;text-decoration:none;margin-top:8px}
.drv-btn:hover{filter:brightness(1.06);color:#fff}
.drv-line-acts{display:flex;gap:6px;margin-top:6px;justify-content:flex-end;flex-wrap:wrap}
.drv-act{font-size:12px;padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:#f8fafc;color:#334155;cursor:pointer;white-space:nowrap;font-family:inherit}
.drv-act:hover{background:#eef2f7}
.drv-act.warn{border-color:#fecaca;background:#fef2f2;color:#dc2626}
.drv-act.warn:hover{background:#fee2e2}
@media (max-width:640px){
  .drv-stats{grid-template-columns:repeat(2,1fr)}
  .drv-hero{padding:16px}
  .drv-line{font-size:13.5px}
  .chip{padding:10px 16px}
  /* 第 32 轮：移动端可点元素统一抬到 44px（iOS 触控最小建议值）。
     原来筛选下拉 / 分页 / 表单控件在手机上只有 34~36px，手指难点中 —— 体检实测
     单页最多 17 处不达标。这里只放大触控区，不改变视觉字号，桌面端完全不受影响。 */
  select,input[type=text],input[type=date],input[type=number],input[type=month],input[type=search],
  .topbar select,.filters select,.filter-bar select,.pager button,.btn.sm,.drv-act,.action-menu button{
    min-height:44px;
  }
  .drv-act{padding:10px 12px;font-size:13px}
  .action-menu button{padding:11px 12px}
  /* 表格里的「⋯」操作按钮在移动端是卡片底部的整行按钮，已由 .actions-cell 规则接管 */
  .tbl-scroll tbody td.actions-cell .action-menu button{min-height:44px}
}

.ap-stats{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ap-stats .stat-block{flex:0 0 auto;min-width:88px;padding:10px 16px;gap:2px}
.ap-stats .stat-block b{font-size:22px;font-weight:800;line-height:1.2}
.ap-stats .stat-block small{font-size:12px;color:var(--sub);font-weight:600}
/* 审批轮次块（2026-09-28 通用审批引擎）：模板化流程可自定义节点，时间线按轮次分块 */
.ap-round{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#fff}
.ap-round-h{display:flex;align-items:center;gap:8px;font-size:13.5px;padding-bottom:8px;border-bottom:1px dashed var(--line);margin-bottom:10px}
.ap-round-h small{color:var(--sub);font-weight:400;margin-left:auto}
.ap-line.cur .ap-body{background:#fffbeb;border-radius:8px;padding:4px 8px;margin:-4px -8px}
/* 待我审批卡：当前节点轮到我的角色时置顶提示，点「审批 ›」直接进弹窗 */
.my-approvals{border:1px solid #bfdbfe;background:#eff6ff;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.my-ap-head{font-weight:700;color:#1d4ed8;font-size:14px;margin-bottom:8px}
.my-ap-head small{font-weight:400;color:#3b82f6}
.my-ap-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:9px 12px;margin-bottom:6px;flex-wrap:wrap}
.my-ap-row:last-child{margin-bottom:0}
.my-ap-plate{font-weight:700;color:var(--ink)}
.my-ap-row small{color:var(--sub);flex:1;min-width:120px}
.my-ap-row button{margin-left:auto}
.ap-note-ask{margin-top:8px;padding:10px 12px;background:#f8fafc;border:1px dashed var(--line);border-radius:10px;flex:1 1 100%}
.ap-note-ask input{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;margin-top:4px}
/* 审批弹窗：单据详情网格（第 29 轮 2026-10-06 补样式，原缺失导致界面乱成一团） */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:12px 0;padding:12px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:10px}
/* 只读明细弹窗里，.form-grid 要撑满整个弹窗内容区。
   否则会与 .modal .body 的两列 grid 叠加 —— 内层只占左半边，右半边留大片空白。 */
.modal .body > .form-grid{grid-column:1/-1}
.modal .body:has(> .form-grid){grid-template-columns:1fr}
.form-grid .full{grid-column:1/-1}
.form-grid .f-lbl{display:block;font-size:12px;color:var(--sub);font-weight:600;margin-bottom:3px;letter-spacing:.3px}
.form-grid .f-val{font-size:14px;color:var(--ink);font-weight:500;line-height:1.5;word-break:break-word}
/* 管理员修正审批状态（第 29 轮新增） */
.ap-admin-status{margin-top:12px;padding:12px 14px;border:1px dashed #f59e0b;border-radius:10px;background:#fffbeb}
.ap-admin-status .f-lbl{display:block;font-size:12.5px;color:#b45309;font-weight:700;margin-bottom:8px}
.ap-admin-row{display:flex;align-items:center;gap:8px}
.ap-admin-row select{flex:1;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:14px;background:#fff}
.ap-admin-row .btn{flex:none}
.ap-admin-status .mini-note{margin-top:8px;color:#92400e;font-size:11.5px;line-height:1.5}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .ap-round{padding:10px}
  .ap-round-h small{margin-left:0;width:100%}
  .my-ap-row small{min-width:0}
  .my-ap-row button{margin-left:0;width:100%}
}

/* 第 35 轮：油卡管理 · 三标签 + 三折叠（accordion） */
.fuel-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ftab{border:1.5px solid var(--line);background:var(--card);color:var(--ink);padding:9px 18px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:.15s}
.ftab:hover{border-color:var(--blue);color:var(--blue)}
.ftab.active{background:var(--blue);border-color:var(--blue);color:#fff}
.acc{border:1px solid var(--line);background:var(--card);border-radius:12px;margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.acc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}
.acc-title{font-weight:700;font-size:15px;color:var(--ink)}
.acc-sub{color:var(--muted);font-size:13px}
.acc-sub:empty{display:none}
.acc-spacer{flex:1}
.acc-ico{color:var(--muted);font-size:13px;transition:transform .2s}
.acc:not(.open) .acc-ico{transform:rotate(-90deg)}
.acc-body{display:none;padding:0 16px 16px}
.acc.open .acc-body{display:block}
.acc .approval-bar{margin-top:2px}
@media (max-width:640px){
  .fuel-tabs{overflow-x:auto}
  .ftab{padding:8px 14px;font-size:13px;flex:none}
}
/* 第 81 轮（用户：油卡管理顶部看着不整齐）：手机端 topbar 改纵向堆叠 ——
   标签一行铺满，统计卡两列等宽网格（原来 flex-wrap + justify-end 会东一个西一个），
   低余额警示胶囊独占一行 */
@media(max-width:760px){
  .fuel-topbar{flex-direction:column;align-items:stretch;gap:10px}
  .fuel-topbar .fuel-tabs{width:100%}
  .fuel-topbar .fc-stats{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-content:stretch}
  .fuel-topbar .fc-stat{min-width:0;padding:10px 14px}
  .fuel-topbar .fc-stat b{font-size:20px}
  .fuel-topbar .lowbal-pill{grid-column:1 / -1;flex:1 1 auto;width:100%}
}