/* ============================================================
   卢彼家居 CRM · 意式极简风格 · Light Theme
   ============================================================ */
:root {
  --bg: #F6F3EE;
  --bg-card: #FFFFFF;
  --bg-soft: #F1EDE6;
  --ink: #23201B;
  --ink-2: #6B6359;
  --ink-3: #9A9185;
  --line: #E7E1D8;
  --line-2: #F0EBE3;
  --brand: #1F1B16;
  --brand-2: #8B5A2B;      /* 胡桃木 */
  --accent: #B08D57;       /* 金 */
  --accent-soft: #F3EADB;
  --red: #C0392B;
  --green: #2E7D4F;
  --blue: #2F5E8E;
  --amber: #B07D2B;
  --violet: #6D4E8E;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(35,32,27,.05), 0 6px 24px rgba(35,32,27,.06);
  --shadow-lg: 0 12px 40px rgba(35,32,27,.16);
  --font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D5CDC1; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 布局 ================= */
.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 218px;
  flex-shrink: 0;
  background: var(--brand);
  color: #EFE9DF;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--brand-2));
  color: #fff; font-size: 21px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(176,141,87,.35);
}
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: 1px; }
.brand-sub { font-size: 10.5px; color: #A99F90; letter-spacing: 2px; margin-top: 1px; }

.nav { flex: 1; display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10.5px 12px; border-radius: 10px;
  color: #C9BFAD; text-decoration: none; cursor: pointer;
  font-size: 14px; transition: all .18s;
  border: 1px solid transparent;
}
.nav-item .nav-ico { width: 20px; text-align: center; font-size: 15px; opacity: .9; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #F2ECE1; }
.nav-item.active { background: rgba(176,141,87,.18); color: #F5EAD7; border-color: rgba(176,141,87,.3); font-weight: 600; }

/* 三阶段分组导航 (OA v3.0) */
.nav-group { display: flex; flex-direction: column; }
.nav-group-head {
  display: flex; align-items: center; gap: 11px;
  padding: 10.5px 12px; border-radius: 10px;
  color: #E0D8C8; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: all .18s; border: 1px solid transparent; user-select: none;
}
.nav-group-head::after {
  content: '▸'; margin-left: auto; font-size: 11px; color: #A99F90;
  transition: transform .18s;
}
.nav-group.open > .nav-group-head::after { transform: rotate(90deg); }
.nav-group-head:hover { background: rgba(255,255,255,.06); color: #F2ECE1; }
.nav-sub {
  display: none; flex-direction: column; gap: 2px;
  padding: 3px 0 4px 8px; margin-left: 10px;
  border-left: 1px solid rgba(176,141,87,.18);
}
.nav-group.open > .nav-sub { display: flex; }
.nav-sub .nav-item {
  padding: 9px 10px 9px 14px; font-size: 13px; border-radius: 8px;
}
.nav-sub .nav-item .nav-ico { font-size: 14px; }

.sidebar-foot { border-top: 1px solid rgba(255,255,255,.09); padding-top: 14px; }
.wecom-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #C9BFAD; padding: 0 6px 8px; }
.wecom-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #7A7366; }
.wecom-status.on .dot { background: #58C28B; box-shadow: 0 0 8px rgba(88,194,139,.7); }
.version { font-size: 10.5px; color: #7E7463; padding: 0 6px; }

/* ================= 主区域 ================= */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; background: rgba(246,243,238,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: baseline; gap: 12px; }
#page-title { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.page-sub { font-size: 12.5px; color: var(--ink-3); }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 13px; width: 250px;
  box-shadow: 0 1px 2px rgba(35,32,27,.04);
}
.search-box .search-ico { color: var(--ink-3); font-size: 15px; }
.search-box input { border: none; outline: none; background: transparent; width: 100%; font-size: 13.5px; color: var(--ink); }
.search-box input::placeholder { color: var(--ink-3); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #8B5A2B, #B08D57);
  color: #fff; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(139,90,43,.3); cursor: pointer;
}

.view { flex: 1; overflow-y: auto; padding: 24px 28px 40px; }

/* ================= 按钮 ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--ink);
  border-radius: 10px; padding: 8px 16px; font-size: 13.5px; cursor: pointer;
  transition: all .16s; font-family: var(--font);
}
.btn:hover { border-color: var(--brand-2); color: var(--brand-2); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #F5EFE4; font-weight: 600; }
.btn-primary:hover { background: #332C24; border-color: #332C24; color: #fff; }
.btn-accent { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn-accent:hover { background: #7A4E25; }
.btn-danger { color: var(--red); border-color: #E8C9C4; }
.btn-danger:hover { background: #FBEEEC; border-color: var(--red); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ================= 卡片与统计 ================= */
.card {
  background: var(--bg-card); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { padding: 18px 20px; position: relative; overflow: hidden; }
.stat-card .stat-ico {
  position: absolute; right: 14px; top: 14px; font-size: 26px; opacity: .16;
}
.stat-label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: .5px; }
.stat-value small { font-size: 13px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.stat-foot { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.stat-foot .up { color: var(--green); }
.stat-foot .down { color: var(--red); }

.panel { background: var(--bg-card); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line-2); }
.panel-title { font-size: 15px; font-weight: 600; }
.panel-body { padding: 18px 20px; }
.panel-body.pad0 { padding: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ================= 表格 ================= */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/* ===== v2.8.81/82 小屏（iPad / ≤1366px）适配：长号与长备注不再逐字符竖排 =====
   🚨 背景（独立审计结论）：订单号归一化为 `{ourNo}-ZD…` 后由 13 字符涨到 21~30 字符，而
   `table.tbl td` **全局没有** `white-space` 规则（只有 `.tbl th` 有 nowrap）⇒ 长连字符串按连字符折行、
   行高被撑爆；`.fl-order-remark` 另带 `word-break: break-all` ⇒ 备注列**逐字符竖排**。
   ⚠️ v2.8.81 首版只覆盖订单明细表，且 `min-width:1080px` **小于**外层容器 `min-width:1400px`
   （views-finance-ledger.js:1367）⇒ 近于空操作、且 1180px 规则误伤了全局表格。**v2.8.82 按审计结论修正**。 */
.tbl-orderdetail { min-width: 1400px; }                        /* 与外层容器 min-width 对齐 ⇒ 真正转为横向滚动 */
.tbl-orderdetail td, .tbl-orderdetail th { white-space: nowrap; }
/* 长备注：去掉逐字符折行（v2.8.81 遗漏 —— 把「逐字符竖排」症状留在了表内） */
tr.fl-detail .fl-order-remark { word-break: normal; overflow-wrap: break-word; white-space: normal; }
/* 顶部筛选区：**769–1366px 区间此前完全无断点** ⇒ 按钮/下拉拥挤换行（基类 .panel-head 只在 ≤768 才 wrap） */
@media (max-width: 1366px) {
  .panel-head { flex-wrap: wrap; row-gap: 8px; }
  .fin-toolbar { flex-wrap: wrap; }
  .app .modal.wide { max-width: min(96vw, 1200px); }           /* 1366 下仍按 900px 封顶 ⇒ 表内列被压扁 */
}
@media (max-width: 1180px) {
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .tbl-orderdetail { font-size: 12.5px; }                      /* ⚠️ 只作用于订单明细，避免 v2.8.81 的全局副作用 */
  .tbl-orderdetail td, .tbl-orderdetail th { padding: 7px 9px; }
}
/* 弹窗横向溢出：改为可横向滚动，避免被 `.modal{overflow:hidden}` **静默裁切**（审计发现） */
.app .modal .modal-body { overflow-x: auto; }
.tbl th {
  text-align: left; padding: 11px 14px; font-size: 12px; color: var(--ink-3);
  font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: #FBF9F5; position: sticky; top: 0;
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:hover td { background: #FBF8F2; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.order-row-warn td { background: #FCEBEB; }
.tbl tr.order-row-warn:hover td { background: #F8D9D9 !important; }
.tbl th.sortable { cursor: pointer; user-select: none; transition: background .15s; }
.tbl th.sortable:hover { background: #F3EADB; color: var(--brand-2); }
.tbl th .sort-arrow { display: inline-block; margin-left: 5px; font-size: 11px; color: var(--ink-3); opacity: .55; font-weight: 400; }
.tbl th .sort-arrow.active { color: var(--brand-2); opacity: 1; font-weight: 700; }

/* 财务台账 - 订单明细备注高亮 */
.fl-order-remark {
  margin-top: 5px;
  padding: 5px 8px;
  background: #FDF6E3;
  border-left: 3px solid var(--amber);
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  max-width: 320px;
  white-space: normal;
  word-break: break-all;
  line-height: 1.5;
}

.clickable { transition: transform .12s, box-shadow .12s; }
.clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(35,32,27,.1); }
.funnel-row[data-stage]:hover { background: var(--bg-soft); border-radius: 8px; }
.rating-bar[data-rating]:hover { background: var(--bg-soft); border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.tbl th .row-check, .tbl td input.row-check { cursor: pointer; width: 16px; height: 16px; }
.td-main { font-weight: 600; }
.td-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* ================= 徽章 / 标签 ================= */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2.5px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.badge-gray { background: #F0EDE8; color: #6B6359; }
.badge-brown { background: #F3EADB; color: #8B5A2B; }
.badge-gold { background: #F7EEDD; color: #A67B2D; }
.badge-green { background: #E4F1E8; color: #2E7D4F; }
.badge-blue { background: #E5EDF5; color: #2F5E8E; }
.badge-red { background: #FAE9E6; color: #C0392B; }
.badge-violet { background: #EDE7F3; color: #6D4E8E; }
.badge-outline { background: transparent; border: 1px dashed var(--line); color: var(--ink-3); }

.grade-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  font-weight: 800; font-size: 14px; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.grade-S { background: linear-gradient(135deg, #D4A94E, #A67B2D); }
.grade-A { background: linear-gradient(135deg, #4E9E6F, #2E7D4F); }
.grade-B { background: linear-gradient(135deg, #5B87B4, #2F5E8E); }
.grade-C { background: linear-gradient(135deg, #A8A29A, #7C7569); }
.grade-V { background: linear-gradient(135deg, #D9715F, #B23A2B); }
.grade-none { background: #EFEAE1; color: #A49B8D; box-shadow: none; font-weight: 600; }

/* ================= 看板 ================= */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kanban-col {
  min-width: 252px; max-width: 252px; flex-shrink: 0;
  background: var(--bg-soft); border-radius: var(--radius);
  border: 1px solid var(--line-2);
}
.kanban-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; font-weight: 600; font-size: 13px;
}
.kanban-col-head .count { margin-left: auto; background: #fff; color: var(--ink-2); border-radius: 20px; padding: 0 9px; font-size: 11.5px; border: 1px solid var(--line); }
.kanban-col-body { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 9px; max-height: calc(100vh - 250px); overflow-y: auto; }
.kcard {
  background: var(--bg-card); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 12px 13px; cursor: pointer; box-shadow: 0 1px 3px rgba(35,32,27,.05);
  transition: all .15s;
}
.kcard:hover { box-shadow: var(--shadow); border-color: var(--accent); transform: translateY(-1px); }
.kcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcard-name { font-weight: 600; font-size: 13.5px; }
.kcard-info { font-size: 12px; color: var(--ink-2); margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-3); }

/* ================= 筛选工具栏 ================= */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar .select, .toolbar input[type=text] {
  border: 1px solid var(--line); background: var(--bg-card); border-radius: 9px;
  padding: 7px 11px; font-size: 13px; color: var(--ink); font-family: var(--font);
  outline: none;
}
.toolbar .select:focus, .toolbar input:focus { border-color: var(--brand-2); }
.toolbar .spacer { flex: 1; }
.seg {
  display: inline-flex; background: var(--bg-soft); border-radius: 10px; padding: 3px;
  border: 1px solid var(--line-2);
}
.seg button {
  border: none; background: transparent; padding: 6px 15px; border-radius: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; font-family: var(--font);
}
.seg button.active { background: var(--bg-card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(35,32,27,.1); }

/* ================= 表单 ================= */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-item label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }
.form-item label .req { color: var(--red); }
.form-item input, .form-item select, .form-item textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; font-family: var(--font);
  color: var(--ink); background: var(--bg-card); outline: none;
  transition: border .15s, box-shadow .15s;
}
.form-item input:focus, .form-item select:focus, .form-item textarea:focus {
  border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(139,90,43,.1);
}
.form-item input.readonly-field {
  background: var(--bg-soft); color: var(--ink-2); cursor: not-allowed;
}
.form-item textarea { min-height: 76px; resize: vertical; }
.form-item .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

/* ================= 模态框 ================= */
.modal-mask {
  position: fixed; inset: 0; background: rgba(28,24,18,.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  animation: fadeIn .18s ease;
}
.modal {
  background: var(--bg-card); border-radius: 18px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 720px; max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  animation: popIn .2s ease;
}
.modal.wide { max-width: 980px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line-2); }
.modal-title { font-size: 16.5px; font-weight: 700; }
.modal-close { border: none; background: var(--bg-soft); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.modal-close:hover { background: #E5DED3; }
.modal-body { padding: 22px 24px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 24px; border-top: 1px solid var(--line-2); background: #FBF9F5; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ================= Toast ================= */
#toast-root { position: fixed; top: 20px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--brand); color: #F5EFE4; border-radius: 12px;
  padding: 12px 20px; font-size: 13.5px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  animation: slideIn .25s ease; max-width: 380px;
}
.toast.success { background: #2E7D4F; }
.toast.error { background: #B23A2B; }
.toast .t-ico { font-size: 16px; }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } }

/* ================= 评级系统 ================= */
.rating-panel { display: grid; grid-template-columns: 320px 1fr; gap: 20px; }
@media (max-width: 1000px) { .rating-panel { grid-template-columns: 1fr; } }
.rating-dim { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; background: var(--bg-card); }
.rating-dim + .rating-dim { margin-top: 12px; }
.rating-dim-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.rating-dim-name { font-weight: 700; font-size: 14px; }
.rating-dim-weight { font-size: 11.5px; color: var(--ink-3); background: var(--bg-soft); border-radius: 20px; padding: 1.5px 9px; }
.rating-dim-head .veto { background: var(--red); color: #fff; font-size: 10.5px; border-radius: 20px; padding: 1.5px 8px; }
.score-options { display: flex; gap: 8px; flex-wrap: wrap; }
.score-opt {
  border: 1.5px solid var(--line); background: #fff; border-radius: 10px;
  padding: 8px 12px; cursor: pointer; text-align: center; min-width: 76px;
  transition: all .15s;
}
.score-opt:hover { border-color: var(--accent); }
.score-opt.active { border-color: var(--brand-2); background: var(--accent-soft); box-shadow: 0 0 0 2px rgba(139,90,43,.12); }
.score-opt .so-score { font-size: 17px; font-weight: 800; }
.score-opt .so-label { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.score-opt .so-grade { font-size: 10px; font-weight: 700; color: var(--ink-3); }

.rating-result {
  position: sticky; top: 0;
  background: linear-gradient(150deg, #2B241C, #4A3B28);
  color: #F2ECE1; border-radius: 14px; padding: 20px 22px;
}
.rating-result .rr-total { font-size: 46px; font-weight: 800; line-height: 1.1; }
.rating-result .rr-grade { font-size: 22px; font-weight: 800; margin-top: 2px; }
.rating-result .rr-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 14px; font-size: 12.5px; }
.rating-result .rr-detail b { font-weight: 700; color: #D8C4A0; }
.rating-result .rr-note {
  margin-top: 14px; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.25);
  border-radius: 9px; padding: 9px 12px; font-size: 12px; color: #E8DCC8;
  word-break: break-all; display: flex; align-items: center; gap: 8px;
}
.rating-result .rr-note .copy { margin-left: auto; cursor: pointer; color: #D8C4A0; font-size: 16px; flex-shrink: 0; }
.rating-result .rr-tip { margin-top: 12px; font-size: 11.5px; color: #B9AB94; }
.veto-warn { margin-top: 12px; background: rgba(192,57,43,.22); border: 1px solid rgba(230,120,100,.5); color: #FFD9D2; border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; }

/* ================= 时间线 ================= */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before {
  content: ''; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.tl-date { font-size: 12px; color: var(--ink-3); }
.tl-type { margin-left: 6px; }
.tl-content { margin-top: 4px; font-size: 13.5px; color: var(--ink); background: var(--bg-soft); border-radius: 9px; padding: 9px 13px; }
.tl-next { margin-top: 5px; font-size: 12px; color: var(--brand-2); }

/* ================= 空状态 ================= */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.empty .e-ico { font-size: 42px; opacity: .35; margin-bottom: 10px; }
.empty .e-title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }

/* ================= 详情抽屉 ================= */
.detail-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; }
@media (max-width: 1000px) { .detail-grid { grid-template-columns: 1fr; } }
.info-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.info-item .i-label { font-size: 11.5px; color: var(--ink-3); margin-bottom: 3px; }
.info-item .i-value { font-size: 14px; font-weight: 600; }

/* ================= 帮助/说明 ================= */
.doc-box { background: var(--bg-card); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.doc-box h3 { font-size: 15px; margin-bottom: 12px; }
.doc-box p, .doc-box li { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.doc-box ol, .doc-box ul { padding-left: 20px; }
.doc-box code {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 7px; font-size: 12.5px; color: var(--brand-2);
}
.doc-box .note { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 7px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }

/* 图表容器 */
.chart-box { position: relative; height: 260px; }
.funnel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.funnel-row .f-label { width: 62px; font-size: 12.5px; color: var(--ink-2); text-align: right; flex-shrink: 0; }
.funnel-row .f-bar-wrap { flex: 1; background: var(--bg-soft); border-radius: 7px; height: 26px; overflow: hidden; }
.funnel-row .f-bar { height: 100%; border-radius: 7px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: #fff; font-weight: 600; min-width: 24px; transition: width .5s; }
.funnel-row .f-val { width: 34px; font-weight: 700; font-size: 13px; }

/* 评级分布 - 水平条形 */
.rating-bars { display: flex; flex-direction: column; gap: 9px; }
.rating-bar { display: flex; align-items: center; gap: 10px; }
.rating-bar .rb-label { width: 76px; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.rating-bar .rb-track { flex: 1; background: var(--bg-soft); border-radius: 7px; height: 28px; overflow: hidden; }
.rating-bar .rb-fill { height: 100%; border-radius: 7px; display: flex; align-items: center; padding: 0 11px; min-width: 32px; transition: width .55s; }
.rating-bar .rb-fill span { font-size: 11.5px; color: #fff; font-weight: 700; white-space: nowrap; }
.rating-bar .rb-val { width: 30px; text-align: right; font-weight: 700; font-size: 13px; }

/* 月度趋势 - 双柱状图 */
.trend-chart { display: flex; gap: 12px; align-items: stretch; min-height: 240px; }
.trend-yaxis { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0 28px; width: 50px; font-size: 10.5px; color: var(--ink-3); text-align: right; flex-shrink: 0; }
.trend-cols { flex: 1; display: flex; gap: 18px; align-items: flex-end; padding-top: 8px; overflow-x: auto; }
.trend-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 64px; }
.trend-bars-stack { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; width: 100%; max-width: 86px; }
.trend-bar-track { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.trend-bar { width: 100%; border-radius: 5px 5px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 5px; min-height: 4px; transition: height .55s; position: relative; }
.trend-bar span { font-size: 10px; color: #fff; font-weight: 700; white-space: nowrap; }
.trend-bar.revenue { background: linear-gradient(180deg, #B17A45, #8B5A2B); }
.trend-bar.profit { background: linear-gradient(180deg, #4E9E6F, #2E7D4F); }
.trend-label { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.trend-legend { display: flex; gap: 24px; justify-content: center; padding-top: 12px; font-size: 12px; color: var(--ink-2); }
.trend-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

/* ========== 毛利率趋势图 ========== */
.margin-trend-chart { background: #FAF7F2; border-radius: var(--radius-sm); padding: 16px 18px; }
.margin-trend-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.margin-trend-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.margin-trend-avg-badge { font-size: 12.5px; color: var(--brand-2); background: #FDF8F0; padding: 4px 12px; border-radius: 20px; border: 1px solid #F0E0C8; }

/* ================= 在线更新 · 历史版本列表 ================= */
.upd-list {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  /* 美化滚动条 (WebKit) */
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}
.upd-list::-webkit-scrollbar { width: 6px; }
.upd-list::-webkit-scrollbar-track { background: transparent; }
.upd-list::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 3px; opacity: 0.5; }
.upd-list::-webkit-scrollbar-thumb:hover { background: var(--brand-2); }

.upd-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  margin-bottom: 8px; background: #FDFCF9; transition: border-color 0.15s, background 0.15s;
}
.upd-item:hover { border-color: var(--brand); background: #FFFAF0; }
.upd-item-main { flex: 1; min-width: 0; }
.upd-item-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.upd-version {
  font-weight: 700; font-size: 14px; color: var(--brand-2);
  background: #FDF8F0; padding: 2px 10px; border-radius: 12px;
  border: 1px solid #F0E0C8; letter-spacing: 0.3px;
}
.upd-time { font-size: 12px; color: var(--ink-2); }
.upd-size { font-size: 11.5px; color: var(--ink-3); background: #F5F1EA; padding: 1px 8px; border-radius: 8px; }
.upd-reason { font-size: 12px; margin-bottom: 6px; }
.upd-features {
  list-style: none; padding: 0; margin: 6px 0 6px 0;
  border-left: 2px solid var(--brand); padding-left: 10px;
}
.upd-features li {
  font-size: 12.5px; line-height: 1.65; color: var(--ink);
  position: relative; padding-left: 12px;
}
.upd-features li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
}
.upd-features-empty {
  font-size: 11.5px; color: var(--ink-3); font-style: italic; margin: 4px 0;
}
.upd-id { font-size: 10.5px; font-family: ui-monospace, Menlo, Consolas, monospace; margin-top: 4px; opacity: 0.7; }
.upd-rollback { flex-shrink: 0; align-self: center; }

/* 移动端：列表项纵向布局，按钮置底 */
@media (max-width: 768px) {
  .upd-list { max-height: 320px; }
  .upd-item { flex-direction: column; align-items: stretch; }
  .upd-rollback { align-self: flex-end; margin-top: 4px; }
}
.margin-trend-avg-badge b { font-weight: 800; }
.margin-trend-body { display: flex; gap: 10px; }
.margin-trend-yaxis { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0 28px; width: 42px; font-size: 10px; color: var(--ink-3); text-align: right; flex-shrink: 0; }
.margin-trend-bars { flex: 1; display: flex; align-items: flex-end; gap: 14px; position: relative; height: 170px; padding-bottom: 24px; overflow-x: auto; }
/* v2.9.21 小屏二批：重点客户分析三列卡片在窄屏收成一列（原为行内固定 3 列 ⇒ 窄屏挤压） */
.dash-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .dash-kpi-grid { grid-template-columns: 1fr; } }
.margin-avg-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--brand-2); z-index: 2; pointer-events: none; }
.margin-avg-label { position: absolute; right: 0; top: -18px; font-size: 9.5px; color: var(--brand-2); font-weight: 700; background: #FAF7F2; padding: 1px 5px; white-space: nowrap; }
.margin-trend-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 44px; max-width: 72px; }
.margin-trend-val { font-size: 11px; font-weight: 700; color: var(--ink-2); margin-bottom: 3px; }
.margin-trend-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; min-height: 0; justify-content: center; }
.margin-trend-bar { width: 36px; max-width: 100%; border-radius: 4px 4px 0 0; min-height: 6px; transition: height .45s; cursor: pointer; }
.margin-trend-bar:hover { opacity: .82; }
.margin-trend-bar.margin-high { background: linear-gradient(180deg, #4E9E6F, #2E7D4F); }
.margin-trend-bar.margin-mid { background: linear-gradient(180deg, #B07D2B, #8B6914); }
.margin-trend-bar.margin-low { background: linear-gradient(180deg, #D9715F, #C0392B); }
.margin-trend-month { font-size: 10.5px; color: var(--ink-3); margin-top: 5px; font-weight: 600; }
.margin-trend-foot { display: flex; gap: 18px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.margin-legend { font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.margin-li { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; flex-shrink: 0; }
.margin-li-h { background: linear-gradient(180deg, #4E9E6F, #2E7D4F); }
.margin-li-m { background: linear-gradient(180deg, #B07D2B, #8B6914); }
.margin-li-l { background: linear-gradient(180deg, #D9715F, #C0392B); }

/* 其他 */
.muted { color: var(--ink-3); }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb12 { margin-bottom: 12px; }
.link { color: var(--brand-2); cursor: pointer; font-weight: 600; }
.link:hover { text-decoration: underline; }
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; }
.wecom-banner {
  background: linear-gradient(120deg, #0E5E3A, #17825A); color: #EAF7F0;
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 18px;
}
.wecom-banner .wb-title { font-size: 17px; font-weight: 700; }
.wecom-banner .wb-sub { font-size: 12.5px; opacity: .85; margin-top: 3px; }

/* ================= 日程看板 ================= */
.sched-week-row {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 10px 12px;
}
.sched-day {
  flex: 1; text-align: center; padding: 8px 4px 14px;
  border-radius: 9px; cursor: pointer; position: relative;
  transition: all .15s ease; border: 2px solid transparent;
  user-select: none;
}
.sched-day:hover { background: rgba(139,90,43,.06); }
.sched-day-active { border-color: var(--brand-2); background: #FDF8F0; }
.sched-day-today { background: #FBF5EE; font-weight: 700; }
.sched-day-today.sched-day-active { background: #FDF3E4; border-color: var(--brand-2); }
.sched-day-past { opacity: .45; }
.sched-weekday { font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
.sched-num {
  font-size: 16px; font-weight: 600; color: var(--ink); position: relative;
}
.sched-count {
  position: absolute; top: -4px; right: -2px;
  min-width: 16px; height: 16px; line-height: 16px;
  background: var(--green); color: #fff; font-size: 10px;
  border-radius: 8px; padding: 0 4px; font-weight: 700;
}
.sched-day-today .sched-count { background: var(--brand-2); }

/* 待办列表 */
.sched-detail { margin-top: 10px; }
.sched-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
#sched-detail-title { font-weight: 600; font-size: 14px; }

.sched-list { display: grid; gap: 7px; min-height: 40px; }
.sched-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  background: #FAFAF7; border: 1px solid var(--line-2);
  transition: background .12s ease;
}
.sched-item:hover { background: #F5F2EC; }
.sched-item-type { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.sched-item-body { flex: 1; min-width: 0; }
.sched-item-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-item-desc { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-go-btn { flex-shrink: 0; font-size: 11.5px; padding: 4px 10px; }

/* 逾期条 */
.sched-overdue-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #FEF3F2; border: 1px solid #FADBD8; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 12px; font-size: 12.5px; color: var(--red);
}

/* 企微联动提示 */
.sched-wecom-hint {
  margin-top: 14px; padding: 8px 12px; border-radius: 8px;
  background: linear-gradient(120deg, #E8F5E9, #F1F8E9);
  border: 1px solid #C8E6C9; font-size: 11.5px; color: var(--green);
  text-align: center; opacity: .75; cursor: help;
}

/* 视图切换 tab */
.sched-view-tabs { display: inline-flex; background: var(--bg-soft); border-radius: 8px; padding: 3px; gap: 2px; }
.sched-tab {
  border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; padding: 5px 14px; border-radius: 6px; color: var(--ink-2);
  font-weight: 600; transition: all .15s ease; font-family: var(--font);
}
.sched-tab.active { background: #fff; color: var(--brand-2); box-shadow: 0 1px 3px rgba(35,32,27,.12); }

/* 月视图导航 */
.sched-month-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-bottom: 14px;
}
.sched-nav-btn {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 12.5px; padding: 5px 14px; border-radius: 8px; color: var(--ink-2);
  font-weight: 600; transition: all .15s ease; font-family: var(--font);
}
.sched-nav-btn:hover { border-color: var(--brand-2); color: var(--brand-2); background: #FDF8F0; }
.sched-month-range { font-size: 13.5px; font-weight: 700; color: var(--ink); min-width: 210px; text-align: center; }

/* 单月网格（居中, 限定宽度避免格子过大） */
.sched-months { max-width: 460px; margin: 0 auto; }
.sched-month {
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 12px 12px 14px;
  border: 1px solid var(--line-2);
}
.sched-month-title { font-size: 13.5px; font-weight: 700; text-align: center; margin-bottom: 10px; color: var(--ink); }
.sched-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sched-mwk {
  text-align: center; font-size: 10.5px; color: var(--ink-3); padding: 3px 0; font-weight: 600;
}
.sched-mday {
  position: relative; aspect-ratio: 1 / 1; min-height: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; border-radius: 6px; cursor: pointer; color: var(--ink);
  transition: all .12s ease; user-select: none; border: 1px solid transparent;
}
.sched-mday:hover { background: rgba(139,90,43,.08); }
.sched-mday.blank { cursor: default; background: transparent; }
.sched-mday.blank:hover { background: transparent; }
.sched-mday.today { background: #FBF0E0; font-weight: 700; color: var(--brand-2); }
.sched-mday.has { background: #EAF6EE; }
.sched-mday.has:hover { background: #DCEFE3; }
.sched-mday.sel { border-color: var(--brand-2); box-shadow: 0 0 0 2px rgba(139,90,43,.25); }
.sched-mnum { line-height: 1; }
.sched-mdot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px;
  background: var(--green); color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 8px; text-align: center;
}
.sched-mday.today .sched-mdot { background: var(--brand-2); }

/* 窄屏适配：单月日历宽度自适应 */
@media (max-width: 900px) {
  .sched-months { max-width: 100%; }
}

/* ================= 移动端适配（≤768px） ================= */
.m-tabbar { display: none; }

@media (max-width: 768px) {
  body { font-size: 15px; }

  /* 隐藏侧边栏，改用底部导航 */
  .sidebar { display: none; }
  .app { height: 100dvh; flex-direction: column; }

  .topbar {
    padding: 12px 14px;
    position: sticky; top: 0; z-index: 40;
    background: rgba(246,243,238,.96);
  }
  .topbar-left { gap: 8px; }
  #page-title { font-size: 17px; }
  .page-sub { display: none; }
  .topbar-right { gap: 8px; }
  .search-box { width: 150px; padding: 6px 10px; }
  .search-box input { font-size: 13px; }
  .btn-add-label { display: none; }  /* 手机端按钮只显示 + 号 */

  .view { padding: 14px 12px 84px; }  /* 底部预留 tabbar 空间 */

  /* 底部导航 */
  .m-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 0 7px; color: var(--ink-3); text-decoration: none;
    font-size: 10.5px; cursor: pointer;
  }
  .m-tab .m-tab-ico { font-size: 19px; line-height: 1; }
  .m-tab.active { color: var(--brand-2); font-weight: 700; }
  .m-tab.active .m-tab-ico { transform: translateY(-1px); }

  /* 统计卡片单列 */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 22px; }
  .stat-label { font-size: 11.5px; }

  .panel-head { padding: 12px 14px; }
  .panel-body { padding: 12px 14px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 12px; }

  /* 表格在手机上可横向滚动 */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td { padding: 10px 10px; font-size: 13px; }

  /* 模态框全屏化 */
  .modal { width: 100% !important; max-width: 100% !important; height: 100%; max-height: 100%; border-radius: 0 !important; display: flex; flex-direction: column; }
  .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 90px; }
  .modal-foot { padding-bottom: env(safe-area-inset-bottom); }

  /* 按钮增大点击区域 */
  .btn { padding: 10px 18px; font-size: 14.5px; }
  .btn-sm { padding: 8px 14px; font-size: 13.5px; }

  /* 表单输入加大 */
  input, select, textarea { font-size: 16px !important; }  /* 防iOS自动缩放 */

  .card { border-radius: 12px; }
}

/* ================= 企业微信 / 移动端 WebView 专项 ================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
}
a { -webkit-tap-highlight-color: transparent; }
input, select, textarea, button { font-family: var(--font); }

@media (max-width: 768px) {
  /* 汉堡菜单可见 */
  .m-burger { display: inline-flex; align-items: center; justify-content: center; }

  /* 顶栏在手机上保持横向：左汉堡+标题，右操作 */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); }
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .topbar-right { width: auto; flex-wrap: nowrap; gap: 8px; }
  .search-box { display: none; }
  .btn-primary#btn-add-customer { padding: 7px 11px; font-size: 0; }
  .btn-primary#btn-add-customer::before { content: '✚'; font-size: 16px; }
  #current-user { flex: 0 0 auto; margin-left: 0; }

  /* 客户页工具栏：搜索全宽、筛选紧凑、可换行 */
  .toolbar { gap: 8px; }
  .toolbar #cf-q, .toolbar input[type=text] { flex: 1 1 100%; width: 100% !important; font-size: 16px; }
  .toolbar .select, .toolbar select { font-size: 14px; padding: 9px 10px; flex: 1 1 44%; min-width: 120px; }
  .toolbar .seg { flex-wrap: wrap; }
  .toolbar button { font-size: 13.5px; padding: 9px 12px; }

  /* 表格触摸区 */
  .tbl th, .tbl td { padding: 12px 12px; font-size: 13.5px; vertical-align: middle; }
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* 统一触摸目标最小高度（≥40px，手指友好） */
  .btn, .nav-item, .m-tab, .seg button, .select, .toolbar button { min-height: 40px; }

  /* 模态框头部避开刘海，底部预留安全区 */
  .modal-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .modal-body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

  /* 面板间距收紧 */
  .card, .panel { margin-bottom: 14px; }
  .mt16 { margin-top: 12px; }
}

/* ========== 八大台账 (OA 批次2) ========== */
.ledger-box { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #FDFBF8; }
.ledger-box:last-child { margin-bottom: 0; }
.ledger-fields { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink); }
.ledger-field .muted { margin-right: 4px; }

.nav-item.nav-item-disabled { color: #7A7366; opacity: 0.65; cursor: not-allowed; }
.nav-item.nav-item-disabled:hover { background: rgba(255,255,255,.02); color: #7A7366; }
.nav-item .nav-badge { margin-left: auto; font-size: 10px; padding: 1.5px 6px; border-radius: 8px; background: rgba(255,255,255,.08); color: #9A9078; font-weight: 500; }
/* v2.8.98 置顶：使用教程（无 data-view ⇒ 对所有角色常显；外链新窗口打开） */
.nav-item.nav-item-pinned {
  color: #EBD9B4; background: rgba(176,141,87,.13);
  border-color: rgba(176,141,87,.30); margin-bottom: 8px; font-weight: 600;
}
.nav-item.nav-item-pinned:hover { background: rgba(176,141,87,.24); color: #FFF6E4; }
.drawer-item.drawer-item-pinned {
  color: #EBD9B4; background: rgba(176,141,87,.13);
  border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 600;
}

/* ========== 评级工作台客户列表选中态 ========== */
.rt-cust.active { background: var(--accent-soft) !important; }
.rt-cust.active:hover { background: #EBE0CC !important; }
/* ========== 移动端抽屉导航 (OA v1.7.1) ========== */
.m-burger { display: none; background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--ink); padding: 4px 10px 4px 0; cursor: pointer; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; min-width: 260px; background: var(--brand); color: #EFE9DF; z-index: 61; transform: translateX(-100%); transition: transform .22s ease; display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 18px 16px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); }
.drawer-head .brand { display: flex; align-items: center; gap: 11px; padding: 0; }
.drawer-close { background: transparent; border: 1px solid rgba(255,255,255,.18); color: #EFE9DF; width: 34px; height: 34px; border-radius: 50%; font-size: 14px; cursor: pointer; }
.drawer-close:active { background: rgba(255,255,255,.08); }
.drawer-nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 20px; }
.drawer-nav::-webkit-scrollbar { width: 4px; }
.drawer-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.drawer-group { padding: 8px 0; }
.drawer-group-head { padding: 10px 18px 6px; font-size: 11px; font-weight: 600; color: #9A9078; letter-spacing: 1.5px; text-transform: uppercase; }
.drawer-group-items { display: flex; flex-direction: column; gap: 2px; }
.drawer-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #C9BFAD; text-decoration: none; font-size: 15px; cursor: pointer; border-left: 3px solid transparent; min-height: 44px; }
.drawer-item:active { background: rgba(255,255,255,.06); }
.drawer-item.active { background: rgba(176,141,87,.18); color: #F5EAD7; border-left-color: var(--accent); font-weight: 600; }
.drawer-item .drawer-ico { font-size: 17px; width: 22px; text-align: center; }
.drawer-foot { border-top: 1px solid rgba(255,255,255,.09); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #A99F90; }
.drawer-foot .wecom-status { padding: 0; }
.drawer-foot .version { padding: 0; }
body.drawer-open { overflow: hidden; }

/* ========== 移动端分组 sheet (v1.8.1: 底部 tab 弹出的子菜单) ========== */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 64; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sheet-overlay.show { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.18); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; max-height: 78vh; padding-bottom: env(safe-area-inset-bottom); }
.sheet.show { transform: translateY(0); }
.sheet-grip { width: 44px; height: 4px; border-radius: 4px; background: rgba(0,0,0,.18); margin: 8px auto 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 10px; border-bottom: 1px solid var(--line); }
.sheet-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.sheet-close { background: transparent; border: 1px solid var(--line); color: var(--ink-3); width: 32px; height: 32px; border-radius: 50%; font-size: 13px; cursor: pointer; }
.sheet-close:active { background: var(--accent-soft); }
.sheet-items { padding: 12px 12px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sheet-empty { padding: 36px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }
.sheet-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--ink); cursor: pointer; min-height: 88px; transition: transform .12s, background .12s, border-color .12s; user-select: none; -webkit-tap-highlight-color: transparent; }
.sheet-item:active { transform: scale(.97); background: var(--accent-soft); border-color: var(--accent); }
.sheet-item.active { background: var(--accent-soft); border-color: var(--accent); color: var(--brand); font-weight: 600; }
.sheet-item-ico { font-size: 28px; line-height: 1; }
.sheet-item-label { font-size: 13.5px; text-align: center; }

/* 底部 tab 新分组样式 (略大图标) */
@media (max-width: 768px) {
  .m-tab .m-tab-ico { font-size: 20px; }
  .m-tab .m-tab-txt { font-size: 11px; }
  .m-tabbar { padding-bottom: env(safe-area-inset-bottom); }
}

/* ================= 角色待办工作台 ================= */
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wl-bucket { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.wl-bucket-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.wl-bucket-head:hover { background: var(--bg-soft); }
.wl-ico { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.wl-label { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.wl-count { margin-left: 2px; color: #fff; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.wl-go { margin-left: auto; font-size: 12px; color: var(--brand-2); white-space: nowrap; }
.wl-items { padding: 6px 10px 10px; display: flex; flex-direction: column; }
.wl-item { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; }
.wl-item:hover { background: var(--bg-soft); }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wl-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.wl-sub { font-size: 11.5px; color: var(--ink-3); }
.wl-meta { margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; padding-left: 8px; }
.wl-empty { font-size: 12px; padding: 6px; text-align: center; }

/* ================= 超管/高管 岗位看板切换器 ================= */
.role-switch {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px;
  background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 12px;
}
.role-switch-label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-right: 2px; }
.role-switch-btn {
  font-size: 13px; padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--bg-card); color: var(--ink-2);
  cursor: pointer; transition: all .15s ease; font-weight: 600; white-space: nowrap;
}
.role-switch-btn:hover { border-color: var(--brand-2); color: var(--brand-2); }
.role-switch-btn.active {
  background: var(--brand-2); border-color: var(--brand-2); color: #fff;
  box-shadow: 0 2px 8px rgba(139,90,43,.28);
}

/* ================= 售后台账移动端适配 ================= */
.as-mobile-wrap { display: none; }
.as-desktop-wrap { display: block; }

@media (max-width: 768px) {
  .as-desktop-wrap { display: none !important; }
  .as-mobile-wrap { display: block !important; }

  /* 售后台账工具栏：搜索框独占一行，按钮紧凑换行 */
  .panel-head .ledger-filter-sel,
  .panel-head #ledger-kw,
  .panel-head .btn-sm,
  .panel-head .seg {
    font-size: 13px;
    padding: 7px 9px;
  }
  .panel-head #ledger-kw { flex: 1 1 100%; max-width: none; min-width: 0; margin-bottom: 4px; }

  /* 售后台账卡片 */
  .as-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(35,32,27,.04);
  }
  .as-mobile-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
  }
  .as-mobile-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }
  .as-mobile-no {
    font-size: 12px;
  }
  .as-mobile-stats {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 10px;
  }
  .as-mobile-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    min-width: 0;
  }
  .as-mobile-stat .muted { font-size: 11px; }
  .as-mobile-stat b {
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .as-mobile-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .as-mobile-progress .as-m-dot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ink-2);
  }
  .as-mobile-progress .as-m-dot span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }
  .as-mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
  }
  .as-mobile-actions .link {
    padding: 6px 2px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  .as-mobile-detail {
    margin: -6px 0 12px;
    background: #FDFBF8;
    border: 1px solid var(--line-2);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 8px 12px;
  }
  /* 移动端展开的问题卡片允许换行 */
  .as-mobile-detail .as-issue-card {
    flex-wrap: wrap;
    gap: 8px;
  }
  .as-mobile-detail .as-issue-card > div:first-child {
    flex: 1 1 100% !important;
    max-width: none;
  }
  .as-mobile-detail .as-issue-card > div:last-child {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* ================= 通用台账(销售/设计/安装/合同)移动端适配 ================= */
.ledger-mobile-wrap { display: none; }
.ledger-desktop-wrap { display: block; }

@media (max-width: 768px) {
  .ledger-desktop-wrap { display: none !important; }
  .ledger-mobile-wrap { display: block !important; }

  /* 通用台账卡片 */
  .ledger-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(35,32,27,.04);
  }
  .ledger-mobile-card .lm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .ledger-mobile-card .lm-check {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .ledger-mobile-card .lm-check input { width: 18px; height: 18px; }
  .ledger-mobile-card .lm-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ledger-mobile-card .lm-no {
    font-size: 12px;
    color: var(--ink-3);
    flex-shrink: 0;
  }
  .ledger-mobile-card .lm-body {
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    padding: 8px 0;
    margin-bottom: 10px;
  }
  .ledger-mobile-card .lm-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    font-size: 13px;
  }
  .ledger-mobile-card .lm-k {
    color: var(--ink-3);
    flex-shrink: 0;
    width: 72px;
  }
  .ledger-mobile-card .lm-v {
    color: var(--ink);
    flex: 1;
    min-width: 0;
    text-align: right;
    word-break: break-word;
  }
  .ledger-mobile-card .lm-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
  }
  .ledger-mobile-card .lm-actions .link {
    padding: 6px 2px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  .ledger-mobile-card .dlv-mobile-detail {
    margin: -6px 0 10px;
    background: #FDFBF8;
    border: 1px solid var(--line-2);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 8px 12px;
  }
}

/* ================= 财务台账移动端适配 ================= */
.fl-mobile-wrap { display: none; }
.fl-desktop-wrap { display: block; }

@media (max-width: 768px) {
  .fl-desktop-wrap { display: none !important; }
  .fl-mobile-wrap { display: block !important; }

  .fl-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(35,32,27,.04);
  }
  .fl-mobile-card .fl-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .fl-mobile-card .fl-check { display: inline-flex; align-items: center; flex-shrink: 0; }
  .fl-mobile-card .fl-check input { width: 18px; height: 18px; }
  .fl-mobile-card .fl-name { font-size: 15px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }
  .fl-mobile-card .fl-no { font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
  .fl-mobile-card .fl-body {
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    padding: 8px 0;
    margin-bottom: 10px;
  }
  .fl-mobile-card .fl-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 13px; }
  .fl-mobile-card .fl-k { color: var(--ink-3); flex-shrink: 0; width: 78px; }
  .fl-mobile-card .fl-v { color: var(--ink); flex: 1; min-width: 0; text-align: right; word-break: break-word; }
  .fl-mobile-card .fl-v.neg { color: var(--red); }
  .fl-mobile-card .fl-v.pos { color: var(--green); }
  .fl-mobile-card .fl-unlinked { margin-top: 6px; }
  .fl-mobile-card .fl-actions { display: flex; align-items: center; gap: 12px; font-size: 13px; }
  .fl-mobile-card .fl-actions .btn { padding: 6px 4px; min-height: 32px; }
  .fl-mobile-card .fl-order-detail { margin: -6px 0 10px; background: #FDFBF8; border: 1px solid var(--line-2); border-top: none; border-radius: 0 0 12px 12px; padding: 8px 12px; }
}

/* ================= 评级台账移动端适配 ================= */
.rt-mobile-wrap { display: none; }
.rt-desktop-wrap { display: block; }

@media (max-width: 768px) {
  .rt-desktop-wrap { display: none !important; }
  .rt-mobile-wrap { display: block !important; }

  .rt-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(35,32,27,.04);
  }
  .rt-mobile-card .rt-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .rt-mobile-card .rt-name { font-size: 15px; font-weight: 700; color: var(--ink); }
  .rt-mobile-card .rt-no { font-size: 12px; color: var(--ink-3); }
  .rt-mobile-card .rt-body { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 8px 0; margin-bottom: 10px; }
  .rt-mobile-card .rt-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
  .rt-mobile-card .rt-k { color: var(--ink-3); flex-shrink: 0; width: 56px; }
  .rt-mobile-card .rt-v { color: var(--ink); flex: 1; min-width: 0; text-align: right; }
  .rt-mobile-card .rt-actions { display: flex; align-items: center; gap: 12px; font-size: 13px; }
  .rt-mobile-card .rt-actions .btn { padding: 6px 4px; min-height: 32px; }
}

/* ================= 台账工具栏移动端通用适配(所有台账) ================= */
@media (max-width: 768px) {
  .panel-head { flex-wrap: wrap; }
  .panel-head .ledger-filter-sel,
  .panel-head select,
  .panel-head .btn-sm,
  .panel-head .seg {
    font-size: 13px;
    padding: 7px 9px;
  }
  .panel-head #ledger-kw {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    margin-bottom: 4px;
  }
  .panel-head .ledger-filter-sel {
    flex: 1 1 auto;
    min-width: 104px;
  }
  .panel-head .seg {
    flex: 1 1 100%;
    display: flex;
  }
  .panel-head .seg button {
    flex: 1;
  }
  .panel-head .flex {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .panel-head .flex .btn-sm {
    flex: 1 1 auto;
  }

  /* ================= 移动端通用触控按钮(所有台账) ================= */
  .m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--ink);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .m-btn:active { transform: scale(0.97); background: var(--bg-soft); }
  .m-btn-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
  .m-btn-primary:active { filter: brightness(0.92); }
  .m-btn-danger { border-color: #E8C9C4; background: #FDF5F4; color: #C0392B; }
  .m-btn-danger:active { background: #F9EAE8; }
  .m-btn-success { border-color: #B8D4A8; background: #F4FAF1; color: #2E7D4F; }
  .m-btn-success:active { background: #E8F3E3; }
  .m-btn-ghost { border-color: transparent; background: transparent; color: var(--brand-2); }
  .m-btn-ghost:active { background: var(--accent-soft); }
  .m-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .m-btn-row .m-btn { flex: 0 1 auto; }
  .m-btn-row.full .m-btn { flex: 1 1 0; }

  /* 升级现有移动端卡片操作区 */
  .ledger-mobile-card .lm-actions,
  .fl-mobile-card .fl-actions,
  .rt-mobile-card .rt-actions,
  .as-mobile-card .as-mobile-actions {
    gap: 8px;
    flex-wrap: wrap;
  }
  .ledger-mobile-card .lm-actions .link,
  .as-mobile-card .as-mobile-actions .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--brand-2);
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
  }
  .ledger-mobile-card .lm-actions .link:active,
  .as-mobile-card .as-mobile-actions .link:active { background: var(--bg-soft); transform: scale(0.97); }
  .as-mobile-card .as-mobile-actions .link[data-as-seal] { border-color: #E8C9C4; background: #FDF5F4; color: #C0392B; }
  .as-mobile-card .as-mobile-actions .link[data-as-unseal] { border-color: #B8D4A8; background: #F4FAF1; color: #2E7D4F; }
  .fl-mobile-card .fl-actions .btn,
  .rt-mobile-card .rt-actions .btn {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
  }

  /* 财务台账订单明细卡片 */
  .fl-order-mobile-card {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(35,32,27,.04);
  }
  .fl-order-mobile-card .fl-om-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .fl-order-mobile-card .fl-om-head input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; }
  .fl-order-mobile-card .fl-om-no { font-family: monospace; font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
  .fl-order-mobile-card .fl-om-body {
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    padding: 8px 0;
    margin-bottom: 10px;
  }
  .fl-order-mobile-card .fl-om-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 13px; }
  .fl-order-mobile-card .fl-om-k { color: var(--ink-3); flex-shrink: 0; width: 78px; }
  .fl-order-mobile-card .fl-om-v { color: var(--ink); flex: 1; min-width: 0; text-align: right; word-break: break-word; }
  .fl-order-mobile-card .fl-om-v.neg { color: var(--red); }
  .fl-order-mobile-card .fl-om-v.pos { color: var(--green); }
  .fl-order-mobile-card .fl-om-remark {
    font-size: 12px;
    color: var(--ink-2);
    background: #FDFBF8;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 6px;
    word-break: break-all;
  }
  .fl-order-mobile-card .fl-om-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .fl-order-mobile-card .fl-om-actions .m-btn { flex: 1 1 auto; }
}

/* ============================================================
   响应式适配 v2.6.64
   ① 笔记本 12-14 英寸(约1201-1536px)：收紧留白、控件不拥挤，信息完整不删减
   ② iPad/平板(769-1024px)：侧边栏折叠为抽屉、多列改2列、表格横向滚动、触控目标放大
   ③ 手机端(≤768px)体验补强
   ============================================================ */

/* ---------- ① 笔记本 (1201-1536px) ---------- */
@media (min-width: 1201px) and (max-width: 1536px) {
  .sidebar { width: 200px; padding: 16px 12px; }
  .topbar { padding: 13px 22px; }
  #page-title { font-size: 18.5px; }
  .view { padding: 18px 22px 36px; }

  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 13px; margin-bottom: 18px; }
  .stat-card { padding: 15px 17px; }
  .stat-value { font-size: 25px; }

  .panel-head { padding: 13px 17px; }
  .panel-body { padding: 15px 17px; }

  table.tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 10px 11px; }

  .toolbar { gap: 8px; margin-bottom: 14px; }
  .toolbar .select, .toolbar input[type=text] { padding: 6px 10px; font-size: 12.5px; }
  .btn { padding: 7px 14px; font-size: 13px; }
  .btn-sm { padding: 5px 10px; font-size: 12px; }
  .search-box { width: 210px; }

  .kanban-col { min-width: 236px; max-width: 236px; }
  .kanban-col-body { max-height: calc(100vh - 230px); }

  .modal { max-width: 680px; }
  .modal.wide { max-width: 900px; }
  .rating-panel { grid-template-columns: 280px 1fr; }
}

/* ---------- ② iPad / 平板 (769-1024px) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 侧边栏折叠：隐藏常驻侧栏，改用顶栏汉堡 → 抽屉导航（复用移动端 drawer） */
  .sidebar { display: none; }
  .m-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 22px; }
  .drawer { width: 78%; max-width: 330px; }
  .drawer-item { min-height: 48px; font-size: 15px; }

  .topbar {
    padding: 12px 18px;
    position: sticky; top: 0; z-index: 40;
    background: rgba(246,243,238,.96);
  }
  .topbar-left { gap: 10px; }
  #page-title { font-size: 18px; }
  .view { padding: 16px 18px 32px; }
  .search-box { width: 200px; }

  /* 多列改为 2 列排布 */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-2 > *, .grid-3 > * { min-width: 0; }
  .wl-grid { grid-template-columns: 1fr 1fr; }
  .info-list { grid-template-columns: 1fr 1fr; }
  /* 内容型双栏在平板上单列更易读 */
  .rating-panel, .detail-grid { grid-template-columns: 1fr; }

  /* 表格自动横向滚动 + 触控友好的行高 */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td { padding: 12px 12px; font-size: 13.5px; }
  .tbl th .row-check, .tbl td input.row-check { width: 20px; height: 20px; }

  /* 按钮/输入框放大便于触控 */
  .btn { padding: 10px 18px; font-size: 14px; min-height: 42px; }
  .btn-sm { padding: 8px 13px; font-size: 13px; min-height: 38px; }
  .toolbar .select, .toolbar input[type=text] { padding: 9px 12px; font-size: 14px; min-height: 42px; }
  .form-item input, .form-item select, .form-item textarea { padding: 10px 12px; font-size: 15px; }
  input, select, textarea { font-size: 15px; }
  .seg { padding: 4px; }
  .seg button { padding: 8px 16px; font-size: 13.5px; min-height: 40px; }
  .toolbar { gap: 10px; }

  /* 看板横向滑动 */
  .kanban { -webkit-overflow-scrolling: touch; }
  .kanban-col { min-width: 238px; max-width: 238px; }
  .kcard { padding: 13px 14px; }

  /* 模态框：近全屏、底栏按钮加宽 */
  .modal-mask { padding: 14px; }
  .modal { max-width: none; width: min(94vw, 860px); max-height: 94vh; }
  .modal.wide { width: 96vw; }
  .modal-body { padding: 18px 20px; }
  .modal-foot .btn { flex: 1 1 auto; min-height: 44px; }

  /* 待办工作台触控 */
  .wl-item { padding: 9px 8px; min-height: 42px; }
  .role-switch-btn { padding: 8px 16px; min-height: 40px; }
}

/* ---------- ③ 手机端体验补强 (≤768px) ---------- */
@media (max-width: 768px) {
  /* 模态框底栏按钮平铺，避免小按钮难点中 */
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 calc(50% - 10px); min-height: 44px; }
  /* Toast 居中全宽，避免右侧被截断 */
  #toast-root { left: 12px; right: 12px; top: 12px; }
  .toast { max-width: 100%; }
  /* 看板列稍宽，滑动浏览更舒适 */
  .kanban-col { min-width: 72vw; max-width: 72vw; }
  .kanban { -webkit-overflow-scrolling: touch; }
}
/* ===== v2.6.97 产品顾问A/B/C·产品助理 行内选择 pill 化 =====
   未分配: 浅灰斜体等宽 null(虚线框); 已分配: 按列着色圆角 pill; 角色不符: 红色警示 pill */
.adv-pill {
  -webkit-appearance: none; appearance: none;
  border: 1px solid transparent; border-radius: 999px;
  padding: 2px 17px 2px 10px; font-size: 12px; line-height: 1.5;
  width: 92px; max-width: 100%; cursor: pointer; outline: none;
  background-color: transparent; color: var(--ink-2); font-weight: 600;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><path d="M0 0l4 5 4-5z" fill="%239A9185"/></svg>');
  background-repeat: no-repeat; background-position: right 6px center; background-size: 8px 5px;
  text-overflow: ellipsis; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.adv-pill:hover { border-color: var(--line); box-shadow: 0 1px 3px rgba(35,32,27,.06); }
.adv-pill:focus { border-color: var(--accent); }
.adv-pill.is-empty {
  color: var(--ink-3); font-style: italic; font-weight: 400;
  font-family: Consolas, "Courier New", monospace;
  border: 1px dashed var(--line); background-image: none; padding: 2px 10px;
}
.adv-pill.is-mismatch { color: #fff; background-color: var(--red); border-color: var(--red); }
.adv-pill.adv-a  { color: #2F5E8E; background-color: #EEF4FA; border-color: #C9DAEC; }
.adv-pill.adv-b  { color: #6D4FA1; background-color: #F3F0FA; border-color: #DCD2EE; }
.adv-pill.adv-c  { color: #B4690E; background-color: #FBF3E6; border-color: #EFDCC0; }
.adv-pill.adv-as { color: #0F7B6C; background-color: #EAF6F3; border-color: #C4E4DD; }

/* v2.6.109 各岗位激励未分配显示为空(下拉选项中仍保留"未分配"文字) */
.fl-role-assign.fl-as-empty { color: transparent; }
.fl-role-assign.fl-as-empty option { color: #333; }

/* ================= v2.8.50 用户需求②③：附件名 / 明细不撑行高 + 跳转高亮 ================= */

/* ③ 附件名（售后照片等）：名称过长时**单行省略**，不再把列表行撑成两行 —— 列表行高恒定。
   行内 flex：名称占满剩余宽度并省略，操作按钮保持原宽（悬停 title 可看全名）。 */
.as-att-row { display: flex !important; align-items: center; gap: 6px; min-height: 20px; line-height: 20px; }
.as-att-row > span.link:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.as-att-row > span.link + span.link { flex: 0 0 auto; white-space: nowrap; }
/* 兜底：任何显式挂 .as-att-name 的长附件名同样单行省略 */
.as-att-name { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 各台账 / 客户详情附件名统一单行省略（.att-nm）—— 长名不再撑高所在行 */
.att-nm { flex: 1 1 auto; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-att-nm, .fl-att-list .att-nm { flex: 1 1 auto; min-width: 0; }

/* ② 订单完结页「订单明细」列：单元格固定行高，内容在格内换行并可滚动 ⇒ 各行行高一致（不随字数变化） */
.sc-orders-tbl { table-layout: auto; }
.sc-orders-tbl > tbody > tr > td { vertical-align: top; }
.sc-orders-tbl td.sc-od-cell { height: 96px; padding: 6px 8px; }
.sc-od-box {
  max-height: 96px; overflow: auto; white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
}
.sc-od-row { display: flex; gap: 6px; align-items: flex-start; }
.sc-od-row + .sc-od-row { margin-top: 1px; }
.sc-od-k { flex: 0 0 auto; color: var(--ink-3); min-width: 62px; }
.sc-od-v { flex: 1 1 auto; min-width: 0; }
.sc-od-issue { padding-left: 2px; }
.sc-goto-order { font-family: monospace; font-weight: 600; }

/* 跳转定位高亮（订单 / 客户行） */
.fl-jump-hl { animation: flJumpHl 2.6s ease-out 1; }
@keyframes flJumpHl {
  0%   { background-color: #FFE9A8; box-shadow: inset 3px 0 0 0 var(--accent); }
  60%  { background-color: #FFF6DC; box-shadow: inset 3px 0 0 0 var(--accent); }
  100% { background-color: transparent; box-shadow: none; }
}

/* ============================================================================
   v2.8.85 · 前端可用性与视觉专项（UX 审计整改）
   ----------------------------------------------------------------------------
   🚨 纪律：本段**纯追加**（A083 只加不改）—— 不修改上方任何既有声明，
      只用「同选择器后置覆盖」与「新增 token / 工具类」生效。
      ⇒ 删掉本段即**逐字节**回到 v2.8.84 的视觉表现（可回滚性自证）。
   🚨 每条规则都对应审计中的一条**带证据**的问题（见交付报告 §2）。
   ============================================================================ */

/* ---- 0. 设计刻度：此前全站为「各处手写数值」，同一视觉意图有 3~5 种取值 ---- */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --tap: 40px;            /* 触控最小命中尺寸（HIG 44 / Material 48，取折中；原 .btn-sm 仅 30px） */
  --page-max: 1760px;     /* 大屏内容上限（原实现无上限 ⇒ 2K/4K 屏无限拉伸） */
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--brand-2);
}

/* ---- 1. 键盘可达性：全站可见焦点环（原状：**只有输入框**有 :focus，按钮/链接/表头全无） ---- */
.btn:focus-visible, .m-btn:focus-visible, a:focus-visible, [role="button"]:focus-visible,
.sheet-item:focus-visible, .m-tab:focus-visible, .modal-close:focus-visible,
.tbl th.sortable:focus-visible, input[type="checkbox"]:focus-visible, .adv-pill:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: 10px;
}
.btn:focus-visible, .m-btn:focus-visible { position: relative; z-index: 1; }

/* ---- 2. 按钮：统一视觉高度 ＋ 触控命中 ---- */
.btn { min-height: 36px; }                       /* 原为 8px*2 + 13.5*1.55 ≈ 37 且各处不一 */
.btn-sm { min-height: 30px; padding: 5px 10px; }
@media (pointer: coarse), (max-width: 768px) {
  .btn, .m-btn { min-height: var(--tap); }        /* 手机上不再出现 30px 的小目标 */
  .btn-sm { min-height: 36px; padding: 8px 12px; }
  .tbl th .row-check, .tbl td input.row-check { width: 18px; height: 18px; }
}

/* ---- 3. 行高：收紧密集表格（原 11px 纵向内边距 ⇒ 单行 ≈ 41px，一屏仅约 16 行） ---- */
.tbl th { padding: 9px 12px; }
.tbl td { padding: 9px 12px; }
@media (max-width: 1366px) { .tbl th, .tbl td { padding: 7px 10px; } }

/* ---- 4. 空值（`—`）不再与正文抢注意力（原 .muted 用 --ink-3#9A9185，与次要文字同阶） ---- */
.tbl td .muted { color: #BCB4A9; }
.tbl td.is-empty { padding-top: 6px; padding-bottom: 6px; }
/* 工具栏里「重置/清空」等次要按钮弱化，主操作更突出 */
.fin-toolbar .btn-sm + .btn-sm { margin-left: var(--sp-1); }

/* ---- 5. 大屏（≥1600px）：内边距放松 ----
 * 🚨 v2.8.95：原此处还有一条 `.view > * { max-width: var(--page-max) }`（1760px 封顶 + 左右居中），
 *   已**删除**并由文件末尾 v2.8.95 区块的 `max-width:100%` 取代
 *   （用户反馈 2K/4K 屏两侧大片空白）。切勿恢复 —— 页面级限宽会让「内容占满屏幕」失效。 */
@media (min-width: 1600px) {
  .view { padding: var(--sp-6) 40px 40px; }
}

/* ---- 6. 手机弹窗：动态视口高度 ＋ 底部按钮不溢出（原固定 92vh，手机键盘弹出后被遮） ---- */
@media (max-width: 768px) {
  .modal-mask { padding: 10px; align-items: flex-end; }
  .modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .modal-body { padding: 16px 16px; }
  .modal-foot { flex-wrap: wrap; padding: 12px 16px; }
  .modal-foot .btn { flex: 1 1 auto; }
}

/* ---- 7. 表格横向滚动可用性：滚动容器有存在感（原无任何提示，用户不知道右侧还有列） ---- */
.table-wrap { position: relative; }
.table-wrap.is-scrollable { box-shadow: inset -14px 0 12px -12px rgba(35,32,27,.22); }
@media (max-width: 768px) {
  .table-wrap.is-scrollable::after {
    content: '← 左右滑动查看 →'; position: sticky; left: 0; display: block;
    font-size: 11px; color: var(--ink-3); padding: 4px 2px 0; background: transparent;
  }
}

/* ============================================================================
 * v2.8.95（用户 2026-09-16 裁定）：**大屏占满** + **弹窗尺寸自适应内容**
 * 两个问题同源：都是「宽度被人为封顶」，内容比容器宽时要么留白、要么被迫手动拖动。
 * ============================================================================ */

/* ---- 1. 大屏：取消人为限宽 ----------------------------------------------------
 * 原实现（v2.8.85 §5）：≥1600px 时 `.view > * { max-width: var(--page-max /*1760px*/) }`
 *   并左右 auto 居中 ⇒ 在 2K/4K 屏上左右各留数百像素空白，用户反馈「内容没有占满整个屏幕」。
 * 现改为占满可用宽度；宽度只由 `.view` 的内边距约束，横向溢出交给表格自身滚动（§7 已有滚动提示）。
 * 注：`--page-max` 令牌保留但不再用于页面级封顶（避免影响其它引用处）。 */
@media (min-width: 1600px) {
  .view > * { max-width: 100%; margin-left: 0; margin-right: 0; }
  .view .table-wrap, .view .tbl { width: 100%; }   /* 数据表铺满，列宽由内容分配 */
}
/* 超宽屏（≥2200px）：再收内边距，把宽度让给数据本身 */
@media (min-width: 2200px) {
  .view { padding-left: 28px; padding-right: 28px; }
}

/* ---- 2. 弹窗：宽度随内容自适应，高度以视口为限 --------------------------------
 * 原实现：`.modal { width:100%; max-width:720px }`、`.modal.wide { max-width:980px }`
 *   ⇒ 宽屏上弹窗仍只有 980px，而内容（多列明细表）比它宽，用户必须**手动往右拖**。
 * 现改为 `width: fit-content`（内容多宽就多宽）＋上限放宽到 min(96vw,1680px)；
 *   高度仍封顶视口，超高时由 `.modal-body` **内部纵向滚动**（不撑破弹窗）；
 *   弹窗内表格一律在**弹窗内部**横向滚动，绝不要求拖动整个弹窗。 */
.modal {
  width: fit-content;
  min-width: min(420px, 96vw);
  max-width: min(96vw, 1680px);
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
}
.modal.wide { max-width: min(96vw, 1680px); }
.modal-body { overflow: auto; min-width: 0; }
.modal-body .table-wrap { max-width: 100%; overflow-x: auto; }
.modal-body .tbl { min-width: 0; }
/* 中屏回退：与既有 §1366 规则同值（1200px），不造成回归 */
@media (max-width: 1366px) {
  .modal { max-width: min(96vw, 1200px); }
  .modal.wide { max-width: min(96vw, 1200px); }
}