/* ============================================================
   Enterprise HTML — 设计系统
   风格参照 Awwwards Minimal 合集：米白暖底 / 炭黑文字 /
   衬线标题 / 单一暖棕点缀 / 大量留白 / 细线分割
   ============================================================ */

:root {
  --bg:        #F7F3EC;   /* 米白（暖） */
  --bg-soft:   #FBF9F4;   /* 卡片底 */
  --bg-sunken: #F0EAE0;   /* 凹陷区/标签底 */
  --ink:       #2B2620;   /* 炭黑正文 */
  --ink-soft:  #6E6659;   /* 次要文字 */
  --ink-faint: #A79C8C;   /* 占位/弱化 */
  --line:      #E4DCCF;   /* 细分割线 */
  --accent:    #A0622D;   /* 暖棕点缀 */
  --accent-soft: #F3E7D8; /* 点缀浅底 */
  --danger:    #A8442D;
  --ok:        #4F7A45;
  --radius:    14px;
  --radius-sm: 9px;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --shadow: 0 1px 2px rgba(43,38,32,.04), 0 8px 28px rgba(43,38,32,.06);
  --shadow-lg: 0 2px 6px rgba(43,38,32,.06), 0 20px 60px rgba(43,38,32,.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
}
::selection { background: var(--accent-soft); }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- 通用控件 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink);
  font-size: 14px; transition: all .18s ease; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-faint); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: #FAF0EC; }
.btn.small { padding: 5px 14px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.input, .select, .textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  outline: none; transition: border-color .15s ease;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.textarea { resize: vertical; min-height: 72px; }

.label { display: block; font-size: 12.5px; color: var(--ink-soft); margin: 14px 0 6px; letter-spacing: .04em; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px); height: 64px;
  background: rgba(247,243,236,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.topbar .brand em { font-style: normal; color: var(--accent); }
.topbar .who { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-soft); }
.topbar .who .role-tag { white-space: nowrap; }
.topbar .who .u-name {
  border: none; background: none; padding: 4px 2px;
  font-size: 13.5px; color: var(--ink-soft); cursor: pointer;
  border-bottom: 1px dashed transparent; transition: all .15s ease;
}
.topbar .who .u-name:hover { color: var(--accent); border-bottom-color: var(--accent); }
.topbar .who .role-tag {
  padding: 2px 10px; border-radius: 999px; font-size: 12px;
  background: var(--accent-soft); color: var(--accent);
}
.topbar .who .role-tag.admin { background: var(--ink); color: var(--bg); }

/* ---------- 页面容器 ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px) 96px; }
.page-title { font-size: clamp(26px, 4vw, 38px); margin-bottom: 6px; }
.page-sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 32px; }

/* ---------- 主页功能卡 ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 30px 26px 26px; min-height: 190px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .22s ease; cursor: pointer;
}
.feature-card:hover:not(.disabled) { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--ink-faint); }
.feature-card .num { font-family: var(--serif); font-size: 13px; color: var(--ink-faint); }
.feature-card h3 { font-size: 21px; }
.feature-card p { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.feature-card .go { font-size: 13px; color: var(--accent); }
.feature-card.disabled { cursor: default; opacity: .62; }
.feature-card .soon {
  position: absolute; top: 18px; right: 20px;
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--ink-soft); letter-spacing: .06em;
}

/* 识图续费入口（仅管理员可见，位于识别按钮上方） */
.billing-row { text-align: right; margin-bottom: 6px; }
.billing-row a {
  font-size: 12px; color: var(--ink-faint); text-decoration: none;
  border-bottom: 1px dashed var(--ink-faint); padding-bottom: 1px;
  transition: color .15s ease;
}
.billing-row a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- 工具栏 ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.search-box { position: relative; }
.search-box .input { padding-left: 36px; width: clamp(180px, 30vw, 260px); border-radius: 999px; }
.search-box::before {
  content: "⌕"; position: absolute; left: 14px; top: 50%; transform: translateY(-52%);
  font-size: 17px; color: var(--ink-faint);
}

/* 筛选标签 */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; align-items: center; }
.filter-row .f-label { font-size: 12.5px; color: var(--ink-faint); margin-right: 2px; }
/* 消费日期筛选：原生 date 控件（PC 下拉日历 / 移动端系统日历，年月日均可选） */
.date-input { width: 150px; padding: 7px 10px; font-size: 13.5px; }/* PC：wrapper 透明化，视觉与不包裹完全一致（移动端在 media 里改为缩进排布） */
.filter-row .f-chips { display: contents; }
.chip {
  padding: 5px 14px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft);
  transition: all .15s ease;
}
.chip:hover { border-color: var(--ink-faint); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.clear { border-style: dashed; color: var(--ink-faint); }

/* 统计条 */
.count-bar {
  font-family: var(--serif); font-size: 15px; color: var(--ink-soft);
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.count-bar b { color: var(--accent); font-size: 19px; padding: 0 2px; }

/* 列表操作条：统计 + 排序 + 导出 */
.list-bar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.list-bar .count-bar { flex: 1; border: none; padding-bottom: 0; margin-bottom: 0; }
.list-bar .select { width: auto; padding: 6px 10px; font-size: 13px; }
.list-bar .btn { flex: none; }

/* PC 端：卡号与品牌·门店行字号略小，保证一行显示完整（移动端不动） */
@media (min-width: 761px) {
  .member-head .m-card { font-size: 12px; }
  .member-head .m-sub { font-size: 12px; }
}

/* ---------- 会员列表 ---------- */
.member-list { display: flex; flex-direction: column; }
.member-item { border-bottom: 1px solid var(--line); }
.member-head {
  display: grid; grid-template-columns: 44px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 110px 28px;
  align-items: center; gap: 12px;
  padding: 16px 8px; cursor: pointer; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.member-head:hover { background: var(--bg-soft); }
.avatar {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-sunken); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px;
}
.new-badge {
  position: absolute; top: -5px; left: -7px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--ok); color: #fff;
  font-size: 10.5px; font-family: var(--sans);
  box-shadow: 0 1px 4px rgba(43,38,32,.18);
}
.warn-badge {
  position: absolute; top: -5px; right: -7px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; font-family: var(--sans);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(43,38,32,.18);
}

/* ---------- 批量识图传图 ---------- */
.batch-block { padding: 12px 0; border-bottom: 1px solid var(--line); }
.batch-block:last-child { border-bottom: none; }
.b-title { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-size: 15px; margin-bottom: 8px; }
.b-count { font-size: 12px; color: var(--ink-faint); font-family: var(--sans); }
.b-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.b-thumb {
  position: relative; width: 64px; height: 64px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
}
.b-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-thumb .x {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(43,38,32,.65); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.b-add {
  width: 64px; height: 64px; border-radius: 8px;
  border: 1px dashed var(--ink-faint); background: none;
  color: var(--ink-faint); font-size: 12px; transition: all .15s ease;
}
.b-add:hover { color: var(--accent); border-color: var(--accent); }
.member-head .m-name { font-family: var(--serif); font-size: 16.5px; }
.member-head .m-sub { font-size: 12.5px; color: var(--ink-faint); }
.member-head .m-cell { font-size: 13.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-head .m-card { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; text-align: right; }
.member-head .arrow { color: var(--ink-faint); transition: transform .2s ease; font-size: 13px; text-align: center; }
.member-item.open .arrow { transform: rotate(90deg); }

/* 展开的详情 */
.member-detail { padding: 6px 8px 26px 60px; }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 24px; }
.field {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  transition: background .15s ease; min-width: 0;
}
.field:hover { background: var(--bg-soft); }
.field .f-key { flex: none; width: 96px; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.field .f-val { flex: 1; font-size: 14px; line-height: 1.5; word-break: break-all; }
/* 识图降级警示：小红感叹号 + 悬停浮窗 */
.drop-warn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; font-style: normal;
  margin-left: 8px; cursor: help; vertical-align: middle;
  flex: none;
}
.drop-warn::after {
  content: attr(data-tip);
  position: absolute; bottom: 140%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 400; line-height: 1.7;
  padding: 9px 13px; border-radius: 9px;
  white-space: pre-line; width: max-content; max-width: 230px;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 60; box-shadow: var(--shadow-lg);
}
.drop-warn::before {
  content: ""; position: absolute; bottom: 140%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  border: 5px solid transparent; border-top-color: var(--ink);
  margin-bottom: -9px;
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
  z-index: 60;
}
.drop-warn:hover::after, .drop-warn:hover::before,
.drop-warn.show::after, .drop-warn.show::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.field .f-val.empty { color: var(--ink-faint); }
.field .f-edit {
  flex: none; opacity: 0; border: none; background: none;
  color: var(--accent); font-size: 12.5px; padding: 2px 6px;
}
.field:hover .f-edit { opacity: 1; }
/* 编辑态：行内紧凑（与消费卡片编辑框同款尺寸），本地暂存不即时提交 */
.field.editing { background: var(--bg-soft); border: 1px solid var(--line); }
.field.editing .input, .field.editing .select, .field.editing .textarea {
  width: 100%; padding: 6px 10px; font-size: 13px; background: var(--bg);
}
.field.editing .textarea { min-height: 60px; }
/* 已暂存未保存的字段标记 */
.field.modified { background: var(--accent-soft); }
.field.modified .f-key { color: var(--accent); }
.field.modified .f-val { color: var(--accent); font-weight: 500; }

/* 详情页底部：统一保存 / 撤回 */
.detail-actions { margin-top: 22px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.detail-actions .pending-hint { margin-right: auto; font-size: 12.5px; color: var(--accent); }

/* 子页面左上角返回 */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 4px 10px 4px 0; margin-bottom: 10px;
  font-size: 14px; color: var(--ink-soft); transition: color .15s ease;
}
.back-btn:hover { color: var(--accent); }

/* 消费明细 */
.cons-section { margin-top: 18px; }
.cons-section h4 { font-family: var(--serif); font-size: 15px; margin-bottom: 10px; color: var(--ink); }
.cons-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cons-card {
  width: 168px; padding: 12px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: all .18s ease;
}
.cons-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cons-card .c-thumb {
  height: 84px; border-radius: 7px; margin-bottom: 8px;
  background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 12px; overflow: hidden;
}
.cons-card .c-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cons-card .c-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-card .c-meta { font-size: 12px; color: var(--ink-faint); }
.cons-card.add {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px; border-style: dashed; color: var(--ink-faint); font-size: 13px;
}
.cons-card.add:hover { color: var(--accent); border-color: var(--accent); }
/* 消费卡片：名称/金额直接编辑 */
.cons-card .c-name { display: flex; align-items: center; gap: 5px; }
.cons-card .c-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-card .c-edit {
  flex: none; border: none; background: none; padding: 0 2px;
  color: var(--ink-faint); font-size: 12px; opacity: 0; transition: opacity .15s;
}
.cons-card:hover .c-edit { opacity: 1; }
.cons-card .c-edit:hover { color: var(--accent); }
.cons-card .c-editing .input { padding: 6px 10px; font-size: 13px; margin-bottom: 6px; }
.cons-card .c-ops { display: flex; gap: 6px; justify-content: flex-end; }
.cons-card .c-ops .btn { padding: 3px 12px; font-size: 12px; }

/* ---------- 最近操作 ---------- */
.ops-list { display: flex; flex-direction: column; }
.op-item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.op-item .op-time { flex: none; color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.op-item .op-desc { flex: 1; min-width: 200px; color: var(--ink-soft); }
.op-item .op-desc b { color: var(--ink); font-weight: 600; }
.op-item .op-change { font-size: 12.5px; color: var(--ink-faint); }
.op-item .op-change .old { text-decoration: line-through; margin-right: 6px; }
.op-item .op-change .new { color: var(--accent); }

/* ---------- 弹层 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(43,38,32,.35); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: var(--radius);
  padding: 30px 30px 26px; box-shadow: var(--shadow-lg);
}
.modal h3 { font-size: 20px; margin-bottom: 4px; }
.modal .m-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.modal .m-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.modal .photo-view {
  width: 100%; min-height: 200px; border-radius: var(--radius-sm);
  background: var(--bg-sunken); display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 13px; overflow: hidden; margin-bottom: 14px;
}
.modal .photo-view img { width: 100%; display: block; }

/* ---------- 管理后台 ---------- */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left; font-size: 12.5px; color: var(--ink-faint); font-weight: 500;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.admin-table td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
/* 用户名/角色/注册时间/操作列禁止转行（窄屏下保持一字排开） */
.admin-table td:nth-child(1),
.admin-table td:nth-child(2),
.admin-table td:nth-child(5),
.admin-table td:nth-child(6) { white-space: nowrap; }
.admin-table .role-tag { white-space: nowrap; display: inline-block; }
.perm-checks { display: flex; gap: 12px; flex-wrap: wrap; }
.perm-checks label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.scope-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scope-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--accent-soft); color: var(--accent);
}
.scope-tag .x { cursor: pointer; opacity: .6; }
.scope-tag .x:hover { opacity: 1; }

/* ---------- 提示 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(20px);
  z-index: 200; padding: 11px 24px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: 14px;
  opacity: 0; transition: all .25s ease; pointer-events: none;
  box-shadow: var(--shadow-lg); max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--ok); }

.empty-state { padding: 80px 20px; text-align: center; color: var(--ink-faint); }
.empty-state .serif { font-size: 19px; display: block; margin-bottom: 8px; color: var(--ink-soft); }

/* 消费卡折扣标签 */
.disc-tag { color: var(--accent); font-size: 11.5px; font-weight: 600; }

/* 移动端自研日期选择器（安卓/微信原生控件无法选年） */
.date-pop-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30, 26, 20, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.date-pop-mask.hidden { display: none; }
.date-pop {
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 22px 20px 16px; width: 100%; max-width: 340px;
}
.date-pop .dp-title { font-family: var(--serif); font-size: 17px; margin-bottom: 14px; text-align: center; }
.date-pop .dp-row { display: flex; align-items: center; gap: 6px; justify-content: center; }
.date-pop .dp-row .select { width: auto; flex: 1; min-width: 0; padding: 8px 6px; font-size: 14px; }
.date-pop .dp-row span { color: var(--ink-soft); font-size: 13px; flex: none; }
.date-pop .m-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.pager { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 26px 0 8px; font-size: 13.5px; color: var(--ink-soft); }

/* ---------- 品牌/门店管理 ---------- */
.catalog-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.cat-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--bg-soft); }
.cat-brand { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.cat-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-cnt { margin-left: 6px; font-size: 11px; color: var(--ink-faint); }
.catalog-actions { display: flex; justify-content: space-between; gap: 12px; }

.hidden { display: none !important; }

/* ---------- 登录页 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
}
.login-brand { text-align: center; margin-bottom: 40px; }
.login-brand h1 { font-size: clamp(30px, 6vw, 44px); }
.login-brand h1 em { font-style: normal; color: var(--accent); }
.login-brand p { color: var(--ink-soft); font-size: 14px; margin-top: 8px; letter-spacing: .12em; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px 30px; box-shadow: var(--shadow);
}
.login-tabs { display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.login-tabs button {
  border: none; background: none; padding: 8px 2px 12px;
  font-size: 15px; color: var(--ink-faint); font-family: var(--serif);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.login-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.login-card .btn.primary { width: 100%; justify-content: center; margin-top: 22px; padding: 12px; }

/* ---------- 响应式：手机 ---------- */
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
  .member-head { grid-template-columns: 40px minmax(0,1fr) 96px 24px; }
  .member-head .m-cell.hide-m { display: none; }
  /* 长卡号不撑破 96px 列（防止整页横向滑动） */
  .member-head .m-card { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .member-detail { padding-left: 8px; }
  .field-grid { grid-template-columns: 1fr; }
  .topbar { height: 56px; padding: 0 10px; }
  .topbar .brand { font-size: 14px; }
  .topbar .who { gap: 4px; font-size: 12px; }
  .topbar .who .btn { padding: 4px 6px; font-size: 11.5px; }
  .topbar .who .role-tag { display: none; }
  .topbar .who .u-name { max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .topbar .who #btn-home { display: none; }
  .modal { padding: 24px 20px; }
  .cons-card { width: calc(50% - 6px); }

  /* 移动端无 hover：字段/消费卡片的编辑按钮常显 */
  .field .f-edit, .cons-card .c-edit { opacity: 1; }

  /* 工具栏：搜索框独占一行，按钮两列均分、尺寸收紧 */
  .toolbar { gap: 8px; margin-bottom: 12px; }
  .toolbar .spacer { display: none; }
  .search-box { width: 100%; }
  .search-box .input { width: 100%; }
  .toolbar > .btn { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 8px 10px; font-size: 13px; }
  .toolbar > .btn.primary { flex-basis: 100%; }

  /* 筛选区：行距收紧、chip 缩小；换行与首个 chip 缩进对齐 */
  .filter-row { flex-wrap: nowrap; align-items: baseline; gap: 6px; margin-bottom: 14px; }
  .filter-row .f-label { font-size: 12px; flex: none; width: 26px; }
  .filter-row .f-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
  .chip { padding: 4px 11px; font-size: 12.5px; }

  /* 消费日期行：4 字标签不压缩进 26px，日期框占剩余宽度 */
  #filter-date { align-items: center; }
  #filter-date .f-label { width: auto; }
  .date-input { flex: 1; min-width: 130px; padding: 5px 8px; font-size: 12.5px; }

  /* 详情页底部按钮允许换行 */
  .detail-actions { flex-wrap: wrap; }

  /* 列表操作条：排序下拉收窄（不挤压统计文字）、导出按钮紧凑 */
  .list-bar { gap: 6px; flex-wrap: nowrap; }
  .list-bar .select { flex: 0 1 auto; width: 118px; min-width: 0; font-size: 12px; padding: 5px 6px; }
  .list-bar .btn { flex: none; font-size: 12px; padding: 5px 10px; }
  .list-bar .count-bar { font-size: 13.5px; white-space: nowrap; overflow: hidden; }

  /* 用户管理：表格转卡片，禁止横向滑动 */
  #view-admin .admin-table thead { display: none; }
  #view-admin .admin-table, #view-admin .admin-table tbody,
  #view-admin .admin-table tr, #view-admin .admin-table td { display: block; width: 100%; }
  #view-admin .admin-table tr {
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
  }
  #view-admin .admin-table td { border: none; padding: 6px 0; display: flex; align-items: baseline; gap: 10px; }
  #view-admin .admin-table td::before {
    content: ""; flex: none; width: 60px;
    font-size: 12px; color: var(--ink-faint); white-space: nowrap;
  }
  #view-admin .admin-table td:nth-child(1)::before { content: "用户名"; }
  #view-admin .admin-table td:nth-child(2)::before { content: "角色"; }
  #view-admin .admin-table td:nth-child(3)::before { content: "功能权限"; }
  #view-admin .admin-table td:nth-child(4)::before { content: "数据授权"; }
  #view-admin .admin-table td:nth-child(5)::before { content: "注册时间"; }
  #view-admin .admin-table td:nth-child(6)::before { content: "操作"; }
  #view-admin .admin-table td:nth-child(3), #view-admin .admin-table td:nth-child(4) { align-items: flex-start; }
  #view-admin .admin-table td:nth-child(3)::before, #view-admin .admin-table td:nth-child(4)::before { padding-top: 3px; }
  .perm-checks { flex-direction: column; gap: 8px; }
  .perm-checks label { white-space: nowrap; }

  /* 操作日志：表格转卡片（同用户管理），明细长文本可折行 */
  #view-audit .admin-table thead { display: none; }
  #view-audit .admin-table, #view-audit .admin-table tbody,
  #view-audit .admin-table tr, #view-audit .admin-table td { display: block; width: 100%; }
  #view-audit .admin-table tr {
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
  }
  #view-audit .admin-table td { border: none; padding: 5px 0; display: flex; align-items: baseline; gap: 10px; }
  #view-audit .admin-table td::before {
    content: ""; flex: none; width: 44px;
    font-size: 12px; color: var(--ink-faint); white-space: nowrap;
  }
  #view-audit .admin-table td:nth-child(1)::before { content: "时间"; }
  #view-audit .admin-table td:nth-child(2)::before { content: "用户"; }
  #view-audit .admin-table td:nth-child(3)::before { content: "动作"; }
  #view-audit .admin-table td:nth-child(4)::before { content: "对象"; }
  #view-audit .admin-table td:nth-child(5)::before { content: "明细"; }
  #view-audit .admin-table td:nth-child(5) { align-items: flex-start; }
  #view-audit .admin-table td:nth-child(5)::before { padding-top: 2px; }
  #view-audit .admin-table td > * { min-width: 0; word-break: break-all; }
  #view-audit .admin-table td[colspan]::before { content: ""; width: 0; }
  /* 日志筛选栏：输入框均分一行 */
  #view-audit .toolbar .input, #view-audit .toolbar .select { flex: 1 1 calc(50% - 4px); width: auto !important; }
  #view-audit .toolbar .btn { flex: 0 0 auto; }
}

/* 登录页合规页脚（备案号 + 隐私政策，固定底部居中，两端通用） */
.login-footer {
  position: fixed; bottom: 14px; left: 0; right: 0;
  text-align: center; font-size: 12px; color: var(--ink-faint);
}
.login-footer a { color: var(--ink-faint); text-decoration: none; margin: 0 6px; }
.login-footer a:hover { color: var(--accent); }

/* 登录页合规页脚·移动端：竖排三行，隐藏分隔符，避免长备案号拦腰折断 */
@media (max-width: 760px) {
  .login-footer {
    position: static; margin-top: 34px; padding-bottom: 20px;
    display: flex; flex-direction: column; gap: 6px; align-items: center;
  }
  .login-footer span { display: none; }
  .login-footer a { margin: 0; }
}

/* ---------- 小红书笔记生成（与会员页同一语言：暖底裸排、细线、衬线感；不加卡片） ---------- */
.xhs-layout { display: block; }
.xhs-input { max-width: 760px; margin: 0 auto; }
.xhs-result { max-width: 860px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 14px; }
.xhs-drop {
  border: 1px dashed var(--line); border-radius: 10px; padding: 52px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  cursor: pointer; color: var(--ink-faint); font-size: 14px; text-align: center;
  transition: border-color .15s;
}
.xhs-drop:hover { border-color: var(--ink-faint); color: var(--ink); }
.xhs-drop-icon { font-size: 32px; }
.xhs-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.xhs-thumb { position: relative; width: 64px; height: 64px; }
.xhs-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.xhs-thumb-x {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  background: var(--ink); color: var(--bg); border-radius: 50%;
  font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.xhs-styles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.xhs-styles .chip { padding: 7px 14px; font-size: 13.5px; }
/* 风格说明感叹号：中性灰版 drop-warn（复用其悬停/点按弹窗机制） */
.info-tip { background: var(--ink-faint); margin-left: 6px; }
.info-tip::after { max-width: 280px; text-align: left; }
/* 风格指南：感叹号小圆点 + 居中弹窗内容（标题/副标题/正文全部居中） */
.xhs-guide-modal h3, .xhs-guide-modal .m-sub { text-align: center; }
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-faint); color: var(--bg);
  font-size: 11px; font-weight: 700; font-style: normal;
  margin-left: 6px; cursor: pointer; vertical-align: middle;
}
.info-dot:hover { background: var(--ink); }
.xhs-guide { text-align: center; }
.xhs-guide-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.xhs-guide-item:last-child { border-bottom: none; }
.xhs-guide-name { font-weight: 600; font-size: 14.5px; margin-bottom: 5px; }
.xhs-guide-line { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
.xhs-go { width: 100%; margin-top: 20px; padding: 14px; font-size: 16px; }
.xhs-field-head { display: flex; justify-content: space-between; align-items: center; }
.xhs-field-head .label { margin-bottom: 4px; }
.xhs-field textarea { resize: vertical; }
.xhs-warn {
  border: 1px solid #e0b13c; background: rgba(224, 177, 60, .08);
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
}
.xhs-warn-title { font-weight: 600; margin-bottom: 6px; }
.xhs-warn-item { color: var(--ink); line-height: 1.8; }
.xhs-ops { display: flex; gap: 10px; }
@media (max-width: 760px) {
  .xhs-ops { flex-direction: column; }
  .xhs-ops .btn { width: 100%; }
}

/* 小红书多篇结果卡片 */
.xhs-note-card { border-top: 2px solid var(--ink); padding-top: 14px; }
.xhs-note-card + .xhs-note-card { margin-top: 26px; }
.xhs-note-no { font-size: 12px; color: var(--ink-faint); letter-spacing: .1em; margin-bottom: 10px; }
.xhs-note-card .xhs-copy-one { width: 100%; margin-top: 4px; }

/* 小红书多篇 Tab：普通一排胶囊，点击切换显示对应篇 */
.xhs-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* 篇数选择 chips（与风格 chips 同款样式，但独立容器避免选择器冲突） */
.xhs-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.xhs-counts .chip { padding: 7px 14px; font-size: 13.5px; }

/* 生成记录入口 + 弹窗列表 */
.xhs-history-btn { width: 100%; margin-top: 10px; }
.xhs-history { max-height: 60vh; overflow-y: auto; }
.xhs-history-item {
  padding: 12px 6px; border-bottom: 1px solid var(--line);
  cursor: pointer; border-radius: 8px; transition: background .15s;
}
.xhs-history-item:hover { background: rgba(0, 0, 0, .04); }
.xhs-history-item:last-child { border-bottom: none; }
.xhs-history-title { font-weight: 600; font-size: 14px; line-height: 1.5; }
.xhs-history-meta { font-size: 12px; color: var(--ink-faint); margin-top: 4px; letter-spacing: .04em; }
.xhs-history-empty { padding: 28px 0; text-align: center; color: var(--ink-faint); font-size: 13px; }

/* 标题字数统计（小红书上限 20 字） */
.xhs-title-count { font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-left: 4px; }
.xhs-title-count.full { color: var(--danger); font-weight: 600; }

/* 静默合规标记：生成稿已被后台自动改写合规时展示 */
.xhs-autofix { font-size: 12.5px; color: #3a7d44; margin: 0 0 10px; letter-spacing: .03em; }