/* ============================================================================
 * 微信生态轻量卡片视觉层（2026-10-15）
 * ----------------------------------------------------------------------------
 * 适用范围：客户端（vip）与红娘端（hn）全部页面。
 * 引入位置：必须放在 app.css 之后（同权重后加载生效）。
 *
 * 设计规则（对应用户给定的样式约束）：
 *   ① 标题层级分明：板块标题为一级标题——粗体、深色、上方留白充足；
 *      卡片内二级信息（工号/城市/时间/备注）为浅灰小字，弱化展示。
 *   ② 核心人名显眼：头像圆形、姓名加粗放大；辅助信息压到 13px 浅灰。
 *   ③ 功能入口突出：整行可点（左文字 + 右箭头）、上下内边距加大提升触摸区、
 *      条目之间用 1px 浅灰细分割线，最后一题不留线。
 *   ④ 整体柔和简约：卡片不投影、不描边、圆角统一 12px；页面底色浅灰。
 *   ⑤ 配色克制：结构层只用「黑 / 深灰 / 浅灰」三色；
 *      品牌红仅保留给「主操作按钮 / 当前选中导航 / 语义状态标签」，避免界面花乱。
 *   ⑥ 触摸友好：可点区域最小高度 48px，移动端不出现细小手势目标。
 *
 * 说明：本文件只改视觉（字体层级 / 间距 / 颜色 / 圆角 / 分割线），
 *      不改动任何业务逻辑、字段绑定与交互行为。
 * ========================================================================== */

:root {
  /* 结构层三色：全部为纯灰阶（R=G=B），确保「只用黑 / 深灰 / 浅灰」 */
  --wx-ink: #111111;        /* 一级标题、核心人名（黑） */
  --wx-ink-2: #333333;      /* 正文（深灰） */
  --wx-gray: #8c8c8c;       /* 次要信息：工号 / 城市 / 时间 / 备注（浅灰） */
  --wx-gray-2: #b5b5b5;     /* 最弱提示文案、右箭头（更浅的灰） */
  /* 面与线 */
  --wx-bg: #f5f5f5;         /* 页面底色 */
  --wx-card: #ffffff;       /* 卡片面 */
  --wx-line: #eeeeee;       /* 1px 细分割线 */
  --wx-press: #f7f7f7;      /* 点击态底色 */
  /* 结构尺度 */
  --wx-radius: 12px;
  --wx-row-h: 52px;         /* 功能入口整行高度（触摸友好） */
  --wx-gap: 12px;
}

/* ==================== 1. 页面基底与字体层级 ==================== */
html, body { background: var(--wx-bg); }
body {
  color: var(--wx-ink-2);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app { background: var(--wx-bg); }

/* ==================== 2. 卡片：白面、无投影、统一圆角 ==================== */
.card {
  background: var(--wx-card);
  border: none;
  border-radius: var(--wx-radius);
  box-shadow: none;
  padding: 16px;
  margin-bottom: var(--wx-gap);
}
/* 卡片内不需要再叠加投影／描边（兼容历史写法） */
.card [class*="shadow"] { box-shadow: none; }

/* ==================== 3. 板块标题（一级） ==================== */
/* 粗体、深色；上方留白由卡片 padding 提供，下方与内容留 12px 呼吸感 */
.card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--wx-ink);
  letter-spacing: 0;
  line-height: 1.35;
  margin: 4px 0 12px;
}
/* 卡片内的小节标题（二级）：比一级小一号、深灰，不抢层级 */
.sec-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--wx-ink);
  margin: 14px 0 8px;
}
.card-title-row { margin-bottom: 12px; }
.card-title-row .card-title { margin-bottom: 0; }
.more { font-size: 13px; color: var(--wx-gray); }

/* ==================== 4. 功能入口 / 列表项：整行可点 + 细分割线 ==================== */
/* 关键点：上下内边距加大到能撑起 52px 触摸区；分割线只加在条目之间，末条不留线 */
.entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--wx-row-h);
  padding: 15px 2px;
  font-size: 16px;
  color: var(--wx-ink-2);
  /* 分割线拆成三个长写属性：避免简写里带 var() 时被个别解析器整条丢弃 */
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--wx-line);
  transition: background-color .12s ease;
}
.entry:last-child { border-bottom: none; }
.entry:active { background: var(--wx-press); }
.entry > span:first-child { flex: 1; min-width: 0; }
/* 右箭头统一：更细、更浅，不抢文字 */
.arrow {
  flex-shrink: 0;
  color: var(--wx-gray-2);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}

/* 其它以「行」为单位的列表：同一分割线语言，避免页面出现两种线条风格 */
.kv,
.ap-item,
.nt-item,
.act-item,
.order,
.quota,
.pkg,
.todo,
.follow-item,
.qu-item,
.code-item,
.faq-item {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--wx-line);
}
.kv:last-child,
.ap-item:last-child,
.nt-item:last-child,
.act-item:last-child,
.order:last-child,
.quota:last-child,
.pkg:last-child,
.todo:last-child,
.follow-item:last-child,
.qu-item:last-child,
.code-item:last-child,
.faq-item:last-child { border-bottom: none; }

/* 信息键值行：键浅灰定宽、值深色，左右对齐整齐 */
.kv { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; }
.kv .k { flex-shrink: 0; width: 84px; color: var(--wx-gray); font-size: 14px; }
.kv .v { flex: 1; min-width: 0; color: var(--wx-ink-2); font-size: 14px; word-break: break-all; }

/* 申请 / 通知类列表项：标题深色、时间与备注压到浅灰小字 */
.ap-item { padding: 14px 0; }
.ai-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-title { font-size: 16px; font-weight: 600; color: var(--wx-ink); }
.ai-sub { font-size: 13px; color: var(--wx-gray); margin-top: 5px; line-height: 1.5; }
.ai-desc { font-size: 13px; color: var(--wx-gray); margin-top: 5px; }
.ai-time { font-size: 12px; color: var(--wx-gray-2); margin-top: 6px; }
.ai-ops { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ==================== 5. 人物信息模块（红娘 / 会员 / 对话对象） ====================
   注意：只覆盖「白底卡片内」的人物块（.mk-* / .ch-* / .m-*）。
   客户端首页的 .hero 是品牌色渐变横幅（白字），视觉自成一体，此处刻意不动，
   避免深色文字落到渐变底上不可读。 */
/* 左圆形头像 + 右侧姓名加粗放大 + 下方浅灰小字（工号 / 城市） */
.mk-row, .chat-head, .m-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mk-avatar, .ch-avatar, .m-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  color: var(--wx-gray);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-avatar img, .ch-avatar img, .m-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mk-info, .ch-info, .m-info { flex: 1; min-width: 0; }
.mk-name, .ch-name, .m-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--wx-ink);
  line-height: 1.3;
}
.mk-sub, .ch-sub, .m-city, .m-desc {
  font-size: 13px;
  color: var(--wx-gray);
  margin-top: 4px;
  line-height: 1.5;
}
.mk-intro { font-size: 13px; color: var(--wx-gray); margin-top: 10px; line-height: 1.6; }

/* ==================== 6. 标签：收敛为柔和胶囊，去掉重彩底 ==================== */
.tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  background: #f2f2f2;
  color: var(--wx-gray);
  border: none;
}
.tag.ok { background: #eef3ee; color: #3f6b48; }
.tag.warn { background: #fdf4e7; color: #9a6b1f; }
.tag.danger { background: #fdeeee; color: #a5423c; }
.tag.muted { background: #f2f2f2; color: var(--wx-gray); }

/* ==================== 7. 按钮：轻量化，主操作才用品牌色 ==================== */
.btn-main {
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}
.btn-main.ghost {
  background: #fff;
  color: var(--wx-gray);
  border: 1px solid var(--wx-line);
}
.btn-mini {
  min-height: 30px;
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 500;
  background: var(--primary-bg);
  color: var(--primary);
  border: none;
}
.btn-mini.ghost { background: #f4f4f4; color: var(--wx-gray); }
.btn-mini:disabled { opacity: .5; }

/* 服务申请：详情页与修改页的并排按钮行（等宽、可点区域足够） */
.svc-ops, .svc-edit-ops { display: flex; gap: 10px; margin-top: 14px; }
.svc-ops .btn-main, .svc-edit-ops .btn-main { flex: 1; width: auto; }

/* ==================== 8. 提示与空态：最小字号 + 最浅灰，不抢焦点 ==================== */
.notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f7f7;
  color: var(--wx-gray);
  font-size: 12px;
  line-height: 1.7;
}
.notice.rp-rule, .notice.rp-tip {
  background: #f7f7f7;
  border: none;
  color: var(--wx-gray);
}
.notice.rp-rule b, .notice.rp-tip b { color: var(--wx-ink-2); }
.empty {
  text-align: center;
  color: var(--wx-gray-2);
  font-size: 13px;
  padding: 26px 0;
}
/* 卡片最下方的说明文案：最小字号、最浅灰 */
.card > .notice:last-child,
.card > .empty:last-child,
.card > .field-tip:last-child { margin-bottom: 0; }
.field-tip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--wx-gray);
  background: #f7f7f7;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.6;
}

/* ==================== 9. 门店公告横幅：保持轻量 ==================== */
.store-anno {
  background: #fff;
  border: none;
  border-radius: var(--wx-radius);
  box-shadow: none;
  padding: 14px 16px;
}
.store-anno-t { font-size: 15px; font-weight: 600; color: var(--wx-ink); }
.store-anno-d { font-size: 12px; color: var(--wx-gray-2); }

/* ==================== 10. 红娘端（hn）：容器与 Element Plus 同步轻量化 ==================== */
/* 主内容区底色与卡片间距对齐移动端视觉 */
.body { background: var(--wx-bg); }

/* 表格卡片：去掉投影与厚重描边，表头压成浅灰小字 */
.el-card {
  border: none !important;
  border-radius: var(--wx-radius) !important;
  box-shadow: none !important;
}
.el-table th.el-table__cell {
  background: #fafafa !important;
  color: var(--wx-gray) !important;
  font-weight: 500 !important;
}
.el-table td.el-table__cell { border-bottom: 1px solid var(--wx-line) !important; }
.el-table { --el-table-border-color: var(--wx-line); }

/* 表格内的行内操作按钮：统一为小胶囊，避免整屏蓝色链接抢焦点 */
.el-table .el-button.is-link { font-weight: 500; }

/* 二级 Tab（模块内切换）：与卡片同一分割线语言 */
.nav-tabs { border-bottom: 1px solid var(--wx-line); }

/* ==================== 11. 工具栏（列表页筛选条） ==================== */
/* 与卡片同宽同圆角，避免出现「游离」的裸控件 */
.toolbar {
  background: #fff;
  border-radius: var(--wx-radius);
  padding: 12px 14px;
  margin-bottom: var(--wx-gap);
  box-shadow: none;
}