/* ============================================================
   智修云 v2.0 设计系统 —— 对标国内大厂门店 APP（途虎商户风格）
   品牌蓝渐变 + 白卡片 + 宫格导航 + 底部五 Tab
   ============================================================ */
:root {
  --primary: #3D6EFF;
  --primary-deep: #2B5AED;
  --primary-grad: linear-gradient(135deg, #4D7CFF 0%, #2B5AED 100%);
  --primary-weak: #EBF0FF;
  --bg: #F5F6FA;
  --card: #FFFFFF;
  --line: #EEF0F5;
  --text: #1B2337;
  --text2: #6B7280;
  --text3: #9CA3AF;
  --orange: #FF7A1A;
  --orange-bg: #FFF3E8;
  --green: #10B981;
  --green-bg: #E8F9F2;
  --red: #F04438;
  --red-bg: #FEECEB;
  --purple: #7C5CFC;
  --purple-bg: #F1EDFF;
  --cyan: #0EA5E9;
  --cyan-bg: #E6F6FE;
  --gold: #F5A623;
  --radius: 16px;
  --radius-s: 12px;
  --shadow: 0 2px 16px rgba(27, 52, 132, .07);
  --shadow-up: 0 -6px 24px rgba(27, 52, 132, .10);
  --tabbar-h: 56px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 布局骨架 ---------- */
#app { max-width: 760px; margin: 0 auto; min-height: 100vh; }
@media (min-width: 900px) {
  #app { max-width: 100%; }
}
.page { padding-bottom: calc(var(--tabbar-h) + 28px); animation: pageIn .28s cubic-bezier(.22,.8,.36,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 品牌渐变头部 ---------- */
.hero {
  background: var(--primary-grad);
  padding: 20px 18px 0;
  color: #fff;
  border-radius: 0 0 26px 26px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; right: -46px; top: -46px;
  width: 190px; height: 190px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.hero::after {
  content: ""; position: absolute; right: 36px; top: 60px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.hero .row, .vhero .row { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; gap: 10px; }
.hero .hi { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.hero .sub { font-size: 12px; opacity: .85; margin-top: 2px; }
.hero .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
/* 头部搜索框 */
.hsearch {
  margin: 14px 0 0; position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 24px; padding: 9px 14px;
  color: #fff; font-size: 13px;
  backdrop-filter: blur(4px);
}
.hsearch:active { background: rgba(255,255,255,.24); }
.hsearch .ph { opacity: .85; }
/* 头部数据条 */
.stat4 {
  position: relative; z-index: 1;
  /* minmax(0,1fr) 而非 1fr：1fr 实为 minmax(auto,1fr)，长金额会把相邻列挤扁，
     导致「今日单量 / 施工中」被压窄甚至标签折行；minmax(0,…) 强制四列严格等宽 */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 0; padding: 14px 0 18px;
}
.stat4 .s { text-align: center; position: relative; min-width: 0; }
.stat4 .s + .s::before {
  content: ""; position: absolute; left: 0; top: 15%; height: 70%;
  width: 1px; background: rgba(255,255,255,.22);
}
.stat4 .n { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat4 .n small { font-size: .58em; font-weight: 500; margin-left: 1px; }
.stat4 .t { font-size: 11px; opacity: .8; margin-top: 1px; }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px;
  margin: 12px 14px 0;
}
.card h3 {
  font-size: 15.5px; font-weight: 700; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; margin-bottom: 4px;
  white-space: nowrap;
}
/* 标题后的灰色说明：挤压时省略，不把主标题（如「每日明细」）折行 */
.card h3 .muted { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card h3 .more { font-size: 12.5px; color: var(--text3); font-weight: 400; display: flex; align-items: center; gap: 2px; flex: none; }
.card h3 .more:active { color: var(--primary); }
.sect-title {
  margin: 20px 18px 0; font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: space-between;
}
.sect-title .more { font-size: 12.5px; color: var(--text3); font-weight: 400; }
/* 区块标题上的数量角标（如「待办提醒 3」） */
.sect-title .cnt {
  display: inline-block; min-width: 19px; height: 19px; line-height: 19px; padding: 0 6px;
  margin-left: 7px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700;
  border-radius: 10px; text-align: center; vertical-align: 2px;
}
/* 分类操作按钮 + 行内图标按钮（项目库） */
.sect-title .cat-ops { display: flex; gap: 6px; }
.sect-title .cat-ops button {
  border: none; background: var(--primary-weak); color: var(--primary);
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; font-family: inherit;
  display: flex; align-items: center; gap: 3px;
}
.sect-title .cat-ops button.danger { background: var(--red-bg); color: var(--red); }
.sect-title .cat-ops button:active { opacity: .65; }
.ibtn {
  width: 30px; height: 30px; border: none; border-radius: 9px; flex: none; font-family: inherit;
  background: var(--primary-weak); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.ibtn.danger { background: var(--red-bg); color: var(--red); }
.ibtn:active { opacity: .65; }

/* ---------- 宫格功能导航 ---------- */
.grid-nav { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 4px; }
.grid-nav .g {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 0 10px; border-radius: 12px; position: relative;
  transition: transform .12s;
}
.grid-nav .g:active { transform: scale(.92); background: var(--bg); }
.grid-nav .g .ico {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.grid-nav .g .lbl { font-size: 12px; color: var(--text); }
.grid-nav .g .dot {
  position: absolute; top: 8px; right: 50%; margin-right: -26px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* ---------- 徽章 / 标签 ---------- */
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 6px; line-height: 1.5; white-space: nowrap;
}
.b-pending { background: var(--orange-bg); color: var(--orange); }
.b-working { background: var(--primary-weak); color: var(--primary); }
.b-done    { background: var(--purple-bg); color: var(--purple); }
.b-settled { background: var(--green-bg); color: var(--green); }
.b-cancel  { background: #F2F3F7; color: var(--text3); }
.b-warn    { background: var(--red-bg); color: var(--red); }
.b-info    { background: var(--cyan-bg); color: var(--cyan); }
.b-credit  { background: var(--red-bg); color: var(--red); }      /* 挂账未收 */
.b-unpaid  { background: var(--orange-bg); color: var(--orange); } /* 未结账 */
.tag { font-size: 10.5px; color: var(--text2); background: #F4F5F9; border-radius: 5px; padding: 1px 6px; }

/* ---------- 车牌色块 ---------- */
.plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 7.1em;   /* 蓝牌7位/绿牌8位统一等宽，牌后文字上下对齐 */
  background: linear-gradient(135deg, #3D6EFF, #2B5AED);
  color: #fff; font-weight: 800; letter-spacing: 1px;
  border-radius: 7px; padding: 3px 9px; font-size: 14.5px;
  border: 1.5px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 6px rgba(43,90,237,.35);
  font-family: "SF Pro Display", -apple-system, sans-serif;
}
.plate.green { background: linear-gradient(135deg, #22C55E, #0E9F52); box-shadow: 0 2px 6px rgba(16,163,74,.35); }
.plate.plain { background: linear-gradient(135deg, #64748B, #475569); box-shadow: none; }
.plate.big { font-size: 17px; padding: 5px 12px; border-radius: 9px; }

/* ---------- 车主联想：新建/编辑车辆时匹配已有客户 ---------- */
.cust-sug { display: none; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 6px 18px rgba(17,24,39,.08); }
.cust-sug.on { display: block; }
.cs-h { font-size: 11.5px; color: var(--text3); padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cs-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cs-item:last-child { border-bottom: none; }
.cs-item:active { background: var(--primary-weak); }
.cs-av { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-weak); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
.cs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-main b { font-size: 14px; font-weight: 700; }
.cs-main i { font-style: normal; font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.cs-go { font-size: 12px; color: var(--primary); font-weight: 700; flex: none; }
.cust-picked .cp-chip { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: var(--green-bg); border: 1px solid rgba(16,185,129,.25); }
.cp-av { width: 28px; height: 28px; border-radius: 50%; background: rgba(16,185,129,.16); color: var(--green); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.cp-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text2); display: flex; flex-direction: column; }
.cp-t b { color: var(--text); font-size: 13.5px; }
.cp-t i { font-style: normal; font-size: 11px; color: var(--text3); margin-top: 1px; }
.cp-x { flex: none; border: none; background: none; color: var(--green); font-size: 12px; font-weight: 700; padding: 4px 6px; }
.cust-picked .cp-new { margin-top: 8px; font-size: 11.5px; color: var(--text3); background: var(--bg); border-radius: 10px; padding: 8px 11px; }
.mg-tip { font-size: 13px; color: var(--text2); line-height: 1.65; background: var(--red-bg); border: 1px solid rgba(240,68,56,.16); border-radius: 12px; padding: 11px 13px; margin-bottom: 14px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- 工单卡片 ---------- */
.wo-card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 12px 14px 0; padding: 14px 16px;
  transition: transform .12s;
}
.wo-card:active { transform: scale(.985); }
.wo-card .top { display: flex; align-items: center; gap: 12px; }
.wo-card .meta { flex: 1; min-width: 0; }
.wo-card .t1 { display: flex; align-items: center; gap: 8px; }
.wo-card .t1 .bm { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-card .t2 { font-size: 12.5px; color: var(--text2); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.wo-card .bot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line);
}
.wo-card .bot > div:first-child { flex: 1; min-width: 0; }
.wo-card .bot > .btn { flex: none; }
.wo-card .amt { font-size: 17px; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.wo-card .amt small { font-size: 11px; font-weight: 500; color: var(--text3); }
.wo-card .no { font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-card .items-line {
  margin-top: 8px; font-size: 12px; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 底部 TabBar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-up);
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 760px; margin: 0 auto;
}
@media (min-width: 900px) { .tabbar { max-width: 100%; } }
.tabbar .tb {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--text3);
  font-size: 10.5px; transition: color .15s; position: relative;
}
/* 所有 Tab 图标统一尺寸（含「车辆」），避免大小不一致 */
.tabbar .tb .tico {
  width: 23px; height: 23px; display: block;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.tabbar .tb.on { color: var(--primary); font-weight: 700; }
.tabbar .tb.on .tico { transform: translateY(-2px) scale(1.06); }
.tabbar .tb .bdg {
  position: absolute; top: 6px; left: 50%; margin-left: 8px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* 中央大按钮（开单） */
.tabbar .tb-fab { flex: 1.1; display: flex; align-items: center; justify-content: center; }
.tabbar .fab {
  width: 52px; height: 52px; margin-top: -26px; border: none;
  border-radius: 50%; background: var(--primary-grad);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(43,90,237,.42), 0 0 0 5px var(--bg);
  transition: transform .15s;
}
.tabbar .fab:active { transform: scale(.9); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 24px; padding: 0 22px; height: 46px;
  font-size: 15px; font-weight: 700; transition: transform .12s, opacity .15s;
  /* 按钮文字永不换行：flex 压缩时 min-content 按整词计算，避免「收款」被拆成两行 */
  white-space: nowrap;
}
.btn .tico { flex: none; }
.btn:active { transform: scale(.96); opacity: .88; }
.btn.primary { background: var(--primary-grad); color: #fff; box-shadow: 0 6px 16px rgba(43,90,237,.32); }
.btn.plain { background: var(--primary-weak); color: var(--primary); }
.btn.ghost { background: #fff; color: var(--text2); border: 1px solid var(--line); }
.btn.danger { background: var(--red-bg); color: var(--red); }
.btn.green { background: linear-gradient(135deg,#34D399,#0EA970); color: #fff; box-shadow: 0 6px 16px rgba(14,169,112,.3); }
.btn.warn { background: linear-gradient(135deg,#FFA149,#FF7A1A); color: #fff; box-shadow: 0 6px 16px rgba(255,122,26,.3); }
.btn.block { width: 100%; }
.btn.sm { height: 34px; font-size: 13px; padding: 0 16px; border-radius: 18px; }
.btn.lg { height: 52px; font-size: 16.5px; border-radius: 26px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; font-weight: 500; }
.field label .req { color: var(--red); margin-left: 2px; }
.inp {
  width: 100%; border: 1.5px solid var(--line); background: #FAFBFD;
  border-radius: var(--radius-s); padding: 11px 14px; font-size: 15px;
  transition: border-color .15s, background .15s; outline: none;
}
.inp:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(61,110,255,.1); }
.inp::placeholder { color: var(--text3); }
textarea.inp { resize: none; min-height: 76px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 输入框尾部相机按钮 */
.inp-wrap { position: relative; }
.inp-wrap .inp { padding-right: 52px; }
.inp-wrap .cam {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: none; border-radius: 10px;
  background: var(--primary-weak); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.inp-wrap .cam:active { background: #DCE6FF; }

/* ---------- Segmented 分段控件 ---------- */
.seg {
  display: flex; background: #EDEFF5; border-radius: 12px; padding: 3px;
  margin: 12px 14px 0; position: relative; overflow-x: auto;
}
.seg .sg {
  flex: 1; text-align: center; padding: 7px 0; font-size: 13px;
  color: var(--text2); border-radius: 10px; white-space: nowrap;
  min-width: 64px; font-weight: 500; transition: all .18s;
}
.seg .sg.on {
  background: #fff; color: var(--text); font-weight: 700;
  box-shadow: 0 2px 8px rgba(27,52,132,.12);
}

/* ---------- Bottom Sheet ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.5);
  opacity: 0; transition: opacity .22s; backdrop-filter: blur(2px);
  pointer-events: none;
}
.sheet-mask.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
  background: #fff; border-radius: 22px 22px 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.22,.8,.36,1);
  max-width: 760px; margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .sheet { max-width: 100%; } }
.sheet.show { transform: none; }
.sheet .grabber { width: 40px; height: 4px; border-radius: 2px; background: #E2E5EC; margin: 10px auto 0; flex: none; }
.sheet .sh-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 10px; flex: none;
}
.sheet .sh-head .tt { font-size: 17px; font-weight: 800; }
.sheet .sh-head .x {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #F2F3F7; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
}
.sheet .sh-body { overflow-y: auto; padding: 4px 18px 20px; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet .sh-foot {
  flex: none; padding: 12px 18px; border-top: 1px solid var(--line);
  display: flex; gap: 12px; background: #fff;
}
.sheet .sh-foot .btn { flex: 1; }
/* 编辑表单底部的「删除」按钮：不跟「保存」平分宽度，避免误点 */
.sheet .sh-foot .btn.danger { flex: 0 0 auto; padding: 0 20px; }

/* ---------- Modal（保留兼容） ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  animation: fadeIn .18s;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: #fff; border-radius: 20px; width: 100%; max-width: 420px;
  max-height: 86vh; display: flex; flex-direction: column;
  animation: popIn .26s cubic-bezier(.22,.9,.36,1.2);
}
@keyframes popIn { from { opacity: 0; transform: scale(.92) translateY(16px); } }
.modal .sh-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.modal .sh-head .tt { font-size: 17px; font-weight: 800; }
.modal .sh-head .x {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #F2F3F7; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
}
.modal .sh-body { overflow-y: auto; padding: 8px 18px 18px; }
.modal .sh-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 12px; }
.modal .sh-foot .btn { flex: 1; }

/* ---------- 列表行（设置页等） ---------- */
.cell-group { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin: 12px 14px 0; overflow: hidden; }
.cell {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; position: relative; transition: background .12s;
  width: 100%; border: none; background: none; text-align: left; font-size: 15px;
}
.cell:active { background: #F7F8FC; }
.cell + .cell::before {
  content: ""; position: absolute; top: 0; left: 46px; right: 0;
  height: 1px; background: var(--line);
}
.cell .cico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.cell .cmain { flex: 1; min-width: 0; }
.cell .ct { font-weight: 500; }
.cell .cd { font-size: 12px; color: var(--text3); margin-top: 1px; }
.cell .cval { font-size: 13px; color: var(--text3); display: flex; align-items: center; gap: 4px; }
.cell .arr { color: #C9CEDA; flex: none; }

/* ---------- 提醒卡 ---------- */
.remind-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--radius-s); padding: 12px 14px;
  border: 1px solid var(--line);
}
.remind-card + .remind-card { margin-top: 8px; }
.remind-card .rico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.remind-card .rmain { flex: 1; min-width: 0; }
.remind-card .rt { font-size: 14px; font-weight: 600; }
.remind-card .rt-sub { font-size: 12.5px; font-weight: 600; color: var(--text2); margin-top: 3px; }
.remind-card .rd { font-size: 12px; color: var(--text2); margin-top: 1px; }
.remind-card .rbtn { flex: none; }

/* ---------- 状态时间轴（工单详情） ---------- */
.stepper { display: flex; align-items: flex-start; padding: 4px 6px 2px; }
.stepper .stp { flex: 1; text-align: center; position: relative; }
.stepper .stp::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px;
  background: var(--line); border-radius: 2px;
}
.stepper .stp:first-child::before { display: none; }
.stepper .stp .dt {
  width: 28px; height: 28px; border-radius: 50%; margin: 0 auto;
  background: #EDEFF5; color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; font-size: 13px; border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.stepper .stp .dl { font-size: 11px; color: var(--text3); margin-top: 6px; }
.stepper .stp.on .dt { background: var(--primary-grad); color: #fff; box-shadow: 0 0 0 1px var(--primary), 0 4px 10px rgba(43,90,237,.3); }
.stepper .stp.on .dl { color: var(--primary); font-weight: 700; }
.stepper .stp.ok .dt { background: var(--green); color: #fff; box-shadow: 0 0 0 1px var(--green); }
.stepper .stp.ok .dl { color: var(--green); }

/* ---------- 车辆详情头部 ---------- */
.vhero { background: var(--primary-grad); padding: 20px 18px 52px; color: #fff; border-radius: 0 0 26px 26px; position: relative; overflow: hidden; }
.vhero::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.1); }
.vhead-card { margin: -34px 14px 0; position: relative; z-index: 2; }

/* ---------- 保养进度条 ---------- */
.prog { height: 8px; border-radius: 4px; background: #EDEFF5; overflow: hidden; }
.prog .bar { height: 100%; border-radius: 4px; background: var(--primary-grad); transition: width .4s; }
.prog .bar.warn { background: linear-gradient(90deg,#FFB13D,#FF7A1A); }
.prog .bar.danger { background: linear-gradient(90deg,#FF7B72,#F04438); }

/* ---------- 图表 ---------- */
.chart-box { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; }
.chart-box .bar-w { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart-box .bar-w .v { font-size: 9.5px; color: var(--text3); transform: scale(.9); }
.chart-box .bar-w .bar {
  width: 68%; max-width: 26px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg,#6D93FF,#3D6EFF); min-height: 3px;
  transition: height .5s cubic-bezier(.22,.8,.36,1);
}
.chart-box .bar-w .x { font-size: 10px; color: var(--text3); white-space: nowrap; }
.chart-box .bar-w.hot .bar { background: linear-gradient(180deg,#FFB13D,#FF7A1A); }

/* ---------- 数字大卡 ---------- */
.bignum-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 14px 0; }
.bignum {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; position: relative; overflow: hidden;
}
.bignum .bl { font-size: 12.5px; color: var(--text2); }
.bignum .bn { font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; white-space: nowrap; }
.bignum .bn small { font-size: 13px; font-weight: 600; margin-right: 2px; }
/* 副标题最多两行：保证同排两卡等高（「项目收入」长文案在小屏不再折 3 行） */
.bignum .bs { font-size: 11.5px; margin-top: 3px; color: var(--text3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bignum::after { content: ""; position: absolute; right: -20px; bottom: -20px; width: 80px; height: 80px; border-radius: 50%; opacity: .08; }
.bignum.blue::after { background: var(--primary); } .bignum.blue .bn { color: var(--primary-deep); }
.bignum.orange::after { background: var(--orange); } .bignum.orange .bn { color: var(--orange); }
.bignum.green::after { background: var(--green); } .bignum.green .bn { color: var(--green); }
.bignum.purple::after { background: var(--purple); } .bignum.purple .bn { color: var(--purple); }

/* ---------- 排行 ---------- */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rank-row + .rank-row { border-top: 1px solid var(--line); }
.rank-row .rn {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: #F2F3F7; color: var(--text2); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.rank-row.r1 .rn { background: linear-gradient(135deg,#FFD34D,#FFA800); color: #7A5200; }
.rank-row.r2 .rn { background: linear-gradient(135deg,#E8ECF3,#C6CEDC); color: #5A6478; }
.rank-row.r3 .rn { background: linear-gradient(135deg,#FFC59F,#E8955E); color: #7A3E10; }
.rank-row .rname { flex: 1; font-size: 14px; font-weight: 500; }
.rank-row .rval { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 时间线 ---------- */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 1px; }
.tl .tl-i { position: relative; padding: 2px 0 16px; }
.tl .tl-i::before {
  content: ""; position: absolute; left: -21px; top: 7px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 3px solid var(--primary);
}
.tl .tl-i.maint::before { border-color: var(--green); }
.tl .tl-i .tl-date { font-size: 11.5px; color: var(--text3); }
.tl .tl-i .tl-t { font-size: 14.5px; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl .tl-i .tl-d { font-size: 12.5px; color: var(--text2); margin-top: 3px; }

/* ---------- 骨架屏 ---------- */
.skl {
  border-radius: var(--radius); background: linear-gradient(90deg,#EFF1F6 25%,#F7F8FB 45%,#EFF1F6 65%);
  background-size: 400% 100%; animation: skl 1.1s infinite; margin: 12px 14px 0; height: 90px;
}
@keyframes skl { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 44px 20px; color: var(--text3); }
.empty .e-icon {
  width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%;
  background: #F2F4F9; display: flex; align-items: center; justify-content: center;
  font-size: 38px; filter: grayscale(.2);
}
.empty .e-t { font-size: 15px; font-weight: 600; color: var(--text2); }
.empty .e-d { font-size: 12.5px; margin-top: 4px; }
.empty .btn { margin-top: 18px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%) translateY(16px);
  z-index: 500; background: rgba(23,30,48,.92); color: #fff;
  padding: 11px 22px; border-radius: 14px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: all .25s;
  max-width: 82vw; text-align: center; backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.err { background: rgba(220,53,53,.94); }

/* ---------- 登录页 ---------- */
.login-page {
  min-height: 100vh; background: var(--primary-grad);
  display: flex; flex-direction: column; align-items: center;
  padding: 0 26px; position: relative; overflow: hidden;
}
.login-page::before { content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.09); }
.login-page::after { content: ""; position: absolute; left: -50px; bottom: 120px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.07); }
.login-logo {
  margin-top: 13vh; width: 96px; height: 96px; border-radius: 26px;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
/* 品牌帆标（首页问候区 / 深色底场景用） */
.brand-mark {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.38);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 380px) { .brand-mark { width: 40px; height: 40px; border-radius: 12px; } }
.login-t { color: #fff; font-size: 25px; font-weight: 800; margin-top: 18px; letter-spacing: 2px; }
.login-s { color: rgba(255,255,255,.8); font-size: 13px; margin-top: 6px; }
.login-card {
  width: 100%; background: #fff; border-radius: 22px; margin-top: 7vh;
  padding: 26px 22px 24px; box-shadow: 0 20px 60px rgba(9,30,88,.28);
  position: relative; z-index: 2; animation: popIn .35s cubic-bezier(.22,.9,.36,1.15);
}
.login-card .li { position: relative; margin-bottom: 14px; }
.login-card .li .inp { height: 52px; padding-left: 46px; border-radius: 14px; }
.login-card .li .li-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text3); display: flex; }
.login-foot { color: rgba(255,255,255,.65); font-size: 12px; margin-top: auto; padding: 26px 0 calc(24px + env(safe-area-inset-bottom)); text-align: center; position: relative; z-index: 2; }

/* ---------- 快捷标签 ---------- */
.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-tags .qt {
  border: 1px solid var(--line); background: #FAFBFD; color: var(--text2);
  border-radius: 16px; padding: 5px 13px; font-size: 12.5px;
  transition: all .12s;
}
.quick-tags .qt:active, .quick-tags .qt.on { background: var(--primary-weak); border-color: var(--primary); color: var(--primary); font-weight: 600; }
/* 快捷短语小标题 + 管理入口（v2.9.8） */
.qt-head { display: flex; align-items: center; justify-content: space-between; margin: 11px 0 7px; font-size: 12.5px; color: var(--text3); }
.qt-head a { color: var(--primary); font-weight: 600; font-size: 12.5px; }

/* ---------- 收款方式选择 ---------- */
.pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pay-grid .pg {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 0 9px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text2); background: #fff; transition: all .15s;
}
.pay-grid .pg .pei { font-size: 21px; }
.pay-grid .pg.on { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); font-weight: 700; }
/* 「未结算」：整行选项（车未取/款未收，先挂起） */
.pay-grid .pg.wide {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 11px; padding: 11px 14px; text-align: left;
}
.pay-grid .pg.wide .pei { font-size: 23px; }
.pay-grid .pg.wide .pgt { display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--text); line-height: 1.3; }
.pay-grid .pg.wide .pgt small { font-weight: 400; font-size: 11px; color: var(--text3); }
.pay-grid .pg.wide.on { border-color: var(--orange); background: var(--orange-bg); color: var(--text); }
.pay-grid .pg.wide.on .pgt { color: #9A6410; }
.pay-grid .pg.wide.on .pgt small { color: #B08034; }

/* ---------- 桌面端适配 ---------- */
/* 窄屏（手机 / App 内 WebView）默认隐藏左侧导航，由底部 TabBar 承担；
   宽屏的完整桌面版样式见文件末尾「桌面版」区块 */
.desktop-topnav { display: none; }

/* ---------- 底部操作悬浮条 ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-up); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; max-width: 760px; margin: 0 auto;
}
@media (min-width: 900px) { .action-bar { max-width: 860px; border-radius: 18px 18px 0 0; } }
.action-bar .btn { flex: 1; }
/* 条内按钮一律同高同宽（都用 .lg）：字号偏大，内边距收一点，
   保证「收款结算 ¥590」这种长文案在 375px 窄屏上也放得下不撑破 */
.action-bar .btn.lg { padding: 0 12px; }

/* ---------- 其他 ---------- */
.flex { display: flex; align-items: center; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; }
.f1 { flex: 1; min-width: 0; }

/* ---------- 卡片操作按钮行（.abtns）：固定列数，跨卡片永远左右对齐 ----------
   以前每行按钮用 flex:1 平分宽度，某张卡少一个按钮（例如客户没留电话就没有「联系」），
   其余按钮就被撑宽 → 和别的卡片错位、参差不齐。
   现在改成固定列数的网格：列数由行内 --cols 决定，同一列在不同卡片里宽度完全一致。
   缺的按钮位放一个 <i class="ph"></i> 占位（占位但不显示），保住后面按钮的位置。 */
.abtns { display: grid; gap: 8px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.abtns > * { min-width: 0; width: 100%; }
.abtns > .btn { padding-left: 6px; padding-right: 6px; }
.abtns > .ph { visibility: hidden; }
/* 窄屏（手机）上按钮文字若太长，允许收缩：不允许换行，靠缩短内边距保证不溢出 */
.abtns > .btn { overflow: hidden; text-overflow: ellipsis; }
/* ---------- 分类筛选条（配件库等）：横向滚动、选中高亮 ---------- */
.cat-chips {
  display: flex; gap: 7px; overflow-x: auto; margin: 10px 14px 0;
  padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips .ch {
  flex: none; border: 1px solid var(--line); background: #FAFBFD; color: var(--text2);
  border-radius: 15px; padding: 5px 12px; font-size: 12.5px; font-family: inherit;
  white-space: nowrap; transition: all .12s;
}
.cat-chips .ch.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.cat-chips .ch.add { border-style: dashed; color: var(--text3); }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }.tc { text-align: center; }
.muted { color: var(--text3); font-size: 12px; }
.money { font-variant-numeric: tabular-nums; font-weight: 800; }
.ovf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.link { color: var(--primary); font-weight: 600; }
.calc-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; color: var(--text2); }
.calc-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.calc-line.total { font-size: 15px; color: var(--text); font-weight: 700; padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 6px; }
.calc-line.total b { color: var(--orange); font-size: 19px; }

/* ============================================================
   经营报表 · 每日明细 / 当日明细（逐天、逐笔）
   ============================================================ */
/* hero 里的浅色小按钮（返回 / 前一天 / 后一天） */
.hbtn { background: rgba(255,255,255,.2); color: #fff; border: none; }
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
.daynav button {
  flex: 1; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 12.5px; font-family: inherit; border-radius: 20px;
  padding: 7px 6px; display: flex; align-items: center; justify-content: center; gap: 3px;
}
.daynav button:active { background: rgba(255,255,255,.3); }
/* 报表 hero：右上角「选年月日」输入框（深底上保持白字） */
.rp-date {
  flex: 0 0 auto; width: 138px; min-width: 0;
  background: rgba(255,255,255,.2); border: none; border-radius: 10px;
  color: #fff; font-family: inherit; font-size: 13px; padding: 7px 10px;
  color-scheme: dark;
}
.rp-date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .9; cursor: pointer; }
/* 报表 hero：月份左右切换（上月 / 2026年10月 / 下月） */
.mpnav button { flex: 0 0 auto; padding: 7px 14px; }
.mpnav .mplab { font-size: 13px; font-weight: 700; opacity: .95; letter-spacing: .3px; white-space: nowrap; }

/* 日报表：一天一行 */
.day-list { margin-top: 8px; }
.day-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 4px;
  border-top: 1px solid var(--line); transition: background .12s;
}
.day-row:first-child { border-top: none; }
.day-row:active { background: #F7F9FE; }
/* 116px 固定宽 + 不换行：「10-13 周二 今天」三个元素一行放下，「今天」不再掉行 */
.day-row .dl-d { width: 116px; flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 3px 6px; min-width: 0; }
.day-row .dl-d b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-row .dl-d i { font-size: 11px; color: var(--text3); font-style: normal; white-space: nowrap; }
.day-row .dl-s { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-row .dl-r { text-align: right; flex: none; }
.day-row .dl-r b { display: block; font-size: 15px; white-space: nowrap; }
.day-row .dl-r i { font-size: 10.5px; color: var(--text3); font-style: normal; }
.day-row.today { background: linear-gradient(90deg, var(--primary-weak), transparent); border-radius: 10px; }
.day-row.today .dl-d b { color: var(--primary); }
.day-jump { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.day-jump .inp { flex: 1; min-width: 0; }

/* 当天流水行（收款 / 进厂） */
.day-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-top: 1px solid var(--line); transition: background .12s;
}
.day-line:first-of-type { border-top: none; }
.day-line:active { background: #F7F9FE; }
.day-line .dl-t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* 客户名单行省略：小屏被挤时不折行/竖排，badge 不被压缩 */
.day-line .dl-t .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.day-line .dl-t .badge { flex: none; }
.day-line .dl-x { font-size: 11px; color: var(--text3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-line .money { font-size: 15px; flex: none; white-space: nowrap; }

/* 当天维修工单块 */
.dcard {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px;
  margin-top: 10px; background: #fff; transition: box-shadow .15s;
}
.dcard:active { box-shadow: 0 4px 16px rgba(27,52,132,.1); }
.dcard .dc-top { display: flex; align-items: center; gap: 10px; }
.dcard .dc-1 { display: flex; align-items: center; gap: 6px; }
.dcard .dc-1 b { font-size: 14px; }
.dcard .dc-2 { font-size: 11.5px; color: var(--text3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard .dc-tags { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: nowrap; overflow: hidden; }
.dcard .mini-items { margin-top: 9px; border-top: 1px dashed var(--line); padding-top: 8px; }
.dcard .mini-it { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; color: var(--text2); }
.dcard .mini-it span { flex: 1; min-width: 0; }
.dcard .mini-it i { color: var(--text3); font-style: normal; font-size: 11.5px; flex: none; }
.dcard .mini-it b { font-variant-numeric: tabular-nums; flex: none; min-width: 62px; text-align: right; }
.dcard .mini-it.is-part span::before { content: "配件 "; font-size: 10px; color: var(--orange); font-weight: 700; }
.dcard .dc-tot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.dcard .dc-tot span { font-size: 11px; color: var(--text3); flex: 1; min-width: 0; }
.dcard .dc-tot b { font-size: 17px; color: var(--orange); flex: none; }
.dcard .dc-foot { font-size: 10.5px; color: var(--text3); margin-top: 6px; font-variant-numeric: tabular-nums; }


/* ============================================================
   v2.1 保养体系：机油选择 / 保养项目 / 保养计划
   ============================================================ */
/* 机油选择卡片 */
.oil-sel {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px dashed #C8D4F5; background: linear-gradient(135deg,#F5F8FF,#EDF3FF);
  border-radius: 14px; padding: 13px 14px; transition: all .15s;
}
.oil-sel:active { border-color: var(--primary); background: var(--primary-weak); }
.oil-sel.filled { border-style: solid; border-color: #C8D4F5; }
.oil-sel .oico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--primary-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.oil-sel .oico.empty { background: #E4E9F5; color: #9AA6BF; }
.oil-sel .ot { font-weight: 700; font-size: 14.5px; }
.oil-sel .od { font-size: 12px; color: var(--text3); margin-top: 2px; }
.oil-sel .arr { color: #B9C2D6; flex: none; }

/* 机油周期提示条 */
.oil-cyc {
  display: flex; gap: 8px; margin-top: 10px;
}
.oil-cyc .c {
  flex: 1; background: #F7F9FE; border-radius: 11px; padding: 9px 10px; text-align: center;
  border: 1px solid var(--line);
}
.oil-cyc .c .n { font-weight: 800; font-size: 15px; color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.oil-cyc .c .n small { font-size: 10.5px; font-weight: 600; margin-left: 1px; }
.oil-cyc .c .l { font-size: 10.5px; color: var(--text3); margin-top: 2px; }

/* 下次保养预告 */
.oil-next {
  margin-top: 10px; border-radius: 12px; padding: 11px 13px;
  background: linear-gradient(135deg,#EAF7EF,#DFF3E7); border: 1px solid #CDEBD8;
  display: flex; align-items: center; gap: 10px;
}
.oil-next .ei { font-size: 17px; }
.oil-next .et { font-size: 12px; color: #2F7D4F; }
.oil-next .ev { font-size: 14.5px; font-weight: 800; color: #1E6B3E; margin-top: 1px; font-variant-numeric: tabular-nums; }

/* 保养项目选择 */
.svc-block { margin-bottom: 14px; }
.svc-block .sb-t { font-size: 12px; color: var(--text3); margin: 0 0 7px 2px; font-weight: 600; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.svc-chip {
  border: 1px solid var(--line); background: #FAFBFD; color: var(--text2);
  border-radius: 11px; padding: 8px 11px; font-size: 12.5px; text-align: left;
  display: flex; align-items: center; gap: 6px; transition: all .12s;
}
.svc-chip .ck {
  width: 15px; height: 15px; border-radius: 5px; flex: none;
  border: 1.5px solid #CBD2E0; display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.svc-chip.on { background: var(--primary-weak); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.svc-chip.on .ck { background: var(--primary); border-color: var(--primary); color: #fff; }
.svc-chip .sn { flex: 1; min-width: 0; }
.svc-chip .sc { font-size: 10.5px; color: var(--text3); font-weight: 400; }
.svc-chip.on .sc { color: #7A93E0; }

/* 已选汇总 */
.picked {
  border-radius: 12px; background: #F7F9FE; border: 1px solid var(--line);
  padding: 10px 12px; margin-bottom: 14px;
}
.picked .pr { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: var(--text2); }
.picked .pr b { color: var(--text); font-weight: 600; }

/* 保养计划（车辆详情） */
.plan-row { padding: 10px 0; }
.plan-row + .plan-row { border-top: 1px solid var(--line); }
.plan-row .prt { display: flex; align-items: center; gap: 7px; }
.plan-row .prn { font-weight: 600; font-size: 13.5px; }
.plan-row .prs { font-size: 11px; color: var(--text3); font-weight: 400; }
.plan-row .prd { font-size: 11.5px; color: var(--text2); margin-top: 3px; }
.plan-row .prv { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-row .prv .sm { display: block; font-size: 10.5px; color: var(--text3); font-weight: 400; margin-top: 2px; }
.plan-row.due .prv { color: var(--red); }
.plan-row.soon .prv { color: var(--orange); }

/* 油品库管理 */
.oil-row { padding: 11px 0; }
.oil-row + .oil-row { border-top: 1px solid var(--line); }
.oil-row .on1 { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oil-row .on2 { font-size: 11.5px; color: var(--text3); margin-top: 3px; }
.oil-row .on3 { font-size: 12px; color: var(--primary-deep); font-weight: 700; margin-top: 4px; }
.type-pill {
  font-size: 10.5px; padding: 1.5px 7px; border-radius: 6px; font-weight: 700;
  background: var(--primary-weak); color: var(--primary);
}
.type-pill.mineral { background: #FDF3E3; color: #B77A16; }
.type-pill.semi { background: #E9F5EE; color: #1F8A4C; }
.type-pill.full { background: var(--primary-weak); color: var(--primary); }

/* 结算后补录机油提示 */
.oil-prompt-hero {
  background: linear-gradient(135deg,#FFF9EC,#FFF2D9); border: 1px solid #FFE3AE;
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.oil-prompt-hero .t { font-weight: 700; font-size: 14.5px; color: #9A6410; }
.oil-prompt-hero .d { font-size: 12px; color: #B08034; margin-top: 3px; line-height: 1.5; }

/* ============================================================
   财务管理：挂账 / 未结算 / 已结算 / 账目
   ============================================================ */
/* 分段控件上的数量角标 */
.seg .sg .sg-n {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  font-size: 10.5px; font-weight: 700; border-radius: 8px;
  background: var(--red); color: #fff; vertical-align: 1px;
}
.seg .sg.on .sg-n { background: var(--primary); }
/* 列表小计条 */
.fin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 14px 0; padding: 14px 16px;
  background: linear-gradient(135deg,#F5F8FF,#EBF1FF);
  border: 1px solid #DCE6FF; border-radius: var(--radius);
}
.fin-head .fh-t { font-size: 15px; font-weight: 800; color: var(--primary-deep); }
.fin-head .fh-d { font-size: 11.5px; color: var(--text2); margin-top: 3px; line-height: 1.5; }
.fin-head .fh-v {
  flex: none; text-align: right; font-size: 21px; font-weight: 800;
  color: var(--primary-deep); font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.fin-head .fh-v small { font-size: 12px; font-weight: 600; margin-right: 1px; }
.fin-head .fh-n { font-size: 11px; font-weight: 500; color: var(--text3); letter-spacing: 0; margin-top: 2px; }
/* 双色柱状图（营业额 / 实收） */
.chart-box .bar-w .pair {
  display: flex; gap: 3px; align-items: flex-end; justify-content: center;
  width: 100%; flex: 1; min-height: 0;
}
.chart-box .bar-w .pair .bar { width: 34%; max-width: 15px; }
.chart-box .bar-w .pair .bar.rec { background: linear-gradient(180deg,#4ADE9B,#10B981); }
.fin-legend {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  margin-top: 8px; font-size: 11px; color: var(--text3);
}
.fin-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.fin-legend .sw:first-child { margin-left: 0; }
.fin-legend .sw.rev { background: linear-gradient(180deg,#6D93FF,#3D6EFF); }
.fin-legend .sw.rec { background: linear-gradient(180deg,#4ADE9B,#10B981); }
/* 收款方式明细 */
.fin-mrow { padding: 8px 0; }
.fin-mrow + .fin-mrow { border-top: 1px solid var(--line); }
.fin-mrow .fm-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text2); margin-bottom: 6px;
}
.fin-mrow .fm-top b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- 拍照识别 / 铭牌照片（v2.5.1） ---------- */
/* 「拍铭牌自动识别」主按钮 */
.np-btn {
  display: flex; align-items: center; gap: 7px; width: 100%;
  margin-top: 9px; padding: 11px 13px;
  background: linear-gradient(135deg, #EAF1FF, #F7FAFF);
  border: 1px dashed #A9C1FF; border-radius: 11px;
  color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left; font-family: inherit;
}
.np-btn:active { transform: scale(.99); }
.np-btn span {
  font-size: 11px; font-weight: 400; color: var(--text3);
  margin-left: auto; text-align: right; line-height: 1.35; max-width: 52%;
}
/* 表单里的铭牌照片预览 */
.np-box {
  display: flex; align-items: center; gap: 10px; margin-top: 9px;
  padding: 9px; background: var(--bg2); border: 1px solid var(--line); border-radius: 11px;
}
.np-box img {
  width: 58px; height: 58px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); cursor: zoom-in; flex: none;
}
.np-box .np-meta { flex: 1; min-width: 0; }
.np-box .np-meta b { display: block; font-size: 12.5px; color: var(--text); }
.np-box .np-meta i { font-style: normal; font-size: 11px; color: var(--text3); }
.np-box .np-dl {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12px; color: var(--primary); text-decoration: none;
  padding: 6px 10px; background: var(--primary-weak); border-radius: 8px;
  border: none; font-family: inherit; font-weight: 600; cursor: pointer;
}
.np-box .np-x {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: none;
  background: #eef1f6; color: var(--text3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* 车辆详情：VIN / 制造年月 / 排量 一行展示 */
.vin-row {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--text3);
}
.vin-row b { color: var(--text); font-weight: 600; }
/* 车辆详情：铭牌照片卡 */
.np-view {
  display: flex; align-items: center; gap: 11px;
  margin-top: 10px; padding: 9px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 11px;
}
.np-view img {
  width: 76px; height: 76px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--line); cursor: zoom-in; flex: none;
}
.np-view .np-meta { flex: 1; min-width: 0; }
.np-view .np-meta b { display: block; font-size: 13px; color: var(--text); }
.np-view .np-meta i { font-style: normal; font-size: 11.5px; color: var(--text3); }
.np-view .np-dl {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12.5px; color: var(--primary); text-decoration: none;
  padding: 7px 11px; background: var(--primary-weak); border-radius: 9px;
  border: none; font-family: inherit; font-weight: 600; cursor: pointer;
}


/* ============================================================
   v2.8.0 施工备注 / 施工照片 / 客户报告分享
   ============================================================ */
/* 卡片内操作按钮（客户页那种一行 4 个）：收紧内边距并禁止换行 */
.btn.sm.tight { padding: 0 9px; gap: 4px; white-space: nowrap; }
.btn.sm.tight .tico { flex: none; }

/* 施工备注展示框 */
.rmk-box {
  white-space: pre-wrap; line-height: 1.75; font-size: 13.5px; color: #6B4A16;
  background: var(--orange-bg); border: 1px solid #FFE3C2;
  border-radius: 12px; padding: 12px 13px; margin-bottom: 4px;
}

/* 施工照片九宫格 */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 4px; }
.pcell {
  position: relative; aspect-ratio: 1/1; border-radius: 11px; overflow: hidden;
  background: #F2F4F8; cursor: zoom-in;
}
.pcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcell i {
  position: absolute; left: 0; right: 0; bottom: 0; font-style: normal;
  font-size: 10px; color: #fff; line-height: 1.3; padding: 14px 5px 4px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcell .pdel {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* 大图查看 */
.pv-wrap { border-radius: 14px; overflow: hidden; background: #F2F4F8; }
.pv-wrap img { width: 100%; display: block; }
.pv-wrap img:active { opacity: .95; }

/* 分享面板 */
.qrbox { display: flex; justify-content: center; padding: 6px 0 4px; }
.qrbox svg { box-shadow: 0 2px 14px rgba(27,52,132,.12); }
.share-link {
  margin-top: 12px; font-size: 12px; color: var(--text2); word-break: break-all;
  background: var(--bg2, #F7F8FC); border: 1px dashed var(--line);
  border-radius: 10px; padding: 10px 12px; line-height: 1.6; text-align: center;
  -webkit-user-select: all; user-select: all;
}
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.sbtn {
  border: 1px solid var(--line); background: #fff; border-radius: 13px;
  padding: 11px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text2); font-weight: 600;
}
.sbtn:active { background: var(--primary-weak); border-color: var(--primary); color: var(--primary); }
.sbtn .tico { color: var(--primary); }
.share-tip {
  margin-top: 12px; font-size: 11.5px; color: var(--text3); line-height: 1.85;
  background: #F7F8FC; border-radius: 10px; padding: 10px 12px;
}
.share-tip b { color: var(--text2); }

/* 提醒中心：忽略按钮 */
.remind-card .rign {
  width: 32px; height: 32px; border-radius: 50%; border: none; flex: none;
  background: #F2F3F7; color: var(--text3); display: flex; align-items: center; justify-content: center;
}
.remind-card .rign:active { background: var(--red-bg); color: var(--red); }
.ign-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ign-row:last-child { border-bottom: none; }
.ign-row .f1 { min-width: 0; }
.ign-row .t { font-size: 13.5px; font-weight: 600; }
.ign-row .d { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

/* ============================================================
   v2.9.0 机油选择二级菜单（品牌 → 型号）
   ============================================================ */
/* 一级：品牌 */
#op-seg { overflow-x: auto; }
#op-seg .sg { white-space: nowrap; flex: none; }
/* 二级：列表标题 */
.op-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text3);
  margin: 14px 0 2px; letter-spacing: .3px;
}
.op-h:first-child { margin-top: 2px; }
.op-h .line { flex: 1; height: 1px; background: var(--line); }
/* 通用档位 / 油品行：整行可点 */
.op-pick { cursor: pointer; border-radius: 12px; transition: background .12s; }
.op-pick:active { background: var(--primary-weak); }
.op-pick.on { background: var(--primary-weak); }
.op-pick .on1 { color: var(--text1); }
/* 「其它」里的通用机油档位图标 */
.op-pick .oico2 {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--primary-weak); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.op-pick .oico2.m { background: #FDF3E3; color: #B77A16; }
.op-pick .oico2.s { background: #E9F5EE; color: #1F8A4C; }

/* ============================================================
   v2.9.3 应用内图片查看器（全屏看图，不跳转页面）
   ============================================================ */
.imgview {
  position: fixed; inset: 0; z-index: 400; background: rgba(8,12,22,.96);
  display: flex; flex-direction: column; opacity: 0; transition: opacity .2s;
}
.imgview.show { opacity: 1; }
.imgview .iv-bar {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
}
.imgview .iv-t {
  flex: 1; min-width: 0; color: #fff; font-size: 14.5px; font-weight: 700;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imgview .iv-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 46px; height: 34px; padding: 0 11px; border: none; border-radius: 17px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.imgview .iv-btn:active { background: rgba(255,255,255,.28); }
.imgview .iv-canvas {
  flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center; padding: 6px 12px;
}
.imgview .iv-canvas img {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 10px; display: block;
}
.imgview .iv-canvas.zoomed { align-items: flex-start; justify-content: flex-start; }
.imgview .iv-canvas.zoomed img { width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; }
.imgview .iv-tip {
  flex: none; text-align: center; color: rgba(255,255,255,.5); font-size: 11.5px;
  line-height: 1.6; padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
}

/* ============================================================
   桌面版（≥900px）：左侧导航栏 + 宽屏多列内容
   手机与 App 内 WebView（<900px）完全不受影响，仍是底部 TabBar + 单列
   ============================================================ */
.home-cols { display: block; }
.hc-list { display: block; }

@media (min-width: 900px) {
  :root { --side-w: 232px; }
  body { background: #EFF2F8; }

  /* ---------- 左侧导航 ---------- */
  .desktop-topnav {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--side-w); z-index: 95; overflow-y: auto;
    background: #fff; border-right: 1px solid var(--line);
    padding: 16px 12px 14px; gap: 12px;
  }
  .dn-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; }
  .dn-logo { flex: none; display: flex; }
  .dn-names { display: flex; flex-direction: column; min-width: 0; }
  .dn-names b { font-size: 15.5px; font-weight: 800; letter-spacing: .3px; }
  .dn-names i {
    font-style: normal; font-size: 11px; color: var(--text3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dn-new {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; border: none; border-radius: 12px; font-family: inherit;
    background: var(--primary-grad); color: #fff; font-size: 14.5px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(43,90,237,.26); transition: transform .12s;
  }
  .dn-new:active { transform: scale(.98); }
  .dn-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .dn-grp { font-size: 11px; color: var(--text3); letter-spacing: .6px; padding: 14px 10px 6px; }
  .dn-grp:first-child { padding-top: 6px; }
  .desktop-topnav .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border: 0; border-radius: 10px;
    color: var(--text2); font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s;
  }
  .desktop-topnav .nav-link .dn-ic { display: flex; width: 18px; height: 18px; flex: none; }
  .desktop-topnav .nav-link:hover { background: #F3F6FC; color: var(--text); }
  .desktop-topnav .nav-link.on { background: var(--primary-weak); color: var(--primary); font-weight: 700; }
  .dn-foot { border-top: 1px solid var(--line); padding-top: 10px; }
  .dn-user { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 12px; }
  .dn-user:hover { background: #F3F6FC; }
  .dn-av {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: var(--primary-weak); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  }
  .dn-un { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .dn-un b { font-size: 13.5px; font-weight: 700; }
  .dn-un i { font-style: normal; font-size: 11px; color: var(--text3); }
  .dn-user > svg { flex: none; color: var(--text3); }

  /* ---------- 内容容器 ---------- */
  .tabbar { display: none; }
  #app { padding-left: var(--side-w); max-width: none; min-height: 100vh; }
  .page { max-width: 1220px; margin: 0 auto; padding: 24px 28px 48px; }
  /* 手机端靠左右 14px 外边距留白，宽屏统一交给容器控制 */
  .page > * { margin-left: 0; margin-right: 0; }
  .hero { border-radius: 20px; padding: 22px 26px 0; }
  .hero .hi { font-size: 22px; }
  .hero .sub { font-size: 13px; }
  .stat4 { padding: 18px 0 22px; }
  .stat4 .n { font-size: 23px; }
  .stat4 .t { font-size: 12px; }
  .sect-title { margin: 22px 0 0; font-size: 16.5px; }

  /* 首页：待办提醒 + 最近工单 左右分栏 */
  .home-cols {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 20px;
  }
  .home-cols .hc-col > .sect-title:first-child { margin-top: 0; }
  .hc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hc-list > .card, .hc-list > .wo-card { margin: 0; }

  /* 宫格导航：一行铺开 */
  .grid-nav { grid-template-columns: repeat(9, 1fr); row-gap: 8px; }
  .grid-nav .g { padding: 15px 0 12px; }
  .grid-nav .g .lbl { font-size: 12.5px; }

  /* 工单 / 车辆 / 客户 / 库存 / 财务列表：两列卡片（卡片等宽 → 卡内按钮也逐列对齐） */
  .wo-card { margin: 14px 0 0; cursor: pointer; }
  .wo-card:hover { box-shadow: 0 6px 22px rgba(27,52,132,.13); }
  #wo-list, #v-list, #c-list, #p-list, #fin-body {
    display: grid; align-items: start; gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #wo-list > .wo-card, #v-list > .wo-card, #c-list > .wo-card, #p-list > .wo-card, #fin-body > .wo-card,
  #wo-list > .card, #v-list > .card, #c-list > .card, #p-list > .card, #fin-body > .card { margin: 0; }
  #wo-list > .tc, #c-list > .tc, #p-list > .tc { grid-column: 1 / -1; }
  /* 配件库按分类成组：分类标题通栏，卡片继续走两列网格 */
  #p-list > .sect-title { grid-column: 1 / -1; margin: 18px 0 0; }
  #fin-body > .fin-head { grid-column: 1 / -1; margin: 0; }
  #fin-body > .tc { grid-column: 1 / -1; }

  /* 经营报表：大数字条通栏，每日明细 / 每日营收并排等高，收款方式构成通栏收尾 */
  #rp-body { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rp-body > .bignum-row { grid-column: 1 / -1; margin: 0; }
  #rp-body > .card, #rp-body > .skl { margin: 0; }
  #rp-body > .rp-method { grid-column: 1 / -1; }
  #rp-body > .skl:first-child { grid-column: 1 / -1; }

  /* 当天明细页：大数字通栏在前；收款 / 进厂并排等高，当日维修通栏（里面是逐单明细） */
  #rd-body { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rd-body > .bignum-row { grid-column: 1 / -1; margin: 0; }
  #rd-body > .card { margin: 0; }
  #rd-body > .rd-pay, #rd-body > .rd-new { order: 1; }
  #rd-body > .rd-wo { order: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  #rd-body > .rd-wo > h3 { grid-column: 1 / -1; }
  #rd-body > .rd-wo > .muted { grid-column: 1 / -1; }
  #rd-body > .rd-wo > .dcard { margin-top: 0; }

  /* 弹层：桌面上改成居中模态框（否则从底部升起的大白条很像手机） */
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: 640px; max-width: calc(100vw - 80px);
    max-height: 86vh; border-radius: 18px; padding-bottom: 0;
    transform: translate(-50%, -46%) scale(.97); opacity: 0;
    transition: transform .24s cubic-bezier(.22,.8,.36,1), opacity .2s;
    box-shadow: 0 24px 70px rgba(15,23,42,.28);
  }
  .sheet.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet .grabber { display: none; }
  .sheet-mask { backdrop-filter: blur(3px); }

  /* 详情页底部操作条：横跨内容区，按钮居中且不过宽 */
  .action-bar {
    left: var(--side-w); right: 0; max-width: none; border-radius: 0;
    padding: 12px 28px; justify-content: center; gap: 12px;
  }
  .action-bar .btn { max-width: 320px; }

  /* 登录页卡片 */
  .login-card { max-width: 420px; }
}