/* ============================================================
   茶舍总后台 CSS —— 绿叶茶风，专业简洁
   ============================================================ */
:root {
  --green: #1a7a4f;
  --green-light: #2a9d6e;
  --green-bg: #e8f5ee;
  --orange: #e67e22;
  --red: #e74c3c;
  --blue: #2980b9;
  --gray: #7f8c8d;
  --bg: #f0f4f0;
  --card-bg: #fff;
  --border: #dde8de;
  --shadow: 0 2px 8px rgba(26,122,79,0.10);
  --radius: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; color: #333; background: var(--bg); }

/* ---- helpers ---- */
.hidden { display: none !important; }
.muted { color: var(--gray); font-size: 12px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-orange { background: #fef3e2; color: var(--orange); }
.plan-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.plan-header { font-size: 12px; color: var(--gray); font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.plan-header span { display: inline-block; }
.badge-red { background: #fdecea; color: var(--red); }
.badge-blue { background: #e8f3fc; color: var(--blue); }
.badge-gray { background: #f0f0f0; color: var(--gray); }
.badge-dark { background: #4b5563; color: #fff; }
.badge-tea { background: #e8f5e9; color: #2e7d32; }
.badge-default { background: #e3f2fd; color: #1565c0; }
.badge-spec { background: #f3e5f5; color: #7b1fa2; }
.dr-toggle {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  border: 1px solid var(--tea, #1a7a4f);
  border-radius: 4px;
  background: #f8fff8;
  color: var(--tea, #1a7a4f);
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  font-size: 14px;
}
.dr-toggle::before { content: '▸'; }
.dr-toggle.dr-open::before { content: '▾'; }
.dr-toggle.dr-open { background: var(--tea, #1a7a4f); color: #fff; }
.dr-sku-row.dr-collapsed { display: none; }

/* ---- 登录页 ---- */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #1a7a4f, #2a9d6e); }
.login-box { background: #fff; border-radius: var(--radius); padding: 40px 36px; width: 360px; box-shadow: var(--shadow); text-align: center; }
.login-box h2 { margin-bottom: 24px; color: var(--green); }
.login-box input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 15px; margin-bottom: 12px; outline: none; transition: border-color .2s; }
.login-box input:focus { border-color: var(--green); }
.btn-primary { display: block; width: 100%; padding: 12px; background: var(--green); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--green-light); }
/* 行内主按钮：覆盖 btn-primary 的 block/100% 宽（用于筛选标签、表格操作等场景） */
.btn.btn-sm.btn-inline { display: inline-block; width: auto; padding: 6px 16px; font-size: 13px; font-weight: 500; }
.err-msg { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---- 主框架 ---- */
#admin header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--green); color: #fff; position: sticky; top: 0; z-index: 100; }
#admin header span { font-size: 16px; font-weight: 600; }
.nav-user { font-size: 13px; opacity: .85; margin-right: 12px; }
.btn-ghost-sm { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.btn-ghost-sm:hover { background: rgba(255,255,255,.15); }

.layout { display: flex; min-height: calc(100vh - 52px); }

/* ---- 侧边导航 ---- */
#nav { width: 180px; background: #fff; border-right: 1px solid var(--border); padding: 12px 0; flex-shrink: 0; }
.nav-btn { display: block; width: 100%; text-align: left; padding: 11px 20px; background: none; border: none; border-left: 3px solid transparent; font-size: 14px; color: #555; cursor: pointer; transition: all .15s; }
.nav-btn:hover { background: var(--green-bg); color: var(--green); }
.nav-btn.active { background: var(--green-bg); color: var(--green); border-left-color: var(--green); font-weight: 600; }
.nav-btn .badge-count { float: right; background: var(--red); color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 11px; }

/* ---- 菜单分组（分销 / 套餐管理） ---- */
.nav-group { margin: 6px 0; }
.nav-group-title { padding: 8px 20px 6px; font-size: 12px; font-weight: 700; color: var(--gray); cursor: pointer; letter-spacing: .5px; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.nav-group-title:hover { color: var(--green); }
.nav-group-arrow { font-size: 10px; transition: transform .15s; }
.nav-group.collapsed .nav-group-arrow { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-body { display: none; }
.nav-group-body { padding: 2px 0 4px; }
.nav-sub { padding-left: 36px; font-size: 13px; color: #666; }
.nav-sub.active { color: var(--green); border-left-color: var(--green); font-weight: 600; }

/* ---- 主内容 ---- */
#content { flex: 1; padding: 20px 24px; overflow-x: auto; }
.page-title { font-size: 18px; font-weight: 600; color: var(--green); margin-bottom: 16px; }

/* ---- KPI 卡片 ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { cursor: default; transition: transform .15s, box-shadow .15s; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,122,79,.18); border-color: var(--green); }
.kpi.clickable .kpi-label::after { content: " ▾"; color: var(--green); font-size: 10px; opacity: .7; }
.kpi.clickable.open .kpi-label::after { content: " ▴"; }
.kpi { background: var(--card-bg); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.kpi-label { font-size: 12px; color: var(--gray); margin-bottom: 6px; }
.kpi-val { font-size: 22px; font-weight: 700; color: var(--green); }
.kpi-val.orange { color: var(--orange); }
.kpi-val.red { color: var(--red); }
.kpi-val.blue { color: var(--blue); }
.kpi-sub { font-size: 11px; color: var(--gray); margin-top: 2px; }

/* ---- 卡片 ---- */
.card { background: var(--card-bg); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 14px; }
.card-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ---- 表格 ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px 12px; background: var(--green-bg); color: var(--green); font-weight: 600; font-size: 13px; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafcfa; }
.td-img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #f5f5f5; display: inline-block; vertical-align: middle; }
.td-img.no-img { background-image: linear-gradient(135deg, #f0f0f0 25%, #e8e8e8 25%, #e8e8e8 50%, #f0f0f0 50%, #f0f0f0 75%, #e8e8e8 75%); background-size: 12px 12px; position: relative; }
.td-img.no-img::after { content: "无图"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; color: #999; }
.td-actions { white-space: nowrap; }

/* ---- 按钮 ---- */
.btn { display: inline-block; padding: 5px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: all .15s; margin: 2px; }
.btn-primary2 { background: var(--green); color: #fff; }
.btn-primary2:hover { background: var(--green-light); }
.btn-ghost { background: transparent; border: 1px solid var(--green); color: var(--green); }
.btn-ghost:hover { background: var(--green-bg); }
.btn-warn { background: transparent; border: 1px solid var(--orange); color: var(--orange); }
.btn-warn:hover { background: #fef3e2; }
.btn-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-danger:hover { background: #fdecea; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- 表单 ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-full { grid-column: 1 / -1; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; color: #555; margin-bottom: 5px; font-weight: 500; }
.form-label .required { color: var(--red); }
.form-control { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; transition: border-color .2s; }
.form-control:focus { border-color: var(--green); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11px; color: var(--gray); margin-top: 3px; }

/* ---- 图片上传 ---- */
.img-uploader { display: flex; flex-wrap: wrap; gap: 8px; }
.img-item { position: relative; width: 72px; height: 72px; }
.img-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.img-item .del-img { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--red); color: #fff; border-radius: 50%; font-size: 12px; text-align: center; line-height: 18px; cursor: pointer; }
.img-add { width: 72px; height: 72px; border: 1.5px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--gray); cursor: pointer; }
.img-add:hover { border-color: var(--green); color: var(--green); }

/* ---- SKU 主图 ---- */
.sku-img { width:48px; height:48px; border:1.5px dashed var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--gray); cursor:pointer; background:#fafafa; margin:0 auto; position:relative; }
.sku-img:hover { border-color: var(--green); color: var(--green); }
.sku-img.has-img { border:1px solid #ddd; padding:0; overflow:hidden; }
.sku-img.has-img img { width:100%; height:100%; object-fit:cover; display:block; }
.sku-img-del { position:absolute; top:-6px; right:-6px; width:18px; height:18px; background:var(--red); color:#fff; border-radius:50%; font-size:12px; text-align:center; line-height:18px; cursor:pointer; }

/* ---- SKU Chip 标签输入 ---- */
.sku-spec-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.sku-spec-name { width:120px; flex:0 0 120px; }
.sku-opt-box { flex:1; min-width:240px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:4px 6px; border:1px solid var(--border); border-radius:4px; background:#fff; min-height:34px; }
.sku-opt-box:focus-within { border-color:var(--green); box-shadow:0 0 0 2px rgba(82,196,26,.12); }
.sku-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 10px; background:var(--green-bg,#e8f7e5); color:var(--green,#52c41a); border:1px solid #b7e4a3; border-radius:14px; font-size:13px; line-height:20px; }
.sku-chip-x { cursor:pointer; font-style:normal; font-size:14px; line-height:14px; padding:0 2px; color:#888; }
.sku-chip-x:hover { color:var(--red); }
.sku-opt-input { flex:1; min-width:100px; border:0; outline:none; padding:4px; font-size:13px; background:transparent; }
.sku-spec-del { padding:4px 8px; font-size:11px; flex:0 0 auto; }
.sku-help { margin:6px 0 12px; padding:8px 10px; background:#fffbe6; border:1px solid #ffe58f; color:#7c5b00; font-size:12px; border-radius:4px; line-height:1.6; }

/* ---- Modal ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal-box { background: #fff; border-radius: var(--radius); width: 680px; max-width: 95vw; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.modal-box.wide { width: 860px; }
.modal-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--green-bg); font-weight: 600; font-size: 15px; color: var(--green); }
.modal-close { font-size: 22px; cursor: pointer; color: var(--gray); line-height: 1; }
.modal-close:hover { color: var(--red); }
.modal-bd { padding: 20px; overflow-y: auto; flex: 1; }
.modal-ft { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ---- Toast ---- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 22px; border-radius: 24px; font-size: 14px; z-index: 9999; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.toast.ok { background: var(--green); }
.toast.err { background: var(--red); }

/* ---- 折线图（纯 SVG） ---- */
.chart-wrap { background: var(--card-bg); border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); }
.chart-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
.chart-svg { width: 100%; height: 160px; }

/* ---- Tabs ---- */
.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.tab-btn { padding: 8px 18px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--gray); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }

/* ---- 统计列表 ---- */
.stat-list { display: grid; gap: 8px; }
.stat-row { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 6px; background: var(--green-bg); font-size: 13px; }
.stat-row .val { font-weight: 600; color: var(--green); }

/* ---- 搜索栏 ---- */
.search-bar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.search-bar input { padding: 7px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; }
.search-bar input:focus { border-color: var(--green); }
.search-bar select { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; }

/* ---- 空状态 ---- */
.empty-state { text-align: center; padding: 48px 0; color: var(--gray); }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }

/* ---- 加载 ---- */
.loading { text-align: center; padding: 48px; color: var(--gray); }

/* ---- 分页 ---- */
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; color: var(--gray); }

/* ---- 详情卡片 ---- */
.detail-grid { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 13px; }
.detail-grid .lbl { color: var(--gray); }

/* ---- 茶室详情：适合人数 ---- */
.sd-cap { margin-top: 6px; font-size: 13px; color: #555; }

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  #nav { width: 56px; }
  .nav-btn span { display: none; }
  .nav-btn { text-align: center; padding: 11px 8px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-box, .modal-box.wide { width: 98vw; }
}

/* ͼƬ�Ŵ���䣨���ʱ�鿴����ԭͼ����ֹ�ҷ�ͼ�� */
.img-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.img-lightbox img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain; border-radius: 8px;
}

/* 茶室详情：图片顶部横排 + 信息下方 */
.sd-imgs { display:flex; flex-wrap:wrap; gap:10px; padding:4px 0 16px; border-bottom:1px dashed var(--border); margin-bottom:14px; }
.sd-img { width:130px; height:130px; object-fit:cover; border-radius:8px; cursor:zoom-in; background:#f3f5f7; display:block; }
.sd-info { line-height:1.8; }
.sd-cap { color: var(--green); font-weight: 600; padding: 6px 0; }

/* ---- 商品图文混排 blocks 编辑器 ---- */
.block-ops { display: flex; gap: 8px; margin-top: 8px; }
.gb-block { display: flex; flex-direction: column; gap: 6px; position: relative; background: #fafafa; border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.gb-ta { width: 100%; min-height: 76px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-size: 14px; resize: vertical; box-sizing: border-box; }
.gb-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; }
.gb-del { align-self: flex-end; color: #e53935; font-size: 12px; cursor: pointer; background: none; border: none; padding: 2px 6px; }

/* ---- 富文本编辑器（商品/茶室图文详情） ---- */
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rt-btn { min-width: 64rpx !important; padding: 6px 12px !important; font-size: 13px !important; line-height: 1.2; }
.rt-editor {
  min-height: 200px;
  max-height: 45vh;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.7;
  background: #fff;
  outline: none;
  overflow-y: auto;
}
.rt-editor:empty:before { content: attr(data-placeholder); color: #bbb; }
.rt-editor img { max-width: 100%; border-radius: 8px; display: block; margin: 6px 0; }
.rt-editor p { margin: 0 0 8px; }
.rt-editor h2 { font-size: 18px; margin: 6px 0; }
.rt-editor ul, .rt-editor ol { padding-left: 22px; margin: 0 0 8px; }

.detail-section{margin-top:16px;border-top:1px dashed var(--border);padding-top:12px}
.detail-section-title{font-size:14px;font-weight:600;color:#374151;margin-bottom:10px}
.detail-rich{font-size:14px;line-height:1.8;color:#1f2937}
.detail-rich img{max-width:100%;height:auto;border-radius:6px;margin:8px 0;display:block}
.detail-rich table{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px}
.detail-rich td{border:1px solid #e5e7eb;padding:6px 8px}

/* ---- 介绍管理卡片 ---- */
.rt-html{font-size:13px;line-height:1.7;color:#1f2937;word-break:break-word}
.rt-html img{max-width:100%!important;height:auto;border-radius:6px;margin:6px 0;display:block}
.rt-html p{margin:0 0 6px}
.rt-html h1,.rt-html h2,.rt-html h3{font-size:15px;font-weight:600;margin:8px 0 6px}
.rt-html table{border-collapse:collapse;width:100%;margin:6px 0;font-size:12px}
.rt-html td{border:1px solid #e5e7eb;padding:4px 6px}
.prof-card{margin-bottom:12px}
.prof-cell{display:flex;gap:8px;align-items:center}
.prof-avatar-sm{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
.prof-row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.prof-detail{max-height:66vh;overflow-y:auto}
.prof-head{display:flex;gap:12px;align-items:flex-start;border-bottom:1px dashed var(--border);padding-bottom:10px;margin-bottom:10px}
.prof-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--border);flex-shrink:0}
.prof-id{flex:1;min-width:0}
.prof-id-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prof-name{font-weight:600}
.prof-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;font-size:12px}
.prof-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.prof-body{display:flex;flex-direction:column;gap:10px}
.prof-field{border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:#fafbfc}
.prof-field-label{font-size:12px;color:#6b7280;margin-bottom:6px;font-weight:600}
.prof-field-body{font-size:13px;color:#1f2937}
.prof-proj{border:1px solid #e5e7eb;border-radius:6px;padding:6px 10px;margin-bottom:6px;background:#fff}
.prof-proj:last-child{margin-bottom:0}
.prof-proj-title{font-weight:600;font-size:13px;margin-bottom:4px;color:#111827}
.prof-proj-row{font-size:12px;color:#374151;line-height:1.6}
.prof-proj-k{display:inline-block;min-width:60px;color:#6b7280;margin-right:6px}

/* ---- OpenID 单元格（老板/用户列表） ---- */
.oid-cell {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--gray);
  cursor: default;
  vertical-align: middle;
}

/* ---- 发放表单（积分/优惠券发放统一样式） ---- */
.issue-card { background: var(--card-bg); border-radius: var(--radius); padding: 0; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.issue-card-title {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border-bottom: 1px solid var(--border);
}
.issue-form { padding: 14px 18px 4px; }
.issue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.issue-label {
  flex: 0 0 90px;
  font-size: 13px;
  color: #555;
  font-weight: 500;
  text-align: right;
}
.issue-control {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.issue-control:focus { border-color: var(--green); }

/* ---- 订单详情 kv ---- */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed #f0f0f0; }
.kv:last-child { border-bottom: none; }
.kv > span:first-child { color: var(--gray); flex-shrink: 0; }
.kv b { font-weight: 600; }

/* 头像占位（无头像时显示） */
.td-img.avatar-ph { display: flex; align-items: center; justify-content: center; font-size: 22px; background: #eef2ef; color: #9aa7a0; border: 1px solid var(--border); }

/* ---- 茶室表单：老板可到场时段 ---- */
.slot-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fafcfb; }
.sf-slot { font-size: 12px; line-height: 1; padding: 5px 7px; border: 1px solid #dfe6e2; border-radius: 6px; cursor: pointer; color: #8a978f; background: #fff; user-select: none; }
.sf-slot.on { background: #1a7a4f; border-color: #1a7a4f; color: #fff; }
#sf-map { background: #eef2ef; }

/* ---- 茶室表单：地址搜索候选 ---- */
.sf-search-list { margin-top: 8px; }
.sf-sr-hint { font-size: 12px; color: #8a978f; padding: 6px 2px; }
.sf-sr-hint.err { color: #c0392b; }
.sf-sr-hint.ok { color: #1a7a4f; }
.sf-sr-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: #fff; }
.sf-sr-item:hover { border-color: #1a7a4f; background: #f3faf6; }
.sf-sr-name { font-size: 13px; font-weight: 600; color: #333; }
.sf-sr-addr { font-size: 12px; color: #8a978f; margin-top: 2px; }

/* ---- 营业额细分（块状卡片） ---- */
.bd-sec { margin-bottom: 16px; }
.bd-sec-title { font-weight: 700; font-size: 13px; color: #2f5d47; margin-bottom: 8px; padding-left: 8px; border-left: 3px solid var(--green); }
.bd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* rev-bd 横向紧凑布局 */
.bd-row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: stretch; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.bd-row:last-child { border-bottom: none; }
.bd-row .bd-period { font-weight: 700; color: var(--green); font-size: 13px; padding: 8px 12px; background: #eef7f1; border-radius: 8px; text-align: center; align-self: center; }
.bd-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bd-cells .bd-cell { padding: 8px 10px; }
.bd-cells .bd-cell .bd-label { font-size: 11px; }
.bd-cells .bd-cell .bd-val { font-size: 15px; margin-top: 2px; }
@media (max-width: 880px) { .bd-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bd-row { grid-template-columns: 70px 1fr; } }
.bd-cell { background: #f7faf7; border: 1px solid #e2efe7; border-radius: 8px; padding: 10px 12px; }
.bd-cell .bd-label { font-size: 12px; color: #5d7a68; }
.bd-cell .bd-val { font-size: 18px; font-weight: 700; color: var(--green); margin-top: 4px; letter-spacing: -0.3px; }
.bd-cell.bd-self { background: #f3faf6; border-color: #d8ecdf; }
.bd-cell.bd-agent { background: #fff9ef; border-color: #f7e4c3; }
.bd-cell.bd-agent .bd-val { color: #c47f13; }
.bd-cell.bd-plat { background: #f2f7fc; border-color: #d8e6f2; }
.bd-cell.bd-plat .bd-val { color: var(--blue); }
.bd-cell.bd-boss { background: #f3faf6; border-color: #d8ecdf; }
.bd-total { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: var(--green); color: #fff; border-radius: 8px; font-size: 13px; }
.bd-total b { font-size: 17px; }
.bd-split { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--border); }
@media (max-width: 640px) { .bd-grid { grid-template-columns: 1fr; } }

/* ---- 提现申请：老板信息列 ---- */
.wd-user { display: flex; align-items: center; gap: 8px; }
.wd-user .td-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.wd-user .td-avatar-ph { display: flex; align-items: center; justify-content: center; background: #eef2ef; font-size: 16px; }
.wd-user-nick { font-size: 13px; font-weight: 600; color: #333; line-height: 1.2; }
.wd-user-phone { font-size: 11px; color: var(--gray); }

.ck-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ck-cell { background: #f6f8f7; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ck-day { font-size: 12px; color: #7a8a84; }
.ck-in { padding: 6px 8px; text-align: center; }

/* 套餐管理 */
.bill-switch { display: flex; flex-direction: column; gap: 12px; }
.bill-switch .sw { font-size: 14px; font-weight: 600; cursor: pointer; }
.bill-switch .sw input { margin-right: 8px; accent-color: var(--green); }
.bill-prices { display: flex; flex-direction: column; gap: 8px; }
.bp-row { display: flex; align-items: center; gap: 12px; }
.bp-row label { width: 80px; font-size: 13px; color: #666; flex-shrink: 0; }
.bp-row .inp { flex: 1; }
.st-ok { background: #e8f5ee; color: var(--green); padding: 2px 10px; border-radius: 999rpx; font-size: 12px; }
.st-warn { background: #fff4e0; color: #c97a00; padding: 2px 10px; border-radius: 999rpx; font-size: 12px; }

/* 套餐管理 - 顶部总览 */
.bill-overview { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.bo-card { background: linear-gradient(135deg, #fff 0%, #f7faf7 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.bo-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,122,79,0.14); }
.bo-card.on { background: linear-gradient(135deg, #e8f5ee 0%, #d4ecd9 100%); border-color: #b3d9be; }
.bo-card.off { background: linear-gradient(135deg, #fafbfc 0%, #f0f2f0 100%); }
.bo-label { font-size: 12px; color: var(--gray); margin-bottom: 6px; }
.bo-val { font-size: 26px; font-weight: 700; color: var(--green); letter-spacing: -0.5px; }
.bo-card.off .bo-val { color: var(--gray); }
.bo-sub { font-size: 11px; margin-top: 4px; }
.bo-actions { margin-top: 12px; }
.bo-actions .btn-sm { padding: 6px 12px; font-size: 12px; }

/* 套餐管理 - 配置卡片 */
.bill-config { background: linear-gradient(180deg, #fff 0%, #fafdfa 100%); }
.bc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.bc-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s; }
.bc-item:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,122,79,0.08); }
.bc-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.bc-info { flex: 1; min-width: 0; }
.bc-lab { font-size: 14px; font-weight: 600; color: #333; }
.bc-hint { font-size: 11px; color: var(--gray); margin-top: 2px; }
.bc-input { width: 90px; text-align: center; font-size: 16px; font-weight: 700; color: var(--green); border: 1px solid #e2efe7; }
.bc-input:focus { border-color: var(--green); outline: none; }
.bc-footer { padding: 12px 14px; background: #f7faf7; border-radius: 8px; margin-bottom: 12px; font-size: 13px; color: #5d7a68; }
.sw-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.sw-inline input { accent-color: var(--green); transform: scale(1.1); }
.bill-save { width: 100%; padding: 12px; font-size: 14px; }
.dr-default-row td { background: #f8fff8; }
.dr-sku-row td { background: #faf8ff; }

/* 富文本图片点击操作条 + 裁剪弹窗 */
.rt-editor img { cursor: pointer; }
.rt-editor img.rt-img-active { outline: 2px solid var(--green); outline-offset: 2px; }
#rt-img-bar { position: absolute; z-index: 3000; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); display: flex; overflow: hidden; }
#rt-img-bar span { padding: 7px 13px; font-size: 13px; cursor: pointer; color: #333; border-right: 1px solid #eef1ec; user-select: none; }
#rt-img-bar span:last-child { border-right: none; }
#rt-img-bar span:hover { background: #f2f7f3; color: var(--green); }
#rt-img-bar span.danger { color: #d9534f; }
#rt-img-bar span.danger:hover { background: #fdf3f2; }
.crop-wrap { text-align: center; }
.crop-wrap canvas { max-width: 100%; border: 1px solid var(--border); cursor: crosshair; }
.crop-tip { font-size: 12px; color: var(--gray); margin-top: 8px; }

/* 表头固定：列表区域内滚动时表头保持可见 */
.table-wrap { max-height: 70vh; overflow: auto; }
.table-wrap thead th { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 var(--border); }

/* 用户管理搜索栏 */
.user-search-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px; }

/* ---- 手机菜单切换按钮（桌面隐藏） ---- */
#navToggle { display: none; }

/* ================= 手机端适配（≤640px） ================= */
@media (max-width: 640px) {
  /* 登录页 */
  .login-box { width: 88vw !important; padding: 24px 20px !important; }

  /* 顶栏加菜单切换按钮 */
  #navToggle { display: inline-block !important; }

  /* 布局：侧栏变顶部多行平铺菜单，固定不随内容滚动 */
  .layout { flex-direction: column; min-height: calc(100vh - 52px); }
  #nav {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px;
    row-gap: 8px;
    padding: 10px 10px !important;
    border-right: none !important;
    border-bottom: 2px solid #e8ebe9;
    position: sticky;
    top: 52px;
    z-index: 30;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  /* 收起状态：整个菜单隐藏 */
  #nav.collapsed { display: none !important; }

  /* 分组容器用双层 wrap 平铺（兼容所有内核，不用 display:contents） */
  .nav-group, .nav-group-body {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px;
    row-gap: 8px;
  }
  .nav-group-title, .nav-group-arrow { display: none !important; }
  .nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    height: 28px !important;
    padding: 0 11px !important;
    margin: 0 !important;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1 !important;
    border-radius: 14px;
    border: 1px solid var(--border) !important;
    background: #fff;
    box-sizing: border-box !important;
  }
  .nav-btn.active { background: var(--green); color: #fff; border-color: var(--green); }

  /* 内容区 */
  #content { padding: 12px 12px 24px !important; }
  .page-title { font-size: 17px !important; margin-bottom: 10px !important; }
  .card { padding: 12px !important; margin-bottom: 10px !important; }
  .card-title { font-size: 14px !important; }
  .kpis { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* 表格：横向滑动 + 紧凑 */
  .table-wrap { max-height: none !important; }
  .table { font-size: 12px !important; min-width: 640px; }
  .table th, .table td { padding: 7px 6px !important; }
  .table th { position: sticky; top: 0; }

  /* 表单 */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-control { font-size: 14px !important; }
  .btn { min-height: 34px; }

  /* 弹窗 */
  .modal-box, .modal-box.wide { width: 94vw !important; max-height: 86vh !important; }
  .modal-bd { font-size: 13px; }
  .detail-grid { grid-template-columns: 84px 1fr !important; }
}

/* ============================================================
   页签（老板管理等页面共用）
   ⚠️ 必须放全局：此前写在「老板表格视图」的内联 <style> 里，
   切到「申诉处理」等子视图时那段样式会随之消失 → 页签退化成一行普通文字，
   看起来像"点不动、只能点菜单切回来"。
   ============================================================ */
.btabs { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.btab {
  padding: 6px 14px; border: 1px solid #e3e8e5; background: #fff;
  border-radius: 999px; font-size: 13px; cursor: pointer; color: #1d2b25;
  user-select: none; transition: border-color .15s, background .15s;
}
.btab:hover { border-color: #1a7a4f; }
.btab i { font-style: normal; margin-left: 6px; font-size: 12px; color: #8a9a92; }
.btab.on { background: #1a7a4f; border-color: #1a7a4f; color: #fff; }
.btab.on:hover { border-color: #1a7a4f; }
.btab.on i { color: #cfe8dc; }

/* 优惠券「适用范围」勾选框（放在全局：弹窗表单跨视图复用，写进某个视图的内联 style 会丢） */
.scope-box { max-height: 220px; overflow-y: auto; border: 1px solid #e3e8df; border-radius: 8px; padding: 8px 10px; background: #fbfdfb; }
.scope-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; color: #333; cursor: pointer; border-radius: 6px; }
.scope-item:hover { background: #f1f6f2; }
.scope-item input { margin: 0; flex: 0 0 auto; }

/* ── 🏷 空间类型管理（2026-10-27：大类 + 细分，后台可增删，改完不用发版小程序）── */
.spt-card { border:1px solid #e5eae8; border-radius:10px; padding:12px 14px; margin-bottom:12px; background:#fff; }
.spt-card-hd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.spt-card-hd .spt-name { max-width:160px; }
.spt-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.spt-chip { display:inline-flex; align-items:center; gap:6px; background:#f1f6f2; border:1px solid #d8e5dc; color:#1a7a4f; border-radius:6px; padding:4px 8px; font-size:13px; }
.spt-chip-used { background:#fff8e1; border-color:#ffe082; color:#8d6e63; }
.spt-x { cursor:pointer; font-weight:700; color:#c62828; padding:0 2px; }
.spt-x:hover { color:#8e0000; }
.spt-add { display:flex; gap:8px; align-items:center; }
.spt-add .spt-tag-in { max-width:200px; }

/* 发布/编辑场地「空间类型」两级选择器（2026-10-27）
   🚨 漏了这段的后果不是报错，是 29 个 chip 和 checkbox 挤成一行文字 —— 只能靠真实渲染才看得出来 */
.spt-picker { border:1px solid #e5eae8; border-radius:8px; padding:10px 12px; background:#fbfdfb; }
.spt-pgroup { margin-bottom:10px; }
.spt-pgroup:last-child { margin-bottom:0; }
.spt-pgname { font-size:12px; color:#6b7b73; font-weight:600; margin-bottom:6px; }
.spt-pchips { display:flex; flex-wrap:wrap; gap:8px; }
.spt-pchip { display:inline-flex; align-items:center; gap:5px; border:1px solid #d8e5dc; background:#fff; border-radius:6px; padding:4px 10px; font-size:13px; color:#333; cursor:pointer; user-select:none; }
.spt-pchip:hover { border-color:#1a7a4f; }
.spt-pchip input { margin:0; flex:0 0 auto; }
.spt-pchip.on { background:#eef7f1; border-color:#1a7a4f; color:#1a7a4f; font-weight:600; }
/* 新增大类那一行：两个输入框 + 按钮不挤在一起 */
.spt-newrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spt-newrow .form-control { width:auto; }

/* ---- 首页轮播图 / 广告位管理（bn-*，2026-10-27）---- */
.bn-card { border: 1px solid #e8eaed; border-radius: 8px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.bn-card-hd { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.bn-thumb { width: 96px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #f5f5f5; }
.bn-info { flex: 1; min-width: 0; }
.bn-line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bn-title { font-size: 13px; font-weight: 600; color: #1f2d3d; }
.bn-badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #f0f2f5; color: #606a75; white-space: nowrap; }
.bn-b-on { background: #e6f4ea; color: #1a7a4f; }
.bn-b-off { background: #f0f0f0; color: #98a0a8; }
.bn-b-wait { background: #fdf3e2; color: #b26a00; }
.bn-b-own { background: #e8f0fe; color: #185fa5; }
.bn-b-self { background: #f5f5f5; color: #8a94a0; }
.bn-target { font-size: 12px; color: #4a5560; margin-top: 5px; word-break: break-all; }
.bn-meta { font-size: 11px; color: #98a0a8; margin-top: 3px; }
.bn-acts { display: flex; gap: 6px; flex-shrink: 0; }
.bn-a { padding: 3px 9px; font-size: 12px; }
.bn-acts .btn[disabled] { opacity: .45; cursor: not-allowed; }
.bn-del { color: #c62828; }
.bn-edit { border-top: 1px dashed #e0e4e8; padding: 10px 12px 12px; background: #fafbfc; }
.bn-types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.bn-type { padding: 4px 12px; font-size: 12px; border-radius: 14px; border: 1px solid #d8dce0; background: #fff; color: #606a75; cursor: pointer; line-height: 1.6; }
.bn-type.on { background: #1a7a4f; border-color: #1a7a4f; color: #fff; }
.bn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bn-lab { font-size: 12px; color: #606a75; margin-bottom: 6px; }
.bn-lab2 { font-size: 12px; color: #606a75; }

/* 🏠 空间类型 → 首页 tab 勾选（2026-11-06） */
.spt-front { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #1a7a4f;
  background: #eef7f2; border: 1px solid #d7e7de; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.spt-front input { margin: 0; }
.spt-fx { display: inline-flex; align-items: center; margin-right: 4px; cursor: pointer; }
.spt-fx input { margin: 0; transform: scale(.85); }
.spt-chip-front { border-color: #1a7a4f; background: #e8f5ee; }

/* 大类图标输入框（首页大类行用 emoji） */
.spt-icon { width: 64px !important; text-align: center; font-size: 16px; }

/* 细分名称可直接编辑（原地改，不再是死文本） */
.spt-tag-in2 { width: 88px; border: 0; border-bottom: 1px dashed #c9d3cd; background: transparent;
  font-size: 12px; color: #1f2937; padding: 0 2px; margin: 0 2px; }
.spt-tag-in2:focus { outline: none; border-bottom-color: #1a7a4f; background: #fff; }

/* 🛠️ 工具市场 → 适用空间类型勾选（2026-11-06） */
.tt-wrap { max-height: 56vh; overflow: auto; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; }
.tt-group { padding: 10px 0; border-bottom: 1px dashed #eef0f2; }
.tt-group:last-child { border-bottom: 0; }
.tt-gname { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1f2937; cursor: pointer; }
.tt-gname input { margin: 0; }
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 20px; }
.tt-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #4b5563;
  background: #f7f8f9; border: 1px solid #eceef0; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.tt-chip input { margin: 0; }
.tt-chip.on { background: #eaf6ef; border-color: #bcd9c9; color: #12603e; }