:root {
  --primary: #2b6cb0;
  --primary-d: #234e7a;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1a202c;
  --muted: #718096;
  --border: #e2e8f0;
  --ok: #38a169;
  --warn: #dd6b20;
  --danger: #e53e3e;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
a { color: var(--primary); text-decoration: none; }

/* 顶部栏 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary); color: #fff; padding: 0 18px; height: 52px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.topbar .brand { font-weight: 700; font-size: 16px; }
.topbar .user { font-size: 13px; display: flex; gap: 12px; align-items: center; }
.topbar button {
  background: rgba(255,255,255,.15); color: #fff; border: 0; padding: 6px 12px;
  border-radius: 4px; cursor: pointer; font-size: 13px;
}
.topbar button:hover { background: rgba(255,255,255,.28); }

/* 布局 */
.wrap { margin: 18px auto; padding: 0 24px; }
@media (min-width: 1600px) { .wrap { max-width: 1600px; padding: 0 32px; } }
/* 页面主区域：内容超出视口时出现滚动条（非登录页） */
html, body { height: 100%; overflow-y: auto; }
body:not(.login-page) { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.login-page) .wrap { flex: 1; }

/* 会员列表不限制高度，滚动由body统一处理（滚动条在屏幕最右侧） */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 卡片 */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.card h3 { margin: 0 0 12px; font-size: 15px; }

/* 表单 */
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
.row { display: flex; gap: 12px; }
.row > div { flex: 1; }

/* 按钮 */
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 6px; border: 0;
  background: var(--primary); color: #fff; cursor: pointer; font-size: 14px;
}
.btn:hover { background: var(--primary-d); }
.btn.ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #c53030; }
.btn.warn { background: var(--warn); }
.btn.ok { background: var(--ok); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* 表格 */
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { background: #f7fafc; color: var(--muted); font-weight: 600; }
tr:hover td { background: #fbfcfe; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #ebf4ff; color: var(--primary); }
.tag.deduct { background: #fff5f5; color: var(--danger); }
.tag.retail { background: #ebf8ff; color: #2b6cb0; }
.tag.travel { background: #f0fff4; color: #2f855a; }
.tag.premium { background: #fffff0; color: #975a16; }

/* 登录 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1a365d 0%,#2b6cb0 50%,#3182ce 100%); }
.login-card { width: 420px; max-width: 94%; background: #fff; border-radius: 16px; padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card h2 { font-size: 22px; text-align:center; }
.login-sub { text-align:center; }
.login-card h2 { margin: 0 0 4px; font-size: 20px; }
.login-sub { color: var(--muted); margin: 0 0 18px; font-size: 13px; }
.hint { background: #fffaf0; color: #975a16; padding: 8px 10px; border-radius: 6px; font-size: 12px; margin-bottom: 14px; }

/* 会员树 — 子级组用色块框住，同级顶级会员平级展示 */
.tree-member { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.tree-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #f7fafc; cursor: pointer; }
.tree-head .nm { font-weight: 600; }
.tree-head .ph { color: var(--muted); font-size: 12px; margin-left: 6px; }
.tree-head .bal { color: var(--ok); font-weight: 700; }

/* 下级子容器 — 圆角色块框，一眼看出"这些人属于上面那个人的下级" */
.tree-body {
  display: none;
  margin: 6px 10px 8px 10px;
  padding: 8px 0;
  background: #f0f4ff;
  border: 1px solid #d0deff;
  border-left: 3px solid #90cdf4;
  border-radius: 8px;
}
.tree-member.open > .tree-body { display: block; }

/* 子级成员在色块内正常显示，不需要额外缩进 */
.tree-body > .tree-member { margin-left: 0; margin-bottom: 8px; }
.tree-body > .tree-member:last-child { margin-bottom: 0; }

/* 可滚动的记录区域（交易/公告等） */
.scroll-box { max-height: 380px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.scroll-box table { margin: 0; }
/* 弹窗内表格区更紧凑 */
.modal .scroll-box { max-height: 300px; }
.friend-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.friend-row:last-child { border-bottom: 0; }
.lnk { color: #3182ce; cursor: pointer; text-decoration: none; }
.lnk:hover { text-decoration: underline; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-mask.show { display: flex; }
.modal {
  background: #fff; border-radius: 10px; width: 460px; max-width: 100%;
  max-height: 90vh; overflow: auto; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.modal h3 { margin: 0 0 14px; }

/* KPI */
.kpis { display: flex; gap: 14px; flex-wrap: wrap; }
.kpi { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.kpi .n { font-size: 26px; font-weight: 800; color: var(--primary); }
.kpi .l { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* 版本标记 */
#version-tag {
  position: fixed; right: 10px; bottom: 10px; font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,.85); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; z-index: 60;
}
#version-tag.err { color: var(--danger); border-color: var(--danger); }

.empty { color: var(--muted); text-align: center; padding: 24px; }
.pill { display:inline-block; padding:2px 8px; border-radius:10px; background:#edf2f7; color:#4a5568; font-size:11px; margin-left:6px; }
 flash { }
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  background: #323232; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 100;
  font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: .95; }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--ok); }

/* 门店汇总卡片（会员页两级结构 · 仿 Ant Design 卡片风格） */
.store-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.store-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.store-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(43,108,176,.16); border-color: #bcd4ec; }
.store-card-head { border-bottom: 1px solid #f0f2f5; padding-bottom: 10px; margin-bottom: 10px; }
.store-name { font-size: 16px; font-weight: 700; color: #1a202c; }
.store-mgr { font-size: 12px; color: var(--muted); margin-top: 4px; }
.store-stats { display: flex; justify-content: space-around; text-align: center; }
.store-stats .stat { flex: 1; }
.store-stats .num { font-size: 22px; font-weight: 800; color: #1a202c; line-height: 1.2; }
.store-stats .num.bal { color: #3182ce; }
.store-stats .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.store-card-foot { margin-top: 12px; font-size: 12px; color: var(--primary); text-align: right; font-weight: 600; }

/* 会员列表 — 平级行样式（截图2/3风格） */
.m-toolbar {
  display:flex; align-items:center; gap:10px;
  background:#38a169; color:#fff; padding:10px 16px; border-radius:8px; flex-wrap:wrap;
}
.m-toolbar-title { font-size:15px; font-weight:700; }
.m-toolbar-sub { font-size:13px; opacity:.9; }
.m-toolbar-btns { display:flex; gap:8px; align-items:center; margin-left:auto; }
.m-toolbar .btn.ghost { background:rgba(255,255,255,.2); color:#fff; border-color:transparent; }
.m-toolbar .btn.ghost:hover { background:rgba(255,255,255,.35); }

/* 平级行 */
.m-list { }
.m-row { border-bottom:1px solid #edf2f7; background:#fff; transition:bg .15s; }
.m-row:hover { background:#fbfcfe; }
.m-row-head {
  display:flex; align-items:center; gap:6px; padding:10px 14px; cursor:pointer;
}
.m-row-open > .m-subs { display:block; }

.m-arr { color:#a0aec0; font-size:12px; width:16px; text-align:center; flex-shrink:0; font-family: monospace; user-select:none; }
.m-nm { font-weight:700; font-size:14px; white-space:nowrap; }
.m-ph { color:#718096; font-size:12px; margin-left:4px; }
.m-bal { font-size:16px; font-weight:800; min-width:56px; text-align:right; white-space:nowrap; margin-left:auto; }
.m-btns { display:flex; gap:5px; align-items:center; flex-shrink:0; margin-left:8px; }

/* 标签（员工/关系/门店） */
.m-tag { display:inline-flex; align-items:center; gap:2px; padding:2px 8px; border-radius:10px; font-size:11px; white-space:nowrap; }
.m-staff { background:#f0fff4; color:#276749; }
.m-ref { background:#faf5ff; color:#6b46c1; }
.m-store { background:#ebf8ff; color:#2b6cb0; }

/* 子级行（展开后显示，左缩进） */
.m-subs { display:none; background:#fafbfc; }
.m-row-sub { border-bottom:1px solid #f0f2f5; border-left:3px solid #90cdf4; }
.m-row-sub .m-row-head { padding-left:10px; }

/* 内联交易记录 */
.m-txn-block { padding:6px 14px 10px 36px; background:#faffff; }
.m-txn-row { display:flex; align-items:center; gap:8px; padding:2.5px 0; font-size:12px; }

/* ========== 录入积分弹窗（截图1风格） ========== */
.e-row { margin-bottom: 14px; }
.e-label { display: block; font-weight: 600; color: #2d3748; margin-bottom: 6px; font-size: 13px; }
.e-req { color: #e53e3e; margin-left: 2px; }
.e-select, .e-input {
  width: 100%; padding: 10px 12px; border: 1px solid #cbd5e0;
  border-radius: 8px; font-size: 14px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.e-mode-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.e-mode {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid #cbd5e0; border-radius: 8px; background: #f7fafc;
  font-size: 13px; font-weight: 600; color: #4a5568; cursor: pointer; flex: 1; min-width: 140px;
}
.e-mode input { accent-color: #48bb78; width: 16px; height: 16px; }
.e-mode:has(input:checked) { border-color: #48bb78; background: #f0fff4; color: #276749; }
.e-mode-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.e-mode {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid #cbd5e0; border-radius: 8px; background: #f7fafc;
  font-size: 13px; font-weight: 600; color: #4a5568; cursor: pointer; flex: 1; min-width: 140px;
}
.e-mode input { accent-color: #48bb78; width: 16px; height: 16px; }
.e-mode:has(input:checked) { border-color: #48bb78; background: #f0fff4; color: #276749; }
.e-mode-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.e-mode {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid #cbd5e0; border-radius: 8px; background: #f7fafc;
  font-size: 13px; font-weight: 600; color: #4a5568; cursor: pointer; flex: 1; min-width: 140px;
}
.e-mode input { accent-color: #48bb78; width: 16px; height: 16px; }
.e-mode:has(input:checked) { border-color: #48bb78; background: #f0fff4; color: #276749; }
.e-select:focus, .e-input:focus { border-color: #48bb78; box-shadow: 0 0 0 3px rgba(72,187,120,.15); outline: none; }
.e-preview {
  margin-top: 16px; padding: 18px 20px; background: linear-gradient(135deg,#f0fff4 0%,#c6f6d5 100%);
  border-radius: 10px; text-align: center; border: 1px solid #9ae6b4;
}
.e-preview-text { font-size: 13px; color: #4a5568; margin-bottom: 6px; }
.e-preview-pts { font-size: 36px; font-weight: 700; color: #276749; line-height: 1.1; }
.e-preview-formula { font-size: 12px; color: #718096; margin-top: 4px; }

/* ========== 门店信息栏（概览KPI下方） ========== */
.store-info-bar { margin: 16px 0; }
.store-info-bar-inner {
  display: flex; gap: 0; overflow-x: auto; border: 1px solid #e2e8f0;
  border-radius: 8px; background: #fff;
}
.sib-item {
  flex: 1; min-width: 140px; padding: 12px 14px; border-right: 1px solid #e2e8f0;
  text-align: center; cursor: default; transition: background .15s;
}
.sib-item:last-child { border-right: none; }
.sib-item:hover { background: #f7fafc; }
.sib-name { font-weight: 700; color: #2d3748; font-size: 14px; margin-bottom: 4px; }
.sib-stats { font-size: 12px; color: #718096; }
.sib-stats span { margin: 0 6px; }
.sib-stats span:first-child { margin-left: 0; }

/* ===== 防止按钮点击导臹页面宽窒抖动 ===== */
.wrap{box-sizing:border-box;min-width:0}
.card{box-sizing:border-box;min-width:0}
.modal .e-row{box-sizing:border-box}
html,body{overflow-x:hidden}

/* ===== 会员明细弹窗 3x3 积分卡片 ===== */
.detail-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dk-card{border-radius:10px;padding:14px;text-align:center;border:2px solid}
.dk-card .dk-val{font-size:24px;font-weight:800;line-height:1.2}
.dk-card .dk-lbl{font-size:12px;margin-top:4px}
.dk-earn-retail{background:#f0fff4;border-color:#9ae6b4}.dk-earn-retail .dk-val{color:#276749}
.dk-earn-travel{background:#ebf8ff;border-color:#90cdf4}.dk-earn-travel .dk-val{color:#2b6cb0}
.dk-earn-premium{background:#fffff0;border-color:#faf089}.dk-earn-premium .dk-val{color:#975a16}
.dk-used{background:#fff5f5;border-color:#feb2b2}.dk-used .dk-val{color:#c53030}
.dk-bal-retail{background:#ebf8ff;border-color:#90cdf4}.dk-bal-retail .dk-val{color:#2b6cb0}
.dk-bal-travel{background:#f0fff4;border-color:#9ae6b4}.dk-bal-travel .dk-val{color:#276749}
.dk-bal-premium{background:#fffff0;border-color:#faf089}.dk-bal-premium .dk-val{color:#975a16}

/* ========== 响应式适配（手机端 + 平板） ========== */
@media (max-width: 768px) {
  /* 顶部栏 */
  .topbar { padding: 0 12px; height: auto; min-height: 44px; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  .topbar .brand { font-size: 14px; order: -1; flex: 1; }
  .topbar .user { font-size: 11px; width: 100%; justify-content: flex-end; }

  /* 主容器 */
  .wrap { padding: 0 10px; margin: 8px auto; }

  /* 标签栏 */
  .tabs { gap: 4px; margin-bottom: 8px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs button { font-size: 13px; padding: 7px 10px; white-space: nowrap; border-radius: 6px; }

  /* 卡片 */
  .card { padding: 12px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  .card h3 { font-size: 14px; margin-bottom: 8px; }

  /* KPI */
  .kpis { gap: 8px; }
  .kpi { padding: 12px 10px; min-width: 120px; }
  .kpi .n { font-size: 20px; }
  .kpi .l { font-size: 11px; }

  /* 门店卡片网格 → 单列 */
  .store-cards { grid-template-columns: 1fr !important; gap: 10px; }
  .store-card { padding: 12px; border-radius: 8px; }
  .store-name { font-size: 15px; }
  .store-stats .num { font-size: 18px; }

  /* 工具栏（绿色标题栏）自适应换行 */
  .m-toolbar { padding: 8px 12px; border-radius: 8px; flex-wrap: wrap; gap: 6px; }
  .m-toolbar-title { font-size: 14px; }
  .m-toolbar-sub { font-size: 12px; display: none; }  /* 手机隐藏副标题节省空间 */
  .m-toolbar-btns { width: 100%; margin-left: 0 !important; justify-content: flex-end; gap: 4px; margin-top: 4px; }
  .m-toolbar .btn { padding: 5px 8px; font-size: 12px; }

  /* 搜索+筛选行 */
  .row { gap: 6px; flex-wrap: wrap; }
  .row > div { flex: 1 1 100% !important; min-width: unset; }

  /* 会员行（平级列表） */
  .m-row-head { padding: 9px 10px; flex-wrap: wrap; gap: 4px; }
  .m-nm { font-size: 13px; }
  .m-ph { font-size: 11px; }
  .m-bal { font-size: 14px; min-width: 48px; order: -1; }  /* 余额提前显示 */

  /* 按钮组自动换行 */
  .m-btns { gap: 3px; flex-wrap: wrap; width: 100%; margin-left: 0 !important; order: 10; }
  .m-btns .btn { padding: 4px 7px; font-size: 11px; }

  /* 标签缩小 */
  .m-tag { padding: 1px 6px; font-size: 10px; }

  /* 子级行交易记录 */
  .m-txn-block { padding: 4px 8px 8px 24px; }
  .m-txn-row { font-size: 11px; gap: 5px; overflow-x: auto; }

  /* 弹窗 */
  .modal { width: 94% !important; max-height: 85vh; padding: 16px; margin: 0 auto; }
  .modal h3 { font-size: 15px; }
  label { font-size: 12px; margin: 6px 0 2px; }
  input, select, textarea { padding: 8px; font-size: 14px; border-radius: 6px; }

  /* 表格横向滚动 */
  table { font-size: 11px; display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 6px 8px; }

  /* 公告/配置表等 */
  .btn-row { gap: 6px; }
  .btn { padding: 7px 12px; font-size: 13px; border-radius: 6px; }
  .btn.sm { padding: 4px 8px; font-size: 11px; }

  /* 滚动区域 */
  #memberList, #memberTree { max-height: none; }
  .scroll-box { max-height: 250px; }

  /* 录入弹窗手机适配 */
  .e-preview-pts { font-size: 28px; }
  .sib-item { min-width: 110px; padding: 10px 8px; }
  .sib-name { font-size: 13px; }

  /* 店长页两列→单列 */
  .store-main-layout { flex-direction:column; }
  .store-main-right { width:100%; order:-1; }
}

/* 超小屏（<400px）进一步优化 */
@media (max-width: 400px) {
  .wrap { padding: 0 6px; }
  .tabs button { font-size: 12px; padding: 6px 8px; }
  .kpi { padding: 10px 8px; min-width: 90px; }
  .kpi .n { font-size: 18px; }
  .modal { width: 98% !important; padding: 12px; }
  .store-stats { gap: 4px; }
  .store-stats .num { font-size: 16px; }
  .m-btns .btn.sm { padding: 3px 6px; font-size: 10px; }
}


/* ===== hotfix22: 手机端自适应修复 ===== */
/* ===== hotfix23: 店长会员平级行列表 + 明细按钮data-id修复 ===== */
/* 会员行：手机端按钮组可横向滚动 */
.m-row-head { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.m-row-head > div:last-child { min-width:max-content; flex-shrink:0; }
/* 按钮在手机端缩小 */
@media (max-width: 600px) {
  .btn.sm { padding:4px 8px; font-size:12px; }
  .m-row-head .btn.sm { padding:3px 6px; font-size:11px; }
  .tag { font-size:10px; padding:1px 5px; }
  .m-nm { font-size:13px; }
  .m-ph { font-size:11px; }
  .m-tag { font-size:10px; padding:1px 4px; }
}
/* 表格横向滚动 */
.scroll-box { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scroll-box table { min-width:500px; }
/* 明细弹窗3x3卡片手机端缩小 */
.detail-kpi-grid { gap:6px !important; }
.dk-card { padding:8px 6px !important; }
.dk-val { font-size:16px !important; }
.dk-label { font-size:11px !important; }
/* 店长两列布局手机端调整 */
.store-main-layout { flex-direction:column !important; }
.announce-panel { width:100% !important; margin-left:0 !important; margin-top:12px; }