/* =====================================================================
   品牌车衣 · 管理后台样式
   设计 token 对齐《UI高保真-管理后台.html》：深蓝侧栏 + 蓝色主色 + 浅灰底
   ===================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --side1: #131e36; --side2: #172441; --side-txt: #93a3c0; --side-txt-2: #6f81a3;
  --bg: #f5f7fa; --card: #fff; --line: #e8ecf2; --line-2: #f0f3f8;
  --text: #1f2b3d; --sub: #5a6b82; --dim: #7a8699; --ph: #98a2b3; --ph-2: #b6c0ce;
  --primary: #2563eb; --primary-d: #1d4ed8; --primary-l: #eaf1ff; --primary-b: #b9cff5;
  --green: #0e9f6e; --green-l: #e3f7ef;
  --red: #e24b4a; --red-l: #fcebeb;
  --orange: #d97706; --orange-l: #fef3e2;
  --radius: 10px;
}
html, body { height: 100%; }
/* 关键：没有这行，登录页 .login-wrap 的 height:100% 会退化成内容高度（背景只铺半个屏） */
#app { height: 100%; min-height: 100vh; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; cursor: pointer; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c9d2e0; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #aab6c9; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 登录页 ---------------- */
.login-wrap {
  height: 100vh; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16233b 0%, #2b4c7e 100%); position: relative; overflow: hidden;
}
.login-wrap:before, .login-wrap:after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .12;
  background: radial-gradient(circle at 30% 30%, #7fb0ff, transparent 65%);
}
.login-wrap:before { width: 620px; height: 620px; left: -160px; top: -180px; }
.login-wrap:after { width: 520px; height: 520px; right: -140px; bottom: -160px; }
.lbox {
  position: relative; z-index: 2; width: 396px; background: #fff; border-radius: 14px;
  padding: 38px 34px 30px; box-shadow: 0 24px 60px rgba(8, 18, 36, .38);
}
.lbox .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.lbox .brand i {
  width: 34px; height: 34px; border-radius: 10px; background: var(--primary);
  box-shadow: inset 0 -8px 0 rgba(255, 255, 255, .16); display: block;
}
.lbox .brand b { font-size: 17px; letter-spacing: .5px; }
.lbox h2 { font-size: 20px; margin-bottom: 4px; }
.lbox .sub { font-size: 13px; color: var(--ph); margin-bottom: 22px; }
.lfield { position: relative; margin-bottom: 12px; }
.lfield input {
  width: 100%; height: 46px; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 0 14px; font-size: 14px; color: var(--text); background: #fff; outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.lfield input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.lfield input::placeholder { color: var(--ph-2); }
.login-err {
  font-size: 12px; color: var(--red); background: var(--red-l); border-radius: 7px;
  padding: 8px 12px; margin-bottom: 12px; display: none;
}
.login-err.show { display: block; }
.login-btn {
  width: 100%; height: 44px; border: none; border-radius: 8px; background: var(--primary);
  color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 4px;
  transition: background .16s;
}
.login-btn:hover { background: var(--primary-d); }
.login-btn:disabled { background: #9db4e8; cursor: default; }
.login-tip { text-align: center; font-size: 11px; color: var(--ph-2); margin-top: 16px; line-height: 1.8; }
.login-tip b { color: var(--ph); font-weight: 500; }

/* ---------------- 主框架 ---------------- */
.app { display: flex; height: 100%; min-height: 100vh; }
.side {
  width: 240px; flex: 0 0 240px; background: linear-gradient(180deg, var(--side1) 0%, var(--side2) 100%);
  color: var(--side-txt); display: flex; flex-direction: column; height: 100%; min-height: 100vh;
  box-shadow: 2px 0 12px rgba(10, 18, 35, .25); z-index: 20;
}
.side .logo {
  height: 68px; display: flex; align-items: center; gap: 11px; padding: 0 20px;
  font-weight: 700; color: #fff; font-size: 16px; letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, .07); flex: 0 0 68px;
}
.side .logo i {
  width: 28px; height: 28px; border-radius: 9px; background: var(--primary);
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, .14); display: block;
}
.nav { padding: 12px 10px 20px; flex: 1; overflow-y: auto; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
.nav .grp > .n { position: relative; }
.nav .n {
  height: 42px; margin: 2px 0; padding: 0 12px; border-radius: 9px; display: flex; gap: 11px;
  align-items: center; white-space: nowrap; color: var(--side-txt); cursor: pointer;
  font-size: 14px; transition: background .14s, color .14s; user-select: none;
}
.nav .n:hover { background: rgba(255, 255, 255, .06); color: #dfe6f4; }
.nav .n.on { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .38); }
.nav .n .ni { width: 18px; height: 18px; flex: 0 0 18px; }
.nav .n .ni svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; }
.nav .n .arrow { margin-left: auto; font-size: 10px; opacity: .6; transition: transform .18s; }
.nav .grp.open > .n .arrow { transform: rotate(90deg); }
.nav .kids { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.nav .grp.open > .kids { max-height: 480px; }
.nav .n.sub1 { padding-left: 41px; font-size: 13px; height: 38px; }
.nav .n.sub1.on { background: rgba(37, 99, 235, .9); }
/* 侧栏底部构建指纹：用于确认浏览器里跑的是不是最新代码 */
.side .build {
  flex: 0 0 auto; padding: 10px 20px 13px; font-size: 11px; color: var(--side-txt-2);
  border-top: 1px solid rgba(255, 255, 255, .07); letter-spacing: .3px;
  font-variant-numeric: tabular-nums; user-select: text;
}

/* 后端旧进程提示条：界面已是最新、后端进程还是旧代码时常驻显示（改完后端必须重启） */
.stale-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px; padding: 10px 14px;
  background: #fff8e8; border: 1px solid #f6d38a; border-left: 3px solid var(--orange);
  border-radius: 8px; font-size: 12.5px; color: #7a5312; line-height: 1.6;
}
.stale-bar b { color: #8a4b00; font-size: 13px; }
.stale-bar .stale-how { color: #9a7b3f; }
.stale-bar .btn { margin-left: auto; }

.body { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }
.top {
  height: 68px; flex: 0 0 68px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 26px;
}
.top .t { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.top .t .crumb { font-size: 12px; color: var(--ph); font-weight: 400; }
.top .u { font-size: 13px; color: var(--dim); display: flex; gap: 16px; align-items: center; }
.top .u .role { background: var(--primary-l); color: var(--primary); border-radius: 5px; padding: 2px 8px; font-size: 11px; }
.top .u a:hover { color: var(--primary-d); }
.main { flex: 1; padding: 22px 26px 40px; overflow: auto; min-height: 0; }

/* ---------------- 通用组件 ---------------- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.page-head h3 { font-size: 16px; font-weight: 600; }
.page-head .desc { font-size: 12px; color: var(--dim); margin-top: 4px; font-weight: 400; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.card + .card { margin-top: 14px; }
.card > h4 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card > h4 .hint { font-size: 12px; color: var(--dim); font-weight: 400; }

.btn {
  border: 1px solid var(--primary); background: var(--primary); color: #fff; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; cursor: pointer; transition: .16s; white-space: nowrap;
}
.btn:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.w { background: #fff; color: var(--sub); border-color: #e2e8f0; }
.btn.w:hover { background: #f7f9fc; color: var(--text); border-color: #cfd8e6; }
.btn.d { background: #fff; color: var(--red); border-color: #f3c9c9; }
.btn.d:hover { background: var(--red-l); }
/* 实心危险按钮：确认框「删除」用它，视觉权重高于取消；之前 confirmDialog 引用了这个类但没定义 */
.btn.d-solid { background: var(--red); color: #fff; border-color: var(--red); }
.btn.d-solid:hover { background: #c93b3a; border-color: #c93b3a; }
.btn.sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; }
.btn.link { background: none; border: none; color: var(--primary); padding: 0 6px; }
.btn.link:hover { text-decoration: underline; background: none; }
.btn.link.d { color: var(--red); }
.btn-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 表格「操作」列：所有文字按钮强制一行排列，间距由容器统一控制（不再靠按钮 padding 凑） */
.ops { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; white-space: nowrap; }
.ops .btn.link { padding: 0; white-space: nowrap; }
.ops .btn.link + .btn.link { position: relative; }
.ops .btn.link + .btn.link:before {
  content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--line);
}
/* 表格内绝不换行：列宽按内容撑开，保证「编辑 | 介绍 | 删除」始终一行 */
table.tbl td .ops { flex-wrap: nowrap; min-width: max-content; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.inp, .sel {
  height: 40px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0 12px;
  font-size: 14px; color: var(--text); background: #fff; outline: none; transition: .16s;
}
.inp:focus, .sel:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.inp::placeholder { color: var(--ph-2); }
.inp.w180 { width: 180px; } .inp.w220 { width: 220px; } .inp.w260 { width: 260px; }
textarea.inp { height: auto; padding: 10px 12px; line-height: 1.7; resize: vertical; min-height: 76px; }
.sel { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8699' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); cursor: pointer; }
label.chk input { width: 15px; height: 15px; accent-color: var(--primary); }

.tbl-wrap { overflow-x: auto; border-radius: 8px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  background: #f5f8fc; color: var(--sub); text-align: left; padding: 10px 12px;
  font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--line);
}
table.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl tbody tr:hover { background: #fafcff; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl .num { font-variant-numeric: tabular-nums; }
/* 注意：`table.tbl th`（0,1,2）比裸 `.right`（0,1,0）优先级高，th 的 text-align:left 会把
   右对齐列的表头压回左对齐 → 必须在这里用同等权重单独覆盖，否则表头与数据错位 */
table.tbl th.right, table.tbl td.right { text-align: right; }
table.tbl .center { text-align: center; }
table.tbl th.center { text-align: center; }
table.tbl .nowrap { white-space: nowrap; }
table.tbl .muted { color: var(--ph-2); }

.tag { font-size: 11px; border-radius: 4px; padding: 2px 8px; display: inline-block; white-space: nowrap; }
.tag.b { background: var(--primary-l); color: var(--primary); }
.tag.g { background: var(--green-l); color: var(--green); }
.tag.o { background: var(--orange-l); color: var(--orange); }
.tag.r { background: var(--red-l); color: var(--red); }
.tag.gr { background: #f0f3f8; color: var(--dim); }

.empty { text-align: center; padding: 54px 0; color: var(--ph-2); font-size: 13px; }
.empty .ico { font-size: 30px; opacity: .35; display: block; margin-bottom: 10px; }
.loading { text-align: center; padding: 48px 0; color: var(--ph); font-size: 13px; }
.loading:after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid #dbe3f0; border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pager { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--dim); }
.pager .pinfo { margin-right: 6px; }
.pager button {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; min-width: 30px; height: 30px;
  cursor: pointer; color: var(--sub); font-size: 12px; padding: 0 8px;
}
.pager button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pager button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }

/* 统计卡 */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1280px) { .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; min-width: 0; }
.stat .l { font-size: 12.5px; color: var(--dim); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font-size: 25px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v.sm { font-size: 19px; letter-spacing: 0; }
.stat .v small { font-size: 12px; font-weight: 400; margin-left: 6px; color: var(--green); }
.stat .v small.warn { color: var(--orange); }

/* ---- 驾驶舱：全局筛选条（统计时间维度 + 经销商） ---- */
.dash-filter {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 16px; margin-bottom: 14px;
}
.dash-filter.loading { opacity: .55; pointer-events: none; }
.dash-filter .g { display: flex; align-items: center; gap: 8px; }
.dash-filter .g > label { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.dash-filter .g .sel { height: 34px; padding: 0 28px 0 10px; font-size: 12.5px; }
.dash-filter .range-label { font-size: 12px; color: var(--ph-2); margin-left: auto; }

/* 分段控件（时间维度切换） */
.seg { display: inline-flex; background: #f1f4f9; border-radius: 8px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--sub); font-size: 12.5px;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: .14s; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 3px rgba(20, 40, 80, .12); }

/* 经销商被数据权限锁定时：只读展示，不给下拉 */
.scope-lock {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  background: #f7fafc; border: 1px dashed #cfd8e6; border-radius: 8px;
  font-size: 12.5px; color: var(--text);
}
.scope-lock b { font-weight: 600; }
.scope-lock span { font-size: 11px; color: var(--ph); }

/* ---- 经销商经营统计 ---- */
.dealer-card > h4 { gap: 10px; }
/* 固定列宽：名称列吃剩余，右侧金额/单量列不塌 */
table.tbl.dealer-tbl { table-layout: fixed; }
table.tbl.dealer-tbl th,
table.tbl.dealer-tbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tbl.dealer-tbl td b { font-weight: 500; color: var(--text); }
.dealer-no {
  display: inline-block; min-width: 20px; font-size: 12px; color: var(--ph-2);
  text-align: center; font-variant-numeric: tabular-nums;
}
.dealer-no.is-pri { color: var(--primary); font-weight: 700; }
.dealer-sum {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: #f7faff; border: 1px solid #dfe9fa; border-radius: 9px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--sub);
}
.dealer-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.dealer-note { font-size: 11.5px; color: var(--ph-2); margin-top: 10px; line-height: 1.7; }

/* ---- 全年经营趋势：柱（金额）+ 折线（单量）组合图 ---- */
.chart-box { width: 100%; overflow: hidden; }
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; align-items: center; gap: 18px; margin-top: 10px; padding-left: 4px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.chart-legend i.bar { background: linear-gradient(180deg, #4f86f7, #2563eb); }
.chart-legend i.line { width: 14px; height: 3px; border-radius: 2px; background: #d97706; }
.chart-legend span { font-size: 12px; color: var(--dim); }

/* ---- 排行条：序号/名称/进度条/单量/金额 五列严格对齐 ---- */
/* 两栏（产品 / 门店）并排：卡片等高等宽、标题与行基线一一对齐 */
.rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: stretch; }
.rank-grid > .card { display: flex; flex-direction: column; }
/* 关键：.card + .card 的 margin-top:14px 在栅格里会把右卡整体下移 14px 并矮 14px（两栏永远对不齐） */
.rank-grid > .card + .card { margin-top: 0; }
.rank-grid > .card > h4 { flex: none; height: 22px; margin-bottom: 10px; }
.rank-grid > .card > .rank-list { flex: 1 1 auto; }
.rank-list { display: flex; flex-direction: column; justify-content: flex-start; }
/* 行内不画分隔线、不做斑马底：只靠行距与进度条分隔，避免出现多余的“表格线框” */
.rank-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 132px 52px 88px;
  align-items: center; column-gap: 12px; padding: 0 8px; margin: 0 -8px;
  min-height: 32px; border: 0;
}
.rank-no { font-size: 12px; color: var(--ph-2); text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
/* 仅前三名上色；类名带 is- 前缀，避免与顶栏 .top 等全局类撞名 */
.rank-no.is-pri { color: var(--primary); font-weight: 600; }
.rank-name { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track { height: 8px; background: #eef2f8; border-radius: 4px; overflow: hidden; }
.rank-fill { height: 100%; min-width: 6px; border-radius: 4px; background: linear-gradient(90deg, #4f86f7, #2563eb); }
.rank-cnt { font-size: 12.5px; color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-amt { font-size: 12px; color: var(--ph); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat.alert { border-color: #f7d9a8; background: #fffdf7; }

/* 页签 */
.tabs { display: inline-flex; gap: 2px; background: #eef1f5; border-radius: 8px; padding: 3px; font-size: 13px; }
.tabs > div { padding: 6px 16px; border-radius: 6px; color: var(--sub); cursor: pointer; transition: .14s; }
.tabs > div.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* 弹窗：统一垂直居中（4.2.1 / 6.4 要求），过高时内部滚动 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15, 27, 45, .48); z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  overflow: auto; animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0; } }
.mbox {
  width: 560px; max-width: 100%; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 64px rgba(10, 20, 40, .3); animation: pop .16s ease;
}
@keyframes pop { from { transform: translateY(-8px) scale(.99); opacity: .6; } }
.mbox.wide { width: 760px; }
.mbox.big { width: 920px; }
/* p80：宽高都取「系统界面（视口）」的 80%，长宽比自然等于界面比例。
   2026-10-28 用户要求：所有表单弹窗 / 详情弹窗统一按此尺寸，保持全站一致。 */
.mbox.p80 { width: 80vw; height: 80vh; max-width: 80vw; max-height: 80vh; }
.mbox.p80 .mb { padding: 4px 22px 10px; }
.mbox .mh { padding: 18px 22px 12px; display: flex; align-items: center; justify-content: space-between; flex: none; }
.mbox .mh b { font-size: 16.5px; }
/* 标题语气：success = 「已经完成了」的终态，绿勾 + 绿字 + 浅绿底，
   与「请确认提交」这类待办弹窗在视觉上彻底区分开 */
.mbox .mh-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mbox .mh-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mbox .mh-txt small { font-size: 12px; color: var(--sub); line-height: 1.4; }
.mbox .mh-ico {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(14, 159, 110, .35);
}
.mbox .mh.tone-success { background: linear-gradient(180deg, var(--green-l), #fff); padding-bottom: 14px; }
.mbox .mh.tone-success b { color: #0b7d57; }
.mbox .mh .x { cursor: pointer; color: var(--ph); font-size: 18px; line-height: 1; padding: 4px; }
.mbox .mh .x:hover { color: var(--text); }
.mbox .mb { padding: 0 22px 6px; flex: 1; min-height: 0; overflow: auto; }
.mbox .mf { padding: 14px 22px 20px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--line-2); margin-top: 8px; flex: none; }
.mbox p.mtip { font-size: 15px; color: var(--sub); line-height: 1.85; margin: 4px 0 10px; }

/* 表单
 * 2026-11-03 用户 #8：字体加大两号、上下间距 +2px，弹窗不要显得拥挤（全站统一）。 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 8px 0 12px; }
.form-grid .fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-grid .fld.full { grid-column: 1 / -1; }
.form-grid .fld > label { font-size: 14px; color: var(--sub); }
.form-grid .fld > label i { color: var(--red); font-style: normal; margin-left: 2px; }
.form-grid .fld .tip { font-size: 12px; color: var(--ph-2); line-height: 1.7; }
.form-grid .fld .tip b { color: var(--primary); font-weight: 500; }
.form-grid .fld .err { font-size: 12.5px; color: var(--red); }

/* 可搜索两级选择器（大类 > 产品）：聚焦展开、输入模糊检索、↑↓ 选中 */
.pk { position: relative; display: block; }
.pk .pk-inp { width: 100%; padding-right: 56px; cursor: text; }
.pk .pk-clear {
  position: absolute; top: 50%; right: 30px; transform: translateY(-50%);
  width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 50%;
  font-size: 10px; color: var(--ph); background: #eef2f8; display: none;
}
.pk .pk-clear:hover { background: #e2e8f2; color: var(--text); }
/* 箭头用 CSS 三角形而非 ▾ 字形：不同字体环境下 ▾ 会渲染成小点 */
.pk .pk-caret {
  position: absolute; top: 50%; right: 12px; margin-top: -3px;
  width: 0; height: 0; font-size: 0; line-height: 0; color: transparent;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ph); pointer-events: none; transition: transform .15s;
}
.pk.open .pk-caret { transform: rotate(180deg); margin-top: -2px; }
.pk.open .pk-inp { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }

.pk .pk-panel {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 60; max-height: 268px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 12px 32px rgba(15, 30, 60, .16);
  grid-template-columns: 132px minmax(0, 1fr);
}
.pk.open .pk-panel { display: grid; }
/* 字段靠下且上方空间足够时向上展开，避免被弹窗底部裁掉 */
.pk.up .pk-panel { top: auto; bottom: calc(100% + 4px); }
/* 品牌这类「名字 + 英文名 + 字母栏」的面板比字段本身宽：
 * 字段只占 1/3 栏（约 230px）时，面板按字段宽度铺会挤成一团，所以固定放宽到 380px */
.pk.pk-wide .pk-panel { right: auto; width: 380px; max-width: 92vw; }

/* 两栏各自限高滚动：只靠 panel 的 max-height 会导致子项撑到内容高度、列表滚不动（实测 121 项 = 4142px） */
.pk .pk-cats { max-height: 260px; border-right: 1px solid var(--line-2); background: #fafcff; overflow: auto; padding: 5px; }
.pk .pk-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 9px; border-radius: 6px; font-size: 12.5px; color: var(--sub);
  cursor: pointer; line-height: 1.2;
}
.pk .pk-cat:hover { background: #eef3fb; }
.pk .pk-cat.on { background: var(--primary-l); color: var(--primary); font-weight: 600; }
.pk .pk-cat .pk-cat-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk .pk-cat > span:last-child { font-size: 11px; color: var(--ph); font-variant-numeric: tabular-nums; flex: none; }
.pk .pk-cat.on > span:last-child { color: var(--primary); }

.pk .pk-items { max-height: 260px; overflow: auto; padding: 5px; }
.pk .pk-grp {
  padding: 6px 9px 4px; font-size: 11px; color: var(--ph); letter-spacing: .3px;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.pk .pk-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text);
  cursor: pointer; line-height: 1.3;
}
.pk .pk-item.on { background: var(--primary-l); }
.pk .pk-item.sel { color: var(--primary); font-weight: 600; }
.pk .pk-item.sel:after { content: "✓"; font-size: 11px; flex: none; }
.pk .pk-i-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk .pk-i-t b { color: var(--primary); font-weight: 700; }
.pk .pk-i-g { font-size: 11px; color: var(--ph-2); flex: none; }
.pk .pk-empty { padding: 26px 10px; text-align: center; font-size: 12.5px; color: var(--ph-2); }

.coord-row { display: flex; gap: 8px; align-items: center; }
.coord-row .inp { flex: 1; min-width: 0; }
.linkbtn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--primary);
  border: 1px solid var(--primary-b); background: #f0f5ff; border-radius: 8px; padding: 0 11px;
  height: 38px; white-space: nowrap; cursor: pointer;
}
.linkbtn:hover { background: #e4edff; }

/* 计价明细 */
/* 成功弹窗里的单号条：把「单号」做成一眼能看到的凭证，配合绿色底强调"已经落库" */
.ok-no {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin: 2px 0 12px;
  background: var(--green-l); border: 1px solid #bfe8d8; border-radius: 10px;
}
.ok-no .k { font-size: 12.5px; color: #0b7d57; }
.ok-no b { font-size: 16px; letter-spacing: .4px; color: #0b7d57; font-variant-numeric: tabular-nums; }
.ok-no .ok-badge { margin-left: auto; font-size: 11.5px; color: #fff; background: var(--green); padding: 2px 9px; border-radius: 999px; }

.calc-box { background: #f7faff; border: 1px solid #dfe9fa; border-radius: 10px; padding: 14px 16px; }
.calc-box .row { display: flex; justify-content: space-between; font-size: 13px; color: var(--sub); padding: 4px 0; }
/* 标签不换行、值右对齐：「贴膜位置」这类 4 字标签配一长串位置名时，
   标签会被挤成两行（"贴膜位" / "置"），看着像排版坏了 */
.calc-box .row > span { flex: none; white-space: nowrap; margin-right: 14px; }
.calc-box .row > b { text-align: right; }
.calc-box .row b { color: var(--text); font-variant-numeric: tabular-nums; }
.calc-box .total { border-top: 1px dashed #cfdcf3; margin-top: 8px; padding-top: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.calc-box .total span { font-size: 13px; color: var(--sub); }
.calc-box .total strong { font-size: 24px; color: var(--primary); font-variant-numeric: tabular-nums; }
.calc-box .formula { font-size: 11.5px; color: var(--ph); margin-top: 6px; font-family: Consolas, Monaco, monospace; }

/* 部位多选 */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; padding: 7px 12px;
  font-size: 12.5px; color: var(--sub); cursor: pointer; user-select: none; transition: .14s;
}
.chip:hover { border-color: var(--primary-b); color: var(--primary); }
.chip.on { background: var(--primary-l); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip small { opacity: .65; margin-left: 4px; font-size: 11px; }
/* 录入页「贴膜部位」chip：与左侧输入框严格同高（33.07px） */
.wty-card .chip {
  height: var(--wty-ctl-h); display: inline-flex; align-items: center;
  justify-content: center; padding: 0 12px;
}

/* 权限矩阵 */
.perm-group { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 12px; overflow: hidden; }
.perm-group > .hd { background: #f7fafd; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.perm-group > .bd { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.perm-group .bd label { font-size: 12.5px; }

/* 角色侧栏：级别 > 角色 两级结构 */
.role-grp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px 5px; font-size: 11.5px; font-weight: 600;
  color: var(--ph); letter-spacing: .04em;
}
.role-grp:first-child { padding-top: 2px; }
.role-grp i { font-style: normal; font-weight: 400; color: var(--ph-2); }
.role-grp-empty { padding: 4px 10px 10px; font-size: 12px; color: var(--ph-2); }
.role-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
  color: var(--text); background: transparent;
}
.role-item:hover { background: #f5f8fd; }
.role-item.on { background: var(--primary-l); color: var(--primary); font-weight: 600; }
.role-item .cnt { font-size: 11.5px; color: var(--ph); font-weight: 400; }
.role-item.on .cnt { color: var(--primary); }

/* 角色级别标签 */
.role-lv {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px;
  border: 1px solid transparent; white-space: nowrap;
}
.role-lv.lv-platform { color: #2563eb; background: #eef4ff; border-color: #d6e4ff; }
.role-lv.lv-dealer { color: #c2740a; background: #fff7e8; border-color: #ffe3b0; }
.role-lv.lv-store { color: #2c9a63; background: #edfaf2; border-color: #cceedd; }

/* 报价矩阵 */
table.matrix th, table.matrix td { text-align: right; }
table.matrix th:first-child, table.matrix td:first-child { text-align: left; }
table.matrix td.cell { font-variant-numeric: tabular-nums; }
table.matrix tbody tr:hover td { background: #f7fbff; }

/* 图片素材 */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.img-item { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; position: relative; }
.img-item .ph { height: 106px; background: #f0f3f8 center/cover no-repeat; }
.img-item .meta { padding: 8px 10px; font-size: 11.5px; color: var(--dim); }
.img-item .meta b { display: block; color: var(--text); font-size: 12.5px; font-weight: 500; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-item .ops { position: absolute; top: 6px; right: 6px; display: flex; gap: 5px; opacity: 0; transition: .14s; }
.img-item:hover .ops { opacity: 1; }
.img-item .ops button { border: none; background: rgba(15, 27, 45, .72); color: #fff; border-radius: 5px; font-size: 11px; padding: 3px 7px; cursor: pointer; }
.img-item .ops button:hover { background: var(--primary); }

/* toast */
.toast-wrap { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: #1f2b3d; color: #fff; font-size: 13px; border-radius: 8px; padding: 10px 18px;
  box-shadow: 0 10px 28px rgba(10, 20, 40, .28); animation: drop .2s ease; max-width: 520px;
}
.toast.ok { background: #0e9f6e; }
.toast.err { background: #d94140; }
.toast.warn { background: #d97706; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } }

.hide { display: none !important; }
.right { text-align: right; }
.mono { font-family: Consolas, Monaco, monospace; }
.nowrap { white-space: nowrap; }
.flex1 { flex: 1; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mb0 { margin-bottom: 0 !important; }

/* ---------------- 图片选择控件（buildForm type:'image'） ---------------- */
.img-pick { display: flex; gap: 14px; align-items: center; }
.img-pv {
  width: 96px; height: 96px; border-radius: 10px; flex-shrink: 0;
  border: 1px dashed #d7dfeb; background: #fafcff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ph); font-size: 12px; overflow: hidden;
}
.img-pv.has { border-style: solid; border-color: var(--line); background: #fff; }
.img-pv img { width: 100%; height: 100%; object-fit: contain; }
.img-acts { display: flex; flex-direction: column; gap: 8px; }

/* ---------------- 表格行内开关 ---------------- */
.sw {
  position: relative; display: inline-block; width: 40px; height: 22px;
  border-radius: 11px; background: #dbe3ef; cursor: pointer;
  transition: background .16s; vertical-align: middle;
}
.sw i {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .2); transition: left .16s;
}
.sw.on { background: var(--primary); }
.sw.on i { left: 20px; }
.sw.busy { opacity: .55; cursor: default; }
.sw.lock { background: #cbd5e1; }

/* 品牌 logo 缩略 */
.logo-thumb { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; }
.logo-ph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 600;
  color: var(--primary); background: var(--primary-l); border: 1px solid var(--primary-b);
}
.hot-count { font-size: 12px; color: var(--dim); margin-left: 8px; }

/* ==================== 富文本编辑器（RTE） ==================== */
.rt { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; }
.rt-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 5px 6px; background: #f7f9fc; border-bottom: 1px solid var(--line-2);
}
.rt-b {
  min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--sub); font-size: 13px; cursor: pointer; line-height: 1;
}
.rt-b:hover { background: #eaf1ff; color: var(--primary); border-color: var(--primary-b); }
.rt-b.b { font-weight: 700; }
.rt-b.i { font-style: italic; }
.rt-b.u { text-decoration: underline; }
.rt-b.w { margin-left: auto; color: var(--ph); }
.rt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.rt-body {
  min-height: 240px; max-height: none; padding: 12px 14px; font-size: 13.5px; line-height: 1.85;
  color: var(--text); outline: none; overflow: auto;
}
.rt-body:empty::before { content: attr(data-ph); color: var(--ph-2); }
.rt-body h3 { font-size: 15px; margin: 12px 0 6px; }
.rt-body p { margin: 8px 0; }
.rt-body blockquote {
  margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--primary-b);
  background: #f7faff; color: var(--sub); border-radius: 0 8px 8px 0;
}
.rt-body ul, .rt-body ol { margin: 8px 0; padding-left: 22px; }
.rt-body img { max-width: 100%; border-radius: 8px; display: block; margin: 10px 0; }
.mbox.p80 .rt-body { min-height: 320px; }

/* ==================== 手机模型预览（产品介绍 / 案例） ==================== */
.phone-wrap { display: flex; justify-content: center; padding: 4px 0 10px; }
.phone {
  width: 340px; height: 640px; border-radius: 38px; background: #0a0a0c;
  padding: 10px; box-shadow: 0 18px 48px rgba(10, 20, 40, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
  position: relative;
}
.phone::before {
  content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 20px; border-radius: 12px; background: #000; z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 30px; background: #f7f7f8; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-nav {
  flex: none; height: 62px; padding: 26px 14px 0; display: flex; align-items: flex-end;
  justify-content: center; font-size: 13px; color: #fff; background: #14110c;
  letter-spacing: 1px; position: relative;
}
.phone-body { flex: 1; overflow: auto; }
.phone-hero-wrap { position: relative; }
/* 导航条内的返回箭头 / 右上角胶囊：绝对定位，避免把标题挤偏 */
.phone-back { position: absolute; left: 13px; bottom: 4px; font-size: 21px; line-height: 1; color: #cbb98f; }
.phone-dots { position: absolute; right: 13px; bottom: 11px; font-size: 11px; letter-spacing: 1px; color: #6b5a38; }
.phone-hero { width: 100%; height: 168px; background: #12100b; object-fit: cover; display: block; }
.phone-hero-ph {
  width: 100%; height: 168px; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #14100b, #0a0a0c); color: #6b5a38; font-size: 13px; letter-spacing: 4px;
}
.phone-hero-ph i { font-style: normal; font-size: 10.5px; letter-spacing: 0; color: #4b4231; }
.phone-inner { padding: 14px 14px 22px; }
.phone-title { font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.5; }
.phone-meta { font-size: 11.5px; color: #98a2b3; margin-top: 6px; }
.phone-rt { font-size: 13px; line-height: 1.9; color: #333; margin-top: 12px; }
.phone-rt h3 { font-size: 14px; margin: 12px 0 6px; color: #1a1a1a; }
.phone-rt p { margin: 8px 0; }
.phone-rt blockquote {
  margin: 10px 0; padding: 8px 10px; border-left: 3px solid #d9b978;
  background: #fdf9f1; color: #6b5a38; border-radius: 0 8px 8px 0;
}
.phone-rt img { max-width: 100%; border-radius: 6px; display: block; margin: 10px 0; }
.phone-rt ul, .phone-rt ol { padding-left: 20px; }
.phone-foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid #eee; font-size: 11px; color: #98a2b3; }
.phone-empty { padding: 60px 16px; text-align: center; color: #98a2b3; font-size: 12.5px; }
.phone-close-x { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: var(--ph); }

/* 列表封面缩略图 */
.cover-thumb {
  width: 74px; height: 34px; border-radius: 6px; object-fit: cover; display: block;
  border: 1px solid var(--line); background: #f0f3f8;
}
.cover-ph {
  width: 74px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #dde3ee; background: #fafbfd; color: var(--ph-2); font-size: 11px;
}

/* 贴膜位置图示列 */
.pos-icon {
  width: 92px; height: 40px; object-fit: contain; display: block;
  background: #fbfcfe; border: 1px solid var(--line-2); border-radius: 6px; padding: 2px;
}
.tbl td .row-inp { height: 34px; padding: 0 8px; font-size: 13px; }
.pos-row-acts { display: flex; align-items: center; gap: 6px; height: 34px; }
.pos-row-acts .btn { height: 34px; padding: 0 12px; }

/* ================= 质保录入页（2026-10-27 四段式重构） ================= */
/* 布局：左列四段卡片 + 右列自动计价（固定 300px，约为原宽度一半）；
   两栏同为 .card 且都不加额外 margin-top，保证顶边像素级对齐 */
.wty-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 10px;
  align-items: start;
}
.wty-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* 卡片间距统一由 flex gap 控制；抵消全局 .card + .card 的 14px 外边距（否则一屏放不下） */
.wty-col .card + .card { margin-top: 0; }
/* 录入页控件高度：与右栏「贴膜部位」chip 同高（2026-10-28 用户要求 = chip 实测 33.07px） */
.wty-card { padding: 12px 14px 12px; --wty-ctl-h: 36px; }
.wty-card > h4 { margin: 0 0 9px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.wty-card > h4 .hint { font-weight: 400; font-size: 12.5px; }
.wty-card .grid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.wty-card .grid2.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wty-card .grid2.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wty-card .fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.wty-card .fld > label { font-size: 13px; color: var(--sub); line-height: 1.35; }
.wty-card .fld > label i { color: var(--red); font-style: normal; margin-left: 2px; }
.wty-card .fld .inp, .wty-card .fld .sel { height: var(--wty-ctl-h); padding: 0 10px; font-size: 14px; }
.wty-card .fld .ro { height: var(--wty-ctl-h); display: flex; align-items: center; padding: 0 10px; font-size: 14px;
  color: var(--sub); background: #f6f8fb; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.wty-card .fld .ro b { color: var(--text); font-weight: 500; }
.wty-card .fld .tip { font-size: 11.5px; color: var(--ph-2); line-height: 1.55; }
/* 无车牌：车牌号置灰（只读态也要一眼看出不可填） */
.wty-card .fld .inp.off { background: #eef1f6; color: var(--ph); border-color: #e4e9f2; cursor: not-allowed; }
.wty-card .fld .inp.off::placeholder { color: var(--ph-2); }

/* 照片行：标签与胶片并排（横排省一屏高度，100×60 缩略不缩水） */
.wty-card .fld.photos { flex-direction: row; align-items: center; gap: 10px; }
/* 照片字段通栏：grid2 是 3 列，只给 1 列时（~190px）100px 的缩略图一行只放得下一个，
 * 3 张照片加满张提示就竖着堆成 4 行，既难看又要滚。通栏后一行放得下 4 个方块。 */
.wty-card .fld.photos { grid-column: 1 / -1; }
.wty-card .fld.photos > label { flex: 0 0 84px; cursor: help; }

/* 右栏计价卡：录入页专用紧凑版（一屏不滚屏的关键预算） */
.wty-col .calc-box { padding: 10px 12px; border-radius: 8px; }
.wty-col .calc-box .row { padding: 3px 0; font-size: 12.5px; }
.wty-col .calc-box .total { margin-top: 6px; padding-top: 8px; }
.wty-col .calc-box .total strong { font-size: 22px; }
.wty-col .calc-box .formula { margin-top: 4px; font-size: 11px; }
.wty-col .calc-box .formula { word-break: break-all; }

/* 车牌归属单选 */
.plate-radios { display: flex; gap: 6px; }
.plate-radios label {
  flex: 1; display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; color: var(--sub);
  cursor: pointer; background: #fff; transition: all .15s;
}
.plate-radios label.on { border-color: var(--primary); color: var(--primary); background: #eef4ff; font-weight: 500; }
.plate-radios input { accent-color: var(--primary); }

/* 质保照片：100×60 缩略 + 上传 */
.wty-photos { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.wty-photo { position: relative; width: 100px; height: 60px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #f6f8fb; }
.wty-photo img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.wty-photo .del {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%;
  background: rgba(15,23,42,.72); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
  cursor: pointer; padding: 0;
}
.wty-photo-add {
  width: 100px; height: 60px; border: 1px dashed var(--line); border-radius: 6px; background: #fbfcfe;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ph); font-size: 11px; cursor: pointer;
}
/* 满张提示：不再让上传入口凭空消失，否则操作者会以为上传坏了（2026-11-04） */
.wty-photo-add.full {
  border-style: solid; border-color: #dbe4f0; background: #f4f7fb;
  color: var(--ph-2); cursor: help; text-align: center; line-height: 1.25;
}
.wty-photo-add.full b { color: #16a34a; font-size: 13px; }

/* 照片上传三态（2026-11-04 用户反馈「等 3 秒以为没选上、保存后图片是空的」）
 * 原则：选中立刻给占位骨架 → 小缩略图 → 五阶段文案 + 真实上传百分比，失败可点重试。
 * 第二轮（同日）：大图不再走 <img src=blob:> 全图解码，占位与进度条在这一版补上。 */
.wty-photo.st-uploading img { opacity: .55; cursor: progress; }
/* 还没拿到缩略图时的骨架块：斜纹 + 沙漏，让「已选中、正在处理」一眼可见 */
.wty-photo .ph-skel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #eef2f8 0 6px, #e3e9f3 6px 12px);
  color: #9aa7bd; font-size: 13px;
  animation: phBreathe 1.4s ease-in-out infinite;
}
.wty-photo .ph-skel b { font-weight: 400; }
@keyframes phBreathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
/* 还没有图（新选中的第一张）：遮罩只是薄薄一层，别把浅色骨架糊成黑块 */
.wty-photo.ph-bare .ph-mask:not(.fail) {
  background: transparent; color: #64748b; font-size: 11px; letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.wty-photo.ph-bare .ph-spin { border-color: rgba(37, 99, 235, .22); border-top-color: #2563eb; }
.wty-photo.ph-bare .ph-bar { background: rgba(15, 23, 42, .1); }
.wty-photo.ph-bare .ph-bar > i { background: #22c55e; }
.wty-photo .ph-mask {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; background: rgba(15, 23, 42, .42);
  color: #fff; font-size: 10px; line-height: 1; letter-spacing: .5px; pointer-events: none;
}
.wty-photo .ph-spin {
  width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: phSpin .7s linear infinite;
}
@keyframes phSpin { to { transform: rotate(360deg); } }
/* 底部细进度条：上传阶段按真实百分比推进；读取/解码/压缩阶段走不确定动画 */
.wty-photo .ph-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255, 255, 255, .3);
}
.wty-photo .ph-bar > i {
  display: block; height: 100%; width: 0; background: #4ade80;
  transition: width .18s linear;
}
.wty-photo .ph-bar.indet > i {
  width: 40%; background: #fff; animation: phSlide 1.15s ease-in-out infinite;
}
@keyframes phSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.wty-photo .ph-pct { font-variant-numeric: tabular-nums; }
.wty-photo.st-failed { border-color: #e5484d; }

.wty-photo.st-failed img { opacity: .35; }
.wty-photo.st-failed .ph-mask { background: rgba(190, 26, 32, .78); cursor: pointer; pointer-events: auto; }
.wty-photo.st-failed .ph-mask b {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #be1a20;
  font-size: 12px; line-height: 16px; text-align: center; font-weight: 700;
}
.wty-photo.st-uploading .del,
.wty-photo.st-failed .del { z-index: 2; }
.wty-photo-add:hover { border-color: var(--primary); color: var(--primary); }
.wty-photo-add b { font-size: 16px; font-weight: 400; line-height: 1; }
/* 「可一次选 N 张」：让批量选图这件事在静止状态下就能看出来（100×60 的格子，字号压到 10px） */
.wty-photo-add .add-hint { font-size: 10px; line-height: 1.1; color: #94a3b8; white-space: nowrap; }

/* 历史输入下拉 */
.hist-wrap { position: relative; }
.hist-panel {
  display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 190px; overflow: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 10px 26px rgba(15,23,42,.12); padding: 4px;
}
.hist-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.hist-item:hover { background: #f1f6ff; }
.hist-item small { color: var(--ph); font-size: 11px; }
.hist-empty { padding: 10px 8px; font-size: 12px; color: var(--ph); }

/* ================= 图片预览组件 ================= */
.viewer-mask {
  position: fixed; inset: 0; z-index: 999; background: rgba(8,12,22,.86);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: viewer-in .18s ease;
}
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
.viewer-box { position: relative; width: min(92vw, 1100px); max-width: 1100px; }
.viewer-main { display: flex; align-items: center; justify-content: center; gap: 12px; }
.viewer-stage {
  flex: 1; min-width: 0; height: min(70vh, 620px); display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: rgba(255,255,255,.04); border-radius: 10px;
}
.viewer-img {
  max-width: 100%; max-height: min(70vh, 620px); object-fit: contain; border-radius: 8px;
  transition: transform .12s ease; cursor: zoom-out; user-select: none;
}
.viewer-nav {
  width: 40px; height: 40px; flex: 0 0 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.viewer-nav:hover { background: rgba(255,255,255,.28); }
.viewer-close {
  position: absolute; top: -42px; right: 0; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 14px; cursor: pointer;
}
.viewer-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #e2e8f5; font-size: 12.5px; }
.viewer-counter { min-width: 52px; }
.viewer-spacer { flex: 1; }
.viewer-btn {
  min-width: 34px; height: 30px; padding: 0 10px; border: none; border-radius: 6px;
  background: rgba(255,255,255,.16); color: #fff; font-size: 13px; cursor: pointer;
}
.viewer-btn:hover { background: rgba(255,255,255,.3); }

/* ================= 菜单管理 / 系统名称（2026-10-28） ================= */
.seg-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.seg-tab {
  padding: 7px 18px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: 13px; color: var(--sub); cursor: pointer; transition: .15s;
}
.seg-tab:hover { border-color: var(--primary-b); color: var(--primary); }
.seg-tab.on { border-color: var(--primary); color: var(--primary); background: var(--primary-l); font-weight: 600; }

.site-preview {
  margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line);
  border-radius: 10px; background: #fbfcfe; display: flex; align-items: center; gap: 14px;
}
.site-preview .sp-label { font-size: 12px; color: var(--ph); flex: none; }
.site-preview .sp-box {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: #0f1b2d; border-radius: 8px; color: #fff; font-size: 13.5px;
}
.site-preview .sp-box i {
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, #d9a441, #f0cf8a); display: block;
}
.site-preview .sp-box b { font-weight: 600; }

/* ================= 质保期单元格（始 / 止 两行，2026-10-28） ================= */
.wterm { display: flex; flex-direction: column; gap: 3px; }
.wterm-row { display: flex; align-items: center; gap: 6px; line-height: 1.15; }
.wtag {
  display: inline-block; min-width: 20px; text-align: center;
  padding: 1px 5px; border-radius: 4px; font-size: 10.5px; font-weight: 600; flex: none;
}
.wtag.start { background: var(--green-l); color: var(--green); }
.wtag.end { background: #fff2e4; color: #c2600f; }
.wterm-date { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ================= 质保单详情：四段分栏（2026-11-03 用户 #8） =================
 * 客户 / 车辆 / 门店 在左，车衣质保 + 照片 在右；字号比列表正文大两号，行距放宽。
 */
.dt-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; padding: 2px 0 0; }
.dt-col { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.dt-card { border: 1px solid var(--line-2); border-radius: 10px; background: #fff; overflow: hidden; }
.dt-hd {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: #f7f9fc; border-bottom: 1px solid var(--line-2);
}
.dt-hd i { width: 3px; height: 14px; border-radius: 2px; background: var(--primary); flex: none; }
.dt-hd b { font-size: 15px; color: var(--text); font-weight: 600; }
.dt-hd-x {
  margin-left: auto; font-size: 12.5px; color: var(--dim);
  background: #eef2f9; border-radius: 4px; padding: 1px 8px;
}
.dt-bd { padding: 5px 13px 7px; }
.dt-row {
  display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line-2);
  font-size: 15px; line-height: 1.5;
}
.dt-row:last-child { border-bottom: 0; }
.dt-k { flex: 0 0 92px; color: var(--dim); font-size: 14.5px; }
.dt-v { flex: 1; min-width: 0; color: var(--text); word-break: break-word; }
.dt-v.ph { color: var(--ph-2); }
.dt-row.pair { display: flex; gap: 12px; }
.dt-half { display: flex; gap: 10px; flex: 1; min-width: 0; }
.dt-half .dt-k { flex: 0 0 52px; }
.dt-term { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-term b { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.dt-tag {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600;
}
.dt-tag.start { background: var(--green-l); color: var(--green); }
.dt-tag.end { background: #fff2e4; color: #c2600f; }
.dt-sep { color: var(--ph); font-size: 12px; }
.dt-photos { display: flex; flex-wrap: wrap; gap: 9px; padding: 9px 0; }
.dt-empty { padding: 16px 0; font-size: 14px; color: var(--ph-2); }
.dt-tip { grid-column: 1 / -1; font-size: 12.5px; color: var(--ph-2); line-height: 1.7; }

/* ================= 操作日志：对象列 / 摘要列 / 详情弹窗（2026-11-03） =================
 * 用户诉求：对象要显示业务标识（质保单号、手机号、门店名），不是「质保单 #7」；
 * 列表只做简约摘要，点「查看」再看「修改项 / 修改前 / 修改后」三列表格。 */
.log-obj {
  font-size: 13.5px; font-weight: 500; color: var(--text);
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom;
}
.log-sum { display: block; font-size: 13px; color: var(--sub); line-height: 1.55; max-width: 460px; }

.logd { display: flex; flex-direction: column; gap: 14px; }
.logd-hd {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
}
.logd-obj { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: .2px; word-break: break-all; }
.logd-tags { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.logd-act { font-size: 13px; color: var(--dim); }

.logd-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px; }
.logd-mi { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; min-width: 0; }
.logd-mk { flex: 0 0 52px; color: var(--ph-2); }
.logd-mv { flex: 1; color: var(--text); word-break: break-all; }

.logd-tbl { border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.logd-tbl table.tbl { margin: 0; }
.logchg th { background: #f7f9fc; font-size: 13px; font-weight: 500; color: var(--dim); padding: 9px 13px; }
.logchg td { font-size: 14px; padding: 9px 13px; vertical-align: top; line-height: 1.55; }
.logchg-k { width: 30%; color: var(--text); font-weight: 500; }
.logchg-b { color: var(--dim); }
.logchg-a { color: var(--primary); font-weight: 500; }
.logchg .nil { color: var(--ph); }

.logd-note { margin: 0; font-size: 12.5px; color: var(--ph-2); line-height: 1.7; }

/* ================= 门店表单：四级地区联动（2026-10-28 / 2026-11-03 改为单选择框） =================
 * 用户 #7：4 个并排下拉太长，收成一个选择框，宽度跟随整行字段（实测整行 900.92px），
 * 外框与 .sel 完全同高同边框，左右与上方「门店名称」严格对齐。
 */
.region-picker { position: relative; width: 100%; }
.region-trigger {
  display: flex; align-items: center; gap: 8px;
  height: 40px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0 12px;
  font-size: 14px; color: var(--text); background: #fff; cursor: pointer; transition: .16s;
  box-sizing: border-box; width: 100%;
}
.region-trigger:hover { border-color: #c9d4e4; }
.region-trigger:focus, .region-picker.open .region-trigger {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); outline: none;
}
.region-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-text.ph { color: var(--ph-2); }
.region-caret { flex: none; color: var(--ph); font-size: 11px; transition: .18s; }
.region-picker.open .region-caret { transform: rotate(180deg); }
.region-panel {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 950;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14); overflow: hidden;
}
.region-panel.open { display: grid; }
.region-col { min-width: 0; border-right: 1px solid var(--line-2); }
.region-col:last-child { border-right: 0; }
.region-col-hd {
  padding: 7px 10px; font-size: 11.5px; color: var(--dim);
  background: #f7f9fc; border-bottom: 1px solid var(--line-2); letter-spacing: .5px;
}
.region-opts { max-height: 208px; overflow: auto; padding: 3px; }
.region-opt {
  padding: 6px 9px; border-radius: 6px; font-size: 12.5px; color: var(--sub);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.region-opt:hover { background: #f2f6fd; color: var(--text); }
.region-opt.on { background: #eaf1ff; color: var(--primary); font-weight: 600; }
.region-empty { padding: 10px 9px; font-size: 12px; color: var(--ph-2); }
.inp.mono { font-family: Consolas, Monaco, monospace; letter-spacing: .3px; }

/* ================= 角色权限：两级联动（菜单未开通 → 动作禁选，2026-10-28） ================= */
.perm-group.disabled { opacity: .6; background: #fafbfd; }
.perm-group.disabled > .hd { background: #f1f4f9; }
.perm-group.disabled .chk { cursor: not-allowed; }
.perm-lock {
  margin-left: auto; font-size: 11.5px; color: var(--ph);
  background: #eef1f6; border-radius: 4px; padding: 1px 8px;
  display: inline-block;  /* 默认显示；菜单已开通的组由 JS 置为 display:none */
}

/* ================= 品牌故事（2026-11-05 新增：单条富文本 + 手机预览） ================= */
.story-card { padding: 0; overflow: hidden; }
.story-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.story-head h4 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.story-head .hint { font-size: 11.5px; color: var(--ph); font-weight: 400; }
.story-editor { padding: 16px; }
.story-editor .form-grid { padding: 0; gap: 0; }
.story-dirty {
  font-size: 11.5px; font-weight: 400; color: var(--orange);
  background: var(--orange-l); border-radius: 999px; padding: 2px 9px;
}
.story-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line); background: #fafbfd;
  font-size: 11.5px; color: var(--dim);
}
.story-foot-r { color: var(--ph-2); }

/* 手机模型：深色版（对齐小程序真实深色底，品牌故事预览用） */
.phone-note { text-align: center; font-size: 11.5px; color: var(--ph-2); margin-top: 2px; line-height: 1.7; }
.phone.dark .phone-screen { background: #0a0a0c; box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .16); }
.phone.dark .phone-rt { color: #d8c9a6; }
.phone.dark .phone-rt h1, .phone.dark .phone-rt h2, .phone.dark .phone-rt h3 { color: #f3e2bd; }
.phone.dark .phone-rt blockquote { background: rgba(217, 164, 65, .1); color: #cbb98f; border-left-color: #d9a441; }
.phone.dark .phone-rt a { color: #d9a441; }
.phone.dark .phone-empty { color: #6b5a38; }
.phone.dark .phone-inner { padding-top: 20px; }