/* styles.css — Losoot 六神通头浴 · 企业一体化大平台 POC（浅色汇报风） */
:root {
  --brand: #1F5F55;        /* 深青绿 主色 */
  --brand-2: #2E7D6E;
  --brand-deep: #14463F;
  --gold: #C9A227;         /* 草木金 点缀 */
  --gold-soft: #F5EAD0;
  --ink: #22343A;
  --ink-2: #5A6E6A;
  --ink-3: #8CA09B;
  --bg: #F4F7F6;
  --card: #FFFFFF;
  --line: #E2E9E7;
  --line-2: #D0DBD8;
  --ok: #2F855A;   --ok-bg: #E6F4EC;
  --warn: #B7791F; --warn-bg: #FBF0DC;
  --danger: #C0392B; --danger-bg: #FBEAE7;
  --info: #2F6FB0;  --info-bg: #E8F1FA;
  --side-w: 236px;
  --top-h: 58px;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(20,60,52,.08), 0 4px 14px rgba(20,60,52,.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 14px; color: var(--ink); background: var(--bg);
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 13px; color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
[hidden] { display: none !important; }
.mono { font-family: Consolas, "Courier New", monospace; }

/* ============ 登录/角色选择 ============ */
.login-wrap {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(201,162,39,.16), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(31,95,85,.22), transparent 55%),
    linear-gradient(135deg, #0F3B34 0%, #1F5F55 55%, #2E7D6E 100%);
}
.login-box { width: 860px; max-width: 94vw; color: #fff; }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand .logo {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px;
  background: linear-gradient(145deg, var(--gold), #E5C55B);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #14463F; font-weight: 800; letter-spacing: .5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.login-brand h1 { font-size: 26px; letter-spacing: 2px; font-weight: 600; }
.login-brand .en { font-size: 12px; letter-spacing: 4px; color: rgba(255,255,255,.72); margin-top: 6px; text-transform: uppercase; }
.login-brand p { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.85); }
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.role-card {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px; padding: 18px 12px; text-align: center; color: #fff;
  transition: transform .15s, background .15s; backdrop-filter: blur(4px);
}
.role-card:hover { background: rgba(255,255,255,.20); transform: translateY(-3px); }
.role-card .ic { font-size: 26px; margin-bottom: 8px; }
.role-card .nm { font-size: 14px; font-weight: 600; }
.role-card .ds { font-size: 11px; color: rgba(255,255,255,.75); margin-top: 6px; line-height: 1.5; }
.login-foot { text-align: center; margin-top: 22px; font-size: 12px; color: rgba(255,255,255,.6); }
/* 登录页「继续上次演示」入口：刷新会记住角色，此处保留回到现场的快捷方式 */
.login-resume { margin-top: 14px; text-align: center; }
.login-resume-btn {
  background: rgba(201,162,39,.20); border: 1px solid rgba(201,162,39,.55); color: #F0D68A;
  border-radius: 999px; padding: 9px 22px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .15s;
}
.login-resume-btn:hover { background: rgba(201,162,39,.34); transform: translateY(-1px); }
.login-resume-tip { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.45); }
.login-clear-btn {
  margin-top: 10px; background: none; border: none; border-bottom: 1px dashed rgba(255,255,255,.28);
  color: rgba(255,255,255,.42); font-size: 11px; cursor: pointer; padding: 0 0 2px;
}
.login-clear-btn:hover { color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.55); }

/* ============ 应用外壳 ============ */
#app { display: none; min-height: 100vh; }
#app.on { display: block; }
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w);
  background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand) 100%);
  color: #DFECE9; z-index: 30; display: flex; flex-direction: column;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.side-brand .logo {
  width: 42px; height: 34px; flex: 0 0 42px; border-radius: 10px;
  background: linear-gradient(145deg, var(--gold), #E5C55B);
  display: flex; align-items: center; justify-content: center;
  color: #14463F; font-weight: 800; font-size: 11px; letter-spacing: .5px;
}
.side-brand .t1 { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.side-brand .t2 { font-size: 10px; color: rgba(255,255,255,.55); letter-spacing: 1px; }
.side-nav { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
.side-nav::-webkit-scrollbar { width: 5px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.nav-group { margin-top: 12px; }
.nav-group-title {
  padding: 5px 16px; font-size: 11px; color: rgba(255,255,255,.5);
  letter-spacing: 1px; display: flex; align-items: center; gap: 6px;
}
.nav-group-title .ph { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(201,162,39,.25); color: #EBD289; }
.nav-group-title { cursor: pointer; }
.nav-group-title .nav-collapse { margin-left: auto; font-size: 9px; line-height: 1; opacity: .6; transition: transform .15s ease; transform: rotate(0); }
.nav-group.collapsed > .nav-group-title .nav-collapse { transform: rotate(-90deg); }
.nav-group.collapsed .nav-item { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px; font-size: 13px; color: #CFE0DC;
  cursor: pointer; border-left: 3px solid transparent; user-select: none;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.on { background: rgba(255,255,255,.13); color: #fff; border-left-color: var(--gold); font-weight: 600; }
.nav-item .ic { width: 18px; text-align: center; opacity: .85; font-size: 13px; }
.nav-item .badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 10px; border-radius: 8px; padding: 1px 6px; }
.side-foot { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: rgba(255,255,255,.5); }

.main { margin-left: var(--side-w); padding-top: var(--top-h); min-height: 100vh; }
.topbar {
  position: fixed; top: 0; left: var(--side-w); right: 0; height: var(--top-h);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); z-index: 25;
  display: flex; align-items: center; padding: 0 22px; gap: 14px;
}
.topbar .crumb { font-size: 13px; color: var(--ink-2); }
.topbar .crumb b { color: var(--ink); font-size: 15px; margin-left: 8px; }
.topbar .spacer { flex: 1; }
.top-chip { font-size: 11px; color: var(--brand); background: #EAF3F1; border: 1px solid #CFE4DF; padding: 3px 10px; border-radius: 12px; }
.role-badge { font-size: 12px; color: #fff; background: var(--brand-2); padding: 4px 12px; border-radius: 14px; }
.btn-exit { font-size: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); border-radius: 8px; padding: 5px 12px; }
.btn-exit:hover { color: var(--danger); border-color: var(--danger); }
.btn-role { font-size: 12px; border: 1px solid var(--brand); background: #fff; color: var(--brand); border-radius: 8px; padding: 5px 12px; cursor: pointer; margin-left: 8px; }
.btn-role:hover { background: #EAF3F1; }
.role-pop { position: absolute; top: 50px; right: 64px; z-index: 80; width: 248px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 10px 30px rgba(20,70,63,.18); padding: 8px; }
.role-pop[hidden] { display: none; }
.role-pop-hd { font-size: 12px; color: var(--ink-2); padding: 4px 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.role-opt { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 9px; cursor: pointer; }
.role-opt:hover { background: #F4F8F7; }
.role-opt .ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: #EAF3F1; color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.role-opt .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.role-opt .sb { font-size: 11px; color: var(--ink-2); }

#page { padding: 20px 22px 40px; }

/* ============ 通用组件 ============ */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; margin-bottom: 16px; border: 1px solid rgba(226,233,231,.6);
}
.card-hd { display: flex; align-items: center; margin-bottom: 12px; }
.card-hd .t { font-size: 15px; font-weight: 600; }
.card-hd .s { font-size: 12px; color: var(--ink-3); margin-left: 10px; }
.card-hd .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.kpi {
  background: var(--card); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow); border: 1px solid rgba(226,233,231,.6); position: relative; overflow: hidden;
}
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-2); }
.kpi.gold::before { background: var(--gold); }
.kpi.red::before { background: var(--danger); }
.kpi.blue::before { background: var(--info); }
.kpi .lb { font-size: 12px; color: var(--ink-3); }
.kpi .v { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--ink); }
.kpi .v small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.kpi .sub { font-size: 11px; margin-top: 4px; color: var(--ink-2); }
.kpi .sub.up { color: var(--ok); } .kpi .sub.down { color: var(--danger); }

.pill { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 10px; line-height: 1.6; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.danger { background: var(--danger-bg); color: var(--danger); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.gold { background: var(--gold-soft); color: #8A6D14; }
.pill.mute { background: #EEF2F1; color: var(--ink-2); }
.pill.brand { background: #EAF3F1; color: var(--brand); }

.btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; padding: 7px 15px; border-radius: 9px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  transition: all .12s;
}
.btn:hover { border-color: var(--brand-2); color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.gold:hover { background: #B8931F; }
.btn.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.sm { font-size: 12px; padding: 4px 10px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 表格 */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-weight: 600; color: var(--ink-2); font-size: 12px;
  padding: 9px 10px; border-bottom: 1px solid var(--line-2);
  background: #F7FAF9; white-space: nowrap;
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: #F4F9F7; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .nowrap { white-space: nowrap; }
.tbl .empty { text-align: center; color: var(--ink-3); padding: 28px 0; }

.tbl-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.tbl-tools input[type=text] {
  border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 12px; width: 220px; outline: none;
}
.tbl-tools input[type=text]:focus { border-color: var(--brand-2); }
.tbl-tools select {
  border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; outline: none; background: #fff;
}
.tbl-tools .cnt { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.pager button { border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 3px 9px; font-size: 12px; }
.pager button.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 抽屉/弹窗/遮罩/Toast */
.mask { position: fixed; inset: 0; background: rgba(15,40,35,.4); z-index: 60; opacity: 0; transition: opacity .18s; }
.mask.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 720px; max-width: 92vw;
  background: #fff; z-index: 61; box-shadow: -8px 0 30px rgba(15,40,35,.18);
  transform: translateX(100%); transition: transform .22s ease-out;
  display: flex; flex-direction: column;
}
.drawer.show { transform: none; }
.drawer-hd { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.drawer-hd .t { font-size: 16px; font-weight: 600; }
.drawer-hd .x {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: none;
  background: #F1F5F4; color: var(--ink-2); font-size: 15px;
}
.drawer-hd .x:hover { background: var(--danger-bg); color: var(--danger); }
.drawer-bd { flex: 1; overflow-y: auto; padding: 18px 20px; }
.drawer-ft { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-46%) scale(.97); opacity: 0;
  background: #fff; border-radius: 14px; z-index: 62; width: 520px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(15,40,35,.3); transition: transform .18s, opacity .18s;
}
.modal.show { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.modal-hd { padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; display: flex; }
.modal-hd .x { margin-left: auto; cursor: pointer; color: var(--ink-3); font-size: 16px; }
.modal-bd { padding: 18px 20px; }
.modal-ft { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.toasts { position: fixed; top: 16px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #26433D; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; transform: translateY(-8px);
  transition: all .2s; max-width: 380px;
}
.toast.show { opacity: 1; transform: none; }
.toast.ok { background: #2F6E4F; } .toast.err { background: #A03A2C; } .toast.warn { background: #9A6B12; }

/* 表单 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-item label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.form-item input, .form-item select, .form-item textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; outline: none;
}
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { border-color: var(--brand-2); }
.form-item .full { grid-column: 1 / -1; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; font-size: 13px; }
.kv .k { color: var(--ink-3); }
.kv .v { color: var(--ink); }

/* 图表 */
.chart { width: 100%; min-height: 60px; }
.chart svg { width: 100%; display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid32 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
/* 老板驾驶舱：地图整行铺满（腾讯地图 zoom 最小为 3，容器越宽可见经度越大，
   宽屏下可一屏容纳全球 4 大区），渠道商汇总下沉一行 */
.boss-map-row { grid-template-columns: 1fr; }
.boss-map-row .boss-map-card { order: 1; }
.boss-map-row .boss-org-card { order: 2; }
.boss-org-card #bxOrg { max-height: 260px; overflow: auto; }
.grid23 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }

/* 门店十步法 */
.sop-steps { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.sop-step {
  flex: 1; min-width: 72px; text-align: center; padding: 8px 4px; border-radius: 9px;
  background: #EEF3F1; color: var(--ink-2); font-size: 12px; cursor: pointer; border: 1px solid transparent;
}
.sop-step.done { background: var(--ok-bg); color: var(--ok); }
.sop-step.on { background: var(--brand); color: #fff; font-weight: 600; }
.sop-detail { text-align: center; padding: 20px 10px; }
.sop-detail .n { font-size: 42px; font-weight: 700; color: var(--brand); opacity: .25; }
.sop-detail .t { font-size: 18px; font-weight: 600; margin-top: -30px; }
.sop-detail .d { margin-top: 12px; color: var(--ink-2); font-size: 13px; line-height: 1.8; max-width: 560px; margin-left: auto; margin-right: auto; }
.contra-box {
  margin-top: 16px; background: var(--danger-bg); border: 1px solid #F1C4BC; color: var(--danger);
  border-radius: 10px; padding: 12px 16px; font-size: 13px; display: none;
}
.contra-box.show { display: block; animation: shake .3s; }
@keyframes shake { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-5px);} 75% { transform: translateX(5px);} }

/* AI 对话 */
.chat-box { height: 380px; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.7; }
.msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 3px; }
.msg.bot { align-self: flex-start; background: #F0F5F3; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg.bot .guard { margin-top: 8px; font-size: 11px; color: var(--warn); background: var(--warn-bg); border-radius: 7px; padding: 4px 8px; display: inline-block; }
.chat-input { display: flex; gap: 10px; margin-top: 12px; }
.chat-input input { flex: 1; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; outline: none; }
.chat-input input:focus { border-color: var(--brand-2); }
.chat-quick { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chat-quick button { font-size: 12px; border: 1px dashed var(--line-2); background: #FAFCFB; border-radius: 14px; padding: 4px 12px; color: var(--ink-2); }
.chat-quick button:hover { color: var(--brand); border-color: var(--brand-2); }

/* 合规白名单 */
.claim-test { display: flex; gap: 10px; }
.claim-test input { flex: 1; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 14px; outline: none; font-size: 14px; }
.claim-result { margin-top: 14px; border-radius: 12px; padding: 16px 18px; display: none; line-height: 2; font-size: 14px; }
.claim-result.show { display: block; }
.claim-result.pass { background: var(--ok-bg); border: 1px solid #BFE0CC; }
.claim-result.block { background: var(--danger-bg); border: 1px solid #F1C4BC; }
.claim-result mark { background: #F5B7AE; color: #7B1E12; padding: 1px 5px; border-radius: 5px; font-weight: 600; }
.claim-result .why { display: block; font-size: 12px; color: var(--danger); }
.wl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.wl-chips .w { font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.wl-chips .w.ok { background: var(--ok-bg); color: var(--ok); }
.wl-chips .w.no { background: var(--danger-bg); color: var(--danger); }

/* 流程闭环演示条 */
.loop-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--gold-soft); border: 1px solid #E8D9A8; border-radius: 12px;
  padding: 10px 16px; margin-bottom: 16px; font-size: 13px; color: #6B5310;
}
.loop-bar b { color: #4A3A0A; }
.loop-arrow { color: var(--gold); font-weight: 700; }

/* 商城 C 端 */
.mall-hero {
  border-radius: 14px; overflow: hidden; position: relative; color: #fff; margin-bottom: 16px;
  background: linear-gradient(120deg, #14463F, #1F5F55 55%, #2E7D6E); padding: 34px 30px;
}
.mall-hero h2 { font-size: 22px; }
.mall-hero p { margin-top: 8px; color: rgba(255,255,255,.85); font-size: 13px; max-width: 640px; line-height: 1.8; }
.goods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.goods {
  background: #fff; border-radius: 12px; border: 1px solid var(--line);
  overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.goods:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.goods .pic { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; }
.goods .bd { padding: 12px 14px; }
.goods .nm { font-size: 13px; font-weight: 600; line-height: 1.5; min-height: 40px; }
.goods .pr { color: var(--danger); font-weight: 700; font-size: 16px; margin-top: 6px; }
.goods .pr small { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 6px; }

/* 设备卡片 */
.dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dev {
  background: #fff; border-radius: 12px; border: 1px solid var(--line); padding: 14px 16px;
}
.dev .hd { display: flex; align-items: center; gap: 8px; }
.dev .dot { width: 9px; height: 9px; border-radius: 50%; }
.dev .dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.dev .dot.off { background: #C4CFCB; }
.dev .sn { font-weight: 600; font-size: 13px; }
.dev .mdl { margin-left: auto; }
.dev .meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.dev .meta b { display: block; color: var(--ink); font-size: 15px; }
.dev-alert {
  margin-top: 10px; font-size: 12px; background: var(--danger-bg); color: var(--danger);
  border-radius: 8px; padding: 7px 10px;
}

/* 时间线 */
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--line-2); }
.tl-item { position: relative; padding-bottom: 14px; font-size: 13px; }
.tl-item::before {
  content: ''; position: absolute; left: -19px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand-2); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2);
}
.tl-item.warn::before { background: var(--warn); }
.tl-item.err::before { background: var(--danger); }
.tl-item .tm { font-size: 11px; color: var(--ink-3); margin-bottom: 2px; }

@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .goods-grid, .dev-grid { grid-template-columns: repeat(2, 1fr); }
  .role-grid { grid-template-columns: repeat(3, 1fr); }
  .grid2, .grid3, .grid32, .grid23 { grid-template-columns: 1fr; }
}
@media print {
  .sidebar, .topbar, .btn-exit, .toasts { display: none !important; }
  .main { margin-left: 0; }
}

/* ================= 扩展演示区：X1 移动端 / X2 IoT地图 / X3 智能体 ================= */
.mobile-grid { align-items: start; }
.mcol { text-align: center; }
.mcol-t { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.mcol-t .s { font-size: 12px; color: var(--ink-3); }
.mcol-tip { font-size: 12px; color: var(--ink-2); background: var(--gold-soft); border-radius: 10px; padding: 8px 14px; margin-top: 12px; text-align: left; }

.phone { width: 316px; height: 640px; margin: 0 auto; background: #14211E; border-radius: 40px; padding: 10px; box-shadow: 0 18px 44px rgba(20,40,36,.28); position: relative; }
.p-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 96px; height: 18px; background: #14211E; border-radius: 0 0 12px 12px; z-index: 3; }
.p-status { display: flex; justify-content: space-between; font-size: 10px; color: #9BB0AB; padding: 4px 18px 2px; background: #fff; border-radius: 30px 30px 0 0; }
.p-body { background: #F6F9F8; height: 540px; overflow-y: auto; padding: 10px 12px; text-align: left; font-size: 12px; }
.p-body::-webkit-scrollbar { width: 0; }
.p-tabbar { display: flex; background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 30px 30px; height: 46px; }
.p-tabbar span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 15px; color: var(--ink-3); cursor: pointer; position: relative; }
.p-tabbar span i { font-style: normal; font-size: 10px; }
.p-tabbar span.on { color: var(--brand); }
.p-dot { position: absolute; top: 6px; right: 22%; background: #C0392B; color: #fff; font-size: 9px; font-style: normal; min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

.p-hero { background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: #fff; border-radius: 14px; padding: 16px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.p-hero b { font-size: 15px; }
.p-hero span { font-size: 11px; opacity: .85; }
.p-hero.biz { background: linear-gradient(135deg, #22343A, #435954); align-items: flex-start; }
.p-rev { font-size: 24px; font-weight: 800; }
.p-hero i { font-style: normal; font-size: 10px; opacity: .75; }
.jingang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.jingang.four { grid-template-columns: repeat(4, 1fr); }
.jingang span { background: #fff; border-radius: 12px; padding: 10px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 16px; color: var(--brand); cursor: pointer; border: 1px solid var(--line); }
.jingang span i { font-style: normal; font-size: 10px; color: var(--ink-2); }
.p-sec { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 8px 0 6px; }
.p-goods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.p-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; }
.p-pic { height: 74px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.p-pic.lg { height: 140px; border-radius: 12px; margin-bottom: 8px; }
.p-nm { padding: 7px 8px 2px; font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-pr { padding: 0 8px 8px; color: #C0392B; font-weight: 700; font-size: 13px; }
.p-pr.big { font-size: 20px; }
.p-detail { background: #fff; border-radius: 12px; padding: 10px; }
.p-spec { font-size: 11px; color: var(--ink-2); line-height: 1.7; margin: 8px 0; }
.p-btns { display: flex; gap: 8px; margin-top: 10px; }
.p-btn { border: none; border-radius: 18px; padding: 8px 14px; font-size: 12px; cursor: pointer; font-weight: 600; }
.p-btn.solid { background: var(--brand); color: #fff; }
.p-btn.ghost { background: var(--gold-soft); color: #6B5310; }
.p-btn.warn { background: var(--warn-bg); color: var(--warn); }
.p-btn.blk { width: 100%; margin-top: 14px; }
.p-btn.mini { padding: 5px 10px; font-size: 11px; border-radius: 13px; }
.p-nav { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; cursor: pointer; }
.p-form { background: #fff; border-radius: 12px; padding: 10px; }
.p-lb { font-size: 11px; color: var(--ink-3); margin: 8px 0 5px; }
.p-opt { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-size: 12px; }
.p-opt i { font-style: normal; margin-left: auto; color: var(--ink-3); font-size: 10px; }
.p-opt.on { border-color: var(--brand); background: #EEF5F3; }
.p-times { display: flex; flex-wrap: wrap; gap: 6px; }
.p-time { border: 1px solid var(--line-2); border-radius: 14px; padding: 5px 10px; font-size: 11px; cursor: pointer; background: #fff; }
.p-time.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.p-me { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 12px; }
.p-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.p-tag { font-size: 10px; color: var(--ink-3); }
.p-tag.hot { background: var(--danger); color: #fff; border-radius: 8px; padding: 1px 6px; }
.p-li { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 9px 10px; margin-bottom: 6px; cursor: pointer; font-size: 12px; }
.p-li i { font-style: normal; color: var(--ink-3); font-size: 10px; }
.p-li.muted { color: var(--ink-3); justify-content: center; cursor: default; }
.p-kpis { display: flex; gap: 6px; margin-bottom: 8px; }
.p-kpis span { flex: 1; background: #fff; border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; }
.p-kpis b { font-size: 16px; color: var(--brand); }
.p-kpis i { font-style: normal; font-size: 9px; color: var(--ink-3); }
.p-kn { background: #fff; border-radius: 10px; padding: 9px 10px; font-size: 11px; }
.p-tip { font-size: 11px; color: var(--ink-3); background: #EEF3F2; border-radius: 8px; padding: 8px 10px; margin-top: 8px; line-height: 1.6; }

/* X2 IoT */
.iot-map-wrap { background: linear-gradient(180deg, #FDFEFE, #F0F5F3); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.iot-pin { transition: r .15s; }
.iot-pin:hover { r: 7; }
.iot-pulse { animation: iotPulse 1.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes iotPulse { 0% { opacity: .9; r: 6; } 100% { opacity: 0; r: 16; } }
.ctl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.ctl-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.ctl-row label { width: 76px; color: var(--ink-2); }
.ctl-row input[type=range] { flex: 1; accent-color: var(--brand); }
.ctl-row select { border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px; font-size: 12px; }
.ctl-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.ctl-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* X3 智能体 */
.ag-welcome { text-align: center; padding: 30px 20px; }
.ag-logo { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.ag-welcome b { font-size: 15px; }
.ag-welcome p { font-size: 12.5px; color: var(--ink-2); line-height: 1.9; margin: 10px 0 16px; }
.guard { display: inline-block; font-size: 11px; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 4px 10px; }
.ag-prog { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.ag-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 3px; transition: width .35s; }
.ag-q { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.ag-opts { display: flex; flex-direction: column; gap: 8px; }
.ag-opt { text-align: left; border: 1px solid var(--line-2); background: #fff; border-radius: 12px; padding: 11px 14px; font-size: 13px; cursor: pointer; transition: all .15s; }
.ag-opt:hover { border-color: var(--brand); background: #EEF5F3; }
.ag-type { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ag-tname { font-size: 22px; color: var(--brand); }
.ag-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; margin: 6px 0; }
.ag-sec { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 14px 0 8px; }
.ag-fx { background: #FAFCFB; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ag-fx span { color: var(--ink-2); font-size: 12px; }
.ag-fx i { font-style: normal; color: var(--ink-3); font-size: 11px; }
.ag-sop { display: flex; flex-wrap: wrap; gap: 6px 14px; background: var(--gold-soft); border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #6B5310; }
.ag-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ============ X1 v2：1:1 对标 Demo 消费者 App（dm- 前缀） ============ */
.p-body.dm { padding: 0 12px 22px; }
.dm-appbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff; border-bottom: 1px solid #edf2f0; position: sticky; top: 0; z-index: 2; }
.dm-appbar .t { font-weight: 800; font-size: 14px; cursor: default; }
.dm-body { padding: 12px; text-align: left; }
.dm-hero { position: relative; height: 96px; border-radius: 14px; background: linear-gradient(135deg, #14463F, #2f7d6e); overflow: hidden; margin-bottom: 10px; display: flex; align-items: flex-end; }
.dm-hero.sm { height: 84px; }
.dm-hero .ov { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.35)); }
.dm-hero .txt { position: relative; padding: 10px 14px; color: #fff; }
.dm-hero .h { font-weight: 800; font-size: 15px; }
.dm-hero .s { font-size: 10.5px; opacity: .85; }
.dm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.dm-quick span { background: #fff; border: 1px solid #edf2f0; border-radius: 12px; padding: 10px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 17px; cursor: pointer; }
.dm-quick span i { font-style: normal; font-size: 10px; color: #5a6e6a; }
.dm-sec { display: flex; justify-content: space-between; align-items: center; margin: 12px 2px 8px; }
.dm-sec .h { font-weight: 800; font-size: 13.5px; color: #22343a; }
.dm-sec .more { font-size: 11px; color: #2f7d6e; cursor: pointer; }
.dm-pcard { background: #fff; border: 1px solid #edf2f0; border-radius: 14px; overflow: hidden; margin-bottom: 10px; cursor: pointer; }
.dm-pcard .top { position: relative; height: 56px; display: flex; align-items: center; padding: 0 14px; }
.dm-pcard .top .nm { color: #fff; font-weight: 800; font-size: 14.5px; }
.dm-pcard .bd { padding: 10px 12px; }
.dm-pcard .meta { display: flex; gap: 12px; font-size: 11px; color: #5a6e6a; margin-bottom: 8px; }
.dm-price { color: #b4463c; font-weight: 800; }
.dm-price.big { font-size: 20px; }
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.dm-li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #edf2f0; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.dm-li.flat { border: 0; padding: 6px 0; margin-bottom: 0; }
.dm-li .g { flex: 1; min-width: 0; }
.dm-li .nm { font-weight: 700; font-size: 12.5px; word-break: break-word; overflow-wrap: anywhere; }
.dm-li .sb, .sb { font-size: 11px; color: #7b8f8a; line-height: 1.5; }
/* 列表项右侧标签/数值不参与压缩，避免与文案抢宽度把中文压成竖排 */
.dm-li > .dm-pill { flex-shrink: 0; }
.dm-li .rt { flex-shrink: 0; }
.dm-av { width: 38px; height: 38px; border-radius: 50%; background: #eaf4f0; color: #2f7d6e; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.dm-card { background: #fff; border: 1px solid #edf2f0; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.dm-card.tip { background: linear-gradient(135deg, #eaf4f0, #f7fbf9); border-color: #cfe6de; }
.dm-pill { display: inline-block; font-size: 10px; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.dm-pill.g { background: #eaf4f0; color: #2f7d6e; }
.dm-tag { display: inline-block; font-size: 10.5px; background: #eef3f2; color: #435954; border-radius: 9px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; }
.dm-tag.on { background: #2f7d6e; color: #fff; }
/* 分类/筛选等位网格：等宽多列，文字不压缩不竖排 */
.dm-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.dm-cats.c4 { grid-template-columns: repeat(4, 1fr); }
.dm-cats.c5 { grid-template-columns: repeat(5, 1fr); }
.dm-cats span { background: #eef3f2; color: #435954; border-radius: 9px; padding: 7px 4px; font-size: 10.5px; text-align: center; white-space: nowrap; cursor: pointer; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dm-cats span.on { background: #2f7d6e; color: #fff; font-weight: 700; }
.dm-note { background: #fff8ef; border-left: 3px solid #c77b3a; padding: 8px 10px; border-radius: 0 8px 8px 0; font-size: 11px; color: #7a5b2a; margin-top: 12px; line-height: 1.6; }
.dm-steps { background: #fff; border: 1px solid #edf2f0; border-radius: 12px; padding: 10px 12px; }
.dm-step { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 12px; }
.dm-step .n { width: 20px; height: 20px; border-radius: 50%; background: #eef3f2; color: #8a97a3; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.dm-step.on .n { background: #2f7d6e; color: #fff; }
.dm-step.on .t { color: #22343a; font-weight: 600; }
.dm-progress { height: 6px; background: #e6edf0; border-radius: 3px; overflow: hidden; }
.dm-progress i { display: block; height: 100%; background: #2f7d6e; border-radius: 3px; transition: width .3s; }
.dm-btn { border: none; border-radius: 20px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; background: #2f7d6e; color: #fff; }
.dm-btn.ghost { background: #eef3f2; color: #435954; }
.dm-btn.sm { padding: 6px 12px; font-size: 11.5px; margin-right: 6px; }
.dm-btn.blk { width: 100%; }
.dm-tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: 12px; border-radius: 10px; overflow: hidden; }
.dm-tbl th { background: #eaf4f0; color: #2f7d6e; padding: 7px 10px; text-align: left; }
.dm-tbl td { padding: 7px 10px; border-top: 1px solid #edf2f0; }
.dm-map { position: relative; height: 120px; border-radius: 12px; background: repeating-linear-gradient(0deg, #f2f7f5 0 14px, #fff 14px 28px), repeating-linear-gradient(90deg, #f2f7f5 0 14px, #fff 14px 28px); border: 1px solid #e2e9e7; }
.dm-map .pin { position: absolute; transform: translate(-50%, -100%); text-align: center; }
.dm-map .pin .d { width: 12px; height: 12px; border-radius: 50%; background: #c0392b; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); margin: 0 auto; }
.dm-map .pin .lb { font-size: 10px; color: #435954; background: #fff; border-radius: 6px; padding: 1px 6px; margin-top: 3px; white-space: nowrap; }
.dm-map .lb2 { position: absolute; left: 12px; bottom: 10px; color: #9fc4b9; font-size: 10px; }
.dm-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.dm-chips::-webkit-scrollbar { height: 0; }
/* 服务入口四宫格：图标在上、文字在下，文字不压缩不竖排 */
.dm-sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 4px; }
.dm-sgrid span { background: #fff; border: 1px solid #edf2f0; border-radius: 12px; padding: 9px 2px 7px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor:pointer; }
.dm-sgrid span:active { background: #eef5f3; }
.dm-sgrid span .ic { width: 30px; height: 30px; border-radius: 9px; background: #eaf4f0; color: #2f7d6e; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; }
.dm-sgrid span .ic.gold { background: #fbf3dc; color: #a8842a; }
.dm-sgrid span .ic.blue { background: #e8f0f8; color: #2f6fb0; }
.dm-sgrid span .ic.purple { background: #f3ecf6; color: #8a5a9e; }
.dm-sgrid span .ic.red { background: #fdeeec; color: #c0392b; }
.dm-sgrid span i { font-style: normal; font-size: 9.5px; color: #5a6e6a; white-space: nowrap; letter-spacing: -.2px; }
.dm-schip { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e2e9e7; border-radius: 11px; padding: 7px 11px; cursor: pointer; flex-shrink: 0; }
.dm-schip.on { border-color: #2f7d6e; background: #eef5f3; }
.dm-schip b { width: 26px; height: 26px; border-radius: 8px; background: #eaf4f0; color: #2f7d6e; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.dm-schip b.self { background: #2f7d6e; color: #fff; }
.dm-schip .nm { display: block; font-style: normal; font-size: 11px; font-weight: 700; }
.dm-schip .tiny { display: block; font-style: normal; font-size: 9.5px; color: #8a97a3; }
.dm-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.dm-pitem { position: relative; background: #fff; border: 1px solid #edf2f0; border-radius: 12px; overflow: hidden; cursor: pointer; padding-bottom: 8px; }
.dm-pitem .pic { height: 74px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.dm-badge { position: absolute; top: 7px; left: 7px; font-size: 9px; padding: 2px 7px; border-radius: 7px; color: #fff; }
.dm-badge.self { background: #2f7d6e; }
.dm-badge.dealer { background: #3a6ea5; }
.dm-pitem .nm { padding: 7px 9px 2px; font-size: 11.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-pitem .sb { padding: 0 9px; }
.dm-pitem .row { padding: 4px 9px 0; justify-content: space-between; }
.dm-dot { background: #c0392b; color: #fff; font-size: 9px; border-radius: 8px; padding: 1px 5px; vertical-align: top; }
.dm-pbig { height: 150px; border-radius: 14px; background: linear-gradient(135deg, #1F5F55, #C9A227); display: flex; align-items: center; justify-content: center; font-size: 44px; margin-bottom: 10px; }
.dm-fixbtns { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 0 2px; background: linear-gradient(180deg, transparent, #f6f9f8 40%); }
.dm-fixbtns .dm-btn { flex: 1; }
.dm-kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #edf2f0; font-size: 12px; gap: 10px; }
.dm-kv .k { color: #8a97a3; flex-shrink: 0; }
.dm-gauge { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dm-gauge .inner { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dm-gauge .v { font-size: 20px; font-weight: 800; color: #22343a; }
.dm-gauge .l { font-size: 9px; color: #8a97a3; }
.dm-ring { width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), #e6edf0 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dm-ring span { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #22343a; }
.dm-fam { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dm-fcard { background: #fff; border: 1px solid #edf2f0; border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; }
.dm-fcard .nm { font-size: 11px; font-weight: 700; margin-top: 4px; }
.dm-fcard .tiny { font-size: 9px; color: #8a97a3; margin-top: 2px; }
.dm-mcard { background: linear-gradient(135deg, #b08d57, #8a6a3c); color: #fff; border-radius: 14px; padding: 18px; margin-bottom: 10px; }
.dm-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dm-bubble { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 12px; line-height: 1.55; margin-bottom: 8px; }
.dm-bubble.me { background: #2f7d6e; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.dm-bubble.ai { background: #fff; border: 1px solid #edf2f0; border-bottom-left-radius: 4px; }
.dm-quickp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dm-chatbar { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px 0 2px; background: linear-gradient(180deg, transparent, #f6f9f8 40%); }
.dm-chatbar input { flex: 1; border: 1px solid #d0dbd8; border-radius: 18px; padding: 8px 12px; font-size: 12px; outline: none; }
.dm-chatbar button { border: none; border-radius: 18px; background: #2f7d6e; color: #fff; padding: 0 16px; font-size: 12px; cursor: pointer; }
.mono { font-family: Consolas, monospace; }
.tiny { font-size: 10px; color: #8a97a3; }

/* ===== X4/X5 扩展端补充样式 ===== */
.small { font-size: 11px; }
.dlnav { display: flex; gap: 8px; flex-wrap: wrap; }
.dlnav span { font-size: 13px; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--line-2); cursor: pointer; color: var(--ink-2); user-select: none; }
.dlnav span.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pagehead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pagehead h1 { font-size: 18px; font-weight: 700; margin: 0; }
.pagehead .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
.li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.li:last-child { border-bottom: 0; }
.li .ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #eef5f3; flex: none; font-size: 14px; }
.li .g { flex: 1; min-width: 0; }
.li .nm { font-weight: 600; font-size: 13px; }
.li .s { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: #eef2f5; color: var(--ink-2); }

/* ===== X6 配置中心 + X1 语言切换补充样式 ===== */
.sw { display: inline-block; width: 34px; height: 19px; border-radius: 10px; background: #cfd8d5; position: relative; transition: background .2s; flex: none; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sw.on { background: var(--brand, #2f7d6e); }
.sw.on::after { left: 17px; }
.btn.gold { background: linear-gradient(135deg, #b98a2f, #d4a94e); color: #fff; border: none; }
.lg-bar { display: flex; gap: 8px; align-items: center; margin: 0 auto 12px; justify-content: center; }
.lg-bar span { font-size: 12px; padding: 5px 14px; border-radius: 16px; border: 1px solid var(--line-2); cursor: pointer; color: var(--ink-2); user-select: none; }
.lg-bar span.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.lg-bar .t { font-size: 11px; color: var(--ink-3); }

/* 地图图例（按经销商分色筛选） */
.map-legend { display:flex; flex-wrap:wrap; gap:8px; padding:6px 2px 12px; }
.map-legend .lg-item { display:inline-flex; align-items:center; font-size:12px; color:var(--ink-2); background:#F3F7F5; border:1px solid var(--line); border-radius:999px; padding:4px 10px; cursor:pointer; user-select:none; }
.map-legend .lg-item::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--c); margin-right:6px; }
.map-legend .lg-item.active { background:var(--c); color:#fff; border-color:var(--c); font-weight:600; }
.map-legend .lg-item.active::before { background:#fff; }

/* E4 台账：窄列不折行 */
.dev-tbl td, .dev-tbl th { white-space:nowrap; }
.dev-tbl td:nth-child(2) { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.dev-tbl td:nth-child(1) { font-size:11px; }
.map-legend .lg-hint { font-size:11px; color:var(--ink-3); align-self:center; margin-left:4px; }

/* ============ 老板角色（B1 驾驶舱 / B2 报表中心 / B3 App） ============ */
.btn.ghost { background: #fff; color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--brand-2); color: var(--brand); }
.sec-t { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.chart-t { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.dev-alert { background: var(--warn-bg); border: 1px solid #EFD9AE; color: #7A5B2A; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.7; }

/* 面包屑（地图下钻） */
.boss-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 2px 10px; flex-wrap: wrap; }
.boss-crumb .bc { color: var(--brand); cursor: pointer; }
.boss-crumb .bc.on { color: var(--ink); font-weight: 600; cursor: default; }
.boss-crumb .sep { color: var(--ink-3); }
.boss-crumb .bc-tip { color: var(--ink-3); font-size: 12px; }
.boss-crumb .btn { margin-left: auto; }

/* 渠道商 / 门店列表 */
.org-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.org-row:hover { background: #F5FAF8; border-color: var(--line); }
.org-row.sm { padding: 8px 6px; }
.org-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.org-idx { width: 20px; height: 20px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.org-main { flex: 1; min-width: 0; }
.org-nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-num { text-align: right; flex: 0 0 auto; }
.org-num b { font-size: 14px; }
.org-num span { font-size: 10px; color: var(--ink-3); margin-left: 2px; }
.org-rate { flex: 0 0 52px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.org-rate i { display: block; height: 5px; border-radius: 3px; min-width: 6px; }
.org-rate span { font-size: 10px; color: var(--ink-3); }
.org-back { font-size: 12px; color: var(--brand); cursor: pointer; padding: 4px 6px 8px; }
.org-back:hover { text-decoration: underline; }

/* 告警列表 */
.al-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.al-row:last-child { border-bottom: 0; }
.al-t { font-size: 12.5px; font-weight: 600; }
.al-s { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.al-n { margin-left: auto; font-size: 10.5px; color: var(--ink-3); flex: 0 0 auto; }

/* 报表快捷入口 */
.rpt-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rpt-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; cursor: pointer; background: #FBFDFC; transition: all .15s; }
.rpt-card:hover { border-color: var(--brand-2); background: #F3FAF7; transform: translateY(-2px); }
.rpt-card .ic { font-size: 20px; }
.rpt-card .nm { font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.rpt-card .ds { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* 报表中心目录 */
.rp-item { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.rp-item:hover { background: #F5FAF8; }
.rp-item.on { background: #EAF3F1; border-color: #CFE3DD; }
.rp-item .ic { font-size: 17px; }
.rp-item .nm { font-size: 13px; font-weight: 600; }
.rp-item .ds { font-size: 11px; color: var(--ink-3); }
.rp-item .go { margin-left: auto; color: var(--ink-3); }

/* 近 7 日柱 */
.spark7 { display: flex; align-items: flex-end; gap: 10px; height: 112px; padding-top: 4px; }
.spark7 .sp { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; }
.spark7 .sp i { display: block; width: 100%; max-width: 36px; background: linear-gradient(180deg, #3E9E85, #2E7D6E); border-radius: 5px 5px 0 0; min-height: 4px; }
.spark7 .sp b { font-size: 11px; color: var(--ink); }
.spark7 .sp s { text-decoration: none; font-size: 10px; color: var(--ink-3); }

/* ============ 老板 App（手机内） ============ */
.p-body.ba { padding: 0; background: #F6F9F8; }
.ba-kpi-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.ba-kpi { background: #fff; border: 1px solid #edf2f0; border-radius: 12px; padding: 9px 10px; }
.ba-kpi span { font-size: 10px; color: #7b8f8a; display: block; }
.ba-kpi b { font-size: 17px; color: #22343a; display: block; margin-top: 2px; line-height: 1.25; }
.ba-kpi b i { font-style: normal; font-size: 10px; color: #8a97a3; font-weight: 400; margin-left: 2px; }
.ba-kpi s { text-decoration: none; font-size: 9.5px; color: #8a97a3; display: block; margin-top: 2px; }
.ba-kpi s.up { color: #2f7d6e; }
.ba-kpi s.down { color: #c0392b; }
.ba-map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #e2e9e7; background: #fff; min-height: 184px; }
.ba-map #baTMap { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 真实地图态：抬高容器，避免 SVG 隐藏后塌陷成扁条 */
.ba-map.real { min-height: 300px; }
.pad-device .ba-map { min-height: 320px; }
.pad-device .ba-map.real { min-height: 380px; }
.ba-svg { display: block; width: 100%; height: auto; }
.ba-svg.big { margin: 6px 0 2px; }
.ba-map-hint { position: absolute; right: 8px; bottom: 6px; font-size: 9px; color: #7b8f8a; background: rgba(255,255,255,.88); border-radius: 8px; padding: 2px 7px; z-index: 2; }
.ba-realtoggle { position: absolute; top: 8px; right: 8px; z-index: 3; font-size: 11px; line-height: 1; padding: 5px 10px; border: 1px solid #cfe0db; background: #fff; color: #2c4a42; border-radius: 9px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.10); }
.ba-realtoggle:hover { background: #f1f7f5; }
/* 大区横向导航条：真实地图在窄屏无法一屏容纳 4 大区（zoom≥3 硬约束），
   用导航条提供一键切换，规避物理限制 */
.ba-rgnav { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: none; }
.ba-rgnav::-webkit-scrollbar { display: none; }
.ba-rgnav-i { flex: 0 0 auto; border: 1px solid #dbe6e2; background: #fff; border-radius: 9px; padding: 5px 10px; text-align: left; cursor: pointer; line-height: 1.25; }
.ba-rgnav-i b { display: block; font-size: 12px; color: var(--c, #2c4a42); }
.ba-rgnav-i span { display: block; font-size: 9.5px; color: #7b8f8a; white-space: nowrap; }
.ba-rgnav-i.on { border-color: var(--c, #2c4a42); background: color-mix(in srgb, var(--c, #2c4a42) 10%, #fff); }
.ba-rgnav-i:hover { border-color: var(--c, #2c4a42); }
.card-hd .ba-realtoggle { position: static; margin-left: auto; }
.ba-bar { align-items: flex-start; }
.ba-prog { height: 4px; background: #eef3f2; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.ba-prog i { display: block; height: 100%; }
.ba-al { cursor: pointer; }
.ba-tbl { width: 100%; border-collapse: collapse; font-size: 10.5px; table-layout: fixed; }
.ba-tbl td, .ba-tbl th { overflow: hidden; text-overflow: ellipsis; }
.ba-tbl th { background: #eaf4f0; color: #2f7d6e; padding: 6px 7px; text-align: left; font-weight: 600; white-space: nowrap; }
.ba-tbl td { padding: 6px 7px; border-top: 1px solid #edf2f0; color: #435954; white-space: nowrap; }
.ba-tbl-ft { padding: 7px 10px; font-size: 10px; color: #8a97a3; border-top: 1px solid #edf2f0; display: flex; justify-content: space-between; }
.ba-tbl-ft a { color: #2f7d6e; cursor: pointer; }
.ba-chat { display: flex; flex-direction: column; gap: 9px; padding: 12px; height: 392px; overflow-y: auto; }
.ba-msg { max-width: 90%; font-size: 11.5px; line-height: 1.75; border-radius: 12px; padding: 9px 11px; }
.ba-msg.ai { background: #fff; border: 1px solid #edf2f0; align-self: flex-start; border-bottom-left-radius: 4px; }
.ba-msg.user { background: #2f7d6e; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ba-typing { color: #8a97a3; font-style: italic; }
.ba-input { display: flex; gap: 8px; padding: 8px 12px 4px; border-top: 1px solid #edf2f0; background: #fff; }
.ba-input input { flex: 1; border: 1px solid #dbe5e2; border-radius: 16px; padding: 8px 12px; font-size: 11.5px; outline: none; }
.ba-input input:focus { border-color: #2f7d6e; }
.ba-input button { border: none; background: #2f7d6e; color: #fff; border-radius: 16px; padding: 0 14px; font-size: 11.5px; font-weight: 700; }
.ba-rep { margin-top: 9px; background: #fff; border: 1px solid #dbe9e4; border-radius: 10px; overflow: hidden; }
.ba-rep .hd { font-size: 11px; font-weight: 800; color: #14463f; padding: 8px 10px; background: #eaf4f0; display: flex; justify-content: space-between; }
.ba-rep .hd i { font-style: normal; font-weight: 400; color: #7b8f8a; }
.ba-rep .kps { display: flex; gap: 6px; padding: 8px 10px 4px; }
.ba-rep .kps > div { flex: 1; }
.ba-rep .kps span { font-size: 9px; color: #7b8f8a; display: block; }
.ba-rep .kps b { font-size: 12.5px; color: #22343a; }
.ba-rep .ft { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: #8a97a3; padding: 6px 10px; border-top: 1px solid #edf2f0; }
.ba-rep .ft a { flex: 0 0 auto; }
.ba-rep .ft a { color: #2f7d6e; cursor: pointer; }

/* 达成率进度条（渠道商 / 门店行内） */
.org-bar { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.org-bar .ob { flex: 1; height: 5px; background: #EDF2F0; border-radius: 3px; overflow: hidden; }
.org-bar .ob i { display: block; height: 100%; border-radius: 3px; }
.org-bar b { font-size: 10px; font-weight: 600; color: var(--ink-3); flex: 0 0 auto; }

/* 排行榜（渠道商 / 门店 GMV） */
.rank-list { display: flex; flex-direction: column; }
.rk { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px; border-radius: 9px; cursor: pointer; }
.rk:hover { background: #F5FAF8; }
.rk > .n { width: 18px; height: 18px; border-radius: 5px; background: #EEF3F1; color: var(--ink-2); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }
.rk:nth-child(1) > .n { background: var(--gold); color: #fff; }
.rk:nth-child(2) > .n { background: #9FB3AD; color: #fff; }
.rk:nth-child(3) > .n { background: #C9A97F; color: #fff; }
.rk .g { flex: 1; min-width: 0; }
.rk .nm { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink); }
.rk .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk .nm b { font-size: 12.5px; color: var(--ink); flex: 0 0 auto; }
.rk .nm b i { font-style: normal; font-size: 10px; color: var(--ink-3); font-weight: 400; margin-left: 1px; }
.rk .bar { display: block; height: 6px; background: #EDF2F0; border-radius: 3px; overflow: hidden; margin: 5px 0 4px; }
.rk .bar i { display: block; height: 100%; border-radius: 3px; }
.rk .sub { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 报表表格不换行（列多时横向滚动） */
#rpTableHost .tbl td, #rpTableHost .tbl th { white-space: nowrap; }

/* ============ F 组 · 跨境 ERP 补充模块 ============ */
/* 多币种资金池 */
.ccy-list { display: flex; flex-direction: column; gap: 2px; }
.ccy-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--line); }
.ccy-row:last-child { border-bottom: 0; }
.ccy-tag { flex: 0 0 46px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.ccy-main { flex: 1; min-width: 0; }
.ccy-amt { font-size: 14.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ccy-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccy-cny { flex: 0 0 auto; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ccy-total { background: #F7FAF9; border-radius: 8px; padding: 10px 8px; margin-top: 4px; border-bottom: 0; }
.ccy-total .ccy-cny { font-weight: 700; color: var(--brand); font-size: 14px; }

/* 毛利率条 */
.mini-margin { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.mg-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.mg-nm { flex: 0 0 88px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-nm.wide { flex: 0 0 122px; }
.mg-bar { flex: 1; height: 8px; background: #EDF2F0; border-radius: 4px; overflow: hidden; }
.mg-bar i { display: block; height: 100%; border-radius: 4px; }
.mg-v { flex: 0 0 62px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 对账算式 */
.recon { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.recon-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.recon-row:last-child { border-bottom: 0; }
.recon-row span { color: var(--ink-2); }
.recon-row b { font-variant-numeric: tabular-nums; }
.recon-row.neg b { color: var(--danger); }
.recon-row.sum { background: #F7FAF9; }
.recon-row.sum b { color: var(--ink); }
.recon-row.ok { background: var(--ok-bg); }
.recon-row.ok b { color: var(--ok); }
.recon-row.bad { background: var(--danger-bg); }
.recon-row.bad b { color: var(--danger); }

/* 履约链路 */
.flowx { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 6px 2px 2px; }
.fx-node { flex: 1 1 0; min-width: 96px; text-align: center; padding: 12px 6px; border-radius: 10px; background: #F7FAF9; border: 1px solid var(--line); position: relative; }
.fx-idx { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.fx-nm { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.fx-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.fx-ar { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 14px; }
.flowx-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.cost-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }

/* 渠道接入条 */
.chan-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.cs-lb { font-size: 11px; color: var(--ink-3); letter-spacing: .5px; margin-right: 2px; }
.ch-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; background: #F7FAF9; border: 1px solid var(--line); font-size: 11.5px; color: var(--ink); }
.ch-item em { font-style: normal; font-size: 10px; color: var(--ink-3); }
.ch-item .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ch-item .dot.ok { background: var(--ok); }
.ch-item .dot.warn { background: var(--warn); }
.ch-item .dot.brand { background: var(--brand-2); }
.ch-item .dot.mute { background: var(--line-2); }
.cs-tip { margin-left: auto; font-size: 11px; color: var(--ink-3); }

/* 渠道等级卡 */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier-card { border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 10px; padding: 12px; background: #fff; }
.tier-nm { font-size: 13px; font-weight: 700; }
.tier-disc { font-size: 26px; font-weight: 800; color: var(--ink); margin: 4px 0 8px; letter-spacing: -.5px; }
.tier-disc small { font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 3px; }
.tier-kv { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-2); padding: 3px 0; }
.tier-kv b { color: var(--ink); font-weight: 600; }
.tier-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 10.5px; color: var(--ink-3); line-height: 1.6; }

/* 促销列表 */
.promo-list { display: flex; flex-direction: column; gap: 9px; }
.promo-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.promo-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.promo-meta { font-size: 11px; color: var(--ink-2); margin-top: 5px; }
.promo-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: var(--ink-3); }
.promo-ft b { font-size: 13px; }

/* ===== F1 多主体合并报表 ===== */
.ent-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.ent-card { border:1px solid var(--line); border-radius:10px; padding:13px 14px; background:#fff; }
.ent-top { display:flex; align-items:center; gap:8px; }
.ent-badge { font-size:10.5px; font-weight:700; color:#fff; padding:2px 7px; border-radius:6px; }
.ent-top b { font-size:13px; }
.ent-name { font-size:11.5px; color:var(--ink-2); margin-top:7px; line-height:1.45; }
.ent-role { font-size:11px; color:var(--ink-3); margin-top:3px; }
.ent-prof { margin-top:10px; display:flex; flex-direction:column; gap:2px; }
.ent-prof span { font-size:11px; color:var(--ink-3); }
.ent-prof b { font-size:16px; color:var(--brand); }
.ent-sub { font-size:11px; color:var(--ink-3); }
.ent-tax { margin-top:9px; font-size:10.5px; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:7px; line-height:1.5; }
.pnl { font-size:13px; }
.pnl-row { display:flex; align-items:baseline; justify-content:space-between; padding:9px 4px; border-bottom:1px solid var(--line); }
.pnl-row:last-child { border-bottom:0; }
.pnl-k { color:var(--ink-2); }
.pnl-k i { display:block; font-style:normal; font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.pnl-v { font-variant-numeric:tabular-nums; font-weight:600; }
.pnl-row.sum { background:var(--bg); font-weight:600; }
.pnl-row.bold { font-size:14px; color:var(--brand); border-top:2px solid var(--line-2); }
.pnl-row.bold .pnl-v { font-size:15px; }

/* ===== 生产 BOM ===== */
.bom-sel { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.bom-hd { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.bom-hd span { font-size:13px; font-weight:600; color:var(--brand-2); }
.bom-hd b { font-size:16px; color:var(--ink); }
.bom-rate { margin-left:auto; font-size:12px; font-weight:600; color:var(--ok); background:var(--ok-bg); padding:2px 9px; border-radius:20px; }
.bom-sub { font-size:11px; color:var(--ink-3); margin-bottom:10px; }
.bom-tbl { font-size:12px; }
.bom-tbl .bom-tot td { background:#F7FAF9; font-weight:600; border-top:1px solid var(--line-2); }

/* ===== F5 连接器 ===== */
.conn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.conn-card { border:1px solid var(--line); border-radius:10px; padding:12px 13px; background:#fff; }
.conn-hd { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.conn-hd b { font-size:13px; }
.conn-cat { font-size:11px; color:var(--ink-3); margin-top:3px; }
.conn-rows { margin-top:9px; display:flex; flex-direction:column; gap:5px; font-size:11.5px; }
.conn-rows div { display:flex; gap:8px; }
.conn-rows span { flex:0 0 64px; color:var(--ink-3); }
.conn-rows i { font-style:normal; color:var(--ink-2); }
.conn-note { margin-top:8px; font-size:10.5px; color:var(--warn); background:var(--warn-bg); padding:5px 8px; border-radius:6px; line-height:1.5; }

/* ===== C1 移动端 · AI 亚健康辨证（面部扫描，移植自桌面原型） ===== */
.face-stage { position: relative; height: 300px; background: radial-gradient(circle at 50% 40%, #16352a, #0c1c16); display: grid; place-items: center; margin: 14px; border-radius: 20px; overflow: hidden; }
.face-ring { width: 168px; height: 220px; border: 2px dashed var(--gold); border-radius: 100px 100px 80px 80px; position: relative; }
.face-ring::before, .face-ring::after { content: ""; position: absolute; background: rgba(199,154,75,.3); }
.face-ring::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.face-ring::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.scan { position: absolute; left: 14px; right: 14px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); top: 20px; animation: scan 2s linear infinite; }
@keyframes scan { 0% { top: 24px; } 100% { top: 260px; } }
.face-hint { position: absolute; bottom: 16px; width: 100%; text-align: center; color: #bfe6cd; font-size: 13px; letter-spacing: 1px; }
.report { margin: 14px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.report .rh { background: var(--brand); color: #fff; padding: 14px 16px; font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.report .rb { padding: 6px 16px; }
.diag { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.diag .v { color: var(--brand); font-weight: 800; font-size: 12px; background: #eef5f0; padding: 3px 10px; border-radius: 12px; text-align: right; }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; }
.dim { background: #f1f8f3; border: 1px solid #dcebe2; border-radius: 10px; padding: 9px 10px; font-size: 12px; line-height: 1.5; }
.dim b { color: var(--brand); }
.train { margin: 0 14px 14px; background: var(--gold-soft); border: 1px solid #f0e2c4; border-radius: 12px; padding: 12px; font-size: 12px; color: #8a6a2c; line-height: 1.6; }

/* ===== B4 老板平板端（横屏设备外壳）===== */
.pad-device {
  /* 宽高各自受视口约束：宽度不能超过内容区（96vw 会把左侧导航算进去导致右侧溢出），
     高度不能超过一屏；两者独立取 min，比例在 1.25~1.7 之间浮动，都像横屏平板 */
  width: min(1240px, 100%);
  height: min(842px, calc(100vh - 92px));
  margin: 14px auto 20px;
  background: #14161a;
  border-radius: 28px;
  padding: 13px;
  box-shadow: 0 30px 70px rgba(18,42,36,.32), 0 1px 0 rgba(255,255,255,.07) inset, inset 0 0 0 1px #2b2f34;
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pad-device::after {            /* 平板 Home 指示条 */
  content: '';
  position: absolute; left: 50%; bottom: 5px;
  transform: translateX(-50%);
  width: 132px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.30);
}
.pad-status {
  height: 26px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: transparent;
  color: #9aa6a2; font-size: 10.5px;
  letter-spacing: .4px; flex: none;
}
.pad-status .ps-mid { flex: 1; display: flex; justify-content: center; }
.pad-status .ps-notch { width: 46px; height: 5px; border-radius: 5px; background: #262b30; }
.pad-screen {
  background: #f2f6f5;
  border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.pad-body { flex: 1; overflow-y: auto; padding: 12px 14px 6px; -webkit-overflow-scrolling: touch; }
/* 首页专用：整页不滚，交给内部两栏各自滚动（地图必须始终可见） */
.pad-body.is-home { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.pad-tabbar { display: flex; background: #fff; border-top: 1px solid #e6ecea; padding: 6px 0 8px; flex: none; }
.pad-tabbar span {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: #8a97a3; cursor: pointer; padding: 3px 0; user-select: none;
}
.pad-tabbar span i { font-style: normal; }
.pad-tabbar span.on { color: #2f7d6e; font-weight: 800; }
.pad-tabbar span.on::before {
  content: ''; width: 26px; height: 3px; border-radius: 3px; background: #2f7d6e;
  display: block; margin-bottom: 1px;
}
/* 单栏 tab（地图/报表/AI/我的）在平板上居中收窄，更像原生平板 App */
.pad-device .dm-body { max-width: 760px; margin: 0 auto; width: 100%; }
.pad-city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.pad-device .ba-map { min-height: 320px; }
.pad-device .ba-chat { height: 460px; }

/* ---------- 平板首页：一屏驾驶舱 ---------- */
.pad-appbar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px 9px;
}
.pad-appbar .pa-t b { font-size: 15px; font-weight: 800; color: #1c2f2a; letter-spacing: .2px; }
.pad-appbar .pa-t span { display: block; font-size: 10.5px; color: #8a97a3; margin-top: 1px; }
.pad-appbar .pa-a { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #8a97a3; white-space: nowrap; }
.pa-live {
  width: 6px; height: 6px; border-radius: 50%; background: #2E9E7E;
  box-shadow: 0 0 0 3px rgba(46,158,126,.16); animation: paPulse 2.4s ease-in-out infinite;
}
@keyframes paPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(46,158,126,.16); } 50% { box-shadow: 0 0 0 5px rgba(46,158,126,.08); } }

.pad-home { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 11px; }
.ph-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: none; }
.ph-kpi {
  position: relative; background: #fff; border: 1px solid #e8efec; border-radius: 12px;
  padding: 9px 12px 9px 15px; overflow: hidden;
}
.ph-kpi::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--c, #2E7D6E);
}
.ph-kpi .k { font-size: 10px; color: #8a97a3; letter-spacing: .3px; }
.ph-kpi .v {
  display: block; font-size: 22px; font-weight: 800; color: #1c2f2a;
  line-height: 1.12; margin-top: 2px; letter-spacing: -.4px;
}
.ph-kpi .v i { font-style: normal; font-size: 10.5px; font-weight: 500; color: #8a97a3; margin-left: 3px; letter-spacing: 0; }
.ph-kpi .s { display: block; font-size: 10px; color: #8a97a3; margin-top: 2px; }
.ph-kpi .s em { font-style: normal; color: #2E7D6E; font-weight: 700; }
.ph-kpi .s em.bad { color: #C0392B; }

/* minmax(0,…) 是关键：fr 默认下限是 min-content，左栏 4 个大区按钮会把右栏挤成 140px */
.ph-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr); gap: 12px; }
.ph-left { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.ph-right { display: flex; flex-direction: column; min-height: 0; gap: 7px; overflow-y: auto; padding-right: 3px; }
.ph-right::-webkit-scrollbar { width: 5px; }
.ph-right::-webkit-scrollbar-thumb { background: #d6e2de; border-radius: 3px; }
.ph-right::-webkit-scrollbar-track { background: transparent; }

.ph-hd { display: flex; align-items: baseline; justify-content: space-between; flex: none; }
.ph-hd .h {
  font-size: 12px; font-weight: 800; color: #1c2f2a; position: relative; padding-left: 9px;
}
.ph-hd .h::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 11px; border-radius: 2px; background: #2E7D6E;
}
.ph-hd .more { font-size: 10px; color: #8a97a3; cursor: pointer; }
.ph-hd .more:hover { color: #2E7D6E; }
.ph-hd .tip { flex: 1; margin: 0 8px; font-size: 9.5px; color: #a8b5b1; }

/* 左栏地图自适应填充，不再固定 320px */
.pad-home .ba-rgnav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; flex: none; overflow: visible; }
.pad-home .ba-rgnav-i { padding: 7px 10px; border-radius: 10px; }
.pad-home .ba-rgnav-i b { font-size: 11.5px; color: var(--c, #2c4a42); }
.pad-home .ba-rgnav-i b i { font-style: normal; font-size: 9px; font-weight: 400; color: #8a97a3; margin-left: 4px; }
.pad-home .ba-rgnav-i span { font-size: 9.5px; white-space: nowrap; color: #7b8f8a; }
.pad-home .ba-rgnav-i em {
  display: block; font-style: normal; font-size: 9.5px; font-weight: 700;
  color: var(--c, #2E7D6E); margin-top: 1px; white-space: nowrap;
}
.pad-home .ba-rgnav-i .nw { font-style: normal; white-space: nowrap; }
.pad-home .ba-map { flex: 1; min-height: 0; background: #F7FBF9; }
.pad-device .pad-home .ba-map, .pad-device .pad-home .ba-map.real { min-height: 0; }
.pad-home .ba-map .ba-svg { width: 100%; height: 100%; }

/* 右栏列表：统一行高与信息密度 */
.ph-row {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid #eef3f2; border-radius: 10px; padding: 8px 11px; flex: none;
}
.ph-row .rn { flex: 1; min-width: 0; }
.ph-row .rn b { display: block; font-size: 11.5px; font-weight: 700; color: #22343a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row .rn s { display: block; text-decoration: none; font-size: 10px; color: #8a97a3; margin-top: 1px; }
.ph-row .rv { text-align: right; flex: none; }
.ph-row .rv b { display: block; font-size: 12.5px; font-weight: 800; color: #1c2f2a; }
.ph-row .rv b i { font-style: normal; font-size: 9px; font-weight: 400; color: #8a97a3; margin-left: 1px; }
.ph-row .rv i { font-style: normal; font-size: 9.5px; color: #8a97a3; }
.ph-row .ba-prog { margin-top: 4px; }

.ph-al {
  display: flex; align-items: center; gap: 9px; background: #fff;
  border: 1px solid #f3e2df; border-radius: 10px; padding: 8px 11px;
  cursor: pointer; flex: none; transition: background .15s, border-color .15s;
}
.ph-al:hover { background: #FEFAF9; border-color: #e8c9c3; }
.ph-al .ic {
  flex: none; width: 24px; height: 24px; border-radius: 8px; background: #FBEAE7;
  color: #C0392B; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.ph-al .rn { flex: 1; min-width: 0; }
.ph-al .rn b { display: block; font-size: 11.5px; font-weight: 700; color: #22343a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-al .rn s { display: block; text-decoration: none; font-size: 10px; color: #8a97a3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-al .go { font-size: 10px; color: #C0392B; flex: none; }

.ph-crm {
  display: flex; align-items: center; gap: 10px; cursor: pointer; flex: none;
  background: linear-gradient(120deg, #f7f4fc, #fff 62%);
  border: 1px solid #eae3f5; border-radius: 11px; padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s;
  position: sticky; bottom: 0; z-index: 2;
  box-shadow: 0 -8px 14px rgba(242,246,245,.92);
}
.ph-crm:hover { border-color: #cbbce8; box-shadow: 0 4px 12px rgba(122,95,176,.10); }
.ph-crm .ic {
  flex: none; width: 26px; height: 26px; border-radius: 9px; background: #7A5FB01f;
  color: #7A5FB0; display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.ph-crm .rn { flex: 1; min-width: 0; }
.ph-crm .rn b { display: block; font-size: 11.5px; font-weight: 700; color: #22343a; }
.ph-crm .rn s { display: block; text-decoration: none; font-size: 10px; color: #8a97a3; margin-top: 1px; }
.ph-crm .warn { font-size: 10px; color: #C0392B; flex: none; white-space: nowrap; }

/* 平板窄屏（竖屏 / 小窗）回退为单栏可滚动布局
   ⚠ 断点取 900 而不是 1080：iPad 横屏 CSS 视口约 1024×768，必须仍走两栏，
   只有真正的竖屏/小窗才降级；且必须把地图 min-height 用同等权重写回来——
   单列时 .ph-left 高度为 auto，flex:1 的地图会塌成 0 高，腾讯地图在 0 尺寸容器上
   初始化会直接抛错（异常 message 为空，极难排查） */
@media (max-width: 900px) {
  .pad-body.is-home { overflow-y: auto; }
  .pad-home { flex: none; }
  .ph-main { grid-template-columns: 1fr; }
  .ph-left { flex: none; }
  .ph-right { max-height: none; overflow: visible; }
  .pad-device .pad-home .ba-map,
  .pad-device .pad-home .ba-map.real { min-height: 260px; }
  .pad-device .dm-body { max-width: 100%; }
  .ph-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* 窄一点的横屏平板：压缩 KPI 与右栏留白，保证 4 列仍能排下 */
@media (max-width: 1080px) and (min-width: 901px) {
  .pad-home { padding: 0 12px 10px; }
  .pad-appbar { padding: 9px 12px 7px; }
  /* 这个尺寸区间（iPad 横屏）空间紧张：整页仍不滚，改为右栏独立滚动，
     地图固定 220px 保证可读，避免地图与 SVG 互相撑高 */
  .pad-body.is-home { overflow: hidden; }
  .pad-home { flex: 1; min-height: 0; }
  .ph-main { flex: 1; min-height: 0; }
  .ph-left { min-height: 0; overflow: hidden; }
  .ph-right { min-height: 0; overflow-y: auto; }
  .ph-kpi { padding: 8px 9px 8px 12px; }
  .ph-kpi .v { font-size: 19px; }
  .ph-kpi .s { font-size: 9px; }
  .ph-row { padding: 7px 9px; }
  .ph-al { padding: 7px 9px; }
  /* 固定高度而不是 flex:1 —— 整页 flex:none 时高度不确定，flex:1 会随 SVG 反复撑高 */
  .pad-device .pad-home .ba-map,
  .pad-device .pad-home .ba-map.real { min-height: 220px; height: 220px; flex: none; }
  .pad-home .ba-rgnav-i span, .pad-home .ba-rgnav-i em { white-space: normal; }
  /* 窄横屏放大区按钮只留两行：名称 + 店数/GMV，在线与达成让位给地图高度 */
  .pad-home .ba-rgnav-i b i { display: none; }
  .pad-home .ba-rgnav-i em { display: none; }
  .ph-hd .tip { display: none; }
}

/* ===== 二期 / 三期 规划模块徽标与页头 ===== */
.ph-tag { font-size: 10px; padding: 2px 8px; border-radius: 9px; font-weight: 600; white-space: nowrap; }
.ph-tag.p2 { background: rgba(201,162,39,.22); color: #EBD289; }
.ph-tag.p3 { background: rgba(47,111,176,.22); color: #9CC4E8; }
.nav-item .ph-tag { margin-left: auto; margin-right: 6px; }
.phase-banner { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; margin-bottom: 16px; border: 1px solid; }
.phase-banner.p2 { background: rgba(201,162,39,.10); border-color: rgba(201,162,39,.40); }
.phase-banner.p3 { background: rgba(47,111,176,.10); border-color: rgba(47,111,176,.40); }
.phase-banner .ph-tag { margin-left: 0; }
.phase-banner .pb-txt { display: flex; flex-direction: column; }
.phase-banner .pb-txt b { font-size: 14px; color: var(--ink); }
.phase-banner .pb-txt span { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* ===== CRM 客户运营中心 专属样式 ===== */
.ph-tag.pcrm { background: rgba(122,95,176,.22); color: #C9B6F2; }
.chip-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { font-size: 12px; padding: 5px 12px; border-radius: 14px; background: #EEF2F1; color: var(--ink-2); cursor: pointer; border: 1px solid transparent; user-select: none; }
.chip:hover { background: #E3EAE8; }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.block-t { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ta { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 13px; resize: vertical; color: var(--ink); background: #fff; box-sizing: border-box; }
.sel { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; background: #fff; color: var(--ink); font-family: inherit; }
.row-click { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; font-size: 13px; }
.row-click:hover { border-color: var(--brand); background: #F4F9F7; }
.row-click .nm { font-weight: 600; } .row-click .nm i { font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.row-click .num { font-weight: 600; color: var(--ink); }
.tag-chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #EAF3F1; color: var(--brand); margin: 2px 4px 2px 0; }
.ch-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 8px; background: #EEF2F1; color: var(--ink-2); margin: 2px 4px 2px 0; }
.seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seg-card { border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 12px; padding: 14px; background: #fff; cursor: pointer; transition: .15s; }
.seg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-2px); }
.seg-nm { font-size: 13px; font-weight: 700; } .seg-n { font-size: 24px; font-weight: 800; margin-top: 6px; } .seg-n small { font-size: 12px; font-weight: 400; color: var(--ink-3); } .seg-p { font-size: 12px; color: var(--ink-3); } .seg-d { font-size: 12px; color: var(--ink-2); margin-top: 6px; } .seg-s { font-size: 12px; color: var(--brand); margin-top: 6px; line-height: 1.5; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.tag-cloud-item { color: var(--brand); } .tag-cloud-item i { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 2px; }
.persona-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; margin-bottom: 10px; } .persona-card:hover { border-color: var(--brand); }
.persona-nm { font-size: 13px; font-weight: 700; margin-bottom: 4px; } .persona-pref { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.click-bars { display: flex; flex-direction: column; gap: 9px; }
.strat-list { display: flex; flex-direction: column; gap: 10px; }
.strat-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.strat-ic { width: 34px; height: 34px; border-radius: 9px; background: #EAF3F1; color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.strat-t { font-size: 13px; font-weight: 600; } .strat-d { font-size: 12px; color: var(--ink-2); margin-top: 2px; } .strat-item .btn { margin-left: auto; }
.journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.journey-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; } .journey-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.jn-hd { display: flex; align-items: center; justify-content: space-between; } .jn-name { font-size: 13px; font-weight: 700; } .jn-conv { font-size: 18px; font-weight: 800; color: var(--brand); }
.jn-trigger { font-size: 11px; color: var(--ink-3); margin: 4px 0 10px; }
.jn-steps { position: relative; } .jn { display: flex; gap: 8px; margin-bottom: 8px; } .jn-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; background: var(--brand); } .jn-dot.man { background: var(--gold); } .jn-line { width: 1px; background: var(--line); margin: -6px 0 -2px 4px; } .jn-t { font-size: 12px; font-weight: 600; } .jn-m { font-size: 11px; color: var(--ink-3); } .jn-foot { font-size: 11px; color: var(--ink-3); margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.tpl-list { display: flex; flex-direction: column; gap: 10px; }
.tpl-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; } .tpl-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .tpl-hd b { font-size: 13px; } .tpl-sc { font-size: 11px; color: var(--ink-3); margin-left: auto; } .tpl-ct { font-size: 12px; color: var(--ink-2); line-height: 1.6; background: #F7FAF9; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.ai-box { background: #F4F8FB; border: 1px solid #DCE7EF; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #234; line-height: 1.6; }
.ai-ask { display: flex; gap: 10px; margin-bottom: 12px; } .ai-ask input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; font-size: 14px; font-family: inherit; } .ai-ask input:focus { outline: none; border-color: var(--brand); }
.ai-result { min-height: 60px; } .ai-placeholder { color: var(--ink-3); font-size: 13px; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }
.ai-ans { border: 1px solid #DCE7EF; border-left: 3px solid var(--brand); border-radius: 12px; padding: 14px; background: #F7FAFD; } .ai-ans-h { font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 8px; } .ai-ans b { color: var(--brand); }
.insight-list { display: flex; flex-direction: column; gap: 10px; }
.insight-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; } .ins-lv { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; flex: 0 0 auto; margin-top: 1px; } .insight-item.lv-hi .ins-lv { background: #FBE9E7; color: #C0392B; } .insight-item.lv-mid .ins-lv { background: #FFF4E0; color: #B7791F; } .ins-t { font-size: 13px; font-weight: 600; } .ins-d { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
@media (max-width: 900px) { .seg-grid, .journey-grid { grid-template-columns: 1fr; } }

/* 计划管理(S&OP) 甘特 */
.gantt { display: flex; flex-direction: column; gap: 9px; }
.gantt-row { display: grid; grid-template-columns: 116px repeat(4, 1fr); gap: 8px; align-items: center; font-size: 12px; }
.gantt-hd { color: var(--ink-3); font-weight: 600; }
.gantt-bar { height: 24px; border-radius: 7px; color: #fff; font-size: 11px; display: flex; align-items: center; padding: 0 9px; background: linear-gradient(90deg, #2E7D6E, #3FA593); }
.gantt-bar.low { background: linear-gradient(90deg, #C9A227, #D8B84A); }
.gantt-bar.over { background: linear-gradient(90deg, #C0504D, #D2691E); }
.gantt-cap { font-size: 11px; color: var(--ink-3); text-align: right; }

/* 设备数字孪生 */
.twin-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.twin-svg { background: radial-gradient(circle at 50% 35%, #16323a, #0c1a1d); border-radius: 14px; padding: 16px; position: relative; }
.twin-svg svg { width: 100%; height: auto; display: block; }
.twin-part { cursor: pointer; }
.twin-part:hover { opacity: .82; }
.sim-log { max-height: 200px; overflow: auto; font-size: 12px; background: #f6f8f7; border-radius: 10px; padding: 10px 12px; }
.sim-log .l { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e3edea; }
.sim-log .l:last-child { border-bottom: 0; }
.sim-log .t { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sim-hd { font-size: 13px; font-weight: 600; color: var(--ink); margin: 14px 0 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.sim-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
@media (max-width: 980px) { .twin-wrap { grid-template-columns: 1fr; } }

/* =====================================================================
   运营侧成本/利润核算改造（v2.13）
   前缀约定：.fin-* 财务口径 · .rma-* 售后 · .wp-* 利润桥 · .po-* 采购
   ===================================================================== */

/* ---------- 财务：区块标题 / 表格脚注 / 合计行 ---------- */
.fin-sec-hd {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--brand);
  margin: 20px 0 12px; padding-left: 11px;
  border-left: 4px solid var(--brand-2); line-height: 1.4;
}
.fin-sec-hd::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
/* 口径说明条：财务页最重要的防误读控件 */
.fin-note {
  margin-top: 12px; padding: 10px 13px;
  background: #F7FAF9; border: 1px dashed var(--line-2); border-radius: 10px;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.75;
}
.fin-note b { color: var(--ink); }
.fin-note code {
  font-family: Consolas, "Courier New", monospace; font-size: 11px;
  background: #EDF2F0; border-radius: 4px; padding: 1px 5px; color: var(--brand);
}
/* 表格内的二级说明文字 */
.fin-sub {
  display: block; font-size: 10.5px; color: var(--ink-3);
  font-weight: 400; line-height: 1.5; margin-top: 2px;
}
.fin-sub.mono { font-family: Consolas, "Courier New", monospace; }
/* 「额 + 率」双指标：主数值在上，率在下 */
.fin-rate {
  display: block; font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
/* 大区色点 */
.fin-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 6px; vertical-align: middle;
}
/* 财务明细表：合计行加重 */
.fin-tbl th { white-space: nowrap; }
.fin-tbl td { font-size: 12.5px; }
.fin-tbl tfoot td {
  background: #F4F9F7; border-top: 2px solid var(--line-2); border-bottom: none;
  font-weight: 700; color: var(--brand); font-size: 12.5px;
}
.fin-tbl tfoot td.num { color: var(--brand); }

/* ---------- 利润桥（waterfall）---------- */
.wp-bridge-sum {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.wp-bs { display: flex; flex-direction: column; gap: 3px; }
.wp-bs span { font-size: 11px; color: var(--ink-3); }
.wp-bs b {
  font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wp-bs.hl { padding-left: 10px; border-left: 3px solid var(--brand); }
.wp-bs.hl b { color: var(--brand); }
@media (max-width: 900px) { .wp-bridge-sum { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 售后：成本明细盒 / 客户链接 ---------- */
.rma-cost-box {
  margin-top: 14px; padding: 12px 14px;
  background: #FBFCFC; border: 1px solid var(--line); border-radius: 10px;
}
.rma-cost-hd {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.rma-cost-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 2px; font-size: 12.5px; color: var(--ink-2);
}
.rma-cost-row b {
  color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right;
}
.rma-cost-row.sum {
  border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 8px;
  font-weight: 700; color: var(--ink);
}
.rma-cost-row.sum b { color: var(--danger); font-size: 14px; }
.rma-cost-row.warr {
  border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px;
  font-size: 11.5px; color: var(--ink-3);
}
.rma-cost-row.warr b { color: var(--ink-3); font-weight: 600; }
/* 可点击的客户（跳 CRM 档案） */
.rma-cust {
  color: var(--brand); cursor: pointer; font-weight: 600;
  border-bottom: 1px dashed var(--brand-2);
}
.rma-cust:hover { color: var(--brand-deep); border-bottom-style: solid; }
.rma-cust i {
  display: block; font-style: normal; font-size: 10.5px; font-weight: 400;
  color: var(--ink-3); border-bottom: none; margin-top: 1px;
}

/* ---------- 采购：成本构成占比条 ---------- */
.po-mix {
  display: flex; width: 100%; height: 8px; border-radius: 4px;
  overflow: hidden; background: #EDF2F0;
}
.po-mix.big { height: 12px; border-radius: 6px; }
.po-mix i { display: block; height: 100%; }
.po-mix i:first-child { border-radius: 4px 0 0 4px; }
.po-mix i:last-child { border-radius: 0 4px 4px 0; }
.po-mix.big i:first-child { border-radius: 6px 0 0 6px; }
.po-mix.big i:last-child { border-radius: 0 6px 6px 0; }

/* ============================================================
   v2.12 CRM 客户运营中心
   C2 事件流 / 工单 · C3 标签体系 · C5 券与旅程 · C8 自动化规则
   ============================================================ */
.crm-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--ink-3); background: #FAFCFB; border: 1px dashed var(--line-2); border-radius: 10px; }
.crm-blk-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

/* —— C2 事件流时间线 —— */
.crm-evt-list { display: flex; flex-direction: column; gap: 0; max-height: 340px; overflow: auto; }
.crm-evt { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.crm-evt:last-child { border-bottom: 0; }
.crm-evt-ic { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; background: #EEF5F3; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.crm-evt-bd { flex: 1; min-width: 0; }
.crm-evt-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crm-evt-hd b { font-size: 12.5px; }
.crm-evt-meta { font-size: 10.5px; color: var(--ink-3); }
.crm-evt-tx { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }

/* —— C2 历史工单 —— */
.crm-tk-list { display: flex; flex-direction: column; gap: 8px; }
.crm-tk { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #FCFDFC; }
.crm-tk-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.crm-tk-meta { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.crm-tk-tx { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

/* —— C3 标签体系分组 —— */
.crm-tag-note { font-size: 11.5px; color: var(--ink-3); margin-bottom: 10px; padding: 7px 10px; background: #F4F9F7; border-left: 3px solid var(--brand-2); border-radius: 0 6px 6px 0; }
.crm-tag-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 10px; }
.crm-tag-cat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.crm-tag-cat-t { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.crm-tag-cat-n { font-size: 10.5px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.crm-tag-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; cursor: pointer; border-radius: 6px; }
.crm-tag-row:hover { background: #F4F9F7; }
.crm-tag-row.on { background: #E8F1FA; }
.crm-tag-row-nm { flex: 1; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-tag-bar { flex: 0 0 54px; height: 6px; background: #EDF2F0; border-radius: 3px; overflow: hidden; }
.crm-tag-bar i { display: block; height: 100%; background: var(--brand-2); border-radius: 3px; }
.crm-tag-row-n { flex: 0 0 30px; text-align: right; font-size: 11px; font-weight: 700; color: var(--ink); }
.crm-tag-list-hd { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.crm-tag-clear { font-size: 11px; font-weight: 400; color: var(--info); cursor: pointer; }
.crm-tag-cust { display: flex; flex-direction: column; gap: 6px; }
.crm-tag-cust-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 12px; background: #fff; }
.crm-tag-cust-row:hover { border-color: var(--brand-2); background: #F7FBFA; }
.crm-tag-more { font-size: 11px; color: var(--ink-3); text-align: center; padding: 4px; }

/* —— C5 旅程卡增强 —— */
.crm-jn-aud { font-size: 11px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; background: #F4F9F7; border-radius: 6px; padding: 5px 8px; }
.crm-jn-hit { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.crm-jn-bar { flex: 1; height: 7px; background: #EDF2F0; border-radius: 4px; overflow: hidden; }
.crm-jn-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-2), #5FA893); border-radius: 4px; }
.crm-jn-rate { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.crm-jn-off { display: inline-block; font-size: 10px; font-weight: 400; color: var(--ink-3); background: #EDF2F0; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.crm-jn-act { margin-top: 8px; }
.crm-jn-act .btn { width: 100%; }
.journey-card.off { opacity: .72; }
.crm-jn-sample { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.crm-jn-sample:last-child { border-bottom: 0; }
.crm-jn-sample .mt { font-size: 11px; color: var(--ink-3); }

/* —— C5 优惠券中心 —— */
.crm-cpn-list { display: flex; flex-direction: column; gap: 6px; }
.crm-cpn-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }
.crm-cpn-nm { flex: 1; font-weight: 600; }
.crm-cpn-meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.crm-cpn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 10px; }
.crm-cpn-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: linear-gradient(180deg, #FFFDF7, #fff); position: relative; }
.crm-cpn-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-cpn-val { font-size: 21px; font-weight: 800; color: var(--danger); margin: 6px 0 2px; }
.crm-cpn-aud { font-size: 11px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.crm-cpn-bar { height: 6px; background: #EDF2F0; border-radius: 3px; overflow: hidden; margin-top: 8px; }
.crm-cpn-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #E0B84B); border-radius: 3px; }
.crm-cpn-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 6px; }
.crm-cpn-valid { font-size: 10.5px; color: var(--ink-3); }

/* —— C5 执行记录 —— */
.crm-exec-hd { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.crm-exec-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.crm-exec-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 6px 9px; border-radius: 7px; background: #F8FBFA; }
.crm-exec-row .nm { font-weight: 600; }
.crm-exec-row .ch { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.crm-tpl-meta { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* —— C8 自动化触发中心 —— */
.auto-rules { display: flex; flex-direction: column; gap: 8px; }
.auto-rule { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; transition: border-color .15s, background .15s; }
.auto-rule:hover { border-color: var(--brand-2); }
.auto-rule.off { background: #FAFBFA; border-style: dashed; }
.auto-rule.off .ar-ic { filter: grayscale(1); opacity: .55; }
.ar-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: #EEF5F3; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ar-bd { flex: 1; min-width: 0; }
.ar-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ar-hd b { font-size: 13px; }
.ar-ch { font-size: 10.5px; color: var(--ink-3); }
.ar-desc { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.ar-out { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.ar-stopped { font-size: 11px; color: var(--danger); background: var(--danger-bg); border-radius: 5px; padding: 2px 7px; }
.ar-jn { font-size: 10.5px; color: var(--info); background: var(--info-bg); border-radius: 5px; padding: 2px 7px; margin-left: auto; }
.ar-num { flex: 0 0 78px; text-align: right; }
.ar-num b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.ar-num span { font-size: 10px; color: var(--ink-3); }
.ar-num i { display: block; font-size: 10.5px; font-style: normal; color: var(--brand-2); margin-top: 2px; }
.auto-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chan-card { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: #fff; }
.chan-card.off { background: #FAFBFA; border-style: dashed; opacity: .8; }
.chan-hd { display: flex; align-items: center; justify-content: space-between; }
.chan-hd b { font-size: 12.5px; }
.chan-cap { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; font-size: 10.5px; color: var(--ink-3); }
.chan-cap b { font-size: 17px; font-weight: 800; color: var(--brand-2); }
.chan-quiet { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.chan-quiet b { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.chan-note { font-size: 10.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.45; padding-top: 6px; border-top: 1px dashed var(--line); }
.type-card { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: #fff; border-left-width: 3px; }
.type-card.brand { border-left-color: var(--info); }
.type-card.ok { border-left-color: var(--brand-2); }
.type-card.mute { border-left-color: #9AA9A5; }
.tc-hd { display: flex; align-items: baseline; justify-content: space-between; }
.tc-hd b { font-size: 13px; }
.tc-hd span { font-size: 12px; font-weight: 700; color: var(--brand-2); }
.tc-rule, .tc-act { font-size: 11px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; }
.tc-rule span, .tc-act span { display: inline-block; font-size: 10px; color: var(--ink-3); background: #F0F4F3; border-radius: 4px; padding: 1px 5px; margin-right: 5px; }
.tc-jn { font-size: 10.5px; color: var(--info); margin-top: 6px; }
.ev-ic { font-size: 12px; }

@media (max-width: 1080px) {
  .auto-2col { grid-template-columns: 1fr; }
  .crm-jn-hit { flex-wrap: wrap; }
  .ar-num { flex: 0 0 62px; }
}

/* =====================================================================
   C 端 App · 结构化评价 / 买家问答 / 履约反馈（对标亚马逊 Reviews·Q&A·Feedback）
   ===================================================================== */
.rv-stars { display: inline-flex; gap: 1px; justify-content: center; }
.rv-stars i { font-style: normal; font-size: 10px; line-height: 1; color: #dfe6e4; }
.rv-stars i.on { color: #D9A227; }
.rv-stars.big i { font-size: 14px; }

/* —— 评分总览 —— */
.rv-ov { padding: 12px 12px 10px; }
.rv-ov-top { display: flex; gap: 11px; align-items: center; margin-top: 9px; }
.rv-ov-score { width: 72px; flex: none; text-align: center; }
.rv-ov-score > b { display: block; font-size: 29px; line-height: 1.02; font-weight: 800; color: #22343a; letter-spacing: -.5px; }
.rv-ov-score .rv-stars { margin: 3px 0 2px; }
.rv-ov-score .tiny { display: block; font-size: 9px; }
.rv-ov-dist { flex: 1; min-width: 0; }
.rv-dbar { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.rv-dbar:last-child { margin-bottom: 0; }
.rv-dbar > span { width: 8px; flex: none; font-size: 9px; color: #8a97a3; text-align: right; }
.rv-dbar > i { flex: 1; height: 7px; background: #eef2f1; border-radius: 4px; overflow: hidden; }
.rv-dbar > i > b { display: block; height: 100%; background: #D9A227; border-radius: 4px; }
.rv-dbar > em { width: 32px; flex: none; font-size: 9px; font-style: normal; color: #8a97a3; text-align: right; }
.rv-ov-dims { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #edf2f0; }
.rv-dim { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.rv-dim:last-child { margin-bottom: 0; }
.rv-dim > span { width: 54px; flex: none; font-size: 10.5px; color: #435954; }
.rv-dim > i { flex: 1; height: 5px; background: #eef2f1; border-radius: 3px; overflow: hidden; }
.rv-dim > i > b { display: block; height: 100%; background: #2f7d6e; border-radius: 3px; }
.rv-dim > em { width: 24px; flex: none; font-size: 10px; font-style: normal; font-weight: 700; color: #2f7d6e; text-align: right; }

/* —— 关键词聚合 —— */
.rv-mt { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-mtc { font-size: 10.5px; padding: 5px 9px; border-radius: 12px; background: #fff; border: 1px solid #e2e9e7; color: #435954; cursor: pointer; white-space: nowrap; }
.rv-mtc b { color: #8a97a3; font-weight: 600; margin-left: 4px; font-size: 9.5px; }
.rv-mtc.on { background: #2f7d6e; border-color: #2f7d6e; color: #fff; }
.rv-mtc.on b { color: rgba(255,255,255,.72); }
.rv-count { font-size: 10px; color: #8a97a3; margin: 2px 2px 8px; }
.rv-count b { color: #22343a; }

/* —— 评价条目 —— */
.rv-item { padding: 12px; }
.rv-hd { display: flex; align-items: center; gap: 8px; }
.rv-hd .g { flex: 1; min-width: 0; }
.rv-hd .nm { font-size: 12px; font-weight: 700; }
.rv-hd .dm-av { width: 30px; height: 30px; font-size: 12px; }
.rv-ver { font-size: 9px; color: #2f7d6e; background: #eaf4f0; border-radius: 8px; padding: 3px 7px; white-space: nowrap; flex: none; }
.rv-t { display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; }
.rv-t .rv-stars { flex: none; margin-top: 2px; }
.rv-t b { font-size: 12.5px; line-height: 1.4; font-weight: 800; color: #22343a; }
.rv-body { font-size: 11.5px; line-height: 1.68; color: #3c4f4a; margin-top: 6px; }
.rv-imgs { display: flex; gap: 5px; margin-top: 8px; }
.rv-img { width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.rv-dl { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.rv-dl > span { display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: #8a97a3; }
.rv-dl .rv-stars i { font-size: 8px; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rv-tags > span { font-size: 9.5px; color: #2f7d6e; background: #f1f7f5; border-radius: 7px; padding: 2px 6px; }
.rv-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #f0f4f3; }
.rv-help { border: 1px solid #e2e9e7; background: #fff; color: #435954; border-radius: 14px; padding: 4px 10px; font-size: 10px; cursor: pointer; font-family: inherit; }
.rv-help.on { background: #eaf4f0; border-color: #2f7d6e; color: #2f7d6e; font-weight: 700; }
.rv-reply { margin-top: 9px; background: #f7faf9; border-left: 2.5px solid #2f7d6e; border-radius: 0 8px 8px 0; padding: 8px 9px; }
.rv-reply-h { font-size: 10px; font-weight: 700; color: #2f7d6e; margin-bottom: 3px; }

/* —— 详情页嵌入摘要 —— */
.rv-mini { padding: 10px 12px; }
.rv-mini-top { display: flex; gap: 10px; align-items: center; }
.rv-mini-sc { width: 70px; flex: none; text-align: center; }
.rv-mini-sc > b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; color: #22343a; }
.rv-mini-sc .rv-stars { margin: 2px 0; }
.rv-mini-sc .tiny { display: block; font-size: 9px; }
.rv-mini-dist { flex: 1; min-width: 0; }
.rv-mini-mt { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #edf2f0; }
.rv-mini-mt > span { font-size: 9.5px; color: #435954; background: #f4f7f6; border-radius: 6px; padding: 2px 6px; }
.rv-mini-mt > span b { color: #2f7d6e; margin-left: 3px; }

/* —— 买家问答 —— */
.qa-search { display: flex; gap: 6px; margin: 10px 0; }
.qa-search input { flex: 1; min-width: 0; border: 1px solid #e2e9e7; border-radius: 16px; padding: 8px 12px; font-size: 11.5px; font-family: inherit; background: #fff; outline: none; }
.qa-search input:focus { border-color: #2f7d6e; }
.qa-search button { border: none; background: #2f7d6e; color: #fff; border-radius: 16px; padding: 0 14px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.qa-item { padding: 12px; }
.qa-q { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.qa-qm { width: 18px; height: 18px; border-radius: 5px; background: #eaf4f0; color: #2f7d6e; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.qa-q .g { flex: 1; min-width: 0; }
.qa-hot { font-size: 9px; color: #c77b3a; background: #fdf3e9; border-radius: 7px; padding: 2px 6px; white-space: nowrap; flex: none; }
.qa-ar { white-space: nowrap; color: #8a97a3; flex: none; }
.qa-peek { font-size: 10.5px; color: #7b8f8a; line-height: 1.6; margin: 8px 0 0 26px; }
.qa-a { margin-top: 10px; padding: 9px 10px; background: #f8fbfa; border-radius: 9px; }
.qa-a.brand { background: #f5f9f7; border: 1px solid #dcebe4; }
.qa-a-hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qa-a-hd b { font-size: 10.5px; }
.qa-bdg { font-size: 8.5px; border-radius: 6px; padding: 2px 5px; font-weight: 700; }
.qa-bdg.brand { background: #2f7d6e; color: #fff; }
.qa-bdg.store { background: #3a6ea5; color: #fff; }
.qa-bdg.dealer { background: #8a5a9e; color: #fff; }
.qa-bdg.user { background: #eaf4f0; color: #2f7d6e; }
.qa-a-t { font-size: 11px; line-height: 1.65; color: #3c4f4a; margin-top: 5px; }
.qa-a-ft { font-size: 9px; color: #8a97a3; margin-top: 6px; }
.qa-ta { width: 100%; box-sizing: border-box; min-height: 70px; border: 1px solid #e2e9e7; border-radius: 10px; padding: 9px 10px; font-size: 11.5px; font-family: inherit; line-height: 1.6; resize: none; outline: none; background: #fff; margin-top: 6px; }
.qa-ta:focus { border-color: #2f7d6e; }

/* —— 履约反馈 —— */
.fb-stars { display: flex; gap: 8px; margin: 2px 0 12px; }
.fb-st { font-size: 28px; line-height: 1; color: #e2e9e7; cursor: pointer; transition: color .12s, transform .12s; }
.fb-st.on { color: #D9A227; }
.fb-st:active { transform: scale(.94); }
.fb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fb-tg { font-size: 10.5px; padding: 6px 10px; border-radius: 14px; background: #fff; border: 1px solid #e2e9e7; color: #435954; cursor: pointer; }
.fb-tg.on { background: #2f7d6e; border-color: #2f7d6e; color: #fff; }
.fb-dim { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.fb-dim > span { font-size: 11px; color: #435954; }
.fb-dst { display: flex; gap: 2px; }
.fb-dst i { font-style: normal; font-size: 15px; color: #e2e9e7; cursor: pointer; }
.fb-dst i.on { color: #D9A227; }
.ord-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #f0f4f3; }

/* —— 结构化案例 —— */
.cs-card { padding: 12px; }
.cs-sc { display: flex; align-items: center; gap: 9px; margin: 10px 0 8px; }
.cs-sc > div { text-align: center; }
.cs-sc > div .tiny { display: block; font-size: 9px; }
.cs-sc > div b { font-size: 19px; font-weight: 800; color: #22343a; line-height: 1.2; }
.cs-sc > div b.up { color: #2f7d6e; }
.cs-ar { color: #b7c4c1; font-size: 13px; }
.cs-delta { margin-left: auto; font-size: 10.5px; font-weight: 800; color: #2f7d6e; background: #eaf4f0; border-radius: 9px; padding: 3px 8px; }
.cs-dims { background: #f8fbfa; border-radius: 9px; padding: 8px 10px; }
.cs-dim { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cs-dim:last-child { margin-bottom: 0; }
.cs-dim > span { width: 56px; flex: none; font-size: 9.5px; color: #5a6e6a; }
.cs-dim > i { flex: 1; height: 5px; background: #e6efec; border-radius: 3px; overflow: hidden; }
.cs-dim > i > b { display: block; height: 100%; background: linear-gradient(90deg, #2f7d6e, #6fb3a4); border-radius: 3px; }
.cs-dim > em { width: 30px; flex: none; text-align: right; font-style: normal; font-size: 9.5px; font-weight: 700; color: #2f7d6e; }
.cs-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #f0f4f3; flex-wrap: wrap; }
.cs-ft .dm-btn.sm { margin-right: 0; margin-left: 6px; }

/* =====================================================================
   C 端 App · 门店真实地图 + 模拟导航
   ===================================================================== */
.dm-map-real { min-height: 190px; }
.dm-map-real .dm-map { position: absolute; inset: 0; height: 100%; }
.dm-navbar { align-items: stretch; }
.dm-navbar .dm-btn { flex: 1; }

/* 导航步骤 */
.nav-step { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #eef2f1; }
.nav-step:last-child { border-bottom: 0; }
.nav-step .ic { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #f1f7f5; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.nav-step .g { flex: 1; min-width: 0; }
.nav-step .t { font-size: 12px; font-weight: 700; color: #22343a; }
.nav-step .d { font-size: 10.5px; color: #8a97a3; margin-top: 2px; line-height: 1.5; }
.nav-step .ck { color: #2f7d6e; font-weight: 800; font-size: 14px; flex: none; }
.nav-step .sp { width: 16px; height: 16px; flex: none; border: 2px solid #2f7d6e; border-top-color: transparent; border-radius: 50%; animation: navspin .8s linear infinite; }
@keyframes navspin { to { transform: rotate(360deg); } }
.nav-step.nav-done .ic { background: #eaf4f0; }
.nav-step.nav-done .t { color: #2f7d6e; }
.nav-step.nav-now .ic { background: #eaf4f0; border: 2px solid #2f7d6e; }
.nav-step.nav-now .t { color: #2f7d6e; }
.nav-step.nav-todo .ic { opacity: .5; }
.nav-step.nav-todo .t { color: #8a97a3; }
.nav-finish { text-align: center; font-weight: 800; color: #2f7d6e; background: #eaf4f0; border-radius: 10px; padding: 12px; margin-top: 8px; }