:root {
  --ink: #0b1f33;
  --ink2: #41505f;
  --ink3: #8a96a6;
  --ink4: #b3bcc8;
  --line: #e9edf2;
  --line2: #f2f5f8;
  --bg: #f5f7fa;
  --card: #ffffff;
  --brand: #1657c8;
  --brand-d: #0e46a8;
  --brand-s: #edf3fe;
  --danger: #e23d3d;
  --danger-s: #fdefef;
  --warn: #d98200;
  --warn-s: #fff8ea;
  --ok: #0e9f6e;
  --ok-s: #eaf8f2;
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--ink3); }
.nowrap { white-space: nowrap; }

/* ================= 登录（分栏版） ================= */

/* 整页：品牌分栏 + 表单，按视口等比缩放，和后台预览里看到的位置一致 */
.lgs-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lgk-fit { position: relative; }
.lgk-fit > .lgs-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.lgs-card { position: relative; overflow: hidden; isolation: isolate; }
.lgs-panel { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.lgs-panel.l { left: 0; }
.lgs-panel.r { right: 0; }
.lgs-panel .dc { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.lgs-panel .dc.d1 { width: 300px; height: 300px; top: -120px; right: -80px; }
.lgs-panel .dc.d2 { width: 340px; height: 340px; bottom: -160px; left: -100px; background: rgba(255, 255, 255, .035); }

.lgs-t {
  position: absolute; z-index: 2;
  white-space: pre-wrap; word-break: break-word;
}
.lgs-logo {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; line-height: 1;
}
.lgs-f { position: absolute; z-index: 3; }
.lgs-lb { display: block; line-height: 1.4; }
.lgs-in {
  display: block; width: 100%; padding: 0 12px;
  font-family: inherit; font-size: 13.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lgs-in::placeholder { color: var(--ph, #a9b4c0); }
.lgs-in:focus { border-color: #2F7BFF; box-shadow: 0 0 0 3px rgba(47, 123, 255, .14); }
.lgs-rw { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lgs-cb { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lgs-cb input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 13px; height: 13px; margin: 0; position: relative; cursor: pointer;
  border-radius: 3px; border: 1px solid var(--chk-bd, #c7d0da); background: var(--chk-bg, #fff);
}
.lgs-cb input:checked { background: var(--chk, #1e3e5f); border-color: var(--chk, #1e3e5f); }
.lgs-cb input:checked::after {
  content: ''; position: absolute; left: 3.6px; top: 1.2px;
  width: 3.6px; height: 6.8px; border: 1.6px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(42deg);
}
.lgs-lk { cursor: pointer; white-space: nowrap; }
.lgs-lk:hover { text-decoration: underline; }
.lgs-er { min-height: 16px; margin: 4px 0 0; font-size: 12px; line-height: 16px; color: #e23d3d; }
.lgs-bt {
  display: block; width: 100%; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: .02em;
  transition: filter .15s;
}
.lgs-bt:hover { filter: brightness(1.07); }
.lgs-bt:disabled { opacity: .6; cursor: default; }
.lgs-dm { line-height: 1.6; }
.lgs-dl { margin-top: 4px; opacity: .82; line-height: 1.75; }

/* ================= 布局 ================= */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 210px; flex: 0 0 210px;
  background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.brand {
  height: 58px; display: flex; align-items: center; gap: 9px;
  padding: 0 18px; border-bottom: 1px solid var(--line2);
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--brand);
  color: #fff; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 13.5px; font-weight: 500; }

.nav { padding: 10px; flex: 1; overflow-y: auto; }
.nav-group { font-size: 10.5px; color: var(--ink4); padding: 12px 10px 5px; letter-spacing: .04em; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--ink2); cursor: pointer;
  margin-bottom: 1px; user-select: none;
}
.nav-item:hover { background: var(--line2); color: var(--ink); }
.nav-item.on { background: var(--brand-s); color: var(--brand); font-weight: 500; }
.nav-item svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .72; }
.nav-item.on svg { opacity: 1; }
.nav-badge {
  margin-left: auto; font-size: 10px; background: var(--danger); color: #fff;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; font-weight: 500;
}

.side-foot {
  border-top: 1px solid var(--line2); padding: 12px 14px;
  display: flex; align-items: center; gap: 9px;
}
.ava {
  width: 28px; height: 28px; border-radius: 50%; background: #e4ebf6;
  color: var(--brand); font-size: 11.5px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 28px;
}
.side-foot .u { font-size: 12px; line-height: 1.35; flex: 1; min-width: 0; }
.side-foot .u b { font-weight: 500; display: block; }
.side-foot .u span { color: var(--ink3); font-size: 10.5px; }
.logout {
  width: 26px; height: 26px; border: none; background: none; cursor: pointer;
  color: var(--ink4); display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.logout:hover { background: var(--line2); color: var(--danger); }
.logout svg { width: 15px; height: 15px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.topbar h2 { font-size: 15.5px; font-weight: 500; }
.page-desc { font-size: 11.5px; color: var(--ink3); margin-top: 1px; }
.topbar-r { display: flex; align-items: center; gap: 9px; }

.view { padding: 22px 24px 60px; max-width: 1500px; width: 100%; }

/* ================= 通用组件 ================= */

.btn {
  height: 32px; padding: 0 14px; border-radius: var(--r1);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn:hover { background: #fafbfd; border-color: #dde3ea; }
.btn:active { transform: translateY(.5px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-d); border-color: var(--brand-d); }
.btn-danger { color: var(--danger); border-color: #f2d9d7; background: #fdf7f6; }
.btn-danger:hover { background: #fbecea; }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r2); padding: 18px;
}
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-h h3 { font-size: 13.5px; font-weight: 500; }
.card-h span { font-size: 11.5px; color: var(--ink3); }

.badge {
  display: inline-flex; align-items: center; height: 19px; padding: 0 6px;
  border-radius: 5px; font-size: 10.5px; font-weight: 500; white-space: nowrap;
}
.b-ok { background: var(--ok-s); color: var(--ok); }
.b-danger { background: var(--danger-s); color: var(--danger); }
.b-warn { background: var(--warn-s); color: #b47818; }
.b-brand { background: var(--brand-s); color: var(--brand); }
.b-gray { background: #f1f3f6; color: var(--ink3); }

.notice {
  background: var(--brand-s); border: 1px solid #dce8fa; color: #2c5a9e;
  border-radius: 9px; padding: 10px 13px; font-size: 11.5px; line-height: 1.65;
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px;
}
.notice.warn { background: var(--warn-s); border-color: #f3e4c6; color: #8a6a22; }

.empty { text-align: center; color: var(--ink4); font-size: 12.5px; padding: 60px 0; }

/* ================= KPI ================= */

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi .lb { font-size: 11.5px; color: var(--ink3); }
.kpi .nm { font-size: 24px; font-weight: 500; letter-spacing: -.025em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .nm small { font-size: 12.5px; font-weight: 400; color: var(--ink3); margin-left: 2px; }
.kpi .dt { font-size: 11px; color: var(--ink3); margin-top: 5px; }
.kpi .dt-up { font-size: 10.5px; margin-left: 5px; padding: 1px 5px; border-radius: 4px; background: var(--line2); color: var(--ink3); }
.kpi .dt-up.up { background: var(--ok-s); color: var(--ok); }
.kpi .dt-up.down { background: var(--warn-s); color: var(--warn); }
/* 可点的 KPI 卡（待收尾款 / 退款待审 / 可开发线索） */
.lk-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lk-card:hover { border-color: #b9cdf5; box-shadow: 0 2px 10px rgba(11, 31, 51, .07); }

/* ================= 今日待办 ================= */
.td-card { margin-bottom: 12px; }
.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.td {
  display: flex; align-items: center; gap: 10px; max-width: 330px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 9px; padding: 9px 12px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.td:hover { box-shadow: 0 2px 10px rgba(11, 31, 51, .07); }
.td.danger { border-left-color: var(--danger); }
.td.warn { border-left-color: var(--warn); }
.td.brand { border-left-color: var(--brand); }
.td-n {
  font-size: 21px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums;
  min-width: 30px; text-align: center;
}
.td.danger .td-n { color: var(--danger); }
.td.warn .td-n { color: var(--warn); }
.td.brand .td-n { color: var(--brand); }
.td-n em { display: block; font-style: normal; font-size: 10px; font-weight: 400; color: var(--ink4); }
.td-x { flex: 1; min-width: 0; }
.td-t { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-s {
  font-size: 10.5px; color: var(--ink4); margin-top: 2px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.td-go { font-size: 15px; color: var(--ink4); }
.td-empty { padding: 14px 2px 6px; }
.td-empty-t { font-size: 12.5px; color: var(--ink2); }
.td-empty-d { font-size: 11.5px; color: var(--ink3); margin-top: 3px; }

/* 个人排名里把自己那一行标出来 */
.rk.me { background: var(--brand-s); border-radius: 7px; }
.rk-me { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink3); }
.rk-me b { color: var(--brand); font-weight: 500; }

.kpi-note { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; font-size: 11.5px; color: var(--ink2); line-height: 1.9; }
@media (max-width: 900px) { .kpi-note { grid-template-columns: 1fr; } }

.row2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-bottom: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.rk { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.rk-n {
  width: 18px; height: 18px; border-radius: 5px; background: var(--line2);
  color: var(--ink3); font-size: 10.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; flex: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.rk-n.t1 { background: #fdf0dc; color: #b47818; }
.rk-n.t2 { background: #eef1f5; color: #5e6b7c; }
.rk-n.t3 { background: #f8ece3; color: #a9683b; }
.rk-nm { font-size: 12.5px; width: 96px; flex: 0 0 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--line2); overflow: hidden; min-width: 40px; }
.rk-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.rk-bar i.g { background: #9cb8e6; }
.rk-v { font-size: 12px; font-weight: 500; width: 104px; text-align: right; flex: 0 0 104px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-v em { font-style: normal; font-size: 10.5px; color: var(--ink3); font-weight: 400; margin-left: 2px; }

.idle-g { display: flex; gap: 6px; margin-bottom: 12px; }
.idle-t { flex: 1; text-align: center; border-radius: 8px; padding: 8px 3px; background: var(--line2); }
.idle-t b { display: block; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.25; }
.idle-t span { font-size: 10px; color: var(--ink3); }
.idle-t.w1 { background: var(--warn-s); } .idle-t.w1 b { color: #b47818; }
.idle-t.w2 { background: #fdefe6; } .idle-t.w2 b { color: #c2601f; }
.idle-t.w3 { background: var(--danger-s); } .idle-t.w3 b { color: var(--danger); }
.idle-list { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: #f4f6f9; color: var(--ink2); }
.chip.hot { background: var(--danger-s); color: #b3271f; }

.share { display: flex; gap: 16px; align-items: center; }
.donut { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 96px; position: relative; }
.donut::after { content: ""; position: absolute; inset: 25px; background: #fff; border-radius: 50%; }
.share-l { flex: 1; min-width: 0; }
.share-i { display: flex; align-items: center; gap: 7px; font-size: 11.5px; margin-bottom: 7px; }
.share-i i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 7px; }
.share-i span { flex: 1; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-i b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ================= 筛选与表格 ================= */

.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.fi {
  height: 32px; border: 1px solid var(--line); border-radius: 7px;
  padding: 0 10px; font-size: 12.5px; font-family: inherit; color: var(--ink);
  background: #fff; outline: none; min-width: 130px;
}
.fi:focus { border-color: var(--brand); }
.fi::placeholder { color: var(--ink4); }
select.fi { min-width: 118px; cursor: pointer; }
.fi.date { min-width: 132px; }
.quick { display: flex; gap: 5px; align-items: center; }
.qb {
  height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; font-size: 11.5px; color: var(--ink2); cursor: pointer; font-family: inherit;
}
.qb.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left; font-weight: 400; font-size: 11.5px; color: var(--ink3);
  padding: 11px 12px; border-bottom: 1px solid var(--line); background: #fcfdfe; white-space: nowrap;
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: #fbfcfe; }
.tbl tr.need td { background: #fffdf7; }
.tbl tr.need:hover td { background: #fffbf0; }
.tbl .co { font-weight: 500; color: var(--ink); line-height: 1.4; }
.tbl .sub { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.tbl .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.tbl .num.p { color: var(--danger); }
.tbl .num .rest { font-size: 10.5px; color: var(--ink3); font-weight: 400; }
.lk { color: var(--brand); font-size: 12px; cursor: pointer; }
.lk:hover { text-decoration: underline; }
.lk.gray { color: var(--ink3); }

.note-cell { max-width: 230px; }
.note-cell .nt { font-size: 11.5px; line-height: 1.5; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-cell .nb { font-size: 10.5px; color: var(--ink3); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.note-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 4px; font-size: 9.5px; font-weight: 500;
  background: var(--brand-s); color: var(--brand); flex: 0 0 15px;
}
.note-badge.r-leader { background: #f0eafb; color: #6e46b8; }
.note-badge.r-accountant { background: var(--ok-s); color: var(--ok); }
.note-badge.r-super { background: #fdeee7; color: #b4521f; }
.note-badge.r-customer { background: #f1f3f6; color: var(--ink3); }

.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--ink3); }
.pg { display: flex; gap: 4px; }
.pg b {
  min-width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-weight: 400;
  font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; cursor: pointer;
  padding: 0 6px; background: #fff;
}
.pg b.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pg b.dis { opacity: .4; cursor: not-allowed; }

/* ================= 抽屉 ================= */

.drawer-mask { position: fixed; inset: 0; background: rgba(11, 31, 51, .38); z-index: 90; }
.drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 640px; max-width: 94vw;
  background: #fff; display: flex; flex-direction: column;
  box-shadow: -8px 0 40px -12px rgba(11, 31, 51, .3);
  animation: slideIn .26s cubic-bezier(.22, .68, .32, 1);
}
@keyframes slideIn { from { transform: translateX(28px); opacity: .6; } to { transform: none; opacity: 1; } }
.dr-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.dr-head .t { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dr-head h3 { font-size: 15px; font-weight: 500; line-height: 1.4; }
.dr-close { border: none; background: none; font-size: 21px; color: var(--ink3); cursor: pointer; line-height: 1; padding: 0 2px; }
.dr-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 11.5px; color: var(--ink3); }
.dr-meta b { color: var(--ink2); font-weight: 500; }

.dr-tabs { display: flex; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--line); background: #fff; }
.dr-tab {
  font-size: 13px; color: var(--ink3); padding: 12px 0; cursor: pointer;
  position: relative; border: none; background: none; font-family: inherit;
}
.dr-tab.on { color: var(--ink); font-weight: 500; }
.dr-tab.on::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 20px; height: 2.5px; border-radius: 2px; background: var(--brand); }
.dr-tab .cnt { font-size: 10.5px; color: var(--ink4); margin-left: 3px; }

.dr-body { flex: 1; overflow-y: auto; padding: 18px 22px 26px; }

.dr-foot { border-top: 1px solid var(--line); padding: 12px 22px; display: flex; gap: 8px; justify-content: flex-end; background: #fcfdfe; }

/* 资料字段 */
.fv { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; margin-bottom: 9px; }
.fv-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fv-h label { font-size: 11.5px; color: var(--ink3); }
.fv-v { font-size: 13px; margin-top: 4px; word-break: break-all; line-height: 1.6; }
.fv-v.empty-v { color: var(--ink4); }
.fv-act { margin-top: 8px; display: flex; gap: 8px; }
.fv.edit { border-color: var(--brand); background: #fcfdff; }
.fv input, .fv textarea, .fv select {
  width: 100%; border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 9px; font-size: 13px; font-family: inherit; outline: none; background: #fff; margin-top: 4px;
}
.fv input:focus, .fv textarea:focus, .fv select:focus { border-color: var(--brand); }
.fv-img { max-width: 180px; border-radius: 8px; border: 1px solid var(--line); display: block; margin-top: 6px; }

/* 备注 */
.note-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.note-item:last-child { border-bottom: none; }
.note-av {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 500; background: var(--brand-s); color: var(--brand);
}
.note-av.r-leader { background: #f0eafb; color: #6e46b8; }
.note-av.r-accountant { background: var(--ok-s); color: var(--ok); }
.note-av.r-super { background: #fdeee7; color: #b4521f; }
.note-av.r-customer { background: #f1f3f6; color: var(--ink3); }
.note-bd { flex: 1; min-width: 0; }
.note-hd { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.note-hd b { font-weight: 500; }
.note-hd span { color: var(--ink3); }
.note-tx { font-size: 12.5px; line-height: 1.65; color: var(--ink2); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.note-form { margin-top: 14px; }
.note-form textarea {
  width: 100%; min-height: 74px; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; line-height: 1.6;
}
.note-form textarea:focus { border-color: var(--brand); }
.note-form .row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

/* 日志 */
.log-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line2); font-size: 12px; }
.log-item:last-child { border-bottom: none; }
.log-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink4); margin-top: 7px; flex: 0 0 6px; }
.log-dot.brand { background: var(--brand); }
.log-dot.warn { background: var(--warn); }
.log-dot.danger { background: var(--danger); }
.log-tx { flex: 1; color: var(--ink2); line-height: 1.6; }
.log-tx b { font-weight: 500; color: var(--ink); }
.log-tx .old { color: var(--ink3); text-decoration: line-through; }
.log-tx .new { color: var(--brand); }
.log-time { font-size: 10.5px; color: var(--ink4); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ================= 弹窗 ================= */

.modal-mask {
  position: fixed; inset: 0; background: rgba(11, 31, 51, .38); z-index: 120;
  display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px; overflow-y: auto;
}
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; border: 1px solid var(--line); }
.modal.wide { max-width: 720px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid var(--line); }
.modal-h h3 { font-size: 14.5px; font-weight: 500; }
.modal-close { border: none; background: none; font-size: 20px; color: var(--ink3); cursor: pointer; line-height: 1; }
.modal-b { padding: 20px 22px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); background: #fcfdfe; border-radius: 0 0 14px 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fg { display: flex; flex-direction: column; }
.fg.full { grid-column: 1 / -1; }
.fg label { font-size: 11.5px; color: var(--ink2); margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.fg label .req { color: var(--danger); }
.fg input, .fg select, .fg textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; background: #fbfcfd; color: var(--ink);
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--brand); background: #fff; }
.fg textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
.fg .hint { font-size: 11px; color: var(--ink3); margin-top: 4px; line-height: 1.5; }

.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex: 0 0 38px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: #d6dde6; border-radius: 20px; cursor: pointer; transition: .18s; }
.switch i::after { content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; }
.switch input:checked + i { background: var(--ok); }
.switch input:checked + i::after { transform: translateX(17px); }
.switch-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink2); padding-top: 2px; }

/* 表单设计器 */
.fd-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 7px; background: #fff;
}
.fd-item .nm { flex: 1; font-size: 12.5px; min-width: 0; }
.fd-item .nm .t { font-size: 10.5px; color: var(--ink3); margin-left: 6px; }
.fd-item .acts { display: flex; gap: 6px; }
.fd-type {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: var(--line2); color: var(--ink3); margin-left: 6px;
}
.fd-type.sys { background: var(--brand-s); color: var(--brand); }

/* ================= 提示 ================= */

.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(10px);
  background: #0b1f33; color: #fff; font-size: 12.5px; padding: 10px 18px;
  border-radius: 9px; opacity: 0; pointer-events: none; transition: .22s; z-index: 200; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #a32d2d; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .row2, .row3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .view { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================= 首页装修器 ================= */

.ed {
  display: grid;
  grid-template-columns: 186px 1fr 272px;
  height: calc(100vh - 128px);
  min-height: 620px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.ed-pane { overflow-y: auto; }
.ed-pane.left { border-right: 1px solid var(--line); }
.ed-pane.right { border-left: 1px solid var(--line); }

.ed-ph {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink3);
  background: #fcfdfe;
  position: sticky;
  top: 0;
  z-index: 3;
}

.ed-comp {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  margin: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
  color: var(--ink2);
  cursor: pointer;
  background: #fff;
}
.ed-comp:hover { border-color: #d6dde6; }
.ed-comp.on { border-color: var(--brand); background: var(--brand-s); color: var(--brand); font-weight: 500; }
.ed-comp.sub { margin-left: 20px; font-size: 11.5px; }
.ed-comp .grip { color: var(--ink4); font-size: 10px; }
.ed-comp .del { margin-left: auto; color: var(--ink4); font-size: 13px; padding: 0 2px; }
.ed-comp .del:hover { color: var(--danger); }

.ed-canvas {
  background: #eff2f6;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 22px 0 40px;
  overflow-y: auto;
}

.pv {
  width: 375px;
  height: 720px;
  background: #f5f7fa;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 34px -12px rgba(11, 31, 51, .28);
  border: 1px solid #dde3eb;
  flex: 0 0 375px;
}

.pv-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
.pv-scroll::-webkit-scrollbar { display: none; }

.pv-status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 11px; color: #fff; position: relative; z-index: 3; }

.pv-hero { position: relative; overflow: hidden; }
.pv-hero-inner { position: absolute; inset: 0; }
.pv-brand { position: absolute; left: 16px; top: 8px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.pv-logo { width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; }
.pv-bname { font-size: 14px; font-weight: 500; letter-spacing: .5px; }

.pv-text {
  position: absolute;
  white-space: pre-wrap;
  cursor: move;
  user-select: none;
  padding: 0;
  line-height: 1;
  z-index: 2;
  outline: 1px dashed transparent;
}
.pv-text:hover { outline-color: rgba(255, 255, 255, .55); }
.pv-text.on { outline: 1.5px solid #1657C8; }
.pv-text .hdl { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #1657C8; border-radius: 50%; }
.pv-text .hdl.tl { left: -4px; top: -4px; }
.pv-text .hdl.tr { right: -4px; top: -4px; }
.pv-text .hdl.bl { left: -4px; bottom: -4px; }
.pv-text .hdl.br { right: -4px; bottom: -4px; }

.guide { position: absolute; background: #E23D3D; z-index: 9; pointer-events: none; }
.guide.v { width: 1px; top: 0; bottom: 0; }
.guide.h { height: 1px; left: 0; right: 0; }
.guide .tag { position: absolute; background: #E23D3D; color: #fff; font-size: 8px; padding: 1px 3px; border-radius: 2px; white-space: nowrap; }
.guide.v .tag { left: 3px; top: 4px; }
.guide.h .tag { left: 4px; top: -13px; }

.pv-searchwrap { position: relative; z-index: 4; padding: 0 16px; }
.pv-search { display: flex; align-items: center; }
.pv-search .sb-in { flex: 1; display: flex; align-items: center; padding: 0 5px 0 13px; }
.pv-search .sb-ph { flex: 1; font-size: 14px; }
.pv-search .sb-btn { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }
.pv-search .sb-ico { margin-right: 6px; opacity: .55; font-size: 14px; }

.pv-sec { margin: 22px 16px 0; }
.pv-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding: 0 2px; }
.pv-sec-t { font-size: 16px; font-weight: 500; }
.pv-sec-m { font-size: 12px; color: #8a96a6; }

/* 新闻 6 套 */
.pv-news { overflow: hidden; }
.pv-news-item { display: flex; align-items: flex-start; padding: 12px 14px; }
.pv-news-date { font-size: 11.5px; flex: 0 0 42px; font-variant-numeric: tabular-nums; }
.pv-news-tx { flex: 1; font-size: 13.5px; line-height: 1.55; }
.pv-news-dot { flex: 0 0 6px; text-align: right; opacity: .35; font-size: 13px; }

.pv-news.s0 .pv-news-item { border-bottom: 1px solid rgba(0,0,0,.05); }
.pv-news.s0 .pv-news-item:last-child { border-bottom: none; }

.pv-news.s1 .pv-news-item { display: block; padding: 11px 14px; }
.pv-news.s1 .pv-news-date { display: block; flex: none; margin-bottom: 3px; }
.pv-news.s1 .pv-news-dot { display: none; }

.pv-news.s2 .pv-news-item { justify-content: space-between; padding: 12px 14px; }
.pv-news.s2 .pv-news-date { order: 2; flex: 0 0 auto; text-align: right; }
.pv-news.s2 .pv-news-tx { order: 1; padding-right: 10px; }
.pv-news.s2 .pv-news-dot { display: none; }

.pv-news.s3 .pv-news-item { border-left: 3px solid #1657C8; margin: 0 0 0 6px; padding-left: 11px; }
.pv-news.s3 .pv-news-date { flex: 0 0 auto; margin-left: auto; order: 3; text-align: right; }
.pv-news.s3 .pv-news-dot { display: none; }

.pv-news.s4 { display: flex; flex-wrap: wrap; padding: 8px; }
.pv-news.s4 .pv-news-item { width: 50%; display: flex; flex-direction: column; padding: 10px 8px; box-sizing: border-box; }
.pv-news.s4 .pv-news-tx { order: 1; }
.pv-news.s4 .pv-news-date { order: 2; flex: none; margin-top: 6px; }
.pv-news.s4 .pv-news-tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
.pv-news.s4 .pv-news-dot { display: none; }

.pv-news.s5 .pv-news-item { align-items: center; padding: 10px 14px; }
.pv-news.s5 .pv-news-date { flex: 0 0 auto; padding: 2px 7px; border-radius: 5px; margin-right: 10px; background: rgba(22,87,200,.09); color: #1657C8; }
.pv-news.s5 .pv-news-dot { display: none; }

/* 预约 6 套 */
.pv-book { padding: 16px; }
.pv-book-t { font-size: 15px; font-weight: 500; }
.pv-book-d { font-size: 12.5px; line-height: 1.65; margin-top: 6px; }
.pv-book-b { margin-top: 14px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 500; }

.pv-book.s1 .pv-book-t,
.pv-book.s1 .pv-book-d { color: #fff; }
.pv-book.s1 .pv-book-b { background: #fff !important; color: #1657C8 !important; }

.pv-book.s2 .pv-book-b { background: transparent !important; border: 1.5px solid #1657C8; color: #1657C8 !important; height: 38px; }

.pv-book.s3 { display: flex; align-items: center; gap: 12px; }
.pv-book.s3 .pv-book-main { flex: 1; min-width: 0; }
.pv-book.s3 .pv-book-b { margin-top: 0; flex: 0 0 auto; padding: 0 16px; height: 38px; font-size: 13px; }

.pv-book.s4 .pv-book-b { border-radius: 999px; }

.pv-book.s5 { padding: 12px 4px; }
.pv-book.s5 .pv-book-b { background: transparent !important; color: #1657C8 !important; justify-content: flex-start; padding: 0; height: auto; margin-top: 8px; }
.pv-book.s5 .pv-book-b::after { content: " ›"; }

.pv-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: rgba(255,255,255,.98); border-top: 1px solid #ebedf1; display: flex; z-index: 20; }
.pv-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #9aa5b4; }
.pv-tab.on { color: #1657C8; }
.pv-tab .i { font-size: 17px; line-height: 1.1; }

.pv-pad { height: 70px; }

/* 属性面板 */
.pp { padding: 12px 14px; }
.pp-g { margin-bottom: 13px; }
.pp-g > label { display: block; font-size: 11px; color: var(--ink3); margin-bottom: 5px; }
.pp input[type=text], .pp input[type=number], .pp select, .pp textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 8px; font-size: 12px; font-family: inherit; outline: none; background: #fbfcfd; color: var(--ink);
}
.pp input:focus, .pp select:focus, .pp textarea:focus { border-color: var(--brand); background: #fff; }
.pp textarea { min-height: 56px; resize: vertical; line-height: 1.6; }
.pp-row { display: flex; gap: 6px; }
.pp-row > * { flex: 1; }

.cf { display: flex; align-items: center; gap: 6px; }
.cf input[type=color] { width: 30px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; flex: 0 0 30px; }
.cf input[type=text] { flex: 1; font-family: ui-monospace, monospace; font-size: 11px; }

.swatches { display: flex; gap: 6px; }
.swatch { width: 34px; height: 34px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; position: relative; }
.swatch.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(22,87,200,.16); }

.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.style-card {
  border: 1.5px solid var(--line); border-radius: 7px; padding: 7px 8px;
  cursor: pointer; font-size: 11px; color: var(--ink2); line-height: 1.35;
}
.style-card:hover { border-color: #d6dde6; }
.style-card.on { border-color: var(--brand); background: var(--brand-s); color: var(--brand); }
.style-card b { display: block; font-weight: 500; font-size: 11.5px; margin-bottom: 2px; }
.style-card span { font-size: 10px; color: var(--ink4); }
.style-card.on span { color: #5b7cb4; }

.slider-row { display: flex; align-items: center; gap: 8px; }
.slider-row input[type=range] { flex: 1; }
.slider-row .val { font-size: 11px; color: var(--ink3); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.ed-bar { display: flex; align-items: center; gap: 8px; }

/* ================= 登录页装修 ================= */

.lgp {
  width: 375px;
  height: 720px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 34px -12px rgba(11, 31, 51, .28);
  border: 1px solid #dde3eb;
  flex: 0 0 375px;
}

.lg-status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 11px; position: relative; z-index: 3; }

.lg-brand { position: absolute; left: 24px; top: 70px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.lg-logo { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }
.lg-bname { font-size: 14px; font-weight: 500; }

.lg-text {
  position: absolute;
  white-space: pre-wrap;
  cursor: move;
  user-select: none;
  z-index: 3;
  outline: 1px dashed transparent;
}
.lg-text:hover { outline-color: rgba(22, 87, 200, .5); }
.lg-text.on { outline: 1.5px solid #1657C8; }

.lg-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  z-index: 3;
}

.lg-agree { position: absolute; display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.5; z-index: 3; }
.lg-chk {
  width: 14px; height: 14px; border-radius: 4px; border: 1.2px solid rgba(0,0,0,.25);
  flex: 0 0 14px; margin-top: 1px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
}
.lg-chk.on { background: #1657C8; border-color: #1657C8; }
.lg-tip { position: absolute; font-size: 11px; z-index: 3; }

.lgp.s1::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 2;
}

.lgp.s2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: #f7f9fb;
  z-index: 2;
}

/* 退款流程链 */
.rf-chain { display: flex; flex-direction: column; gap: 2px; }
.rf-step { font-size: 11px; color: var(--ink2); line-height: 1.5; }
.rf-step.done::before { content: "✓ "; color: var(--ok); font-weight: 500; }

/* 订单抽屉里的退款提示条 */
.refund-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 9px; font-size: 12px; margin: 12px 22px 0;
}
.refund-bar.warn { background: var(--warn-s); border: 1px solid #f3e4c6; color: #8a6a22; }
.refund-bar.brand { background: var(--brand-s); border: 1px solid #dce8fa; color: #2c5a9e; }
.refund-bar.ok { background: var(--ok-s); border: 1px solid #cdeade; color: #0f6e56; }
.refund-bar.gray { background: #f4f6f9; border: 1px solid var(--line); color: var(--ink2); }
.refund-bar b { font-weight: 500; }

/* ================= 预约管理 ================= */

.ap-stats {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.ap-stat {
  flex: 0 0 104px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ap-stat b { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ap-stat span { font-size: 11.5px; color: var(--ink3); }
.ap-stat.warn { border-color: #f0dcbc; background: #fffdf8; }
.ap-stat.warn b { color: var(--warn); }

.ap-stat-tip {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink3);
  padding-left: 6px;
}

.ap-time { font-size: 12px; font-variant-numeric: tabular-nums; }
.sub.hot { color: var(--danger); font-weight: 500; }

a.tel { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
a.tel:hover { color: var(--brand); text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 210px; }
.chip-xs {
  display: inline-block;
  font-size: 11px;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 5px;
  background: #f2f5f9;
  color: var(--ink2);
  white-space: nowrap;
}

.ap-unassigned {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink2);
  cursor: pointer;
  white-space: nowrap;
}
.ap-unassigned input { accent-color: var(--brand); }

/* 跟进弹窗 */
.ap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ap-co { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.ap-sub { font-size: 12px; color: var(--ink3); margin-top: 5px; line-height: 1.7; }
.ap-sub b.hot { color: var(--danger); }

.ap-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ap-grid label,
.ap-quote label { display: block; font-size: 11px; color: var(--ink3); margin-bottom: 6px; }
.ap-grid > div > div { font-size: 12.5px; }
.hint-sm { font-size: 11px; color: var(--ink4); margin-top: 4px; }

.ap-quote {
  margin: 14px 0 0;
  padding: 11px 14px;
  background: #f8fafc;
  border-left: 2.5px solid #d6dde6;
  border-radius: 0 7px 7px 0;
}
.ap-quote p { font-size: 12.5px; line-height: 1.75; color: var(--ink2); }

.ap-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-top: 16px;
}
.ap-form .fg.full { grid-column: 1 / -1; }

.ap-notes-hd {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
}

.ap-notes { margin-top: 8px; max-height: 200px; overflow-y: auto; }
.ap-note { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px dashed #eef1f5; }
.ap-note:last-child { border-bottom: none; }
.ap-note-main { flex: 1; min-width: 0; }
.ap-note-hd { font-size: 11.5px; color: var(--ink3); }
.ap-note-tx { font-size: 12.5px; line-height: 1.7; margin-top: 3px; color: var(--ink); word-break: break-word; }

/* 预约表单设置 */
.bk-field {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.bk-field:last-child { border-bottom: none; }
.bk-field-main { flex: 1; min-width: 0; }
.bk-field-main b { font-size: 12.5px; font-weight: 500; display: block; }
.bk-field-main span { font-size: 11.5px; color: var(--ink3); }
.ap-sw {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink2);
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 56px;
}
.ap-sw input { accent-color: var(--brand); }
.ap-sw input:disabled { opacity: .5; }
.ap-sw input:disabled + * { color: var(--ink4); }

.bk-bizs { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-biz {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  background: #fff;
}
.bk-biz:hover { border-color: #d6dde6; }
.bk-biz input { accent-color: var(--brand); }
.bk-biz:has(input:checked) { border-color: var(--brand); background: var(--brand-s); color: var(--brand); }

.ap-fixed {
  flex: 0 0 auto;
  min-width: 56px;
  font-size: 11.5px;
  color: var(--ink4);
  text-align: center;
}

/* ================= 政策新闻 ================= */

.nw-title { font-size: 13px; line-height: 1.55; font-weight: 500; }
.nw-sum {
  margin-top: 3px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 640px;
}
.nw-date { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink2); }
.lk.danger { color: var(--danger); }

.af-head { display: grid; grid-template-columns: 1.6fr 1fr; gap: 13px; }
.af-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 13px; margin-top: 15px; }

.nw-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }

.nw-body {
  width: 100%;
  min-height: 200px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fbfcfd;
  outline: none;
  resize: vertical;
}
.nw-body:focus { border-color: var(--brand); background: #fff; }

.nw-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 200px;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink2);
}
.nw-preview p { margin-bottom: 10px; }
.nw-preview p:last-child { margin-bottom: 0; }
.nw-preview strong { color: var(--ink); font-weight: 500; }

.nw-pv-hd { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.nw-pv-hd h2 { font-size: 19px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.nw-pv-meta { font-size: 11.5px; color: var(--ink3); margin-top: 7px; }

/* ================= 通知：铃铛 / 弹窗 ================= */

.bell-wrap { position: relative; }

.bell {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink2);
  position: relative;
  padding: 0;
}
.bell:hover { border-color: #d6dde6; color: var(--ink); }
.bell svg { width: 16px; height: 16px; }

.bell-dot {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg);
  box-sizing: content-box;
}

.bell-panel {
  position: absolute;
  right: 0;
  top: 40px;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 14px 40px -14px rgba(11, 31, 51, .22);
  z-index: 60;
  overflow: hidden;
}

.bell-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
}
.bell-clear { font-size: 11.5px; color: var(--ink3); cursor: pointer; font-weight: 400; }
.bell-clear:hover { color: var(--brand); }

.bell-list { max-height: 340px; overflow-y: auto; }
.bell-empty { padding: 26px 12px; text-align: center; font-size: 12px; color: var(--ink3); }

.bell-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line2);
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: #f8fafc; }

.bi-tag {
  flex: 0 0 auto;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.6;
  white-space: nowrap;
}
.bi-tag.t-order { background: var(--brand-s); color: var(--brand); }
.bi-tag.t-appointment { background: #f0eafb; color: #6e46b8; }
.bi-tag.t-refund { background: var(--danger-s); color: var(--danger); }

.bi-main { flex: 1; min-width: 0; }
.bi-tx { font-size: 12px; line-height: 1.6; word-break: break-word; }
.bi-sub { font-size: 10.5px; color: var(--ink3); margin-top: 2px; }

/* 右上角弹窗 */
.notify-pops {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.notify-pop {
  pointer-events: auto;
  width: 336px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 11px 13px;
  box-shadow: 0 16px 40px -16px rgba(11, 31, 51, .3);
  cursor: pointer;
  animation: npIn .22s ease-out;
  transition: opacity .3s, transform .3s;
}
.notify-pop.t-appointment { border-left-color: #6e46b8; }
.notify-pop.t-refund { border-left-color: var(--danger); }
.notify-pop.out { opacity: 0; transform: translateX(14px); }

@keyframes npIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.np-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.np-hd b { font-size: 12.5px; font-weight: 500; }
.np-hd span { font-size: 10.5px; color: var(--ink4); flex: 0 0 auto; }
.np-body {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.65;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-foot { font-size: 10.5px; color: var(--brand); margin-top: 6px; }

/* ================= 通知设置 ================= */

.nt-webhook { display: flex; gap: 8px; align-items: center; }
.nt-webhook input { flex: 1; }

.nt-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.nt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line2);
}
.nt-row:last-child { border-bottom: none; }
.nt-row-main b { display: block; font-size: 12.5px; font-weight: 500; }
.nt-row-main span { font-size: 11.5px; color: var(--ink3); line-height: 1.6; }

.nt-dm { margin-top: 14px; padding: 14px; background: #f8fafc; border-radius: 9px; }

.nt-sounds { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.nt-sound {
  flex: 1 1 150px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  cursor: pointer;
  position: relative;
  background: #fff;
}
.nt-sound:hover { border-color: #d6dde6; }
.nt-sound.on { border-color: var(--brand); background: var(--brand-s); }
.nt-sound b { font-size: 12.5px; font-weight: 500; display: block; }
.nt-sound span { font-size: 11px; color: var(--ink3); }
.nt-sound.on span { color: #5b7cb4; }
.nt-sound i {
  position: absolute; right: 10px; top: 9px;
  font-style: normal; font-size: 10.5px; color: var(--brand);
  opacity: 0; transition: opacity .15s;
}
.nt-sound:hover i, .nt-sound.on i { opacity: 1; }

.nt-log-tx {
  font-size: 11.5px;
  color: var(--ink2);
  max-width: 460px;
  line-height: 1.6;
  word-break: break-word;
}

/* 退款审批弹窗里的客户/业务信息 */
.rf-cust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rf-cust label { display: block; font-size: 11px; color: var(--ink3); margin-bottom: 3px; }
.rf-cust > div > div { font-size: 12.5px; color: var(--ink); line-height: 1.5; }

/* ============================================================
   统一导出面板
   ============================================================ */
.exp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.exp-col { min-width: 0; }
.exp-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.exp-hd b { font-size: 13px; color: var(--ink); font-weight: 500; }
.exp-act { font-size: 11.5px; }
.exp-fields { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.exp-group { margin-bottom: 14px; }
.exp-gt { font-size: 11.5px; color: var(--ink3); margin-bottom: 7px; }
.exp-gi { display: flex; flex-wrap: wrap; gap: 7px; }
.exp-f {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 14px;
  font-size: 12px; color: var(--ink2); cursor: pointer;
  background: #fff; transition: all .15s; user-select: none;
}
.exp-f input { margin: 0; }
.exp-f:hover { border-color: var(--brand); }
.exp-f.on { background: #eef4ff; border-color: var(--brand); color: var(--brand); }
.exp-tip { font-size: 11px; color: var(--ink3); line-height: 1.6; margin-top: 7px; }
.exp-time .quick { margin-bottom: 10px; }
.exp-range { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); }
.exp-range input[type=date] { flex: 1; min-width: 0; }
.exp-hint {
  margin-top: 14px; padding: 10px 12px; background: #f8fafc;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 11.5px; color: var(--ink3); line-height: 1.6;
}
@media (max-width: 900px) {
  .exp { grid-template-columns: 1fr; gap: 16px; }
  .exp-fields { max-height: 240px; }
}

/* ============================================================
   表单设计器：字段列表 + 实时预览
   ============================================================ */
.fd { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.fd-left { min-width: 0; }
.fd-list { margin: 12px 0 16px; max-height: 260px; overflow-y: auto; }
.fd-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  margin-bottom: 8px; background: #fff;
}
.fd-item.on { border-color: var(--brand); background: #f5f9ff; }
.fd-nm-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fd-nm-row b { font-size: 12.5px; font-weight: 500; }
.fd-type {
  font-size: 10.5px; padding: 1px 7px; border-radius: 9px;
  background: #f0f4fa; color: var(--ink2);
}
.fd-type.sys { background: #eef4ff; color: var(--brand); }
.fd-req { font-size: 11px; color: var(--danger); }
.fd-opt { font-size: 11px; color: var(--ink4); }
.fd-sys { font-size: 10.5px; color: var(--ink4); }
.fd-meta { font-size: 11px; color: var(--ink3); margin-top: 3px; line-height: 1.5; }
.fd-item .acts { display: flex; gap: 9px; white-space: nowrap; padding-top: 1px; }
.fd-editor { border-top: 1px solid var(--line); padding-top: 14px; }
.fd-ed-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.fd-ed-hd b { font-size: 13px; font-weight: 500; }

.fd-right { min-width: 0; }
.fd-pv-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; color: var(--ink); font-weight: 500; margin-bottom: 10px;
}
.fd-pv-hd span { font-size: 11px; color: var(--ink3); font-weight: 400; }
.fd-ph {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #f5f7fa; box-shadow: 0 3px 12px rgba(20,40,80,.07);
}
.fd-ph-bar { height: 26px; background: #1657C8; }
.fd-ph-body { background: #fff; padding: 14px 13px 18px; min-height: 300px; }
.pv-title { font-size: 14px; font-weight: 600; color: #111827; }
.pv-sub { font-size: 11px; color: #9aa3b0; margin: 3px 0 12px; }
.pv-f { margin-bottom: 13px; }
.pv-lb { font-size: 11.5px; color: #374151; margin-bottom: 5px; }
.pv-req { color: #e5484d; font-style: normal; margin-right: 2px; }
.pv-in, .pv-sel, .pv-ta {
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 7px 9px;
  font-size: 11px; color: #9aa3b0; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.pv-ta { min-height: 46px; align-items: flex-start; }
.pv-sel span { color: #c3cad4; }
.pv-unit { color: #c3cad4; font-size: 10px; }
.pv-opts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.pv-opt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: #6b7280; background: #f5f7fa;
  border: 1px solid #eceff3; border-radius: 12px; padding: 3px 9px;
}
.pv-radio, .pv-box {
  width: 10px; height: 10px; border: 1px solid #c3cad4; background: #fff;
  display: inline-block;
}
.pv-radio { border-radius: 50%; }
.pv-box { border-radius: 2px; }
.pv-up {
  border: 1px dashed #d5dae2; border-radius: 7px; padding: 14px 0;
  text-align: center; color: #b6bdc7; background: #fafbfc;
}
.pv-up span { display: block; font-size: 17px; line-height: 1; }
.pv-up em { font-style: normal; font-size: 10.5px; margin-top: 4px; display: block; }
.pv-hint { font-size: 10px; color: #b0b7c2; margin-top: 4px; line-height: 1.5; }
.pv-btn {
  margin-top: 16px; background: #1657C8; color: #fff; text-align: center;
  padding: 9px 0; border-radius: 7px; font-size: 12px;
}
@media (max-width: 1100px) { .fd { grid-template-columns: 1fr; } }

/* ============================================================
   预约业务树
   ============================================================ */
.tr-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
.tr-left { min-width: 0; }
.tr-right { min-width: 0; }
.tr-list { max-height: 460px; overflow-y: auto; }
.tr-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 9px 10px; border-bottom: 1px solid #f1f3f6;
}
.tr-item:hover { background: #fafbfd; }
.tr-br { color: var(--brand); font-size: 11px; width: 12px; flex: none; }
.tr-br.sub { color: #c3cad4; }
.tr-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tr-nm b { font-size: 12.5px; font-weight: 500; }
.tr-tag {
  font-size: 10.5px; padding: 1px 7px; border-radius: 9px;
  background: #f0f4fa; color: var(--ink2);
}
.tr-tag.br { background: #eef4ff; color: var(--brand); }
.tr-tag.leaf { background: #eefaf1; color: #2f855a; }
.tr-tip { font-size: 10.5px; color: var(--ink4); }
.tr-item .acts { display: flex; gap: 9px; white-space: nowrap; flex: none; }
.tr-dis { font-size: 11px; color: var(--ink4); }

.pv-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 8px; }
.pv-cb { font-size: 10.5px; color: #6b7280; cursor: pointer; }
.pv-cb.now { color: #1657C8; font-weight: 500; }
.pv-cb:hover { text-decoration: underline; }
.pv-cb-sep { font-size: 10px; color: #c3cad4; }
.pv-chip {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 10.5px; color: #374151; background: #f5f7fa;
  border: 1px solid #e5e9ef; border-radius: 13px; padding: 5px 10px;
}
.pv-chip em { font-style: normal; color: #b0b7c2; }
.pv-chip.on { background: #eef4ff; border-color: #b9cdf5; color: #1657C8; }
.pv-chip.on i { font-style: normal; font-size: 11px; color: #8aa4d6; }
.pv-empty { font-size: 11px; color: #b0b7c2; padding: 8px 0; }
.pv-picked { margin-top: 14px; border-top: 1px dashed #eceff3; padding-top: 10px; }
.pv-picked label { display: block; font-size: 10.5px; color: #9aa3b0; margin-bottom: 6px; }
@media (max-width: 1100px) { .tr-wrap { grid-template-columns: 1fr; } }

/* 支付配置页的密钥输入 */
.pay-secret { display: flex; align-items: center; gap: 10px; }
.pay-secret input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pay-secret .lk { flex: none; font-size: 11.5px; }

/* ============================================================
   后台登录页装修器：模板选择 / 画布 / 元素树 / 属性
   ============================================================ */
.lgk-bar { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; }
.lgk-dirty {
  font-size: 11.5px; color: #b47818; background: #fff8ea;
  border: 1px solid #f0d9a8; border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.lgk-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.lgk-preset {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.lgk-preset:hover { border-color: var(--brand); }
.lgk-preset.on { border-color: var(--brand); background: #f5f9ff; box-shadow: 0 0 0 2px rgba(22, 87, 200, .08); }
.lgk-thumb {
  height: 78px; border-radius: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lgk-mini {
  width: 112px; height: 64px; display: flex; overflow: hidden; position: relative;
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .55);
}
.lgk-mini i { display: block; height: 100%; }
.lgk-mini b { position: absolute; left: 58px; right: 16px; bottom: 9px; height: 7px; border-radius: 2px; }
.lgk-preset strong { display: block; font-size: 12.5px; font-weight: 500; margin-top: 7px; }
.lgk-preset span { display: block; font-size: 11px; color: var(--ink3); line-height: 1.5; margin-top: 2px; min-height: 33px; }

.lgk-stage {
  background: #eef1f5; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; display: flex; justify-content: center; overflow: hidden;
}
.lgk-legend { display: flex; gap: 16px; align-items: center; font-size: 11px; color: var(--ink3); margin-top: 8px; }
.lgk-legend i { display: inline-block; width: 10px; height: 2px; background: #2F7BFF; margin-right: 5px; vertical-align: middle; }
.lgk-legend b { color: var(--ink2); font-weight: 500; }

.lgk-cols { display: grid; grid-template-columns: 320px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
@media (max-width: 1000px) { .lgk-cols { grid-template-columns: 1fr; } }

.lgk-tree { padding: 2px 10px 12px; }
.lgk-node {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border-radius: 7px; font-size: 12px; color: var(--ink2);
  cursor: pointer; border: 1px solid transparent; user-select: none;
}
.lgk-node:hover { background: var(--line2); }
.lgk-node.on { background: var(--brand-s); border-color: #cfe0ff; color: var(--brand); }
.lgk-node .g { color: var(--ink4); font-size: 10px; }
.lgk-node .tx { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgk-node .mv { color: var(--ink4); padding: 0 2px; font-size: 11px; }
.lgk-node .mv:hover { color: var(--brand); }
.lgk-node .del { color: var(--ink4); font-size: 14px; padding: 0 2px; line-height: 1; }
.lgk-node .del:hover { color: var(--danger); }
.lgk-sub { font-size: 10.5px; color: var(--ink4); padding: 10px 9px 4px; }
.lgk-empty { font-size: 11px; color: var(--ink4); padding: 4px 9px 8px; }
.lgk-f .pp-g { margin-bottom: 10px; }
.pp .pp-sub {
  font-size: 10.5px; color: var(--ink4); letter-spacing: .03em;
  margin: 14px 0 8px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.pp .pp-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pp .pp-empty { font-size: 11.5px; color: var(--ink4); padding: 18px 0; text-align: center; }

/* 对齐辅助线（在卡片内部，跟着画布一起缩放） */
.lgk-gv, .lgk-gh { position: absolute; display: none; background: #2F7BFF; z-index: 20; pointer-events: none; }
.lgk-gv { top: 0; bottom: 0; width: 1.5px; }
.lgk-gh { left: 0; right: 0; height: 1.5px; }
.lgk-gv b, .lgk-gh b {
  position: absolute; font-size: 9px; font-weight: 400; color: #fff;
  background: #2F7BFF; padding: 1px 5px; border-radius: 3px; white-space: nowrap;
}
.lgk-gv b { top: 4px; left: 3px; }
.lgk-gh b { left: 4px; top: 3px; }

/* 编辑器里的选中态：只在装修画布生效，不影响真实登录页 */
.lgs-edit { user-select: none; }
.lgs-edit .lgs-t, .lgs-edit .lgs-f, .lgs-edit .lgs-logo { cursor: grab; }
.lgs-edit .lgs-t.on, .lgs-edit .lgs-f.on, .lgs-edit .lgs-logo.on {
  outline: 1.5px solid #2F7BFF; outline-offset: 2px;
}
.lgs-edit .lgs-t:hover, .lgs-edit .lgs-logo:hover { outline: 1px dashed rgba(47, 123, 255, .55); outline-offset: 2px; }
.lgs-edit .lgs-f:hover { outline: 1px dashed rgba(47, 123, 255, .35); outline-offset: 4px; }
.lgs-f.ro input, .lgs-f.ro button, .lgs-f.ro label, .lgs-f.ro .lgs-lk { pointer-events: none; }
/* 装修画布里的按钮只是样子，光标跟整块表单一样是「可拖动」 */
.lgs-edit .lgs-f.ro .lgs-bt, .lgs-edit .lgs-f.ro .lgs-lk, .lgs-edit .lgs-f.ro .lgs-cb { cursor: inherit; }

/* ============================================================
   支付配置：回调预览 / 自检结果 / 配置步骤
   ============================================================ */
.pay-notify-preview {
  margin-top: 12px; padding: 12px 14px; border-radius: 9px;
  background: #f8fafc; border: 1px solid var(--line);
  font-size: 12px; line-height: 2;
}
.pay-notify-preview div { display: flex; gap: 10px; align-items: baseline; }
.pay-notify-preview span { color: var(--ink3); flex: none; width: 92px; }
.pay-notify-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink2); word-break: break-all;
}
.pay-issue {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.7; border: 1px solid;
}
.pay-issue b { font-weight: 500; margin-right: 8px; }
.pay-issue.error { background: var(--danger-s); border-color: #f3c9c9; color: #a63131; }
.pay-issue.error b { color: var(--danger); }
.pay-issue.warn { background: var(--warn-s); border-color: #f0d9a8; color: #8a5f13; }
.pay-issue.warn b { color: #b47818; }
.pay-issue.ok { background: #f2fbf5; border-color: #cfe9d8; color: #2f855a; }
.pay-steps {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--ink2); line-height: 1.9;
}
.pay-steps div { display: flex; gap: 8px; align-items: baseline; }
.pay-steps b {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-s); color: var(--brand); font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.pay-steps code {
  font-family: ui-monospace, monospace; font-size: 11px;
  background: #f5f7fa; padding: 1px 5px; border-radius: 4px;
}

/* 代客登记：业务多选 */
.apc-bizs { display: flex; flex-wrap: wrap; gap: 8px; }
.apc-biz {
  font-size: 12px; padding: 6px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink2);
  transition: all .15s; user-select: none;
}
.apc-biz:hover { border-color: var(--brand); }
.apc-biz.on { background: #eef4ff; border-color: var(--brand); color: var(--brand); }

/* 员工页：小组管理 */
.grp-list { display: flex; flex-wrap: wrap; gap: 10px; }
.grp {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: #fff; min-width: 168px;
}
.grp b { font-size: 12.5px; font-weight: 500; }
.grp .m { display: block; font-size: 11px; color: var(--ink3); margin-top: 4px; }
.grp .a { display: flex; gap: 10px; margin-top: 8px; font-size: 11.5px; }

/* ============================================================
   工商数据源：测试结果样例
   ============================================================ */
.cs-samples { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cs-sample {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: #fff;
}
.cs-sample b { font-size: 12.5px; font-weight: 500; display: block; }
.cs-sample span { font-size: 11.5px; color: var(--ink3); }

/* ============================================================
   销售漏斗（压缩成一条横向阶梯，不再占半屏）
   ============================================================ */
.fnx { display: flex; align-items: stretch; gap: 6px; }
.fnx-i {
  flex: 1; min-width: 0; background: var(--line2); border-radius: 9px; padding: 9px 12px;
}
.fnx-i.key { background: var(--brand-s); }
.fnx-lb { font-size: 11px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnx-v {
  font-size: 20px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  line-height: 1.3; margin-top: 2px;
}
.fnx-nt { font-size: 10.5px; color: var(--ink4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnx-rt {
  flex: 0 0 42px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ink4);
}
.fnx-rt b { font-weight: 500; color: var(--brand); font-size: 11.5px; }
@media (max-width: 900px) {
  .fnx { flex-wrap: wrap; }
  .fnx-i { flex: 1 1 40%; }
  .fnx-rt { flex: 0 0 100%; flex-direction: row; gap: 4px; }
}

/* ============================================================
   导出面板：快捷时间改成胶囊样式，别像一个个方框
   ============================================================ */
.exp-st { font-size: 11px; color: var(--ink4); margin: 2px 0 6px; }
.exp-time .quick { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.exp-time .qb {
  height: 24px; padding: 0 13px; border-radius: 12px;
  border: 1px solid transparent; background: #eef2f7; color: var(--ink2);
}
.exp-time .qb:hover { background: #e4ecf8; color: var(--brand); }
.exp-time .qb.on { background: var(--brand); color: #fff; }
.exp-range { border-top: 1px dashed var(--line); padding-top: 10px; }

/* ============================================================
   导出面板：导出范围选择 + 时间区禁用态
   ============================================================ */
.exp-scope { display: flex; flex-direction: column; gap: 8px; }
.exp-scope-item {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px;
  cursor: pointer; background: #fff; transition: all .15s;
}
.exp-scope-item:hover { border-color: var(--brand); }
.exp-scope-item.on { border-color: var(--brand); background: #f5f9ff; }
.exp-scope-item input { margin: 0; }
.exp-scope-item b { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.exp-scope-item span { font-size: 11px; color: var(--ink3); line-height: 1.5; }
.exp-time.dis { opacity: .45; pointer-events: none; }

/* ============================================================
   小程序文案配置
   ============================================================ */
.cp-list { display: flex; flex-direction: column; gap: 12px; }
.cp-item {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cp-label { font-size: 12.5px; color: var(--ink); font-weight: 500; }
.cp-switch { display: flex; align-items: center; gap: 6px; flex: none; }
.cp-switch span { font-size: 11.5px; color: var(--ink3); }
.cp-item input[type=text], .cp-item input:not([type]), .cp-item textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 12.5px; font-family: inherit; color: var(--ink); background: #fbfcfd; outline: none;
}
.cp-item input:focus, .cp-item textarea:focus { border-color: var(--brand); background: #fff; }
.cp-item textarea { resize: vertical; line-height: 1.6; }
.cp-hint { font-size: 11px; color: var(--ink4); margin-top: 6px; line-height: 1.6; }
.cp-style { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.cp-style label { font-size: 11.5px; color: var(--ink3); }
.cp-style input[type=number] { width: 62px; }
.cp-style input[type=color] { width: 32px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; }
.cp-pv { margin-left: auto; font-weight: 500; }