/* =====================================================================
   门店销售分析系统 — 基础样式（移动优先，钉钉内置浏览器）
   ===================================================================== */

:root {
  --brand: #16a34a;
  --brand-dark: #15803d;
  --brand-light: #dcfce7;
  --bg: #f4f6f5;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e8ecea;
  --danger: #dc2626;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px calc(28px + var(--safe-bottom));
}

/* ---------------- 通用控件 ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  user-select: none;
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(22, 163, 74, .55);
}
.btn-primary:active { background: var(--brand-dark); }

.btn-block { width: 100%; }

/* ---------------- 登录页 ---------------- */

.login-body {
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, #34d399 0%, #16a34a 42%, #0f766e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + var(--safe-bottom));
}

.login-wrap {
  width: 100%;
  max-width: 380px;
}

.login-brand {
  text-align: center;
  color: #fff;
  margin-bottom: 26px;
}
.login-logo {
  width: 62px; height: 62px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.login-brand h1 {
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: .5px;
}
.login-brand p {
  margin: 0;
  font-size: 13px;
  opacity: .82;
}

.login-card {
  background: var(--card);
  border-radius: 20px;
  padding: 24px 20px 20px;
  box-shadow: 0 20px 50px -20px rgba(2, 44, 34, .5);
}

.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 7px;
  font-weight: 500;
}
.field input {
  width: 100%;
  font-size: 16px; /* ≥16px 防止 iOS 聚焦缩放 */
  font-family: inherit;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfa;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #a8b3ad; }
.field input:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.login-tip {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
}

.login-foot {
  text-align: center;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  margin: 22px 0 0;
}

/* ---------------- 首页 ---------------- */

.home-head { margin-bottom: 16px; }

.home-hello {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(135deg, #16a34a 0%, #0d9488 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: 0 10px 26px -14px rgba(13, 148, 136, .8);
}

.home-avatar {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  font-weight: 600;
}

.home-name { font-size: 17px; font-weight: 600; line-height: 1.3; }
.home-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.home-sub .tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .25);
}
.home-store { font-size: 12px; opacity: .88; }

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card);
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: var(--shadow);
}
.stat-label { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.stat-value { font-size: 15px; font-weight: 600; }
.stat-ok { color: var(--brand); }
.stat-bad { color: var(--danger); }

.menu-section { margin-bottom: 22px; }

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px 2px;
  letter-spacing: .3px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .15s ease;
}
.menu-item:active { transform: scale(.975); border-color: var(--brand-light); }

.menu-dot {
  width: 8px; height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}
.menu-label { flex: 1; font-weight: 500; }
.menu-badge {
  font-size: 10px;
  color: var(--muted);
  background: #f1f5f3;
  padding: 1px 6px;
  border-radius: 6px;
}

.menu-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 2px 0;
  line-height: 1.5;
}

.list-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: none;
  border-radius: 14px;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--danger);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.list-arrow { color: #cbd5d0; font-size: 18px; }

/* ---------------- Toast ---------------- */

.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(64px + var(--safe-bottom));
  transform: translateX(-50%) translateY(10px);
  background: rgba(15, 23, 42, .9);
  color: #fff;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 999px;
  max-width: 80vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}
.app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================================
   通用页面骨架：顶栏 / 选项卡 / 卡片列表 / 底部抽屉
   提成核算、后续模块共用，避免每个页面重复写
   ===================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 14px;
}
.topbar-back {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
  padding: 0 2px 4px;
  cursor: pointer;
}
.topbar-title { flex: 1; font-size: 19px; font-weight: 650; margin: 0; }
.topbar-side { font-size: 13px; color: var(--muted); }

.tabs {
  display: flex;
  gap: 6px;
  background: #e9edeb;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  padding: 9px 4px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tab.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(15,23,42,.08); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

.filterbar { display: flex; gap: 8px; margin-bottom: 10px; }
.filterbar > * { flex: 1; min-width: 0; }

.input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.input-sm { padding: 9px 10px; font-size: 13.5px; }

.segmented {
  display: flex;
  background: #e9edeb;
  border-radius: 11px;
  padding: 3px;
  flex: 1.4;
}
.segmented button {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted);
  padding: 7px 2px;
  border-radius: 8px;
  cursor: pointer;
}
.segmented button.active { background: #fff; color: var(--text); font-weight: 600; }

.hero {
  background: linear-gradient(135deg, #16a34a, #0f7a37);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 10px 26px -14px rgba(22,163,74,.7);
}
.hero-label { font-size: 13px; opacity: .85; }
.hero-value { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin: 2px 0 4px; }
.hero-sub { font-size: 12.5px; opacity: .85; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.link-btn {
  border: none;
  background: transparent;
  color: var(--brand-dark);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}

.list { }
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.list-item:last-child { border-bottom: none; }
.list-item:active { background: #f6f8f7; }
.li-main { flex: 1; min-width: 0; }
.li-title { font-size: 14.5px; font-weight: 550; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.li-amount { font-size: 15px; font-weight: 650; color: var(--brand-dark); white-space: nowrap; }

.badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: #eef2f0;
  border-radius: 6px;
  padding: 1px 6px;
}
.badge-warn { color: #b45309; background: #fef3c7; }

.owner-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--brand-dark);
  background: var(--brand-light);
  border-radius: 999px;
  padding: 3px 9px;
}
.owner-chip i { font-style: normal; opacity: .7; font-size: 11px; }
.owner-empty { font-size: 12px; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 3px 9px; }

.empty, .loading {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 26px 16px;
}

.hint-line { font-size: 12px; color: var(--muted); margin: -2px 0 10px; }

.form { padding: 12px 16px 16px; }
.form-row { display: flex; gap: 8px; margin-bottom: 9px; }
.form-row > * { flex: 1; }
.form-row .btn { flex: 0 0 auto; }

/* ---------------- 底部抽屉 ---------------- */

.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 900;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform .22s ease;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
}
.sheet.open { transform: translateY(0); }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  font-size: 16px;
  font-weight: 650;
}
.sheet-body { padding: 0 18px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet-foot {
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}
.sheet-foot .btn { flex: 1; }
.sheet-tip { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }

.pick-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14.5px;
}
.pick-item.on { border-color: var(--brand); background: #f2fbf5; }
.pick-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid #cbd5d0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
  flex: 0 0 auto;
}
.pick-item.on .pick-check { background: var(--brand); border-color: var(--brand); }
.pick-name { flex: 1; }
.pick-name i { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 6px; }
.pick-ratio {
  width: 62px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}

/* ---------------- 宽屏（PC 管理端） ---------------- */

@media (min-width: 900px) {
  .page { max-width: 1040px; padding-top: 24px; }
  .menu-grid { grid-template-columns: repeat(4, 1fr); }
}

.menu-badge.is-ready { color: var(--brand-dark); background: var(--brand-light); }

/* ---------------- 门店合并 ---------------- */

.badge-ok { color: #0f7a37; background: #dcfce7; }
.list-item.is-merged { opacity: .62; }
.list-item.is-merged .li-title { text-decoration: line-through; text-decoration-color: #cbd5d0; }

.merge-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.merge-box .btn { width: 100%; }

.cmp-wrap { display: flex; gap: 8px; margin: 4px 0 10px; }
.cmp-col {
  flex: 1;
  min-width: 0;
  background: #f6f8f7;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.cmp-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--brand-dark);
  background: var(--brand-light);
  border-radius: 6px;
  padding: 1px 6px;
  margin-bottom: 4px;
}
.cmp-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; word-break: break-all; }
.cmp-row { word-break: break-all; }

/* ---------------- 疑似同店提示 ---------------- */

.sug-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 12px 14px 8px;
  margin-bottom: 12px;
}
.sug-head { font-size: 13.5px; font-weight: 600; color: #92400e; margin-bottom: 8px; }
.sug-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed #fde68a;
}
.sug-main { flex: 1; min-width: 0; }
.sug-pair { font-size: 13.5px; color: var(--text); word-break: break-all; }
.sug-arrow { color: #b45309; padding: 0 2px; }
.sug-why { font-size: 12px; color: #a16207; margin-top: 2px; }
.sug-tip { font-size: 11.5px; color: #a16207; margin: 6px 0 2px; }

/* 关键修复：hidden 属性必须优先于 .sheet-mask 的 display:flex，
   否则抽屉遮罩从页面加载起就铺满全屏，挡住所有点击 */
.sheet-mask[hidden] { display: none !important; }

/* 通用：带 display 的元素（如 .btn 的 inline-flex）会盖掉 hidden 属性，
   这里统一兜底，避免 hidden 的按钮还挂在界面上 */
[hidden] { display: none !important; }

/* =====================================================================
   数据看板 + 数据分析（v2 新版首页）
   ===================================================================== */

.db-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px;
}
.db-hello { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.db-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.db-date {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border-radius: 999px;
  padding: 4px 8px;
  box-shadow: var(--shadow);
  font-size: 13.5px;
  font-weight: 600;
}
.db-date-btn {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  padding: 2px 6px;
}
.db-date-btn:disabled { opacity: .3; cursor: default; }

.kpi-hero {
  display: flex;
  gap: 12px;
  background: linear-gradient(135deg, #16a34a, #0d7a38);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: 0 10px 26px -14px rgba(22,163,74,.7);
  margin-bottom: 14px;
}
.kpi-hero-main { flex: 1.3; min-width: 0; }
.kpi-hero-label { font-size: 12.5px; opacity: .85; }
.kpi-hero-value { font-size: 32px; font-weight: 750; letter-spacing: -.5px; margin: 2px 0 4px; white-space: nowrap; }
.kpi-hero-delta { font-size: 12px; opacity: .92; }
.kpi-hero-delta i { font-style: normal; }
.kpi-hero-delta .up { color: #dcfce7; font-weight: 600; }
.kpi-hero-delta .down { color: #fecaca; font-weight: 600; }
.kpi-hero-side { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.kpi-mini {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
}
.kpi-mini b { font-size: 14px; font-weight: 700; }

/* 首页 KPI：乐檬式白卡（PC 四张横排；手机销售额占整行、其余两列） */
.kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.kpi {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 0;
}
.kpi-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-ico svg { width: 16px; height: 16px; }
.kpi-body { min-width: 0; flex: 1 1 auto; }
.kpi-label { font-size: 12px; color: var(--muted); }
.kpi-value {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.3px;
  margin: 1px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #111827;
}
.kpi-delta { font-size: 11px; color: var(--muted); }
.kpi-delta .up { color: #16a34a; font-weight: 600; }
.kpi-delta .down { color: #dc2626; font-weight: 600; }
.kpi-delta i { font-style: normal; }

/* 手机端销售额卡仍是绿色强调块 */
.kpi-main {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #16a34a, #0d7a38);
}
.kpi-main .kpi-label { color: rgba(255, 255, 255, .86); }
.kpi-main .kpi-value { color: #fff; font-size: 28px; }
.kpi-main .kpi-delta { color: rgba(255, 255, 255, .9); }
.kpi-main .kpi-delta .up { color: #dcfce7; }
.kpi-main .kpi-delta .down { color: #fecaca; }


.db-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 10px;
  margin-bottom: 14px;
}
.db-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.db-card-head h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.db-muted { font-size: 12px; color: var(--muted); }
.db-more { font-size: 12.5px; color: var(--brand-dark); text-decoration: none; }
.db-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 22px 0; }

.svg-tick { font-size: 10px; fill: var(--muted); font-family: inherit; }

/* 条形排行 */
.bar-row { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.bar-row:last-child { border-bottom: none; }
.bar-line1 { display: flex; align-items: baseline; gap: 8px; }
.bar-rank {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: #eef2f0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
}
.bar-row:first-child .bar-rank { background: var(--brand-light); color: var(--brand-dark); }
.bar-name {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-py { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 400; }
.bar-amt { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--brand-dark); }
.bar-track { height: 6px; background: #eef2f0; border-radius: 3px; margin: 6px 0 4px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 3px; }
.bar-fill.alt { background: linear-gradient(90deg, #38bdf8, #0891b2); }
.bar-sub { font-size: 11.5px; color: var(--muted); }

/* 排序 chips */
.db-sortrow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; }
.sort-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.sort-chip.active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); font-weight: 600; }

.db-total {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding: 10px 2px 6px;
  font-size: 13px;
  color: var(--muted);
}
.db-total b { color: var(--text); font-size: 15px; }

.seg-dim { display: flex; background: #e9edeb; border-radius: 11px; padding: 3px; flex: 1.6; }
.seg-dim button {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--muted);
  padding: 7px 2px; border-radius: 8px; cursor: pointer;
}
.seg-dim button.active { background: #fff; color: var(--text); font-weight: 600; }

.btn-sm { padding: 9px 14px; font-size: 13.5px; }

/* ---------------- 底部导航 ---------------- */

.tabnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 500;
  display: flex;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
.tabnav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  font-size: 11px;
  padding: 7px 0 6px;
}
.tabnav a .tn-ico { font-size: 19px; line-height: 1.15; display: block; }
.tabnav a.active { color: var(--brand-dark); font-weight: 600; }

@media (min-width: 900px) {
  .tabnav, .tabnav * { box-sizing: border-box; }
  .tabnav { max-width: 1040px; margin: 0 auto; }
}

/* 底部导航占位，防止内容被遮 */
.page { padding-bottom: calc(64px + var(--safe-bottom, 0px)); }

/* =====================================================================
   月度目标任务（/plan）
   ===================================================================== */
.plan-head { padding-bottom: 10px; }
.plan-tpl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 2px 0 4px;
}
.plan-tpl-label { font-size: 12.5px; color: var(--muted); }
.chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-light, #eaf6ef);
  color: var(--brand-dark, #0f7a37);
  font-size: 12.5px;
  font-weight: 550;
  text-decoration: none;
  border: 1px solid transparent;
}
.chip:active { opacity: .7; }

.plan-sec-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 600;
  margin-bottom: 8px;
}

.plan-upload-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 0;
  font-size: 14.5px;
}
.plan-upload-hint {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
  min-height: 18px;
}
.plan-err-text { color: #b42318; }
.plan-warn-text { color: #b45309; }
.plan-spin { color: var(--brand-dark); }

.plan-preview { border-left: 3px solid var(--brand, #16a34a); }

.plan-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line, #e8ece9);
  border: 1px solid var(--line, #e8ece9);
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0 12px;
}
.ps-item {
  background: #fff;
  padding: 10px 8px;
  text-align: center;
}
.ps-item b {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: var(--brand-dark, #0f7a37);
  font-variant-numeric: tabular-nums;
}
.ps-item span { font-size: 11.5px; color: var(--muted); }

.issue-box {
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 12.5px;
}
.issue-box.err { background: #fef3f2; border: 1px solid #fecdca; }
.issue-box.warn { background: #fffbeb; border: 1px solid #fde68a; }
.issue-title { font-weight: 600; margin-bottom: 6px; }
.issue-box.err .issue-title { color: #b42318; }
.issue-box.warn .issue-title { color: #b45309; }
.issue-list { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.issue-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 5px 0;
  border-top: 1px dashed rgba(0,0,0,.06);
  line-height: 1.5;
}
.issue-row:first-child { border-top: none; }
.issue-line {
  flex: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: #fff;
  background: #9aa1ac;
  border-radius: 4px;
  padding: 0 5px;
  height: 17px;
  line-height: 17px;
}
.issue-field { flex: none; font-weight: 600; color: #374151; }
.issue-msg { flex: 1 1 180px; color: #4b5563; word-break: break-all; }
.issue-sug { display: block; color: #6b7280; font-size: 11.5px; }

.plan-foot-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.plan-check {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap;
}

/* 绑定核对 */
.plan-bind {
  margin: 10px 0;
  border: 1px solid var(--line, #e8ece9);
  border-radius: 10px;
  background: #fbfdfc;
  padding: 0 10px 6px;
}
.plan-bind > summary {
  cursor: pointer;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  list-style: none;
}
.plan-bind > summary::-webkit-details-marker { display: none; }
.plan-bind > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: #9aa1ac;
  transition: transform .15s;
}
.plan-bind[open] > summary::before { transform: rotate(90deg); }
.plan-kw { color: #b45309; font-weight: 600; }
.bind-list { max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bind-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px dashed rgba(0,0,0,.07);
  font-size: 12px;
  line-height: 1.55;
}
.bind-row.is-kw { background: #fffbeb; }
.bind-store { flex: none; color: #6b7280; min-width: 78px; }
.bind-mp { flex: none; font-weight: 600; color: #111827; min-width: 62px; }
.bind-num { flex: none; color: #1d6b4f; font-variant-numeric: tabular-nums; }
.bind-names { flex: 1 1 200px; color: #4b5563; word-break: break-all; }

/* 提醒折叠 */
details.issue-box > summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
details.issue-box > summary::-webkit-details-marker { display: none; }
details.issue-box[open] > summary { margin-bottom: 6px; }
details.issue-box > summary::after {
  content: " ▾";
  color: #9aa1ac;
  font-weight: 400;
}
details.issue-box[open] > summary::after { content: " ▴"; }
.bind-row.is-focus { background: #f7f8fa; }
.bind-row.is-focus .bind-names { color: #9aa1ac; font-style: italic; }

/* =====================================================================
   组织与权限（/admin）
   ===================================================================== */
.sheet-tall { max-height: 88vh; }
.sheet-tall .sheet-body { max-height: calc(88vh - 110px); overflow-y: auto; }
.filterbar-tight { margin: 6px 0 8px; }

.adm-group { border-bottom: 1px solid #f1f3f5; }
.adm-group:last-child { border-bottom: 0; }
.adm-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  background: #f8faf9;
}

.adm-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f5f6f8;
}
.adm-node:last-child { border-bottom: 0; }
.adm-node-main { flex: 1 1 auto; min-width: 0; }
.adm-node-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.adm-node-sub {
  margin-top: 3px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}
.adm-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #6b7280;
  background: #f1f3f5;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 400;
}
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* 权限矩阵 */
.adm-matrix { margin-top: 6px; }
.adm-mod { margin-bottom: 14px; }
.adm-mod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  padding: 6px 0;
  border-bottom: 1px solid #eef0f3;
}
.adm-perms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  padding-top: 6px;
}
.adm-perm {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  color: #374151;
  padding: 5px 0;
  line-height: 1.4;
}
.adm-perm input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: #16a34a;
}
.adm-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  padding: 6px 10px;
  background: #fbfcfc;
}

@media (max-width: 380px) {
  .adm-perms, .adm-pick { grid-template-columns: 1fr; }
}

/* 行尾操作按钮不要被长文本挤成竖排 */
.adm-node > .link-btn { flex: none; white-space: nowrap; align-self: center; }
.adm-node-sub { word-break: break-word; }

/* v2-042 组织架构五页顶部的「关系条」：部门 → 岗位 → 角色 → 账号
   手机上没有左侧栏，这条既是说明也是导航，所以横向可滚 */
.adm-flow {
  display: flex; align-items: stretch; gap: 6px;
  margin: 0 0 14px; padding-bottom: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.adm-flow-i {
  flex: 1 1 0; min-width: 136px; display: block; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px;
}
.adm-flow-i b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.adm-flow-i span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.adm-flow-i:hover { border-color: var(--brand); }
.adm-flow-i.is-on { border-color: var(--brand); background: #f2f9f3; }
.adm-flow-i.is-on b { color: var(--brand-dark); }
.adm-flow-arw { flex: none; align-self: center; color: #c2c8ce; font-size: 13px; font-style: normal; }
.adm-rebuild { margin-top: 10px; }
.adm-rebuild .btn { margin-top: 8px; }
.link-danger { color: #b91c1c; }

/* =====================================================================
   PC 后台骨架：顶部一级横排 + 左侧二级/三级树 + 页签 + 内容区
   移动端（< 1024px）三块全隐藏，仍用底部 .tabnav
   ===================================================================== */
.app-wrap { display: block; }
.app-top, .app-side, .app-tabs { display: none; }

@media (min-width: 1024px) {
  /* 乐檬是蓝灰调：主蓝、背景 #f2f3f5、小圆角、密排行高。
     只覆盖 PC 变量，移动端保持原绿色，不影响已上线的手持端。 */
  :root {
    --brand: #2b6fd4;
    --brand-dark: #1d5bb8;
    --brand-light: #e8f1fd;
    --bg: #f2f3f5;
    --line: #e6e8eb;
    --radius: 10px;
  }
  .tabnav { display: none; }

  .app-wrap {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    grid-template-rows: 52px 34px minmax(0, 1fr);
    grid-template-areas:
      "top  top"
      "side tabs"
      "side page";
    min-height: 100vh;
    background: var(--bg);
  }

  /* ---------------- 顶部一级菜单 ---------------- */
  .app-top {
    grid-area: top;
    position: sticky;
    top: 0;
    z-index: 620;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .app-brand {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding-right: 13px;
    margin-right: 2px;
    border-right: 1px solid var(--line);
    text-decoration: none;
  }
  .sb-mark {
    width: 23px;
    height: 23px;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .sb-text {
    font-size: 14px;
    font-weight: 700;
    color: #1a1f25;
    letter-spacing: .3px;
    white-space: nowrap;
  }

  .app-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .an-item {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border-radius: 6px;
    font-size: 13.5px;
    color: #3d454d;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
  }
  a.an-item:hover { background: #f4f6f9; color: #1a1f25; }
  .an-item.is-on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
  .an-ico { flex: none; width: 15px; height: 15px; color: #8a939c; }
  .an-item.is-on .an-ico { color: var(--brand); }
  .an-item.is-dead { color: #b8bfc6; cursor: default; }

  /* ---------------- 门店范围选择 ---------------- */
  .app-scope { position: relative; flex: none; }
  .sc-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    font-family: inherit;
    font-size: 12.5px;
    color: #3d454d;
    cursor: pointer;
    white-space: nowrap;
  }
  .sc-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
  .sc-ico { flex: none; width: 13px; height: 13px; color: #8a939c; }
  .sc-caret {
    flex: none;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-right: 1.3px solid #a6aeb6;
    border-bottom: 1.3px solid #a6aeb6;
    transform: rotate(45deg);
  }
  .sc-pop {
    position: absolute;
    right: 0;
    top: 35px;
    width: 236px;
    max-height: 430px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .26);
    padding: 5px;
    z-index: 720;
  }
  .sc-group + .sc-group { border-top: 1px solid #f1f3f5; margin-top: 4px; padding-top: 4px; }
  .sc-gl { font-size: 11px; color: #9aa2aa; padding: 4px 8px 3px; letter-spacing: .3px; }
  .sc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12.5px;
    color: #3d454d;
    text-align: left;
    cursor: pointer;
  }
  .sc-item:hover { background: #f4f6f9; }
  .sc-item.is-on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
  .sc-n { margin-left: auto; font-style: normal; font-size: 11px; color: #9aa2aa; }
  .sc-group-scroll { max-height: 250px; overflow-y: auto; }

  /* ---------------- 顶部：搜索 + 用户 ---------------- */
  .app-search { position: relative; flex: 0 1 220px; min-width: 150px; }
  .as-input {
    width: 100%;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f7f8fa;
    font-family: inherit;
    font-size: 12.5px;
    color: #1a1f25;
    padding: 0 12px 0 29px;
    outline: 0;
  }
  .as-input::placeholder { color: #9aa2aa; }
  .as-input:focus { background: #fff; border-color: var(--brand); }
  .as-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
    color: #9aa2aa;
    pointer-events: none;
  }
  .as-pop {
    position: absolute;
    top: 34px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .22);
    padding: 4px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 720;
  }
  .as-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 5px;
    font-size: 12.5px;
    color: #1a1f25;
    text-decoration: none;
  }
  .as-item:hover, .as-item.is-on { background: var(--brand-light); }
  .as-item-g { margin-left: auto; font-size: 11px; color: #9aa2aa; }
  .as-none { padding: 12px 9px; font-size: 12.5px; color: #9aa2aa; text-align: center; }

  .app-user { display: flex; align-items: center; gap: 9px; flex: none; font-size: 12px; color: var(--muted); }
  .au-name { color: #1a1f25; font-weight: 600; }
  .au-role { background: #f2f4f6; border-radius: 3px; padding: 1px 5px; font-size: 11px; }
  .au-link {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    padding: 3px 2px;
    font-family: inherit;
  }
  .au-link:hover { color: var(--brand-dark); }

  /* ---------------- 左侧栏：大类可折叠 + 二级 / 三级 ---------------- */
  .app-side {
    grid-area: side;
    position: sticky;
    top: 52px;
    align-self: start;
    height: calc(100vh - 52px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--line);
    overflow: hidden;
  }
  .side-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 8px;
  }
  .side-name {
    font-size: 12px;
    font-weight: 700;
    color: #1a1f25;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .side-num {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    color: #9aa2aa;
    background: #f2f4f6;
    border-radius: 9px;
    padding: 0 6px;
    line-height: 16px;
  }
  .side-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: #d8dde3 transparent;
  }
  .side-nav::-webkit-scrollbar { width: 6px; }
  .side-nav::-webkit-scrollbar-thumb { background: #d8dde3; border-radius: 3px; }
  .side-nav::-webkit-scrollbar-thumb:hover { background: #c3cad2; }

  .sd-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 33px;
    padding: 0 10px;
    margin-bottom: 1px;
    border-radius: 5px;
    font-size: 13px;
    color: #3d454d;
    text-decoration: none;
  }
  a.sd-item:hover { background: #f4f6f9; color: #1a1f25; }
  .sd-item.is-on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
  .sd-item.is-on::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2.5px;
    border-radius: 0 2px 2px 0;
    background: var(--brand);
  }
  .sd-item.is-todo, .sd-sub.is-todo { color: #b8bfc6; cursor: default; }

  .sd-sub {
    display: flex;
    align-items: center;
    height: 29px;
    padding: 0 10px 0 22px;
    margin-bottom: 1px;
    border-radius: 5px;
    font-size: 12.5px;
    color: #5c646d;
    text-decoration: none;
  }
  a.sd-sub:hover { background: #f4f6f9; color: #1a1f25; }
  .sd-sub.is-on { color: var(--brand-dark); font-weight: 600; background: var(--brand-light); }
  .sd-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sd-tag {
    margin-left: auto;
    flex: none;
    font-style: normal;
    font-size: 10px;
    color: #9aa2aa;
    background: #f2f4f6;
    border-radius: 3px;
    padding: 0 4px;
    line-height: 15px;
  }
  .sd-tag-ext { color: var(--brand-dark); background: var(--brand-light); }

  /* 折叠大类：分组标题行 + 可收起的小类列表 */
  .sd-group { margin-bottom: 2px; }
  .sd-ghead {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 32px;
    padding: 0 8px 0 10px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1f25;
    cursor: pointer;
    letter-spacing: .2px;
  }
  .sd-ghead:hover { background: #f4f6f9; }
  .sd-group.is-on-group .sd-ghead { color: var(--brand-dark); }
  .sd-gico { width: 15px; height: 15px; flex: none; color: var(--brand); }
  .sd-gt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sd-gn {
    margin-left: auto;
    flex: none;
    font-size: 10.5px;
    font-weight: 400;
    color: #9aa2aa;
  }
  .sd-caret {
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 1.6px solid #9aa2aa;
    border-bottom: 1.6px solid #9aa2aa;
    transform: rotate(-45deg);
    transition: transform .15s ease;
  }
  .sd-group.is-open .sd-caret { transform: rotate(45deg); margin-top: -3px; }
  .sd-gbody { display: none; padding: 1px 0 4px 12px; }
  .sd-group.is-open .sd-gbody { display: block; }
  /* 三级折叠：箭头放在二级行尾，点了只折叠不跳转 */
  .sd-group.has-kids > .sd-item .sd-caret { margin-left: auto; margin-top: 2px; cursor: pointer; }
  .sd-group.has-kids > .sd-item:hover .sd-caret { border-color: var(--brand); }

  /* ---------------- 页签栏（右侧带面包屑） ---------------- */
  .app-tabs {
    grid-area: tabs;
    position: sticky;
    top: 52px;
    z-index: 610;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .tb-track {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .tb-track::-webkit-scrollbar { display: none; }
  .tb {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 25px;
    padding: 0 9px;
    margin-right: 3px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #f2f4f7;
    font-size: 12.5px;
    color: #5c646d;
    text-decoration: none;
    max-width: 168px;
    position: relative;
  }
  .tb:hover { background: #e9edf2; color: #1a1f25; }
  .tb.is-on {
    background: #fff;
    color: var(--brand-dark);
    font-weight: 600;
    border-color: var(--line);
    box-shadow: 0 -2px 0 var(--brand) inset;
  }
  .tb-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-x {
    flex: none;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #9aa2aa;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
  }
  .tb-x:hover { background: #d9dee5; color: #1a1f25; }
  .tb.is-on .tb-x:hover { background: #e2e8f0; }
  .tb-home .tb-x { display: none; }

  /* 页签栏右侧的「关闭其他」 */
  .tb-act {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    margin: 0 0 4px 6px;
    padding: 0 8px 0 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: #6b737c;
    font-size: 12px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .tb-act svg { flex: none; opacity: .75; }
  .tb-act:hover { border-color: #c9d4e6; background: #f4f7fb; color: var(--brand-dark); }
  .tb-act:active { background: #eaf1fb; }
  .tb-act:disabled { opacity: .45; cursor: default; background: #fff; border-color: var(--line); color: #8a9199; }
  .tb-act:disabled svg { opacity: .5; }

  .app-crumb {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    margin-left: auto;
    padding-left: 10px;
    border-left: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    max-width: 40%;
    overflow: hidden;
  }
  .crumb-g { white-space: nowrap; }
  .crumb-sep { color: #cbd2d9; }
  .crumb-i {
    color: #1a1f25;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------------- 内容区 ---------------- */
  .page {
    grid-area: page;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 12px 16px 40px;
    background: var(--bg);
  }

  /* 顶栏已有用户与退出，首页的「账号」区不再重复 */
  .home-account { display: none; }
  .home-head { padding-top: 4px; }
}

/* =====================================================================
   PC 密度：表格与筛选行按乐檬的紧凑档收一收
   ===================================================================== */
@media (min-width: 1024px) {
  .dt { font-size: 12.5px; }
  .dt thead th { padding: 7px 11px; font-size: 11.5px; background: #fafbfc; }
  .dt tbody td { padding: 8px 11px; }
  .dt-wrap { border-radius: 6px; }
  .dt-tool { padding: 8px 11px; }
  .dt-name { font-size: 12.5px; }

  .card { border-radius: 6px; }
  .section-title { font-size: 13.5px; margin-bottom: 8px; }
  .stat-row { gap: 10px; }
  .stat-card { border-radius: 6px; padding: 12px 14px; }

  /* 筛选条：乐檬是「白底一行 + 控件按内容宽 + 右侧操作」，
     不是散落在灰底上、还把每个控件拉成等宽 */
  .filterbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  .filterbar > * { flex: 0 0 auto; }
  .filterbar > .input,
  .filterbar > .input-sm {
    width: auto;
    min-width: 128px;
    height: 30px;
    padding: 0 9px;
    font-size: 12.5px;
    border-radius: 4px;
  }
  .filterbar > select.input-sm { min-width: 132px; }
  .filterbar > input[type="month"] { min-width: 145px; }
  .filterbar > input[type="search"] { min-width: 200px; }
  .filterbar > .btn { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 4px; }
  .filterbar > .segmented { flex: 0 0 auto; }
  .filterbar:empty { display: none; }

  /* 当前一级菜单整行高亮，跟乐檬的选中态一致 */
  .nav-group.is-current > .ng-head { background: var(--brand-light); color: var(--brand-dark); }

  /* 首页 KPI 在 PC 上统一成四张白卡，数字一样大，乐檬就是这个排法 */
  .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .kpi {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 13px 15px;
    align-items: flex-start;
  }
  .kpi-main { grid-column: auto; background: var(--card); }
  .kpi-main .kpi-ico { background: var(--brand-light); color: var(--brand); }
  .kpi-main .kpi-label { color: var(--muted); }
  .kpi-main .kpi-value { color: #111827; font-size: 22px; }
  .kpi-main .kpi-delta { color: var(--muted); }
  .kpi-main .kpi-delta .up { color: #16a34a; }
  .kpi-main .kpi-delta .down { color: #dc2626; }
  .kpi-ico { width: 34px; height: 34px; border-radius: 6px; background: var(--brand-light); color: var(--brand); }
  .kpi-value { font-size: 22px; }
  .kpi-delta { font-size: 11.5px; }

  /* 绿色大数字卡在 PC 上收成白卡 + 左侧主色条（乐檬的 KPI 卡写法），
     绿色渐变留给手机端的品牌感 */
  .hero {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 6px;
    box-shadow: none;
    padding: 12px 16px;
    margin-bottom: 12px;
  }
  .hero-label { color: var(--muted); opacity: 1; font-size: 12.5px; }
  .hero-value { color: #111827; font-size: 24px; margin: 1px 0 3px; }
  .hero-sub { color: var(--muted); opacity: 1; font-size: 12px; }

  /* 排行行在 PC 上收紧，一屏多看几条 */
  .bar-row { padding: 5px 0; }
  .bar-sub { font-size: 11px; }

  /* 排行条在 PC 上跟着主色走蓝，绿渐变留着给手机 */
  .bar-track { background: #eef1f5; }
  .bar-fill { background: linear-gradient(90deg, #4a8ee6, #2b6fd4); }

  /* 页签栏下方内容区顶部留白，避免卡片贴边 */
  .page > .card:first-child, .page > section:first-child { margin-top: 0; }
}

/* =====================================================================
   PC 密度适配：移动端那套「单列 + 满宽按钮」在宽屏上会显得空旷，
   这里只做通用收敛，具体页面排版仍由各自视图决定
   ===================================================================== */
@media (min-width: 1024px) {
  /* 弹层：底部抽屉 → 居中模态 */
  .sheet-mask { align-items: center; padding: 24px; }
  .sheet {
    max-width: 780px;
    border-radius: 16px;
    max-height: 86vh;
    padding-bottom: 0;
    transform: translateY(14px) scale(.99);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }
  .sheet.open { transform: none; opacity: 1; }
  .sheet-foot { justify-content: flex-end; }
  .sheet-foot .btn { flex: 0 0 auto; min-width: 124px; }

  /* 统计卡：一行铺满，别再 2 列 */
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
  .menu-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

  /* 页头更紧凑 */
  .topbar { padding: 0 0 10px; }
  .topbar-title { font-size: 17.5px; }

  /* tab 不再拉满整屏 */
  .tabs { max-width: 640px; }

  /* 满宽按钮在宽屏上收窄，避免一条 1200px 的绿带 */
  .btn-block { width: auto; min-width: 148px; padding-left: 26px; padding-right: 26px; }

  /* 表单控件限宽，长输入框既不美观也不好读 */
  .page .field input,
  .page .field select,
  .page .field textarea { max-width: 460px; }
  .filterbar .input { max-width: 260px; }

  /* 列表行加 hover，PC 上有鼠标反馈才像后台 */
  .list-row:hover, .adm-node:hover, .pick-item:hover { background: #f7faf8; }
  .list-row { background: var(--card); }

  /* 表格化列表：行内两端对齐处留点呼吸 */
  .adm-node { padding-left: 4px; padding-right: 4px; }
}

/* PC：工具条里的按钮按内容宽度，别均分整行 */
@media (min-width: 1024px) {
  .filterbar { flex-wrap: wrap; }
  .filterbar > .btn { flex: 0 0 auto; min-width: 118px; }
  .filterbar > .btn-block { min-width: 118px; }
  .filterbar > .seg-dim { flex: 0 1 320px; }
}

@media (min-width: 1024px) {
  .plan-upload-btn { width: auto; min-width: 196px; padding-left: 30px; padding-right: 30px; }
}

/* PC：超宽屏别把内容拉到 1900px；部门树这类层级列表限宽更像树 */
@media (min-width: 1024px) {
  /* 部门是有层级的树，铺满整屏反而看不出从属关系 */
  #deptTree { max-width: 880px; }
}

/* PC：汇总卡跟着乐檬的 KPI 区走整行，不再限宽留一块空白 */
@media (min-width: 1024px) {
  .hero { max-width: none; }
  .hero-value { font-size: 26px; }
}

/* =====================================================================
   主推品与绑定（/mp）
   ===================================================================== */
.btn-danger {
  color: var(--danger);
  border-color: #f3cfcb;
  background: #fff;
}
.btn-danger:active { background: #fdf2f1; }

.badge-off { color: #8b949b; background: #eceff1; }

.tone-ok   { color: #15803d; }
.tone-warn { color: #b45309; }
.tone-bad  { color: #b91c1c; }

.mp-head .filterbar { margin-bottom: 0; }
.mp-muted { color: var(--muted); font-size: 12.5px; }
.mp-item .li-title { font-weight: 600; }

/* 完成率进度条 */
.mp-bar {
  height: 5px;
  border-radius: 3px;
  background: #eef1f0;
  margin-top: 7px;
  overflow: hidden;
}
.mp-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #cbd5d0;
  transition: width .3s ease;
}
.mp-bar > i.tone-ok   { background: #16a34a; }
.mp-bar > i.tone-warn { background: #f59e0b; }
.mp-bar > i.tone-bad  { background: #ef4444; }

/* 详情 */
.sheet-wide { max-width: 920px; }
.mp-dtl-head { margin-bottom: 14px; }
.mp-dtl-name {
  font-size: 18px;
  font-weight: 650;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.mp-dtl-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

.mp-trend { margin-bottom: 6px; }
.mp-trend-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 96px;
  padding: 6px 8px;
  background: #fbfcfc;
  border: 1px solid #eef1f0;
  border-radius: 10px;
}
.mp-trend-bars > i {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 26px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #34d399, #16a34a);
}
.mp-trend-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  padding: 5px 2px 0;
}

.mp-store-list, .mp-prod-list { border: 1px solid #eef1f0; border-radius: 12px; overflow: hidden; }
.mp-store-row, .mp-prod-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #f5f7f6;
}
.mp-store-row:last-child, .mp-prod-row:last-child { border-bottom: 0; }
.mp-sr-main, .mp-pr-main { flex: 1 1 auto; min-width: 0; }
.mp-sr-name, .mp-pr-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mp-sr-sub, .mp-pr-sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.mp-sr-rate { font-size: 15px; font-weight: 650; white-space: nowrap; }
.mp-pr-amt { font-size: 14px; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }

/* 门店绑定 */
.mp-shop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14.5px;
  margin: 4px 0 12px;
}
.mp-cards { display: flex; flex-direction: column; gap: 12px; }
.mp-card {
  background: var(--card);
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: var(--shadow);
}
.mp-card-head { display: flex; align-items: flex-start; gap: 10px; }
.mp-card-name {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 650;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mp-card-rate { font-size: 15px; font-weight: 650; white-space: nowrap; }
.mp-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.mp-card-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.mp-add-bind { padding: 6px 12px; font-size: 12.5px; }

.mp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background: #f5f8f6;
  border: 1px solid #e8eeeb;
  border-radius: 9px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: #374151;
}
.mp-chip b { font-weight: 550; }
.mp-chip em { font-style: normal; color: var(--brand-dark); font-weight: 600; }
.mp-chip.is-bad { border-color: #f3cfcb; background: #fdf4f3; }
.mp-chip-tag {
  font-style: normal;
  font-size: 10.5px;
  color: #92600b;
  background: #fdf3d9;
  border-radius: 4px;
  padding: 0 4px;
}
.mp-chip-tag.is-bad { color: #b91c1c; background: #fde4e1; }
.mp-chip-x {
  border: 0;
  background: transparent;
  color: #98a2ab;
  font-size: 15px;
  line-height: 1;
  padding: 0 1px;
  cursor: pointer;
  font-family: inherit;
}
.mp-chip-x:hover { color: var(--danger); }
.mp-chip-empty { font-size: 12.5px; color: var(--muted); }
.mp-chip-when { font-size: 10.5px; color: #8a979f; white-space: nowrap; }
.btn-danger-text { color: #b91c1c; }
.btn-danger-text:hover { background: #fdf2f1; }
.t-danger { color: #b91c1c; }

/* 绑定变更的适用日期 */
.eff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: #f6faf7;
  border: 1px solid #e3efe7;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
}
.eff-bar.is-month { background: #fff9ec; border-color: #f3e2c0; }
.eff-label { font-weight: 600; color: #12352a; }
.eff-opt { display: inline-flex; align-items: center; gap: 5px; color: #374151; cursor: pointer; }
.eff-opt input { margin: 0; }
.eff-note { flex: 1 1 100%; color: #6b7c73; font-size: 12px; }
.eff-bar.is-month .eff-note { color: #92600b; }

/* 主推品目录里的「绑定适用期」 */
.mp-when { font-size: 11.5px; color: #6b7c73; margin-top: 3px; }
.mp-when b { color: #374151; font-weight: 550; }

/* 主推品「执行日期」两个日期并排 */
.mp-win { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mp-win-label { font-size: 13px; color: #374151; white-space: nowrap; }
.mp-win-sep { color: #9aa5a0; }
.mp-win .input-sm { width: auto; min-width: 132px; flex: 1 1 132px; }
.mp-win .link-btn { font-size: 12px; }

/* 导入预览 */
.imp-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.imp-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #f1f5f3; color: #4b5563; }
.imp-chip.is-new { background: #e7f6ec; color: #1a7a42; }
.imp-chip.is-upd { background: #e8f1fb; color: #1d4ed8; }
.imp-chip.is-err { background: #fdeceb; color: #b91c1c; }
.imp-list { border: 1px solid #eef3f0; border-radius: 9px; overflow: hidden; }
.imp-row { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 9px 11px; border-bottom: 1px solid #f2f6f4; font-size: 12.5px; }
.imp-row:last-child { border-bottom: 0; }
.imp-row-name { font-weight: 600; color: #1f2937; }
.imp-row-meta { color: #6b7c73; }
.imp-row-err { flex: 1 1 100%; color: #b91c1c; }
.imp-row-warn { flex: 1 1 100%; color: #92600b; }
.imp-badge { font-size: 11px; padding: 1px 7px; border-radius: 5px; background: #eef2f0; color: #4b5563; }
.imp-badge.is-new { background: #e7f6ec; color: #1a7a42; }
.imp-badge.is-upd { background: #e8f1fb; color: #1d4ed8; }
.imp-badge.is-err { background: #fdeceb; color: #b91c1c; }

/* 绑定选择 */
.mp-bind-current { margin-bottom: 12px; }
.mp-bind-label { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.mp-pick {
  border: 1px solid #eef1f0;
  border-radius: 12px;
  max-height: 320px;
  overflow-y: auto;
  background: #fbfcfc;
}
.mp-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #f2f5f3;
  cursor: pointer;
}
.mp-pick-row:last-child { border-bottom: 0; }
.mp-pick-row input { width: 16px; height: 16px; accent-color: #16a34a; flex: none; }
.mp-pick-row.is-bound { opacity: .62; cursor: default; }
.mp-pick-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-pick-main b { font-size: 13.5px; font-weight: 550; color: #111827; }
.mp-pick-main i { font-style: normal; font-size: 11.5px; color: var(--muted); }

@media (min-width: 1024px) {
  .mp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; }
  .mp-head .filterbar .input { max-width: 220px; }
  .mp-trend-bars { height: 132px; }
}

/* 主推品页顶部筛选栏：月份 / 区域 / 门店三个控件。
   手机上三列平分会把「2026年11」挤断，改成月份独占一行。 */
.mp-head .filterbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mp-head .filterbar > #mpMonth     { grid-area: 1 / 1 / 2 / 3; }
.mp-head .filterbar > #mpRegionSel { grid-area: 2 / 1 / 3 / 2; }
.mp-head .filterbar > #mpStore     { grid-area: 2 / 2 / 3 / 3; }

/* 目录自己的筛选：搜索 + 状态 + 新建 */
#pane-catalog .filterbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#pane-catalog .filterbar > #mpKw     { grid-area: 1 / 1 / 2 / 3; }
#pane-catalog .filterbar > #mpStatus { grid-area: 2 / 1 / 3 / 2; }
#pane-catalog .filterbar > #btnNewMp { grid-area: 2 / 2 / 3 / 3; white-space: nowrap; }

@media (min-width: 1024px) {
  .mp-head .filterbar,
  #pane-catalog .filterbar {
    display: flex;
    align-items: center;
  }
  .mp-head .filterbar > #mpMonth     { flex: 0 0 150px; }
  .mp-head .filterbar > #mpRegionSel { flex: 0 0 140px; }
  .mp-head .filterbar > #mpStore     { flex: 0 0 240px; }
  #pane-catalog .filterbar > #mpKw     { flex: 0 1 260px; }
  #pane-catalog .filterbar > #mpStatus { flex: 0 0 140px; }
  #pane-catalog .filterbar > #btnNewMp { flex: 0 0 auto; margin-left: auto; }
}

/* =====================================================================
   主推品完成看板（/mp → 完成看板）
   红黄绿 = 进度达成率：>=100% 达标、>=80% 接近、其余落后、未开始灰
   ===================================================================== */
.mpb-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--card);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  border-left: 4px solid #cbd5d0;
}
.mpb-hero.is-green  { border-left-color: #16a34a; }
.mpb-hero.is-yellow { border-left-color: #f59e0b; }
.mpb-hero.is-red    { border-left-color: #ef4444; }

.mpb-hero-main { flex: 1 1 190px; min-width: 0; }
.mpb-hero-label { font-size: 12.5px; color: var(--muted); }
.mpb-hero-val {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 2px 0 4px;
  color: #111827;
}
.mpb-hero-main.is-green  .mpb-hero-val { color: #15803d; }
.mpb-hero-main.is-yellow .mpb-hero-val { color: #b45309; }
.mpb-hero-main.is-red    .mpb-hero-val { color: #b91c1c; }
.mpb-hero-sub { font-size: 12px; color: var(--muted); }

.mpb-hero-side {
  flex: 0 1 260px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 14px;
  border-left: 1px dashed #e6ebe8;
}
.mpb-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mpb-kv > span { font-size: 12.5px; color: var(--muted); }
.mpb-kv > b { font-size: 15px; font-weight: 650; color: #1f2937; font-variant-numeric: tabular-nums; }

.mpb-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0 2px;
}
.mpb-lights-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 550;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f6f4;
  color: #4b5563;
}
.mpb-lights-chip > i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5d0; }
.mpb-lights-chip.is-green  { background: #eaf7ee; color: #15803d; }
.mpb-lights-chip.is-green > i { background: #16a34a; }
.mpb-lights-chip.is-yellow { background: #fdf5e6; color: #b45309; }
.mpb-lights-chip.is-yellow > i { background: #f59e0b; }
.mpb-lights-chip.is-red    { background: #fdeceb; color: #b91c1c; }
.mpb-lights-chip.is-red > i { background: #ef4444; }
.mpb-lights-note { font-size: 12px; color: var(--muted); margin-left: auto; }

.mpb-card {
  background: var(--card);
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.mpb-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mpb-card-head > b { font-size: 14px; font-weight: 650; color: #111827; }
.mpb-note { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.mpb-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  margin-left: auto;
}
.mpb-legend > i { width: 14px; height: 2px; border-radius: 1px; background: #16a34a; }
.mpb-legend > i.is-plan { background: #b6c2bb; border-top: 2px dashed #98a2ab; height: 0; }

/* 走势图 */
.mpb-svg { display: block; width: 100%; height: auto; }
.mpb-grid { stroke: #f0f3f1; stroke-width: 1; }
.mpb-axis { font-size: 13px; fill: #98a2ab; }
.mpb-today { stroke: #d7ded9; stroke-width: 1; stroke-dasharray: 4 4; }
.mpb-line-plan {
  fill: none;
  stroke: #b6c2bb;
  stroke-width: 2;
  stroke-dasharray: 6 5;
  stroke-linejoin: round;
}
.mpb-line-act {
  fill: none;
  stroke: #16a34a;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mpb-area { fill: rgba(22, 163, 74, .09); }
.mpb-dot { fill: #fff; stroke: #16a34a; stroke-width: 2.5; }
.mpb-mark { font-size: 12.5px; font-weight: 600; fill: #15803d; }

/* 排名 */
.mpb-rank { display: flex; flex-direction: column; }
.mpb-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 2px;
  border-bottom: 1px solid #f3f6f4;
}
.mpb-row:last-child { border-bottom: 0; }
.mpb-row[data-goto-store] { cursor: pointer; }
.mpb-row[data-goto-store]:hover { background: #fafcfb; }
.mpb-no {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  background: #f2f5f3;
}
.mpb-no.is-green  { background: #eaf7ee; color: #15803d; }
.mpb-no.is-yellow { background: #fdf5e6; color: #b45309; }
.mpb-no.is-red    { background: #fdeceb; color: #b91c1c; }
.mpb-main { flex: 1 1 auto; min-width: 0; }
.mpb-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mpb-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.mpb-bar {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: #eef1f0;
  margin-top: 6px;
  overflow: hidden;
}
.mpb-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #cbd5d0;
  transition: width .3s ease;
}
.mpb-bar > i.tone-ok   { background: #16a34a; }
.mpb-bar > i.tone-warn { background: #f59e0b; }
.mpb-bar > i.tone-bad  { background: #ef4444; }
/* 竖线 = 「按进度今天应该在的位置」，实际色条落后于它就是在掉队 */
.mpb-bar > b {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: #6b7280;
  opacity: .55;
  transform: translateX(-1px);
}
.mpb-metric { flex: none; text-align: right; min-width: 76px; }
.mpb-rate { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mpb-light { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.mpb-light.is-green  { color: #15803d; }
.mpb-light.is-yellow { color: #b45309; }
.mpb-light.is-red    { color: #b91c1c; }

@media (max-width: 480px) {
  .mpb-hero-val { font-size: 29px; }
  .mpb-hero-side { flex: 1 1 100%; padding-left: 0; border-left: 0; border-top: 1px dashed #e6ebe8; padding-top: 10px; }
  .mpb-lights-note { flex: 1 1 100%; margin-left: 0; }
  .mpb-sub { font-size: 11px; }
}


/* =====================================================================
   数据表格（PC 密排表格 / 移动端自动降级为卡片）
   用法：
     <div class="dt-wrap">
       <table class="dt"><thead><tr><th>…</th></tr></thead>
         <tbody><tr><td>…</td><td class="num m-hide">…</td></tr></tbody>
       </table>
     </div>
   m-hide：这一列手机上不显示（次要信息）
   移动端 thead 隐藏，每行变一张卡片，单元格上下堆叠
   ===================================================================== */
.dt-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.dt-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.dt-tool-title { font-size: 13px; font-weight: 600; color: #111827; margin-right: auto; }
.dt {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #303a42;
}
.dt thead th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #7a848c;
  background: #fafbfa;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dt tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f4f2;
  vertical-align: middle;
}
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr.is-click { cursor: pointer; }
.dt tbody tr.is-click:hover { background: #fafbfa; }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt .t-strong { font-weight: 600; color: #111827; }
.dt .t-muted { color: var(--muted); }
.dt .t-small { font-size: 12px; color: var(--muted); }
.dt-name { font-weight: 600; color: #111827; line-height: 1.4; }
.dt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dt-tags:empty { display: none; }
.dt-row-act { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.dt-empty { padding: 40px 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* 序号列与底部条数（乐檬列表页的固定配套） */
.dt .dt-no {
  width: 48px;
  color: #9aa2aa;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.dt thead th.dt-no { width: 48px; }
.dt-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: #fafbfc;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.m-only { display: none; }

@media (max-width: 1023px) {
  .m-only { display: block; }
  .dt-wrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .dt-tool { padding: 0 0 10px; border: 0; }
  .dt, .dt tbody, .dt tr, .dt td { display: block; width: 100%; }
  .dt thead { display: none; }
  .dt tbody tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .dt tbody td { padding: 0; border: 0; }
  .dt tbody td + td { margin-top: 6px; }
  .dt td.m-hide { display: none; }
  .dt .num { text-align: left; }
  .dt-foot { border-top: 0; background: transparent; text-align: center; padding: 2px 0 8px; }
  /* 手机上列名没了，用 data-th 还原「实际 / 完成率」这类标签 */
  .dt td[data-th] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .dt td[data-th]::before {
    content: attr(data-th);
    flex: none;
    font-size: 12px;
    color: var(--muted);
  }
  .dt td[data-th] > * { min-width: 0; }
  .dt td[data-th] .mp-bar { flex: 1 1 40%; align-self: center; }
  .dt-row-act { justify-content: flex-start; margin-top: 10px; }
}

@media (min-width: 1024px) {
  /* PC 上不需要返回箭头（左侧菜单就在旁边），标题保留，页面才有名字 */
  .topbar { padding: 0 0 12px; }
  .topbar-back { display: none; }
  .topbar-title { font-size: 17.5px; font-weight: 650; }
}

/* =====================================================================
   PC 表格补充：必须放在文件末尾 —— .dt-tags 的基础规则在后面定义，
   放前面会被覆盖掉
   ===================================================================== */
@media (min-width: 1024px) {
  .dt-name { display: inline-block; vertical-align: middle; }
  /* 名字后面的 badge 跟名字同一行，不然每行都被撑成两行 */
  .dt-tags {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0 0 6px;
    gap: 4px;
  }
}

/* =====================================================================
   工作台常用功能（对齐乐檬工作台宫格）
   ===================================================================== */
.db-head { gap: 10px; flex-wrap: wrap; }
/* 门店范围选择（v2-044b：工作台页内可选，对齐手机端功能） */
.db-scope-wrap { margin-left: auto; position: relative; }
.db-scope-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--brand-dark); background: var(--brand-light);
  border: 1px solid transparent; border-radius: 999px; padding: 4px 12px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.db-scope-btn:hover { border-color: var(--brand); }
.db-scope-btn b { font-weight: 650; }
.db-scope-btn .db-caret {
  width: 0; height: 0; display: inline-block;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.db-scope-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 720;
  width: 248px; max-height: 430px; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .26); padding: 6px;
}
.db-scope-pop[hidden] { display: none; }
.db-scope-search { padding: 4px 4px 8px; position: sticky; top: 0; background: #fff; }
.db-scope-list .sc-gl { font-size: 11px; color: var(--muted); padding: 7px 8px 3px; }
.db-scope-list .sc-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 0; background: none; padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--text);
}
.db-scope-list .sc-item:hover { background: #f4f6f8; }
.db-scope-list .sc-item.is-on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.db-scope-list .sc-item .sc-n { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted); }
.db-scope { margin-left: auto; font-size: 12px; color: var(--brand-dark); background: var(--brand-light); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.db-scope:empty { display: none; }

.quick {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px 14px;
  margin-bottom: 12px;
}
.quick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.quick-head h3 { margin: 0; font-size: 14px; font-weight: 650; }
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 4px 9px;
  border-radius: 8px;
  text-decoration: none;
  color: #3d454d;
  font-size: 12.5px;
  background: #fafbfc;
  border: 1px solid transparent;
}
.quick-item:hover { background: var(--brand-light); border-color: #cfe0f7; color: var(--brand-dark); }
.quick-item svg { width: 20px; height: 20px; color: var(--brand); opacity: .85; }

/* ---- 常用功能：编辑按钮 + 空态（v2-033） ---- */
.quick-tools { display: flex; align-items: center; gap: 8px; }
.quick-edit {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: #fff; color: #4b5563;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
  transition: all .12s;
}
.quick-edit:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
.quick-edit svg { opacity: .9; }
.quick-empty {
  grid-column: 1 / -1; text-align: center; padding: 18px 8px;
  font-size: 12.5px; color: var(--muted); background: #fafbfc;
  border: 1px dashed var(--line); border-radius: 8px;
}

/* ---- 常用功能：编辑弹层 ---- */
.qm-mask {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.qm-mask[hidden] { display: none; }
.qm-box {
  background: #fff; border-radius: 14px; width: min(560px, 100%);
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .3); overflow: hidden;
}
.qm-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.qm-h h3 { margin: 0; font-size: 15px; font-weight: 650; }
.qm-sub { font-size: 11.5px; color: var(--muted); }
.qm-x {
  margin-left: auto; border: 0; background: none; font-size: 22px; line-height: 1;
  color: #94a3b8; cursor: pointer; padding: 0 2px;
}
.qm-x:hover { color: #334155; }
.qm-sec { padding: 8px 16px 4px; overflow: auto; }
.qm-lab { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.qm-lab b { color: var(--brand-dark); font-size: 13px; }
.qm-picked { display: flex; flex-wrap: wrap; gap: 7px; min-height: 34px; }
.qm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-light); border: 1px solid #cfe0f7; color: var(--brand-dark);
  border-radius: 8px; padding: 6px 8px 6px 9px; font-size: 12.5px;
}
.qm-chip svg { width: 15px; height: 15px; }
.qm-chip-n {
  font-style: normal; font-size: 10px; background: #fff; color: var(--brand-dark);
  border-radius: 4px; padding: 0 4px; line-height: 15px; font-variant-numeric: tabular-nums;
}
.qm-chip-x {
  border: 0; background: none; color: #64748b; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 1px;
}
.qm-chip-x:hover { color: #b91c1c; }
.qm-all {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 7px; padding-bottom: 6px;
}
.qm-add {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); background: #fafbfc; border-radius: 8px;
  padding: 8px 9px; font-size: 12.5px; color: #3d454d; text-align: left;
}
.qm-add:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.qm-add:disabled { opacity: .45; cursor: not-allowed; }
.qm-add svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.qm-add span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-add i { font-style: normal; color: #94a3b8; font-size: 14px; line-height: 1; }
.qm-empty { font-size: 12px; color: var(--muted); padding: 6px 2px; }
.qm-f {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-top: 1px solid var(--line); background: #fcfcfd;
}
.qm-gap { flex: 1; }

@media (max-width: 720px) {
  .qm-box { width: 100%; max-height: 90vh; border-radius: 14px 14px 0 0; }
  .qm-mask { align-items: flex-end; padding: 0; }
  .qm-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-tools .db-muted { display: none; }
}

@media (min-width: 720px) {
  .quick-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .quick { background: #fff; border: 1px solid var(--line); box-shadow: none; padding: 12px 14px; border-radius: 6px; }
  .quick-item { background: #f7f9fb; }
  .quick-item:hover { background: var(--brand-light); }
  .db-scope { margin-left: 0; }
}

/* 从乐檬添加门店（多选） */
.im-sum { font-size: 12.5px; color: #5c646d; padding: 6px 2px 8px; }
.im-sum b { color: var(--brand-dark); }
.im-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.im-table { font-size: 12.5px; }
.im-table th, .im-table td { white-space: nowrap; }
.im-table td:nth-child(3) { white-space: normal; min-width: 180px; }
.im-table td:nth-child(5) { white-space: normal; max-width: 240px; color: #9aa2aa; }
.im-table tr.is-dim { opacity: .55; }
.im-ck { width: 34px; text-align: center; }
.im-name { height: 26px; padding: 0 7px; font-size: 12.5px; width: 150px; }
.im-region { height: 26px; padding: 0 4px; font-size: 12.5px; width: 96px; }

/* 商品管理分页条 */
.dt-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; }
.pager-btns { display: flex; align-items: center; gap: 8px; }
.mp-pool-btn { font-size: 12.5px; }

/* 门店导入表：区域列别被挤成竖排 */
.im-table td:nth-child(4) { min-width: 92px; white-space: nowrap; }
.im-table th:nth-child(4) { min-width: 92px; }

/* 筛选条里的按钮不要被 flex:1 拉宽、也不要挤成竖排 */
.filterbar > .btn,
.filterbar > a.btn,
.filterbar > button.btn { flex: 0 0 auto; white-space: nowrap; }

/* 手机上 4 张 KPI 卡：主卡整行，其余三张并排，不留孤零零一张 */
@media (max-width: 600px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-main { grid-column: 1 / -1; }
  .kpi-row .kpi { padding: 11px 10px; }
  .kpi-row .kpi-value { font-size: 17px; }
  .kpi-row .kpi-label { font-size: 11.5px; }
}

/* 按钮不缩后可能顶破容器：允许筛选条换行 */
.filterbar { flex-wrap: wrap; }

/* 看板头部：范围标签紧贴日期，别被 space-between 甩到中间 */
.db-head { justify-content: flex-start; }
.db-date { margin-left: 8px; }
.db-scope { margin-left: auto; margin-right: 2px; }

/* 表单小标签（写在输入框上方，比 placeholder 更明确） */
.flabel {
  display: block;
  font-size: 12px;
  color: #5c646d;
  font-weight: 600;
  margin: 0 0 5px 1px;
}
.flabel + .form-row { margin-bottom: 12px; }

/* 门店列表操作列 */
.dt-act { white-space: nowrap; text-align: right; }
.dt .link-btn.danger { color: var(--danger); }
.dt .link-btn.danger:hover { color: #b91c1c; }
@media (max-width: 1023px) {
  .dt-act { text-align: left; }
  .dt-act .dt-row-act { justify-content: flex-start; margin-top: 8px; }
}

/* ===== 月度目标：差额提示 + 后台手工补充（绑定/改目标） ===== */
.warn-text { color: #b45309; }
.ok-text { color: var(--brand-dark); }

.plan-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 9px 12px;
  background: #fffdf5;
  border: 1px solid #f3e6c0;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.plan-diff b { font-weight: 600; }

.chip-on {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}
.dt .link-btn.warn-text { font-weight: 600; }

/* ===== 区域主推品标准（plan 页抽屉） ===== */
.rg-ratio-wrap { display: inline-flex; align-items: center; gap: 4px; }
.rg-ratio-wrap .input {
  width: 74px;
  padding: 3px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rg-ratio-wrap i { font-style: normal; color: var(--muted); font-size: 12px; }
.rg-diff summary { cursor: pointer; font-size: 12.5px; display: flex; gap: 4px; white-space: nowrap; }
.rg-diff-list { margin-top: 6px; display: grid; gap: 2px; }
.rg-diff-row { font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.rg-diff-row b { color: var(--text); font-weight: 600; }
.rg-extra { margin-top: 12px; }
.dt-region td { vertical-align: top; }
.dt-region .dt-tags .badge { font-weight: 400; }
@media (max-width: 1023px) {
  .rg-ratio-wrap .input { width: 64px; }
}

/* 区域标准抽屉：手机端底部按钮不要挤成竖排 */
.rg-diff-cell { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1023px) {
  .dt td[data-th] > .rg-diff-cell { flex: 1 1 auto; min-width: 0; text-align: right; }
  .rg-diff-cell .rg-diff-summary { justify-content: flex-end; }
  #rgMask .sheet-foot { flex-wrap: wrap; gap: 8px; }
  #rgMask .sheet-foot .sheet-tip { flex: 1 0 100%; margin: 0; }
  #rgMask .sheet-foot #rgMode { flex: 1 0 100%; }
  #rgMask .sheet-foot .btn { flex: 1 1 0; white-space: nowrap; }
}

/* ===== 月度目标：区域主推品标准入口（页签栏右侧，两个页签都可见） ===== */
.plan-tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.plan-tabs-row .tabs {
  flex: 1 1 auto;
  max-width: none;
  margin-bottom: 0;
}
.plan-tabs-row > .btn-region {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #f1f6ff;
  border: 1px solid #c9dcf8;
  color: #1e5bb8;
  font-weight: 600;
}
.plan-tabs-row > .btn-region:hover { background: #e4eefd; }
@media (max-width: 1023px) {
  .plan-tabs-row { flex-wrap: wrap; gap: 8px; }
  .plan-tabs-row .tabs { flex: 1 0 100%; }
  .plan-tabs-row > .btn-region { width: 100%; justify-content: center; }
}

/* 区域标准按钮：任意位置可用（plan 页签栏 / 主推品页） */
.btn-region {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #f1f6ff;
  border: 1px solid #c9dcf8;
  color: #1e5bb8;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-region:hover { background: #e4eefd; color: #1e5bb8; }

/* ===== 今日战报（工作台首页，近 14 天趋势上方） =====
   版式对齐线下战报图：店名 / 本月进度 / 四张卡 / 明细表 / 缺口前三 / 明天要卖多少 */
.war {
  margin: 0 0 14px;
  padding: 16px 18px 14px;
  background: #fff;
  border: 1px solid #e6eae3;
  border-radius: 14px;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.war-loading, .war-empty { padding: 18px 4px; color: #8a9199; font-size: 13px; text-align: center; }

.war-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.war-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.war-title b { font-size: 24px; font-weight: 800; color: #14532d; letter-spacing: .6px; }
.war-owner { font-size: 13px; color: #6b7280; font-weight: 400; }
/* v2-047 排名范围：标签（店长/督导）与切换（管理员） */
.war-rank-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;
}
.war-rank-sw {
  display: inline-flex; align-items: center; gap: 0; flex: none;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff;
}
.war-rank-sw .rs-btn {
  border: 0; background: none; padding: 3px 10px; font-size: 11.5px;
  color: #6b7280; cursor: pointer; white-space: nowrap; line-height: 1.4;
}
.war-rank-sw .rs-btn.on { background: #f0fdf4; color: #15803d; font-weight: 600; }
.war-rank-sw .rs-btn + .rs-btn { border-left: 1px solid var(--line); }
.war-head-r { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.war-date { font-size: 13px; color: #6b7280; white-space: nowrap; }

.war-meta { margin-top: 8px; display: flex; align-items: baseline; font-size: 13px; color: #8a9199; }
.war-meta b { color: #1f2937; font-weight: 700; margin: 0 2px; }
.war-left { margin-left: 28px; }

.war-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 16px; }
.war-kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.war-kpi { background: #f8f9f7; border: 1px solid #ecefe9; border-radius: 8px; padding: 10px 12px; min-width: 0; }
.war-kpi-label { font-size: 13px; color: #6b7280; }
.war-kpi-val { font-size: 29px; font-weight: 800; line-height: 1.18; letter-spacing: -.6px; margin: 3px 0 4px; }
.war-kpi-foot { font-size: 12px; color: #8a9199; line-height: 1.55; }
.war-kpi-foot i { font-style: normal; font-weight: 600; }
.war-kpi-foot i.up { color: #c0392b; }
.war-kpi-foot i.down { color: #1d7a4f; }
.war-kpi-foot .mb { display: none; }
.war-kpi.red .war-kpi-val { color: #c0392b; }
.war-kpi.green .war-kpi-val { color: #1d7a4f; }
.war-kpi.dark .war-kpi-val { color: #1f2937; }

.war-block + .war-block { margin-top: 18px; }
.war-block-head { font-size: 13px; font-weight: 700; color: #14532d; margin-bottom: 6px; }
.war-block-head span { font-weight: 400; color: #8a9199; font-size: 12px; margin-left: 6px; }

.war-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.war-table th {
  background: #14532d; color: #fff; font-size: 12px; font-weight: 600;
  text-align: left; padding: 9px 12px; white-space: nowrap;
}
.war-table th:first-child { border-radius: 6px 0 0 0; }
.war-table th:last-child { border-radius: 0 6px 0 0; }
.war-table th.h-mp { width: 25%; }
.war-table th.h-act { width: 22%; }
.war-table th.h-rate { width: 13%; }
.war-table th.h-tmr { width: 15%; }
.war-table th.h-rk { width: 25%; }
.war-table td { padding: 9px 12px; font-size: 13.5px; color: #1f2937; border: 0; vertical-align: middle; }
.war-table tbody tr:nth-child(even) td { background: #f4f7f2; }
.war-table .w-mp { font-weight: 700; color: #1b2a22; }
/* 半个月档期品：橙色小标 + 整行浅橙底，和整月考核的品一眼分开 */
.mp-half {
  display: inline-block; margin-left: 5px; padding: 0 4px;
  border: 1px solid #efc39a; border-radius: 4px; background: #fff6ec;
  color: #b35c00; font-size: 10px; font-weight: 600; line-height: 15px;
  vertical-align: 1px; white-space: nowrap;
}
.war-table tbody tr.is-half td { background: #fffaf3; }
.war-table tbody tr.is-half:nth-child(even) td { background: #fdf4e9; }
.war-table .w-act b { font-weight: 700; }
.war-goal { color: #8a9199; font-size: 12.5px; }
.war-goal::before { content: ' / '; }
.war-table .w-rate { font-weight: 700; }
.war-table .w-tmr { color: #374151; }
.war-table .w-rk { font-size: 12px; }
.war-rk1 { font-size: 12.5px; font-weight: 600; color: #1f2937; }
.war-rk1 .rk-hot { color: #c0392b; }
.war-rk2 { font-size: 11.5px; color: #8a9199; margin-top: 2px; }
.war-rk2.ok { color: #1d7a4f; }
.c-bad { color: #c0392b; }
.c-warn { color: #c77700; }
.c-ok { color: #1d7a4f; }
.c-top { color: #15803d; }

/* 缺口前三 */
.war-gap {
  margin-top: 16px; padding: 12px 14px 14px;
  border: 1.5px solid #e9b8a8; background: #fff8f5; border-radius: 12px;
}
.war-gap-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.war-gap-tag {
  display: inline-block; padding: 3px 10px; border-radius: 7px;
  border: 1px solid #e6a493; background: #fff;
  color: #b42318; font-size: 12px; font-weight: 700;
}
.war-gap-sum { font-size: 13px; color: #8a4a3a; font-weight: 600; white-space: nowrap; }
.war-gap-sum b { font-size: 19px; color: #c0392b; font-weight: 800; margin: 0 3px; }
.war-gap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.war-gap-item { background: #fff; border-radius: 9px; padding: 9px 12px; min-width: 0; }
.war-gap-item span { display: block; font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-gap-num { display: flex; align-items: baseline; margin-top: 2px; }
.war-gap-num b { font-size: 22px; font-weight: 800; color: #c0392b; letter-spacing: -.5px; }
.war-gap-num i { font-style: normal; font-size: 12px; color: #c0392b; margin-left: 3px; }

/* 明天要卖多少 */
.war-tmr {
  margin-top: 16px; padding: 13px 16px 14px;
  border: 1.5px solid #bfdcc8; background: #f3faf4; border-radius: 12px;
}
.war-tmr-title { font-size: 13px; color: #2f5a43; font-weight: 700; margin-bottom: 5px; }
.war-tmr-body { display: flex; align-items: center; gap: 24px; }
.war-tmr-nums { display: flex; gap: 44px; flex: 1 1 auto; min-width: 0; }
.war-tmr-nums b {
  display: block; font-size: 30px; color: #17553d; font-weight: 800;
  line-height: 1.1; letter-spacing: -1px;
}
.war-tmr-nums span { font-size: 12px; color: #6b7280; }
.war-tmr-r { flex: none; display: grid; gap: 4px; text-align: right; font-size: 12.5px; color: #3f5449; }
.war-tmr-r b { color: #17553d; font-weight: 700; }

.war-foot {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid #eef0ea;
  display: flex; gap: 10px; font-size: 11.5px; color: #9aa2aa;
}
.war-foot span:last-child { margin-left: auto; white-space: nowrap; }

@media (max-width: 1023px) {
  .war { padding: 12px 10px 10px; border-radius: 12px; }
  .war-head { gap: 6px; }
  .war-title { gap: 6px; }
  .war-title b { font-size: 18px; letter-spacing: .3px; }
  .war-owner { font-size: 10px; }
  .war-rank-tag { font-size: 9.5px; padding: 1px 6px; }
  .war-rank-sw .rs-btn { font-size: 10px; padding: 2px 8px; }
  .war-head { flex-wrap: wrap; }
  .war-head-r { gap: 6px; }
  .war-date { font-size: 10px; }
  .war-meta { font-size: 10.5px; margin-top: 6px; }
  .war-left { margin-left: 14px; }

  .war-kpis { gap: 6px; margin: 10px 0 12px; }
  .war-kpi { padding: 7px 8px; border-radius: 7px; }
  .war-kpi-label { font-size: 9.5px; white-space: nowrap; letter-spacing: -.2px; }
  .war-kpi-val { font-size: 16.5px; letter-spacing: -.2px; margin: 2px 0 3px; }
  .war-kpi-foot { font-size: 8.4px; line-height: 1.45; }
  .war-kpi-foot .dw { display: none; }
  .war-kpi-foot .mb { display: inline; }

  .war-table th { font-size: 9px; padding: 6px 5px; white-space: normal; line-height: 1.25; }
  .war-table th.h-mp { width: 22%; }
  .war-table th.h-act { width: 20%; }
  .war-table th.h-rate { width: 15%; }
  .war-table th.h-tmr { width: 13%; }
  .war-table th.h-rk { width: 30%; }
  .war-table td { padding: 7px 4px; font-size: 9.5px; word-break: break-word; }
  .war-table .w-mp { font-size: 10px; font-weight: 700; }
  .mp-half { margin-left: 0; margin-top: 2px; padding: 0 3px; font-size: 8px; line-height: 13px; }
  .war-table .w-act b { display: block; font-size: 10.5px; line-height: 1.3; }
  .war-goal { display: block; font-size: 9px; line-height: 1.3; }
  .war-goal::before { content: none; }
  .war-table .w-rate { font-size: 10px; white-space: nowrap; }
  .war-table .w-tmr { font-size: 9.5px; white-space: nowrap; }
  .war-rk1 { font-size: 8.5px; line-height: 1.3; }
  .war-rk2 { font-size: 8px; line-height: 1.3; margin-top: 1px; }

  .war-gap { margin-top: 12px; padding: 9px 10px 10px; border-radius: 10px; }
  .war-gap-tag { font-size: 10px; padding: 2px 8px; }
  .war-gap-sum { font-size: 10.5px; }
  .war-gap-sum b { font-size: 15px; }
  .war-gap-grid { gap: 6px; margin-top: 8px; }
  .war-gap-item { padding: 7px 8px; border-radius: 7px; }
  .war-gap-item span { font-size: 9.5px; }
  .war-gap-num b { font-size: 16px; }
  .war-gap-num i { font-size: 9.5px; }

  .war-tmr { margin-top: 12px; padding: 10px 12px 11px; border-radius: 10px; }
  .war-tmr-title { font-size: 10.5px; margin-bottom: 4px; }
  .war-tmr-body { gap: 10px; align-items: flex-end; }
  .war-tmr-nums { gap: 18px; }
  .war-tmr-nums b { font-size: 19px; letter-spacing: -.4px; }
  .war-tmr-nums span { font-size: 9.5px; }
  .war-tmr-r { font-size: 9.5px; gap: 2px; }

  .war-foot { margin-top: 10px; padding-top: 8px; font-size: 9px; }
}

/* 主推品分派负责人 */
.stf-list { display: grid; gap: 6px; margin: 6px 0 10px; max-height: 46vh; overflow: auto; }
.stf-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px solid var(--line);
  border-radius: 9px; cursor: pointer; background: #fff;
}
.stf-item input { margin: 0; }
.stf-item .stf-name { font-size: 13.5px; font-weight: 600; }
.stf-item i { margin-left: auto; font-style: normal; font-size: 12px; }
.stf-item:has(input:checked) { border-color: #9ec5a8; background: #f3faf4; }

/* =====================================================================
   主推品目录：行内「修改 / 删除」+ 当日生效说明
   ===================================================================== */
.dt th.dt-ops-th { width: 108px; }
.dt td.dt-ops { white-space: nowrap; }
.dt td.dt-ops .dt-row-act { justify-content: flex-end; gap: 6px; }
.btn.btn-del { color: #b42318; border-color: #f0c7c2; background: #fff; }
.btn.btn-del:hover { background: #fdf3f2; border-color: #e3a69e; }
.mp-eff {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f3faf4;
  border: 1px solid #cfe6d5;
  color: #265c3c;
  line-height: 1.55;
}
.mp-eff b { color: #14532d; }
.mp-dtl-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 2px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
@media (max-width: 1023px) {
  .dt td.dt-ops { margin-top: 10px; }
  .dt td.dt-ops .dt-row-act { justify-content: flex-start; }
  .mp-dtl-acts .mp-muted { flex: 1 0 100%; }
}

/* =====================================================================
   手机端框架：底部四格 + 应用中心 + 数据 + 设置
   ===================================================================== */
.tabnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; }
.tabnav a .tn-ico { width: 22px; height: 22px; display: block; }
.tabnav a .tn-t { font-size: 10.5px; letter-spacing: .2px; }
.tabnav a.active .tn-ico { stroke: var(--brand-dark); }

/* 页头（应用 / 数据 / 设置共用） */
.m-head { padding: 2px 2px 10px; }
.m-head-t { margin: 0; font-size: 19px; font-weight: 700; color: #14532d; letter-spacing: -.2px; }
.m-head-s { margin: 3px 0 0; font-size: 12px; color: var(--muted); }

/* 应用中心 */
.apps-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 14px; height: 38px;
  color: #9aa2aa; margin-bottom: 14px;
}
.apps-search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 13.5px; color: var(--text); font-family: inherit;
}
.apps-empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 13px; }

.apps-group { margin-bottom: 16px; background: #fff; border-radius: 14px; padding: 12px 10px 6px; }
.apps-gt { margin: 0 0 10px 4px; font-size: 14px; font-weight: 700; color: #1f2937; }
.apps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
.apps-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 2px 8px; text-decoration: none; color: #374151;
  position: relative;
}
.apps-item:active { opacity: .6; }
.apps-ico {
  width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, .12);
}
.apps-ico svg { width: 22px; height: 22px; }
.apps-ico.g-home   { background: linear-gradient(140deg, #2ec27e, #14934f); }
.apps-ico.g-hr     { background: linear-gradient(140deg, #5a9cf8, #2f6fe0); }
.apps-ico.g-ops    { background: linear-gradient(140deg, #f7a34b, #ec7a1c); }
.apps-ico.g-data   { background: linear-gradient(140deg, #a78bfa, #7c5cf0); }
.apps-ico.g-base   { background: linear-gradient(140deg, #38c6c0, #14a3a0); }
.apps-ico.g-system { background: linear-gradient(140deg, #9aa6b2, #6b7783); }
.apps-n { font-size: 11.5px; line-height: 1.25; text-align: center; color: #374151; }
/* 外链（培训学习等独立站点）：右上角挂个小标，点开是新窗口，用户不会以为卡在本页 */
.apps-ext {
  position: absolute; top: 2px; right: 4px;
  font-size: 9px; font-style: normal; line-height: 1.5;
  padding: 0 3px; border-radius: 4px;
  color: #6b7280; background: #eef1f4;
}
.apps-item.is-off { opacity: .5; }
.apps-item.is-off .apps-n::after {
  content: '待建'; margin-left: 3px;
  font-size: 9.5px; color: #9aa2aa;
  border: 1px solid #e2e6ea; border-radius: 5px; padding: 0 3px;
}

/* 数据页 */
.data-list { display: grid; gap: 8px; }
.data-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--text);
}
.data-row:active { background: #f6f8f6; }
.data-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #eef7f1; color: #15803d;
}
.data-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.data-main b { font-size: 14px; font-weight: 600; }
.data-main i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.data-go { flex: none; color: #c3cad1; font-size: 18px; }

/* 设置页 */
.set-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, #1f7a4d, #2f9c63);
  color: #fff;
}
.set-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.set-user-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-user-main b { font-size: 16px; }
.set-user-main i { font-style: normal; font-size: 12px; opacity: .88; }
.set-group { background: #fff; border-radius: 14px; padding: 12px 12px 4px; margin-bottom: 12px; }
.set-gl { font-size: 12px; color: var(--muted); margin: 0 2px 8px; }
.set-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; background: transparent; border: 0; border-top: 1px solid #f1f3f4;
  font-family: inherit; text-align: left; cursor: pointer; color: var(--text);
}
.set-group .set-row:first-of-type { border-top: 0; }
.set-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: #f2f7f3; color: #15803d;
  display: flex; align-items: center; justify-content: center;
}
.set-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-main b { font-size: 13.5px; font-weight: 600; }
.set-main i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.set-go { flex: none; color: #c3cad1; font-size: 17px; }
.set-row.is-static { cursor: default; }
.set-val {
  flex: none; font-size: 13px; font-weight: 600; color: #15803d;
  background: #f1f9f3; border: 1px solid #d7e8dc; border-radius: 999px; padding: 3px 10px;
}
.set-about { display: grid; gap: 8px; padding: 2px 2px 10px; }

/* 移动端门店范围弹层（全部 / 区域 / 单店） */
.msc-mask {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(12, 18, 15, .45);
  display: flex; align-items: flex-end;
}
.msc-mask[hidden] { display: none; }
.msc-sheet {
  width: 100%; max-height: 78vh; background: #fff;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
  animation: mscUp .18s ease-out;
}
@keyframes mscUp { from { transform: translateY(18px); opacity: .5; } to { transform: none; opacity: 1; } }
.msc-head { display: flex; align-items: center; padding: 14px 16px 6px; font-size: 15px; color: #1f2937; }
.msc-x {
  margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: #f2f4f2; color: #6b7280; font-size: 17px; line-height: 1; font-family: inherit; cursor: pointer;
}
.msc-body { overflow-y: auto; padding: 0 12px 20px; -webkit-overflow-scrolling: touch; }
.msc-gl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; margin: 10px 4px 6px; }
.msc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.msc-chip {
  padding: 7px 14px; border: 1px solid #e2e8e4; border-radius: 999px;
  background: #f7f9f7; color: #374151; font-size: 13px; font-family: inherit; cursor: pointer;
}
.msc-chip.is-on { background: #15803d; border-color: #15803d; color: #fff; font-weight: 600; }
.msc-item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; padding: 11px 12px;
  border: 1px solid #eef1ee; border-radius: 10px;
  background: #fff; color: #1f2937; font-size: 14px; font-family: inherit;
  text-align: left; cursor: pointer;
}
.msc-item span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msc-item i { flex: none; font-style: normal; font-size: 11.5px; color: #9aa2aa; }
.msc-item.is-on { border-color: #15803d; background: #f1f9f3; color: #14532d; font-weight: 600; }
.msc-item.is-on i { color: #15803d; }
.msc-search {
  flex: 1 1 auto; height: 28px; padding: 0 10px;
  border: 1px solid #e2e8e4; border-radius: 999px;
  background: #f7f9f7; font-size: 12px; font-family: inherit; outline: none;
}
html.msc-lock, html.msc-lock body { overflow: hidden; }
.set-about div { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); }
.set-about span { color: var(--muted); }
.set-logout {
  width: 100%; margin: 4px 0 8px; padding: 13px;
  border-radius: 14px; border: 1px solid #f0c7c2; background: #fff;
  color: #b42318; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.set-logout:active { background: #fdf3f2; }

/* 手机端门店范围选择 */
.msc-list { display: grid; gap: 6px; max-height: 58vh; overflow: auto; }
.msc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; font-size: 13.5px; font-family: inherit; color: var(--text);
  text-align: left; cursor: pointer;
}
.msc-item i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.msc-item.is-on { border-color: #9ec5a8; background: #f1f9f3; color: #14532d; font-weight: 600; }

@media (min-width: 1024px) {
  .apps-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =====================================================================
   首页手机端汇总头（对齐乐檬首页：深绿头图 + 两个大数 + 环比）
   ===================================================================== */
.m-hero { display: none; }

/* 战报卡片右上角的「生成图片」 */
.war-head-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.war-img {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px;
  border: 1px solid #d7e3d8; border-radius: 7px;
  background: #fff; color: #2f6b4b; font-size: 12px;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.war-img:hover { background: #f3faf4; border-color: #b7d6bf; }
.war-img:active { background: #e9f5ec; }

/* 图片结果弹层 */
.img-mask {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(12, 18, 15, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 14px;
}
.img-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; }
.img-box img {
  max-width: 92vw; max-height: 72vh; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); background: #fff;
  /* v2-049b：封装 APP 的 WebView 长按保存要弹系统菜单，显式放开 */
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}
.img-box p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 12.5px; }
.img-box .btn { min-width: 120px; }
.img-acts { display: flex; gap: 10px; align-items: center; }
.img-acts a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 1023px) {
  .m-hero {
    display: block;
    margin: -12px -16px 10px;
    padding: 12px 16px 13px;
    background: linear-gradient(150deg, #17694a 0%, #2b8f5c 62%, #35a36a 100%);
    color: #fff;
    border-radius: 0 0 16px 16px;
  }
  .db-head { display: none; }

  .mh-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
  .mh-brand {
    display: inline-flex; align-items: baseline; gap: 6px;
    min-width: 0; max-width: 55%;
  }
  .mh-brand b {
    font-size: 17px; font-weight: 700; letter-spacing: .2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mh-brand i {
    font-style: normal; font-size: 11px; font-weight: 500;
    color: rgba(255, 255, 255, .72); white-space: nowrap; flex: none;
  }
  .mh-img-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 11.5px; font-family: inherit; cursor: pointer;
  }
  .mh-img-btn:active { background: rgba(255, 255, 255, .26); }

  .mh-row { display: flex; align-items: center; gap: 6px; }
  .mh-scope {
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 42%; padding: 5px 9px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .13); color: #fff;
    font-size: 12px; font-family: inherit; cursor: pointer;
  }
  .mh-scope:active { background: rgba(255, 255, 255, .26); }
  .mh-scope span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mh-caret {
    width: 0; height: 0; flex: none;
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
    border-top: 4.5px solid currentColor; opacity: .8;
  }

  /* 日期档位下拉 */
  .mh-period { position: relative; flex: none; }
  .mh-p-btn {
    display: inline-flex; align-items: center; gap: 4px;
    height: 27px; padding: 0 9px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .13); color: #fff;
    font-size: 12px; font-family: inherit; cursor: pointer; white-space: nowrap;
  }
  .mh-p-btn:active, .mh-p-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .28); }
  .mh-p-pop {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
    min-width: 92px; padding: 4px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(10, 30, 20, .28);
    display: flex; flex-direction: column; gap: 1px;
  }
  .mh-p-pop[hidden] { display: none; }
  .mh-p-pop button {
    height: 32px; padding: 0 10px; border: 0; border-radius: 7px;
    background: transparent; color: #1f2937; font-size: 13px;
    font-family: inherit; text-align: left; cursor: pointer;
  }
  .mh-p-pop button.is-on { background: #eaf4ec; color: #17694a; font-weight: 700; }
  .mh-p-pop button:active { background: #eef1ee; }

  /* 日期翻页：‹ 11-05 › */
  .mh-date {
    margin-left: auto; display: inline-flex; align-items: center;
    background: rgba(255, 255, 255, .95); border-radius: 999px; padding: 1px;
    color: #1f2937;
  }
  .mh-date span {
    font-size: 11.5px; font-weight: 600; min-width: 62px;
    text-align: center; white-space: nowrap; letter-spacing: -.2px;
  }
  .mh-date button {
    width: 22px; height: 24px; border: 0; border-radius: 999px;
    background: transparent; color: #4b5563; font-size: 15px; line-height: 1;
    font-family: inherit; cursor: pointer;
  }
  .mh-date button:active { background: #eef1ee; }
  .mh-date button:disabled { color: #c8cfcb; }

  /* 数字都在下面的战报卡片里，这里只留一条顶栏，避免同屏两套大数 */
  .war-img { display: none; }
}

/* 区域主推品标准：弹层顶部的「这是干什么用的」说明块。
   用户反馈看不懂这个功能，光一句 tip 不够，改成 4 条短句。 */
.rg-help {
  display: grid; gap: 6px; margin: 0 0 12px; padding: 10px 12px;
  background: var(--brand-light); border-radius: 10px;
  font-size: 12.5px; line-height: 1.7; color: var(--text);
}
.rg-help b { color: var(--brand-dark); }

/* 主推品选商品：把「近 30 天卖了多少」摊在列表上。
   同名商品（手工补建 vs 乐檬同步）光看名字分不出来，选错主推品金额就是 0。 */
.mp-pick-main .mp-sold,
.mp-pick-main .mp-nosold,
.mp-pick-main .mp-dup-warn {
  display: inline-block; margin-top: 3px; margin-right: 6px;
  font-size: 11.5px; font-style: normal; line-height: 1.6;
  padding: 0 6px; border-radius: 5px;
}
.mp-pick-main .mp-sold   { color: #15803d; background: #ecfdf5; }
.mp-pick-main .mp-nosold { color: #b45309; background: #fffbeb; }
.mp-pick-main .mp-dup-warn { color: #b91c1c; background: #fef2f2; }
.mp-pick-row.mp-pick-dup { background: #fffbeb; }
.mp-dup-tip {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
  background: #fef2f2; color: #991b1b; font-size: 12.5px; line-height: 1.7;
}

/* 主推品默认商品 → 漏算体检（名字像、本月在卖、但没进池） */
.mp-check {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a;
}
.mp-check-head { font-size: 12.5px; line-height: 1.7; color: #92400e; }
.mp-check-head b { color: #b45309; margin-right: 6px; }
.mp-check-head span { display: block; color: #a16207; font-size: 12px; }
.mp-check-list { margin: 8px 0 6px; display: grid; gap: 4px; }
.mp-check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 7px; background: #fff;
}
.mp-check-name { flex: 1; min-width: 0; font-size: 12.5px; }
.mp-check-name b { font-weight: 600; }
.mp-check-name i { font-style: normal; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.mp-check-amt { font-variant-numeric: tabular-nums; font-size: 12.5px; color: #b45309; }
.mp-check-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 团购口径说明：团购品只进门店营业额，不计入主推品。
   体检里要明确写出来，否则用户会以为「大闸蟹漏了 7.9 万」是 bug。 */
.mp-check-tg {
  margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed #fde68a;
  font-size: 12px; line-height: 1.7; color: #92400e;
}
.mp-check-tg b { color: #b45309; }
.mp-pick-main .mp-group-tag {
  display: inline-block; margin-top: 3px; margin-right: 6px;
  font-size: 11.5px; font-style: normal; line-height: 1.6;
  padding: 0 6px; border-radius: 5px;
  color: #6b7280; background: #f3f4f6;
}

/* =====================================================================
   待办事项（/todo，v2-032）
   首页「常用功能」下方复用 .td-home / .sd-badge
   ===================================================================== */

.td-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 2px 0 12px;
}
.td-title { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.2px; }
.td-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.td-head-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.td-nums { display: flex; gap: 14px; }
.td-num {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.td-num b {
  font-size: 17px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.td-num.is-hot b { color: var(--brand-dark); }
.td-num.is-bad b { color: var(--danger); }

/* ---- 公告 ---- */
.td-announce {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: 12px 14px 6px; margin-bottom: 14px;
}
.td-an-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #92400e; font-weight: 600; margin-bottom: 6px;
}
.td-an-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px dashed #fde68a; font-size: 13px;
}
.td-an-t { font-weight: 600; color: #78350f; }
.td-an-b { color: #92400e; font-size: 12.5px; flex: 1; min-width: 0; }
.td-an-d { color: #b45309; font-size: 11.5px; }

/* ---- 工具条 ---- */
.td-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.td-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.td-tabs::-webkit-scrollbar { display: none; }
.td-tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-family: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: all .14s ease;
}
.td-tab.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(22, 163, 74, .8);
}
.td-filters { display: flex; gap: 8px; }
.td-sel {
  font-family: inherit; font-size: 13px; color: var(--text);
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 7px 10px; cursor: pointer;
}

/* ---- 列表 ---- */
.td-list { display: flex; flex-direction: column; gap: 10px; }
.td-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; font-family: inherit; color: var(--text);
  box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease;
}
.td-item:active { transform: scale(.988); }
.td-item.is-pinned { border-left: 3px solid var(--brand); }
.td-item.is-overdue { border-color: #fecdca; background: #fffbfa; }
.td-item.is-closed { opacity: .62; }

.td-it-top {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: 11.5px;
}
.td-kind {
  padding: 1px 7px; border-radius: 5px; font-weight: 600;
  background: #f1f5f9; color: #475569;
}
.td-kind.k-mp_target { background: #ecfdf5; color: #047857; }
.td-kind.k-loss { background: #fef2f2; color: #b91c1c; }
.td-kind.k-bind { background: #eff6ff; color: #1d4ed8; }
.td-kind.k-train { background: #f5f3ff; color: #6d28d9; }
.td-kind.k-announce { background: #fffbeb; color: #b45309; }
.td-kind.k-notice { background: #f1f5f9; color: #475569; }
.td-kind.k-hr { background: #fdf2f8; color: #be185d; }

.td-st { padding: 1px 7px; border-radius: 5px; background: #f1f5f9; color: #475569; }
.td-st.st-pending { background: #fef3c7; color: #92400e; }
.td-st.st-issued { background: #dbeafe; color: #1e40af; }
.td-st.st-doing { background: #e0f2fe; color: #0369a1; }
.td-st.st-submitted { background: #f3e8ff; color: #6b21a8; }
.td-st.st-done { background: #dcfce7; color: #15803d; }
.td-st.st-rejected { background: #fee2e2; color: #b91c1c; }
.td-st.st-closed { background: #f1f5f9; color: #94a3b8; }

.td-pin { padding: 1px 6px; border-radius: 5px; background: var(--brand-light); color: var(--brand-dark); }
.td-urg { padding: 1px 6px; border-radius: 5px; background: #fee2e2; color: #b91c1c; font-weight: 600; }
.td-time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

.td-it-title { font-size: 14.5px; font-weight: 600; line-height: 1.45; word-break: break-all; }
.td-it-meta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.td-rate { font-weight: 700; color: var(--brand-dark); }
.td-rate.is-low { color: var(--danger); }
.td-round { color: #b45309; }
.td-od { color: var(--danger); font-weight: 600; }

.td-empty {
  text-align: center; padding: 44px 12px; color: var(--muted); font-size: 13.5px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.td-empty span { font-size: 12px; color: #94a3b8; }
.td-empty.td-bad { color: var(--danger); }
.td-empty-s { font-size: 12.5px; color: var(--muted); padding: 8px 0; }

.td-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px; font-size: 13px; color: var(--muted);
}
.td-pager button {
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 7px 14px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.td-pager button:disabled { opacity: .45; cursor: default; }

/* ---- 抽屉 ---- */
.td-mask {
  position: fixed; inset: 0; z-index: 1300; background: rgba(15, 23, 42, .42);
  display: flex; align-items: flex-end; justify-content: center;
}
.td-drawer, .td-modal {
  background: var(--card); width: 100%; max-width: 640px;
  max-height: 88vh; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: tdUp .22s ease;
}
@keyframes tdUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.td-dw-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.td-dw-head b { font-size: 15px; }
.td-x {
  border: none; background: transparent; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px; font-family: inherit;
}
.td-dw-body, .td-form { padding: 14px 16px calc(20px + var(--safe-bottom)); overflow-y: auto; }

/* ---- 规则设定（v2-045） ---- */
.td-modal-wide { max-width: 860px; }
.td-rules-tip {
  padding: 10px 16px; font-size: 12px; color: var(--muted); line-height: 1.7;
  border-bottom: 1px solid var(--line); background: #fafbfc;
}
.td-rules-list { padding: 8px 16px calc(16px + var(--safe-bottom)); overflow-y: auto; }
.td-rules-group {
  font-size: 12px; font-weight: 650; color: var(--muted);
  margin: 12px 0 6px; display: flex; align-items: center; gap: 8px;
}
.td-rules-group::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.td-rule-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px dashed var(--line);
}
.td-rule-row:last-child { border-bottom: 0; }
.td-rule-row.is-off .td-rule-main b,
.td-rule-row.is-off .td-rule-val { opacity: .45; }
.td-rule-sw { position: relative; flex: 0 0 auto; cursor: pointer; }
.td-rule-sw input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.td-rule-sw span {
  display: block; width: 34px; height: 19px; border-radius: 999px;
  background: #cbd5e1; transition: background .18s; position: relative;
}
.td-rule-sw span::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: left .18s;
}
.td-rule-sw input:checked + span { background: var(--brand); }
.td-rule-sw input:checked + span::after { left: 17px; }
.td-rule-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-rule-main b { font-size: 13px; }
.td-rule-desc { font-size: 11px; color: var(--muted); }
.td-rule-val { flex: 0 0 84px; }
.td-rule-val .input { text-align: right; }
.td-rule-window { flex: 0 1 auto; display: flex; align-items: center; gap: 5px; }
.td-rule-window .input { width: 128px; padding: 4px 6px; font-size: 12px; }
.td-rule-sep { color: var(--muted); font-size: 12px; }
.td-rule-tag {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: #f1f3f5; color: #6b7280; white-space: nowrap;
}
.td-rule-tag.is-long { background: var(--brand-light); color: var(--brand-dark); }
.td-rule-upd { flex: 0 0 86px; font-size: 10.5px; color: #9aa2aa; text-align: right; }
.td-rule-kw { flex: 0 0 120px; }
.td-rule-kw .input { padding: 4px 8px; font-size: 12px; }
.td-rule-del {
  align-self: flex-start; border: 0; background: none; padding: 0;
  font-size: 11px; color: #dc2626; cursor: pointer; white-space: nowrap;
}
.td-rule-del:hover { text-decoration: underline; }
.td-rule-add {
  border: 1px dashed var(--brand); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0 4px; background: #fafbfc;
  display: flex; flex-direction: column; gap: 8px;
}
.td-rule-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-rule-add-row label { font-size: 12px; color: #475569; flex: 0 0 auto; }
.td-rule-add-row label.rl-lab2 { margin-left: 6px; }
.td-rule-add-row .input-sm { flex: 0 1 auto; }
.td-rule-add-row #raKw { flex: 1 1 160px; min-width: 120px; }
.td-rule-add-ops { justify-content: flex-start; }
.td-rule-hint { font-size: 11px; color: var(--muted); }
.td-rules-foot {
  padding: 10px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
}
.td-rules-foot #tdRulesAdd { margin-right: auto; }
@media (max-width: 820px) {
  .td-rule-row { flex-wrap: wrap; row-gap: 6px; }
  .td-rule-main { flex: 1 1 1px; min-width: 150px; }
  .td-rule-kw { flex: 1 1 100%; }
  .td-rule-kw .input { width: 100%; }
  .td-rule-window .input { width: 110px; }
  .td-rule-upd { flex: 1; text-align: left; }
}

.td-dw-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; }
.td-dw-t { margin: 8px 0 6px; font-size: 16px; font-weight: 650; line-height: 1.45; }
.td-dw-b { margin: 0 0 10px; font-size: 13.5px; color: #334155; line-height: 1.65; }

.td-kv {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin: 10px 0;
}
.td-kv > div { background: #fff; padding: 9px 11px; }
.td-kv span { display: block; font-size: 11.5px; color: var(--muted); }
.td-kv b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* 归并型待办：未达标商品清单 */
.td-mpi { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.td-mpi table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.td-mpi th {
  background: #f6f8fb; color: var(--muted); font-weight: 600;
  padding: 7px 9px; text-align: left; white-space: nowrap;
}
.td-mpi td { padding: 7px 9px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.td-mpi td:first-child { font-weight: 600; color: var(--text); }
.td-mpi .td-r-bad { color: #dc2626; font-weight: 700; }
.td-mpi-rule { color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .td-mpi { overflow-x: auto; }
  .td-mpi table { min-width: 420px; }
}

/* 分发弹窗：推荐接收人 */
.td-sg {
  border: 1px solid #dbe6f5; background: #f7faff;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.td-sg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.td-sg-h b { font-size: 13px; color: #1e3a8a; }
.td-sg-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 5px 0; border-top: 1px dashed #dbe6f5;
}
.td-sg-row:first-of-type { border-top: 0; }
.td-sg-t {
  min-width: 108px; font-size: 12px; font-weight: 600; color: #334155;
}
.td-sg-t em { font-style: normal; color: #dc2626; margin-left: 5px; font-variant-numeric: tabular-nums; }
.td-sg-p {
  font-style: normal; font-size: 12px; background: #fff; border: 1px solid #dbe6f5;
  color: #1e40af; border-radius: 999px; padding: 2px 9px;
}
.td-sg-warn { font-size: 11.5px; color: #b45309; margin-top: 6px; }

.td-sec { margin-top: 16px; }
.td-sec-t {
  font-size: 13px; font-weight: 600; color: var(--text);
  padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.td-tg {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; background: #fcfdfc;
}
.td-tg-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.td-tg-st { font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: #f1f5f9; color: #475569; }
.td-tg-st.s-submitted { background: #f3e8ff; color: #6b21a8; }
.td-tg-st.s-done { background: #dcfce7; color: #15803d; }
.td-tg-st.s-rejected { background: #fee2e2; color: #b91c1c; }
.td-tg-s { font-size: 11.5px; color: var(--muted); }
.td-tg-row { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #334155; }
.td-tg-row i { font-style: normal; color: var(--muted); font-size: 11.5px; margin-right: 6px; }
.td-tg-t { margin-top: 4px; font-size: 11.5px; color: #94a3b8; }
.td-tg-act { display: flex; gap: 8px; margin-top: 8px; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.btn-warn { border-color: #fecaca; color: #b91c1c; background: #fff5f5; }

.td-act-box { display: flex; flex-direction: column; gap: 10px; }
.td-act-row { display: flex; gap: 8px; flex-wrap: wrap; }
.td-fill { display: flex; flex-direction: column; gap: 10px; }
.td-fill label { display: block; font-size: 12.5px; color: var(--muted); }
.td-fill textarea {
  display: block; width: 100%; margin-top: 4px; font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; resize: vertical;
  color: var(--text);
}
.td-cmt { display: flex; gap: 8px; }
.td-cmt input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.td-msg { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.td-msg:last-child { border-bottom: none; }
.td-msg-h { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--muted); }
.td-msg-h b { color: var(--text); font-size: 12.5px; }
.td-msg-c { font-size: 13px; line-height: 1.65; color: #334155; margin-top: 2px; }

/* ---- 表单 ---- */
.td-fld { display: block; margin-bottom: 13px; }
.td-fld > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.td-fld input[type=text], .td-fld input[type=datetime-local], .td-fld select, .td-fld textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: #fff; resize: vertical;
}
.td-fld-inline { display: flex; align-items: center; gap: 10px; }
.td-fld-inline > span { margin: 0; }
.td-people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px; max-height: 210px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
}
.td-p {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  padding: 5px 7px; border-radius: 8px; cursor: pointer;
}
.td-p:active { background: #f6f8f7; }
.td-p i { font-style: normal; font-size: 11px; color: var(--muted); }
.td-form-act { margin-top: 6px; }

/* ---- 首页待办卡片（常用功能下方） ---- */
.td-home {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; margin: 12px 0 4px; box-shadow: var(--shadow);
}
.td-home-h { display: flex; align-items: center; gap: 8px; }
.td-home-t { font-size: 14.5px; font-weight: 650; }
.td-home-more { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.td-home-row { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.td-home-n {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12px; color: var(--muted);
}
.td-home-n b {
  font-size: 20px; font-weight: 750; line-height: 1;
  color: var(--brand-dark); font-variant-numeric: tabular-nums;
}
.td-home-n.is-bad b { color: var(--danger); }
.td-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; font-style: normal;
}
.sd-badge {
  margin-left: auto; margin-right: 6px;
  min-width: 17px; height: 17px; line-height: 17px; padding: 0 5px;
  border-radius: 9px; background: #ef4444; color: #fff;
  font-size: 10.5px; font-weight: 700; text-align: center; font-style: normal;
}

@media (min-width: 900px) {
  .td-mask { align-items: center; }
  .td-drawer, .td-modal { border-radius: 18px; max-height: 84vh; }
  .td-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .td-item.is-pinned { grid-column: 1 / -1; }
}

/* =====================================================================
   v2-034  主推品 ↔ 店员绑定（mp-staff.js）
   与「商品绑定」共用一套视觉语言：负责人 chip、来源标签、排人弹层。
   这些类名在 bind.php 里是内联的，主推品页用不到那段内联样式，
   所以这里补一份公共的，两边显示一致。
   ===================================================================== */
.subnav { display: flex; gap: 6px; margin: 10px 0 12px; flex-wrap: wrap; }
.subnav-i {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 13px; font-size: 12.5px; color: #4b5563; cursor: pointer;
}
.subnav-i.on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }

.stf-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; align-items: center; }
.stf-kpi {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: #f4f6f8; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: var(--muted);
}
.stf-kpi i { font-style: normal; }
.stf-kpi b { color: var(--text); font-weight: 600; font-size: 13px; }
.stf-kpi.is-bad { background: #fffbeb; border-color: #fde68a; }
.stf-kpi.is-bad b { color: #b45309; }
.stf-kpi-date { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.stf-kpi-date b { color: var(--text); }

/* 负责人 chip（与商品绑定同名同款） */
.mp-staff-chip, .own-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.own-chip + .own-chip { margin-left: 6px; }
.own-chip i { font-style: normal; color: #b45309; font-size: 11px; }

/* 排人弹层每一行：勾选 + 姓名 + 比例输入框 */
.stf-pick-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #f0f2f4;
}
.stf-pick-row:last-child { border-bottom: 0; }
.stf-pick-n { flex: 1; min-width: 0; }
.stf-ratio { width: 72px !important; text-align: right; }

/* 按店员挑品 */
.emp-split { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; }
.emp-side-t { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.emp-list { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.emp-item {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 11px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.emp-item:last-child { border-bottom: 0; }
.emp-item:hover { background: #fafafa; }
.emp-item.on { background: var(--brand-light); box-shadow: inset 3px 0 0 var(--brand); }
.emp-item b { flex: 1; font-weight: 600; }
.emp-n {
  font-style: normal; font-size: 11px; min-width: 18px; text-align: center;
  border-radius: 999px; padding: 0 5px; background: var(--brand-light); color: var(--brand-dark);
}
.emp-n.is-zero { background: #f1f3f5; color: #9aa2aa; }
.emp-main { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; }
.emp-main-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.emp-main-h b { font-size: 14px; }
.emp-main-f { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.emp-main-f .sp { flex: 1; }
.stf-pick { display: flex; flex-direction: column; gap: 4px; max-height: 430px; overflow: auto; }
.stf-pick2 {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.stf-pick2:hover { background: #fafbfc; }
.stf-pick2.on { background: var(--brand-light); border-color: var(--brand); }
.stf-pick2-n { flex: 1; }

@media (max-width: 720px) {
  .emp-split { grid-template-columns: 1fr; }
  .emp-list { max-height: 220px; }
  .stf-kpi-date { margin-left: 0; width: 100%; }
}

/* v2-034 商品绑定多人分摊弹层（hr-bind.js openMulti） */
.mstf-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #f0f2f4;
}
.mstf-row:last-child { border-bottom: 0; }
.mstf-n { flex: 1; min-width: 0; }
.mstf-ratio { width: 74px !important; text-align: right; }
.mf-btn { text-align: left; }
/* 「还有别人也负责」这类提示，独立成行不挤在名字后面 */
.badge-mute { background: #f1f3f5; color: #6b7280; border: 1px solid #e5e7eb; }

/* =====================================================================
   v2-041 战报改造
   1) 主推品负责人（品名下面一行小字，不新增列、不改列宽）
   2) 手机端 KPI 三张窄卡改成图标在上、文字居中（原来横排靠右被裁）
   3) 销售额卡右侧的今日毛利 / 毛利率
   4) 点主推品名弹出的「本月每日销售额」日历 + 曲线
   ===================================================================== */
.war-table .w-mp .mp-nm { font-weight: 700; }
.war-table .w-mp .mp-ow {
  display: block; margin-top: 1px;
  font-size: 11px; font-weight: 400; color: #8a9199;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 销售额卡右侧的毛利块：只给手机端，PC 四卡并排没位置 */
.kpi-gross { display: none; }

@media (max-width: 600px) {
  /* 三张窄卡：图标在上、数字与说明居中，避免右侧被裁 */
  .kpi-row .kpi:not(.kpi-main) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 9px 6px;
  }
  .kpi-row .kpi:not(.kpi-main) .kpi-ico { width: 26px; height: 26px; border-radius: 7px; }
  .kpi-row .kpi:not(.kpi-main) .kpi-body { flex: none; width: 100%; }
  .kpi-row .kpi:not(.kpi-main) .kpi-value { font-size: 16px; }
  .kpi-row .kpi:not(.kpi-main) .kpi-delta { font-size: 10.5px; line-height: 1.3; white-space: normal; }

  .kpi-main { gap: 8px; }
  .kpi-gross {
    display: flex; flex-direction: column; align-items: flex-end;
    flex: none; margin-left: auto; padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, .28); text-align: right;
  }
  .kpi-gross .kg-l { font-size: 10.5px; color: rgba(255, 255, 255, .82); white-space: nowrap; }
  .kpi-gross .kg-v { font-size: 15px; font-weight: 750; color: #fff; line-height: 1.22; white-space: nowrap; }
  .kpi-gross .kg-r { font-size: 10px; color: rgba(255, 255, 255, .86); white-space: nowrap; }
}

@media (max-width: 1023px) {
  .war-table .w-mp .mp-ow { font-size: 8.5px; margin-top: 0; }
}

/* 主推品每日销售额弹层（底部抽屉，桌面居中） */
.mpcal-mask {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1300;
  background: rgba(17, 24, 39, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.mpcal-box {
  width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 16px 16px 0 0; padding: 14px 14px 18px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}
.mpcal-h { display: flex; align-items: baseline; gap: 8px; }
.mpcal-h b { font-size: 16px; color: #14532d; }
.mpcal-h span { font-size: 11.5px; color: #8a9199; }
.mpcal-x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #9aa2aa; padding: 0 2px;
}
.mpcal-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.mpcal-kpi > div { background: #f7f9f6; border: 1px solid #ecefe9; border-radius: 9px; padding: 7px 9px; min-width: 0; }
.mpcal-kpi b { display: block; font-size: 15.5px; color: #1f2937; letter-spacing: -.3px; white-space: nowrap; }
.mpcal-kpi span { font-size: 10.5px; color: #8a9199; }
.mpcal-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mc-w { text-align: center; font-size: 10px; color: #9aa2aa; padding-bottom: 2px; }
.mc-d {
  min-height: 46px; border-radius: 7px; background: #fafbf9; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; overflow: hidden; padding: 3px 2px;
}
.mc-d.is-blank { background: none; }
.mc-d i { font-style: normal; font-size: 10px; color: #9aa2aa; }
.mc-d b { font-size: 9px; color: #1f2937; font-weight: 700; }
/* v2-050：金额下面一行——当天负责人（太长就省略，全部名字在 title 里） */
.mc-d u {
  font-style: normal; text-decoration: none;
  max-width: 100%; font-size: 8px; line-height: 1.1; color: #6b7280;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-d.has { background: #f2f9f3; }
.mc-d.is-best { border-color: #c77700; background: #fff8f0; }
.mc-d.is-today { border-color: var(--brand); }
.mpcal-chart { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.mpcal-lg { font-size: 10px; color: #c77700; margin-top: 2px; text-align: right; }
.mpcal-tip { margin-top: 10px; font-size: 10px; color: #b0b6bd; text-align: center; }

@media (min-width: 640px) {
  .mpcal-mask { align-items: center; }
  .mpcal-box { border-radius: 14px; }
}

/* 主推品名可点（看本月每天）：只加手型，不改布局 */
.war-table .w-mp.mp-click { cursor: pointer; }
.war-table .w-mp.mp-click:hover .mp-nm { color: #15803d; }
/* 未来日期在日历里淡出，别让人以为「今天之前都没卖」 */
.mc-d.is-future { background: #fcfcfb; }
.mc-d.is-future i { color: #d6dade; }

/* =====================================================================
   全局底部/居中弹层（原只在商品绑定页 bind.php 内联定义）
   v2-043：店员绑定的「按主推品排人」也用这套类，但 mp.php 没有那份样式，
   结果弹层内容直接铺在页面最底部、无遮罩——看起来像页面乱了。
   挪到全局，两处共用。
   ===================================================================== */
.bsheet-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .42); z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bsheet { background: #fff; border-radius: 14px; width: min(520px, 96vw); max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.bsheet-h, .bsheet-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bsheet-h .sp, .bsheet-head .sp { flex: 1; }
.bsheet-b, .bsheet-body { padding: 10px 14px; overflow: auto; }
.bsheet-f, .bsheet-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--line); }
.bsheet-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.bsheet-row .muted { margin-left: auto; }

@media (max-width: 640px) {
  .bsheet-mask { align-items: flex-end; padding: 0; }
  .bsheet { width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; }
  .bsheet-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   v2-052  PWA（添加到主屏幕）
   ===================================================================== */
/* 装进桌面后像 App：禁掉页面级下拉回弹（弹层内部滚动不受影响） */
body { overscroll-behavior-y: contain; }

.pwa-steps {
  margin: 4px 0 8px; padding: 0 0 0 20px;
  font-size: 14px; line-height: 1.9; color: var(--text);
}
.pwa-steps li { margin: 6px 0; }
.pwa-steps li::marker { color: var(--brand, #16a34a); font-weight: 700; }
.pwa-note {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted);
}
.pwa-ok {
  margin: 4px 0; padding: 12px 14px; border-radius: 10px;
  background: #ecfdf3; color: #15803d; font-weight: 600; font-size: 14px;
}
.pwa-ico {
  display: inline-block; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff;
  font-weight: 700; color: #1f2937;
}