/* =========================================================
   星灿情感馆 · 情感测试平台 — 设计系统 Design System v1.0
   适用：H5 移动端 + 后台管理端
   ========================================================= */

/* ---------- 1. 设计令牌 Design Tokens ---------- */
:root {
  /* 品牌色 */
  --brand-1: #7C3AED;
  --brand-2: #EC4899;
  --brand-3: #A855F7;
  --brand-grad: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(124,58,237,.12) 0%, rgba(236,72,153,.12) 100%);
  --brand-grad-dark: linear-gradient(160deg, #1B1035 0%, #2D1B4E 50%, #3B1D4A 100%);

  /* 功能色 */
  --accent: #F59E0B;
  --ok: #10B981;
  --warn: #F97316;
  --danger: #EF4444;
  --info: #3B82F6;

  /* 中性色 */
  --ink-1: #1A1523;
  --ink-2: #4A4458;
  --ink-3: #8B8697;
  --ink-4: #B9B5C4;
  --line: #EFECF5;
  --line-2: #E4E0EE;
  --bg: #F7F5FB;
  --card: #FFFFFF;

  /* 圆角 */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* 阴影 */
  --sh-1: 0 2px 12px rgba(28, 16, 60, .06);
  --sh-2: 0 10px 30px rgba(28, 16, 60, .10);
  --sh-3: 0 18px 44px rgba(28, 16, 60, .14);
  --sh-brand: none;

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --font: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink-1);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* <i> / <em> / <cite> 等在本项目里全部用来承载次级文字、图标与装饰，
   浏览器默认给它们的斜体会让中文明显变形；此前只在个别组件上逐个 font-style:normal，
   漏掉的地方就斜了。这里统一兜底恢复正体，逐组件的那几条规则保留即可（无害）。 */
i, em, cite, dfn, var, address { font-style: normal; }
/* 搜索关键词（kw_hl 输出 <em class="hl">）：不做任何高亮，也不斜体，与普通文字一致 */
.hl { font-style: normal; background: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; }
p { margin: 0; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #D8D3E4; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. 通用工具类 ---------- */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.grow { flex: 1; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.tc { text-align: center; }
.tr { text-align: right; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 文字层级 */
.t-2xs { font-size: 10px; } .t-xs { font-size: 11px; } .t-sm { font-size: 12px; }
.t-md { font-size: 13px; } .t-base { font-size: 14px; } .t-lg { font-size: 16px; }
.t-xl { font-size: 18px; } .t-2xl { font-size: 22px; } .t-3xl { font-size: 28px; }
.fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; }
.c-1 { color: var(--ink-1); } .c-2 { color: var(--ink-2); } .c-3 { color: var(--ink-3); }
.c-4 { color: var(--ink-4); }
.c-brand { color: var(--brand-1); } .c-pink { color: var(--brand-2); }
.c-accent { color: var(--accent); } .c-ok { color: var(--ok); }
.c-warn { color: var(--warn); } .c-danger { color: var(--danger); } .c-info { color: var(--info); }
.c-white { color: #fff; }
.grad-text {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 4. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; transition: .2s;
  border: 1px solid transparent; white-space: nowrap;
  /* 按钮也会由 <a> / <span> 承载（后台页头操作等），必须自带指针与去下划线：
     否则 <span class="btn"> 就是一段静态标签，完全看不出可以点 */
  cursor: pointer; text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand-grad); background-origin: border-box; color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: var(--sh-brand), 0 6px 18px rgba(124,58,237,.3); }
.btn-plain { background: #fff; color: var(--ink-1); border-color: var(--line-2); }
.btn-plain:hover { border-color: var(--brand-1); color: var(--brand-1); }
.btn-ghost { background: var(--brand-grad-soft); color: var(--brand-1); }
.btn-soft { background: #F3F0FA; color: var(--ink-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-warn { background: #FFF4E5; color: var(--warn); }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 11px; border-radius: var(--r-s); }
.btn-lg { height: 50px; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 5. 标签 / 徽章 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.tag-brand { background: var(--brand-grad-soft); color: var(--brand-1); }
.tag-pink { background: #FDEBF4; color: var(--brand-2); }
.tag-ok { background: #E6F8F1; color: var(--ok); }
.tag-warn { background: #FFF3E6; color: var(--warn); }
.tag-danger { background: #FDECEC; color: var(--danger); }
.tag-info { background: #EAF1FE; color: var(--info); }
.tag-gray { background: #F3F1F8; color: var(--ink-3); }
.tag-solid-brand { background: var(--brand-grad); color: #fff; }

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
}
.dot-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,.16);
}

/* ---------- 6. 卡片 / 面板 ---------- */
.card {
  background: var(--card); border-radius: var(--r-l);
  box-shadow: var(--sh-1); padding: var(--sp-4);
}
.card-flat { background: var(--card); border-radius: var(--r-l); border: 1px solid var(--line); }
.card-title { font-size: 15px; font-weight: 700; }

/* ---------- 7. 头像 ---------- */
.avatar {
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--brand-grad-soft); display: flex;
  align-items: center; justify-content: center;
  font-weight: 700; color: var(--brand-1); overflow: hidden;
}
.av-24 { width: 24px; height: 24px; font-size: 11px; }
.av-32 { width: 32px; height: 32px; font-size: 13px; }
.av-40 { width: 40px; height: 40px; font-size: 15px; }
.av-48 { width: 48px; height: 48px; font-size: 17px; }
.av-56 { width: 56px; height: 56px; font-size: 20px; }
.av-72 { width: 72px; height: 72px; font-size: 26px; }
.av-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(124,58,237,.35); }

/* ---------- 8. 表单 ---------- */
.field { margin-bottom: 14px; }
.field-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 7px;
}
.field-label .req { color: var(--danger); margin-left: 2px; }
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-m);
  padding: 0 14px; height: 46px; background: #fff; color: var(--ink-1);
  outline: none; transition: .2s; font-size: 14px;
}
.textarea { height: auto; padding: 12px 14px; resize: none; line-height: 1.6; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input-icon { position: relative; }
.input-icon .input { padding-left: 42px; }
.input-icon > .ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: 16px;
}
.hint { font-size: 11px; color: var(--ink-4); margin-top: 5px; }
.field-row { display: flex; gap: 10px; }

/* 单选卡（如性别选择） */
.choice {
  flex: 1; border: 1.5px solid var(--line-2); border-radius: var(--r-m);
  padding: 14px 12px; text-align: center; transition: .2s;
  background: #fff; cursor: pointer;
}
.choice .ic { font-size: 22px; }
.choice .tx { font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--ink-2); }
.choice.is-on {
  border-color: var(--brand-1); background: var(--brand-grad-soft);
}
.choice.is-on .tx { color: var(--brand-1); }

/* ---------- 9. 开关 ---------- */
.switch {
  position: relative; width: 46px; height: 26px; border-radius: var(--r-pill);
  background: #DDD8E8; transition: .25s; flex-shrink: 0; cursor: pointer;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: .25s;
}
.switch.is-on { background: var(--brand-grad); }
.switch.is-on::after { left: 23px; }

/* ---------- 10. 进度 ---------- */
.progress { height: 6px; border-radius: var(--r-pill); background: #EFECF5; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand-grad); }

/* ---------- 11. 空状态 ---------- */
.empty { padding: 48px 20px; text-align: center; color: var(--ink-3); }
.empty .ic { font-size: 44px; opacity: .5; margin-bottom: 10px; }

/* ---------- 12. 分割 ---------- */
.divider { height: 1px; background: var(--line); }
.divider-text {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-4); font-size: 12px; margin: 18px 0;
}
.divider-text::before, .divider-text::after {
  content: ""; flex: 1; height: 1px; background: var(--line-2);
}

/* ---------- 13. 弹层 ---------- */
.mask {
  position: absolute; inset: 0; background: rgba(18, 10, 40, .5);
  backdrop-filter: blur(2px); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.mask.center { align-items: center; }
.sheet {
  width: 100%; background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 18px 22px; animation: up .28s ease;
}
.sheet-bar { width: 38px; height: 4px; border-radius: 2px; background: #E4E0EE; margin: 6px auto 14px; position: relative; }
/* 横条视觉只有 38×4px，却是「点击收回弹层」的抓手，向外扩一圈透明热区（不影响视觉） */
.sheet-bar::before { content: ""; position: absolute; left: -60px; right: -60px; top: -12px; bottom: -12px; }
.sheet-title { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.dialog {
  width: 84%; background: #fff; border-radius: var(--r-l); padding: 22px 18px 0;
  text-align: center; animation: pop .24s ease;
}
.dialog .dt { font-size: 16px; font-weight: 700; }
.dialog .dd { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.dialog .dact { display: flex; border-top: 1px solid var(--line); margin-top: 18px; }
.dialog .dact > * {
  flex: 1; height: 48px; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.dialog .dact > * + * { border-left: 1px solid var(--line); }
@keyframes up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 14. Toast ---------- */
.toast {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: rgba(20, 12, 40, .86); color: #fff; padding: 10px 18px;
  border-radius: var(--r-m); font-size: 13px; z-index: 99; white-space: nowrap;
}

/* =========================================================
   15. H5 移动端骨架
   ========================================================= */
/* 禁止文档级滚动：滚动只允许发生在 .scroll-area 内部。
   这样 .tabbar 等作为 .phone 弹性成员的底栏永远贴在视口底部，不会被整页拉走。
   后台页面使用 <body class="adm-body">，不受此规则影响。 */
body.h5-app {
  height: 100vh; height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.phone {
  width: 100%; max-width: 640px; margin: 0 auto;
  height: 100vh; height: 100dvh; background: #fff; position: relative;
  overflow: hidden; display: flex; flex-direction: column;
  font-size: 14px;
}
.status-bar {
  height: 44px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 20px 0 26px;
  font-size: 13px; font-weight: 700; color: var(--ink-1);
}
.status-bar.on-dark { color: #fff; }
.status-bar .sb-right { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 24px; border-radius: var(--r-pill); background: #111; z-index: 60;
}
.navbar {
  height: 48px; flex-shrink: 0; display: flex; align-items: center;
  padding: 0 16px; gap: 12px; background: #fff; position: relative;
}
.navbar.on-dark { background: transparent; color: #fff; }
.navbar .nb-back { font-size: 20px; width: 24px; }
.navbar .nb-title { font-size: 17px; font-weight: 700; }
.navbar .nb-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 18px; }
.navbar.line { border-bottom: 1px solid var(--line); }

.scroll-area {
  flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;
  scrollbar-width: none;
}
.scroll-area::-webkit-scrollbar { display: none; }
.page-pad { padding: 0 16px 16px; }

.tabbar {
  height: 62px; flex-shrink: 0; display: flex; background: #fff;
  border-top: 1px solid var(--line); padding-bottom: 8px;
}
.tabbar .tb {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: var(--ink-4); font-size: 10px;
  position: relative;
}
.tabbar .tb .ic { font-size: 20px; line-height: 1; }
.tabbar .tb.is-on { color: var(--brand-1); }
.tabbar .tb.is-on .ic { filter: drop-shadow(0 3px 6px rgba(124,58,237,.35)); }

/* 底部导航未读角标（用于「消息」入口） */
.tabbar .tb .tb-badge {
  position: absolute; top: 5px; left: 50%; margin-left: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff; box-sizing: content-box;
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
}
/* 顶部导航消息角标（深色头部用白边） */
.tb-badge.on-dark { border-color: rgba(255,255,255,.7); }

/* 底部 Home 指示条（手机外壳装饰，已隐藏；需要时把 display:none 去掉即可） */
.home-bar {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: #111; opacity: .85; z-index: 60;
  display: none;
}

/* H5 渐变头部 */
.hero {
  background: var(--brand-grad); color: #fff; padding: 0 20px 60px;
  border-radius: 0; position: relative;
}
.hero-deco {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.14);
}
.hero-deco.a { width: 150px; height: 150px; top: -60px; right: -40px; }
.hero-deco.b { width: 90px; height: 90px; bottom: -30px; left: -30px; }

/* 板块入口网格 */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.entry {
  border-radius: var(--r-l); padding: 16px; color: #fff;
  position: relative; overflow: hidden; min-height: 108px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.entry .e-ico { font-size: 24px; }
.entry .e-name { font-size: 15px; font-weight: 700; margin-top: 4px; }
.entry .e-desc { font-size: 10px; opacity: .82; margin-top: 2px; }
.entry .e-bg { position: absolute; right: -18px; bottom: -18px; font-size: 76px; opacity: .16; }
.entry-1 { background: linear-gradient(135deg, #7C3AED, #A855F7); }
.entry-2 { background: linear-gradient(135deg, #2D1B4E, #6D28D9); }
.entry-3 { background: linear-gradient(135deg, #EC4899, #F472B6); }
.entry-4 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.entry-5 { background: linear-gradient(135deg, #BE185D, #EC4899); }   /* 情感倾诉（粉） */
.entry-6 { background: linear-gradient(135deg, #1E1B4B, #6366F1); }   /* 游戏陪玩 */
.entry-7 { background: linear-gradient(135deg, #4C1D95, #8B5CF6); }   /* 星座匹配 */
/* 通栏板块入口（用于 S 级主板块） */
.entry.wide {
  grid-column: span 2; min-height: 92px;
  flex-direction: row; align-items: center; gap: 14px;
}
.entry.wide .e-body { flex: 1; }
.entry.wide .e-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.entry.wide .e-tags .tag { background: rgba(255,255,255,.22); color: #fff; }
.entry.wide .e-cta {
  flex-shrink: 0; align-self: center; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.24); padding: 7px 12px; border-radius: 999px;
}

/* 横向滚动 */
.hscroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.hscroll::-webkit-scrollbar { display: none; }

/* 列表行 */
.lrow {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.lrow:last-child { border-bottom: 0; }
.lrow .l-ic {
  width: 34px; height: 34px; border-radius: var(--r-s); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.chev { color: var(--ink-4); font-size: 15px; }

/* 价格 */
.price { color: var(--danger); font-weight: 700; }
.price .u { font-size: 11px; }
.price .n { font-size: 18px; }

/* 头像墙/双列卡片 */
.person-card {
  background: #fff; border-radius: var(--r-l); padding: 14px;
  box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 10px;
}

/* =========================================================
   16. 后台管理端骨架（PC）
   ========================================================= */
.admin {
  display: flex; height: 100%; background: #F5F6FA;
  font-size: 13px; min-width: 1180px;
}
.sidebar {
  width: 218px; flex-shrink: 0; background: #1B1430; color: #CFC8E4;
  display: flex; flex-direction: column; padding: 18px 12px;
}
.sb-logo {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px 20px;
  color: #fff; font-size: 16px; font-weight: 700;
}
.sb-logo .lg {
  width: 30px; height: 30px; border-radius: 9px; background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.sb-group { font-size: 10px; letter-spacing: .1em; color: #6E6592; padding: 14px 12px 7px; }
.sb-item {
  display: flex; align-items: center; gap: 10px; height: 40px;
  padding: 0 12px; border-radius: var(--r-s); margin-bottom: 2px;
  font-size: 13px; cursor: pointer; transition: .18s; position: relative;
}
.sb-item .ic { font-size: 16px; width: 18px; text-align: center; }
.sb-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-item.is-on { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand); }
.sb-item .sb-badge {
  margin-left: auto; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill);
}
.sb-foot { margin-top: auto; padding: 12px; font-size: 11px; color: #6E6592; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar {
  height: 60px; flex-shrink: 0; background: #fff; border-bottom: 1px solid #EDEBF3;
  display: flex; align-items: center; padding: 0 22px; gap: 16px;
}
.crumb { color: var(--ink-3); font-size: 13px; }
.crumb b { color: var(--ink-1); }
.ab-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; background: #F5F4F9;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  position: relative; cursor: pointer;
}
.icon-btn .badge { position: absolute; top: -4px; right: -4px; }
.who { display: flex; align-items: center; gap: 9px; }

.content { flex: 1; overflow-y: auto; padding: 20px 22px 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.page-head h2 { font-size: 20px; }
.page-head .sub { color: var(--ink-3); font-size: 12px; margin-top: 4px; }

/* 统计卡 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat {
  background: #fff; border-radius: var(--r-m); padding: 16px;
  box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.stat .s-label { font-size: 12px; color: var(--ink-3); }
.stat .s-val { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.stat .s-val .u { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.stat .s-foot { font-size: 11px; margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.stat .s-ico {
  position: absolute; right: 12px; top: 12px; width: 34px; height: 34px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px;
}

/* 面板 */
.panel {
  background: #fff; border-radius: var(--r-m); box-shadow: var(--sh-1);
  margin-bottom: 16px; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid #F1EFF7; gap: 12px;
}
.panel-head h3 { font-size: 15px; }
.panel-body { padding: 18px; }
.panel-body.tight { padding: 0; }

/* 表格 */
table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tb th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding: 11px 14px; background: #FAF9FC; border-bottom: 1px solid #F1EFF7;
  white-space: nowrap;
}
table.tb td {
  padding: 13px 14px; border-bottom: 1px solid #F5F3F9; vertical-align: middle;
}
table.tb tbody tr:hover { background: #FCFBFE; }
table.tb tbody tr:last-child td { border-bottom: 0; }
/* 注意：不要把 display:flex 直接加在 <td> 上。
   td 一旦不是 table-cell，vertical-align:middle 就失效，
   操作列的内容会顶到行上方，与同行其它列错开（实测差 7px）。
   所以 td 保持 table-cell，flex 下移一层交给 .ops-in。 */
table.tb .ops { white-space: nowrap; }
table.tb .ops-in { display: flex; align-items: center; gap: 10px; }
/* 操作列的每个操作都渲染成同款小按钮。
   历史问题：这里原来只写了 table.tb .ops a，<a> 有紫色文字但不像按钮；
   而真正提交表单的 <button class="lk"> 的 .lk 从未定义过
   （.lk 只存在于前台表白墙 .wcard .bot 作用域内），
   后台操作按钮全部掉成浏览器默认的灰色凸起按钮；
   另外 table.tb .ops a.dg 只匹配 <a>，<button class="lk dg"> 的危险色也没生效。
   下面同时覆盖 <a> 与 <button>，让两种元素外观统一。 */
table.tb .ops-in > a,
table.tb .ops-in button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 10px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: #fff;
  color: var(--brand-1); font-family: inherit; font-size: 12px; font-weight: 500;
  line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; appearance: none; transition: .18s;
}
table.tb .ops-in > a:hover,
table.tb .ops-in button:hover { border-color: var(--brand-1); background: var(--brand-grad-soft); }
table.tb .ops-in > a.dg,
table.tb .ops-in button.dg { color: var(--danger); border-color: #F7C9D4; background: #FFF7F9; }
table.tb .ops-in > a.dg:hover,
table.tb .ops-in button.dg:hover { border-color: var(--danger); background: #FDECEC; }

/* 筛选 */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters .input, .filters .select { height: 36px; width: auto; min-width: 150px; font-size: 13px; border-radius: var(--r-s); }

/* 分页 */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 18px; }
.pager .pg {
  min-width: 30px; height: 30px; border-radius: 8px; background: #fff;
  border: 1px solid var(--line-2); display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--ink-2); cursor: pointer; padding: 0 8px;
}
.pager .pg.is-on { background: var(--brand-grad); background-origin: border-box; color: #fff; border-color: transparent; }

/* 后台小标签页 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #F1EFF7; padding: 0 18px; }
.tabs .tab {
  padding: 12px 14px; font-size: 13px; font-weight: 500; color: var(--ink-3);
  border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.tabs .tab.is-on { color: var(--brand-1); border-bottom-color: var(--brand-1); font-weight: 600; }

/* 审核信息栅格 */
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.kv-3 { grid-template-columns: repeat(3, 1fr); }
.kv .k { font-size: 12px; color: var(--ink-3); }
.kv .v { font-size: 13px; margin-top: 3px; font-weight: 500; }

/* 认证材料缩略 */
.img-box {
  width: 92px; height: 66px; border-radius: 10px; background: #F2EFF9;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--ink-4); border: 1px solid var(--line);
}

/* =========================================================
   17. 设计板（原型总览）
   ========================================================= */
.board {
  min-height: 100vh; background:
    radial-gradient(900px 500px at 8% -6%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(800px 500px at 96% 4%, rgba(236,72,153,.14), transparent 60%),
    #F4F2F9;
  padding: 0 0 80px;
}
.board-top {
  position: sticky; top: 0; z-index: 80; backdrop-filter: blur(14px);
  background: rgba(255,255,255,.82); border-bottom: 1px solid rgba(228,224,238,.8);
}
.board-top-in { max-width: 1680px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 16px; }
.board-logo { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 700; }
.board-logo .lg {
  width: 38px; height: 38px; border-radius: 12px; background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: var(--sh-brand); color: #fff;
}
.board-nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.board-nav a {
  padding: 8px 15px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); transition: .2s;
}
.board-nav a:hover { border-color: var(--brand-1); color: var(--brand-1); }
.board-sec { max-width: 1680px; margin: 0 auto; padding: 40px 32px 0; }
.board-sec > h2 {
  font-size: 22px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.board-sec > h2 .num {
  width: 30px; height: 30px; border-radius: 10px; background: var(--brand-grad);
  color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.board-sec > .desc { color: var(--ink-3); font-size: 13px; margin-bottom: 24px; }

.frames { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.frame-item { display: flex; flex-direction: column; align-items: center; gap: 0; }
.frame-item .cap { text-align: center; margin-top: 14px; max-width: 375px; }
.frame-item .cap .n { font-size: 14px; font-weight: 700; }
.frame-item .cap .d { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* 手机外壳 */
.device {
  width: 395px; height: 832px; border-radius: 46px; background: #fff;
  padding: 10px; box-shadow: 0 24px 60px rgba(28,16,60,.20), 0 0 0 1px rgba(28,16,60,.06);
  position: relative;
}
.device .dev-screen {
  width: 375px; height: 812px; border-radius: 38px; overflow: hidden;
  position: relative; background: #fff;
}
.device iframe { width: 375px; height: 812px; border: 0; display: block; }
.device .dev-hw { display: none; }

/* 电脑外壳 */
.browser {
  width: 1180px; height: 780px; border-radius: 14px; background: #fff;
  box-shadow: 0 24px 60px rgba(28,16,60,.18), 0 0 0 1px rgba(28,16,60,.06);
  overflow: hidden; display: flex; flex-direction: column;
}
.browser-bar {
  height: 38px; background: #EDEBF2; display: flex; align-items: center;
  padding: 0 14px; gap: 8px; flex-shrink: 0;
}
.browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.browser-bar .url {
  margin-left: 12px; flex: 1; height: 24px; border-radius: var(--r-pill);
  background: #fff; display: flex; align-items: center; padding: 0 12px;
  font-size: 11px; color: var(--ink-3); gap: 6px;
}
.browser iframe { flex: 1; width: 1180px; border: 0; display: block; background: #F5F6FA; }

/* 说明卡 */
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.note {
  background: #fff; border-radius: var(--r-m); padding: 18px;
  box-shadow: var(--sh-1); border-left: 3px solid var(--brand-1);
}
.note h4 { font-size: 14px; margin-bottom: 8px; }
.note p, .note li { font-size: 12.5px; color: var(--ink-2); line-height: 1.75; }
.note ul { padding-left: 16px; list-style: disc; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.legend .sw { display: flex; align-items: center; gap: 7px; }
.legend .sw i { width: 20px; height: 20px; border-radius: 6px; display: block; }

/* =========================================================
   18. 个人照片 · 服务商主页
   —— 照片位为「插槽」：放入真实照片（.ph-img 的 background-image）
      即自动覆盖占位；未放入时显示人像剪影占位。
   ========================================================= */
.ph-img {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background-size: cover; background-position: center 20%;
  pointer-events: none;
}
.avatar.av-photo { position: relative; }
.cover .ph-img { opacity: .5; background-position: center 30%; }
.hero .ph-img { opacity: .22; background-position: center 26%; }

/* 照片墙（1 大 + 5 小） */
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph {
  position: relative; overflow: hidden; border-radius: 13px; aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, var(--ph-a, #EFE7FE), var(--ph-b, #FCE7F3));
  color: var(--ph-ink, #7C3AED);
}
.ph-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.ph:active { transform: scale(.985); }
.ph-sil {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64%; height: 76%; z-index: 1; opacity: .3;
}
.ph-sil::before {
  content: ""; position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
  width: 38%; aspect-ratio: 1; border-radius: 50%; background: currentColor;
}
.ph-sil::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 46%;
  border-radius: 50% 50% 6px 6px / 62% 62% 0 0; background: currentColor;
}
.ph-tag {
  position: absolute; z-index: 3; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; color: #fff; white-space: nowrap;
  background: rgba(20, 12, 40, .42); backdrop-filter: blur(6px);
}
.ph-tag.tl { left: 8px; top: 8px; }
.ph-tag.bl { left: 8px; bottom: 8px; }
.ph-tag.br { right: 8px; bottom: 8px; }
.ph-more {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center;
  justify-content: center; background: rgba(20, 12, 40, .46); color: #fff;
  font-size: 15px; font-weight: 800; backdrop-filter: blur(2px);
}

/* 个人照片 · 4 列宫格（横向排列，一行 4 张）
   —— 纯图片展示，不做任何分类；每格点击跳转到对应大图弹层 */
.ph-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ph-grid-4 .ph { border-radius: 11px; }
.ph-grid-4 .ph-img { background-size: contain; background-position: center; }

/* 大图查看（纯 CSS :target 弹层，支持左右切换） */
.pv {
  position: absolute; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: rgba(10, 6, 20, .95); opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.pv:target { opacity: 1; visibility: visible; }
.pv-top {
  display: flex; align-items: center; gap: 10px; color: #fff;
  padding: 52px 18px 12px; font-size: 12px;
}
.pv-x {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px;
}
.pv-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 18px; }
.pv-photo {
  position: relative; max-width: 100%; max-height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-l); color: rgba(255, 255, 255, .9);
  background: linear-gradient(155deg, #3B2566, #6D2464);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.pv-img { max-width: 100%; max-height: 76vh; width: auto; height: auto; object-fit: contain; display: block; border-radius: var(--r-l); }
.pv-foot { padding: 16px 18px 6px; display: flex; align-items: center; gap: 12px; color: #fff; }
.pv-arrow {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.pv-dots { display: flex; gap: 6px; justify-content: center; align-items: center; }
.pv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .32); }
.pv-dots i.on { width: 16px; border-radius: 3px; background: #fff; }
.pv-tip { font-size: 10.5px; color: rgba(255, 255, 255, .58); text-align: center; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); }

/* =========================================================
   19. 服务者主页 · 引流语音（可选设置 1 条）
   —— 服务者「可选」录制 1 条引流语音（≤20s、本人录制、平台审核通过后展示）；
      未设置时服务者主页不展示该模块（不留空位）。
      用户侧：.vintro   服务者侧：.vrec
   ========================================================= */
.vintro {
  display: flex; align-items: center; gap: 11px;
  padding: 13px; border-radius: var(--r-l);
  background: linear-gradient(120deg, #F8F4FF 0%, #FDF2F8 100%);
  border: 1px solid #EADCFB; box-shadow: var(--sh-1);
}
.vintro .vplay {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-grad); color: #fff; font-size: 15px;
  box-shadow: none;
}
.vintro .vplay:active { transform: scale(.95); }
.vintro .vplay.is-playing { animation: vpulse 1.6s infinite; }
@keyframes vpulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: none; }
}
.vintro .vt { font-size: 13px; font-weight: 700; color: #5B21B6; }
.vintro .vd { font-size: 10.5px; color: #8B7BB8; margin-top: 2px; }
.vwv { display: flex; align-items: flex-end; gap: 2px; height: 18px; margin-top: 7px; }
.vwv i { width: 3px; height: 6px; border-radius: 2px; background: #D8C7F7; }
.vintro.is-playing .vwv i { background: #A78BFA; animation: vwv 1s infinite ease-in-out; }
@keyframes vwv { 0%, 100% { height: 5px; opacity: .55; } 50% { height: 18px; opacity: 1; } }
.vintro .vtime {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #7C3AED;
  background: #fff; border: 1px solid #EADCFB; border-radius: 999px; padding: 3px 9px;
}
.vtrack { height: 4px; border-radius: 2px; background: #E9E1FB; margin-top: 8px; overflow: hidden; }
.vtrack i { display: block; height: 100%; width: 0; background: var(--brand-grad); border-radius: 2px; }
.vintro.is-playing .vtrack i { width: 100%; transition: width var(--vdur, 18s) linear; }

/* 服务者侧：录制 / 管理 */
.vrec {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px;
  border-radius: var(--r-m); background: #fff; border: 1px dashed var(--line-2);
}
.vrec .vmic {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: #F3F0FA; color: var(--brand-1);
}
.vrec.is-rec { border-style: solid; border-color: #FBCFE8; background: #FFF7FA; }
.vrec.is-rec .vmic { background: #FDEBF4; color: #DB2777; animation: vpulse 1.2s infinite; }
.vbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* =========================================================
   20. 首页悬浮客服（头像 / 气泡 / 在线点 / 咨询弹窗）
   —— 客服头像、文案与跳转链接均由后台「平台设置 → 在线客服」配置；
      未开启时首页不渲染该悬浮入口。
   ========================================================= */
.csfab {
  position: absolute; right: 14px; bottom: 78px; z-index: 55;
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
}
.csfab .cs-bubble {
  position: relative; background: #fff; border: 1px solid var(--line-2);
  box-shadow: var(--sh-2); border-radius: 12px 12px 4px 12px;
  padding: 6px 26px 6px 11px; font-size: 11.5px; color: var(--ink-2); font-weight: 500;
  white-space: nowrap; animation: csb 2.6s ease-in-out infinite;
}
@keyframes csb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.csfab .cs-bubble .cs-x {
  position: absolute; right: 6px; top: 3px; font-size: 12px; line-height: 1;
  color: var(--ink-4); background: none; padding: 2px;
}
.csfab .cs-av {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  color: #fff; background: linear-gradient(135deg, #A78BFA, #F472B6);
  border: 2px solid #fff; box-shadow: none;
}
.csfab .cs-av::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, .55); animation: csring 1.8s ease-out infinite;
}
@keyframes csring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.2); opacity: 0; } }
.csfab .cs-av:active { transform: scale(.94); }
.cs-dot {
  position: absolute; right: 0; bottom: 3px; width: 11px; height: 11px;
  border-radius: 50%; background: #22C55E; border: 2px solid #fff;
}
.cs-head { display: flex; align-items: center; gap: 11px; }
.cs-head .cs-hav {
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  color: #fff; background: linear-gradient(135deg, #A78BFA, #F472B6);
}
.cs-head .cs-hav .cs-dot { right: 0; bottom: 2px; }
.cs-head .cs-name { font-size: 14.5px; font-weight: 700; }
.cs-head .cs-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.cs-note {
  margin-top: 13px; padding: 11px 12px; border-radius: var(--r-m);
  background: #FBF9FE; border: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-2); line-height: 1.75;
}
.cs-faq { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.cs-faq .q {
  font-size: 11.5px; color: var(--brand-1); background: var(--brand-grad-soft);
  border-radius: 999px; padding: 6px 12px;
}

/* =========================================================
   19. 服务商列表 · 列表 / 卡片 双视图（简约大气）
   —— 通过容器 [data-view] 切换；卡片类统一为 .tcard/.ccard/.pcard
   ========================================================= */

/* 视图切换按钮组 */
.sort-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.view-toggle {
  display:flex; gap:2px; background:#F1F0F5; border-radius:999px; padding:3px;
  flex-shrink:0;
}
.view-toggle a {
  font-size:12px; color:var(--ink-3); padding:4px 11px; border-radius:999px;
  text-decoration:none; display:flex; align-items:center; gap:4px; font-weight:600;
  line-height:1;
}
.view-toggle a.is-on {
  background:#fff; color:var(--brand-1); box-shadow:0 1px 3px rgba(17,12,46,.1);
}

/* 列表容器 */
.plist { display:flex; flex-direction:column; gap:12px; }
.plist[data-view="card"] {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;
  align-items:start;
}
@media (max-width:380px) { .plist[data-view="card"] { grid-template-columns:1fr; } }

/* 卡片通用：去掉默认阴影，改细边框 + 悬停微抬升，更简约 */
.plist .tcard,
.plist .ccard,
.plist .pcard {
  margin-bottom:0;
  min-width:0;
  border:1px solid var(--line);
  box-shadow:none;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.plist .tcard:hover,
.plist .ccard:hover,
.plist .pcard:hover {
  box-shadow:0 10px 26px rgba(17,12,46,.09);
  transform:translateY(-2px);
  border-color:var(--line-2);
}

/* 卡片视图：更紧凑、信息居中收敛 */
.plist[data-view="card"] .tcard,
.plist[data-view="card"] .ccard,
.plist[data-view="card"] .pcard { padding:14px; }

/* 列表视图：头像略小、行距更紧，信息一行化 */
.plist[data-view="list"] .tcard .tc-top,
.plist[data-view="list"] .ccard .tc-top { gap:10px; }
.plist[data-view="list"] .tcard .nm,
.plist[data-view="list"] .ccard .nm { font-size:14.5px; }