/* ============================================================================
 * 凡逢予你 · 网页版 共享样式
 * ----------------------------------------------------------------------------
 * 2026-10-15 重写：改为「纯白 + 纯蓝 · 扁平」风格
 *
 *   · 背景纯白，卡片纯白，只用一条浅蓝描边分隔 —— 不再有磨砂/半透明/高斯模糊
 *   · 全站只有一个强调色（蓝），状态色只保留 蓝/橙/红 三种语义
 *   · 去掉所有 backdrop-filter / 玻璃高光 / 内嵌白描边 / 折射层
 *
 * 兼容性：class 名与原来**完全一致**（HTML / JS 一行都不用改）。
 *         动效系统（本文件后半段）与各业务页面样式保持原样未动。
 * ========================================================================== */

:root {
  /* ---------- 主色：纯蓝 ---------- */
  --blue: #3B82F6;            /* 主蓝（按钮/选中/强调） */
  --blue-strong: #2563EB;     /* 按下 / hover */
  --blue-soft: #93C5FD;       /* 浅蓝（次级） */
  --blue-tint: #EFF6FF;       /* 蓝色浅底（选中态背景） */
  --blue-line: #DBEAFE;       /* 蓝调描边 */

  /* ---------- 中性：纯白系 ---------- */
  --white: #FFFFFF;
  --bg-soft: #F6FAFE;         /* 极浅蓝（输入框底、hover） */
  --line: #E4EDF5;            /* 分隔线 */
  --line-soft: #EFF5FA;

  /* ---------- 文字 ---------- */
  --text-main: #16283A;       /* 正文：深蓝灰 */
  --text-sub: #5B7A93;        /* 次要 */
  --text-light: #93AEC2;      /* 更淡（占位符） */

  /* ---------- 语义色（只保留必要的三种） ---------- */
  --danger: #E2603F;          /* 错误 / 危险 */
  --warn: #E8A33D;            /* 提醒 */
  --gold: #DE9A3C;            /* 金额 */
  --ok: #2E86DE;              /* 「成功」也用蓝（用户要求全蓝） */

  /* ---------- 圆角 ---------- */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ---------- 阴影（扁平：只有非常轻的一层） ---------- */
  --shadow: 0 1px 2px rgba(22, 40, 58, .04), 0 4px 12px rgba(22, 40, 58, .05);
  --shadow-lift: 0 2px 6px rgba(22, 40, 58, .06), 0 10px 24px rgba(22, 40, 58, .08);

  --page-pad: 16px;
  --lg-border: var(--blue-line);

  /* ---------- 兼容旧变量名（动效层与业务页面仍在用） ---------- */
  --primary: var(--blue);
  --primary-dark: var(--blue-strong);
  --primary-soft: var(--blue-soft);
  --accent: var(--blue);
  --accent-dark: var(--blue-strong);
  --accent-soft: var(--blue-soft);
  --primary-gradient: linear-gradient(135deg, var(--blue), var(--blue));
  --primary-gradient-deep: linear-gradient(135deg, var(--blue-strong), var(--blue-strong));
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* 参考 MiuiX 风格：极浅灰底 + 纯白卡片，卡片不用描边也能分层 */
  background: #F5F7FA;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-main);
  background: #F5F7FA;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--blue); text-decoration: none; }
a:active { opacity: .7; }

img { max-width: 100%; display: block; }

hr, .hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---------- 布局 ---------- */
.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 78px;
  background: transparent;
  contain: layout style;
}

.pad { padding: 0 var(--page-pad); }

.section { margin: 20px 0; }

.section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px;
}
.section-title .sub,
.section-title .more {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
}
.section-title .more { margin-left: auto; }

.row2 { display: flex; gap: 10px; align-items: center; }
.row2 > * { flex: 1; min-width: 0; }

.wide { width: 100%; }
.w70 { width: 70%; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

.block { display: block; }

/* ---------- 文字 ---------- */
.muted { color: var(--text-sub); font-size: 13px; }
.hint  { color: var(--text-light); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.title { font-size: 17px; font-weight: 800; }
.sub   { color: var(--text-sub); }
.err   { color: var(--danger); font-size: 13px; }
.ok    { color: var(--ok); }
.warn  { color: var(--warn); }
.red   { color: var(--danger); }
.gold  { color: var(--gold); }
.danger{ color: var(--danger); }
.empty {
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
  padding: 40px 16px;
}
.empty a { color: var(--blue); font-weight: 600; }

/* ---------- 卡片（原「玻璃容器」→ 纯白平板） ---------- */
.glass,
.glass-strong,
.card {
  background: #FFFFFF;
  border: 1px solid transparent;      /* 参考图卡片不描边，靠底色层次分层 */
  border-radius: 16px;                /* 圆角加大，更接近参考图的卡片 */
  box-shadow: none;
  padding: 16px;
}
/* 嵌套卡片：去掉阴影，只留描边，避免「卡片套卡片」显得厚重 */
.glass .glass,
.glass-strong .glass,
.card .card {
  background: #FFFFFF;
  border: 1px solid var(--line-soft);
  box-shadow: none;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.975); }

.btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #FFFFFF;
}
.btn.primary:active { background: var(--blue-strong); }

.btn.ghost {
  background: #FFFFFF;
  border-color: var(--blue-line);
  color: var(--blue);
}

.btn.danger {
  background: #FFFFFF;
  border-color: #F3CDBF;
  color: var(--danger);
}

.btn.sm { padding: 7px 12px; min-height: 32px; font-size: 13px; border-radius: 8px; }

.btn[disabled],
.btn.off { opacity: .45; pointer-events: none; }

.act { display: flex; gap: 8px; align-items: center; }
.add { color: var(--blue); font-weight: 600; cursor: pointer; }
.del { color: var(--danger); cursor: pointer; }
.back { color: var(--blue); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.req { color: var(--danger); margin-left: 2px; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--text-main);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--blue);
  background: #FFFFFF;
}
.input::placeholder,
.textarea::placeholder { color: var(--text-light); }

.textarea { min-height: 92px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-light) 50%),
                    linear-gradient(135deg, var(--text-light) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; padding-bottom: 2px; }

.chip {
  position: relative;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.chip.on {
  background: var(--blue-tint);
  border-color: #BFDBFE;
  color: var(--blue);
}
.chip-ind { display: none; }
/* 单选 chips 的滑动容器（旧胶囊动效已废弃，保留占位避免样式缺失） */
.slide { position: relative; }   /* 旧滑动胶囊已废弃，选中态直接用背景色 */

/* ---------- 标签 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #F1F5F9;          /* 默认浅灰：一屏多个标签时不刺眼 */
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
.tag.gold { background: #F1F5F9; color: #64748B; }
.tag.svc  { background: #F1F5F9; color: #64748B; }
.tag.svc i { font-style: normal; font-size: 10px; margin-left: 2px; color: #94A3B8; }
.tag.danger { background: #FCEBE6; color: var(--danger); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 键值行 ---------- */
.kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-sub); }
.kv .v { color: var(--text-main); font-weight: 600; }

/* ---------- 列表（「我的」页分组） ---------- */
.me-list { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }

.ml-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  font-size: 14px;
  background: #FFFFFF;
}
.ml-item:last-child { border-bottom: 0; }
.ml-item:active { background: var(--bg-soft); }
.ml-ic { width: 22px; text-align: center; font-size: 16px; }
.ml-t { flex: 1; color: var(--text-main); }
.ml-v { color: var(--text-light); font-size: 13px; }
.ml-arrow { color: #C3D4E2; font-size: 18px; line-height: 1; }

/* ---------- 统计 ---------- */
.stats { display: flex; gap: 10px; }
.stat {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.stat .num { font-size: 18px; font-weight: 800; color: var(--text-main); }
.stat .lbl { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.stat .num.gold { color: var(--gold); }

/* ---------- 表格 ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; text-align: left; white-space: nowrap; }
th { font-size: 12px; color: var(--text-sub); font-weight: 700; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
td { border-bottom: 1px solid var(--line-soft); color: var(--text-main); }
tr:last-child td { border-bottom: 0; }

/* ---------- 顶部栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--page-pad);
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
  display: flex;
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar .t {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0 9px;
  font-size: 11px;
  color: var(--text-light);
  cursor: pointer;
  transition: color .16s var(--ease);
}
.tabbar .t .ico { font-size: 20px; line-height: 1; }
.tabbar .t.on { color: var(--blue); font-weight: 700; }
  /* 对齐参考图：选中项的图标带一个浅灰胶囊底（蓝色图标 + 灰底） */
  .tabbar .t.on .ico {
    background: #F1F5F9;
    border-radius: 12px;
    padding: 3px 12px;
  }
.tb-ind { display: none; }     /* 旧滑动指示器已废弃 */

/* ---------- 弹窗 ---------- */
.mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(22, 40, 58, .42);
  padding: 16px;
}
.modal {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
  padding: 18px;
}
.modal h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.modal-acts { display: flex; gap: 10px; margin-top: 18px; }
.modal-acts > * { flex: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 200;
  max-width: 80vw;
  padding: 10px 16px;
  background: #16283A;
  color: #FFFFFF;
  font-size: 13px;
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  pointer-events: none;
}

/* ---------- 首页头部 ---------- */
.home-hero {
  padding: 22px var(--page-pad) 18px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}
.hh-row { display: flex; align-items: center; gap: 12px; }
.hh-logo {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--blue);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hh-text { flex: 1; min-width: 0; }
.hh-title { font-size: 19px; font-weight: 800; color: var(--text-main); line-height: 1.25; }
.hh-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.hh-acts { display: flex; gap: 8px; margin-top: 14px; }

/* ---------- 店员卡 ---------- */
.emp-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  cursor: pointer;
}
.emp-card:active { background: var(--bg-soft); }
.emp-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blue-tint);
  flex-shrink: 0;
}
.emp-meta { flex: 1; min-width: 0; }
.emp-name { font-size: 15px; font-weight: 700; color: var(--text-main); }
.emp-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* ---------- 图片 / 上传 ---------- */
.grid-img { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid-img .item {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}
.grid-img .item img { width: 100%; height: 100%; object-fit: cover; }
.grid-img .item .del {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(22, 40, 58, .62);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}

.pick,
.pick-row { display: flex; align-items: center; justify-content: center; }
.pick-row { gap: 10px; flex-wrap: wrap; }
.pick {
  width: 92px; height: 92px;
  border: 1px dashed var(--blue-line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--blue);
  font-size: 13px;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
}
.pick-tip { font-size: 12px; color: var(--text-light); margin-top: 6px; }
.imgs { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- 骨架屏 ---------- */
.skel, .skel-card, .skel-line {
  background: linear-gradient(90deg, #F1F6FB 25%, #E7EFF7 37%, #F1F6FB 63%);
  background-size: 400% 100%;
  animation: skelShine 1.4s ease infinite;
  border-radius: 8px;
}
.skel { height: 120px; margin-bottom: 10px; }
.skel-card { height: 84px; margin-bottom: 10px; }
.skel-line { height: 12px; margin-bottom: 8px; }
@keyframes skelShine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 盲盒 ---------- */
.bb-title { font-size: 16px; font-weight: 800; color: var(--text-main); }
.bb-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.bb-arrow { font-size: 20px; color: var(--blue); font-weight: 700; }

/* ---------- 「我的」页用户卡 ---------- */
.me-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.mu-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.mu-text { flex: 1; min-width: 0; }
.mu-name { font-size: 17px; font-weight: 800; color: var(--text-main); }
.mu-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* ---------- 公告 / 规则框 ---------- */
.notice-box,
.rules-box {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-main);
  white-space: pre-wrap;
}
.notice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

/* ---------- 服务项目行 ---------- */
.pl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.pl-row:last-child { border-bottom: 0; }

/* ---------- 兼容/占位（旧类名保留，避免遗漏元素变裸样式） ---------- */
.lg-warp, .lg-press, .lg-held, .blur { /* 已废弃：无磨砂 */ }
.c0, .c1, .c2, .js, .ico, .dot, .is-scrolling, .loaded, .no-anim, .sh-left { /* 由动效层接管或已废弃 */ }
.tabs, .tab, .emp-meta, .item, .sub { }
.notice-box + .section { margin-top: 18px; }

/* ---------- 客服浮标 ---------- */
.bot-fab {
  position: fixed;
  right: 16px;
  bottom: 92px;
  z-index: 40;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(46, 134, 222, .32);
  cursor: pointer;
  border: 0;
}
.bot-fab-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid #FFFFFF;
}

/* ================================================================
   过渡动画系统（丝滑优先：只动 transform / opacity）
   缓动曲线：iOS 味 —— cubic-bezier(.22,1,.36,1) 出场 / (.4,0,1,1) 退场
   ================================================================ */
:root {
  --ease-out-ios: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out-ios: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.35, .5, 1);
  /* Q 弹族：back-out 缓动，数值越大过冲越明显（滑动/弹入用） */
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);        /* 明显回弹（弹窗、按钮） */
  --ease-back-soft: cubic-bezier(.22, 1.28, .36, 1);   /* 轻微回弹（页面、胶囊） */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);        /* 极顺出场（长位移） */
  --dur-fast: .18s;
  --dur-base: .34s;
  --dur-page: .42s;
}

/* ---------- 0. 页面级进场：所有路由切换统一「从上往下」丝滑降入 ----------
   只动 opacity / transform，且 #app 只有一个节点 → 合成层代价最低。
   缓动用 --ease-out-ios（起步快、收尾极柔）→ 观感"丝滑"而非"弹跳"。
   JS 侧 paintRoute() 每次重放（见 pageEnter()）。 */
#app.page-enter {
  /* ⚠️ 不能用 `both`：`both` 会让元素在动画「开始前」就应用 0%（opacity:0），
     一旦动画没跑起来（页面切后台 / 被打断 / animationend 丢失）→ 整页卡在 opacity 0，
     表现就是「UI 刷新不出来」。
     不加填充模式：动画没跑时元素保持默认的可见状态，最坏情况只是「少了入场动效」。 */
  animation: pageEnter .34s var(--ease-out-ios);
  will-change: transform, opacity;   /* 动画期间提升合成层：避免首帧才建层造成的小卡顿 */
}
@keyframes pageEnter {
  0%   { opacity: 0; transform: translate3d(0, -30px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ⚠️ 2026-09-23 性能优化：backdrop-filter 的模糊半径从 30~34px 统一降到 14px。
   实测（CPU 4x 模拟中端机）：backdrop-filter 是切页卡顿的主因 —— 彻底禁用后
   #/me 的长任务 258ms → 104ms（-60%）。模糊开销≈半径²，30→14 约省 78%，
   而视觉上"糊得够不够"主要靠底色不透明度，半径降下来几乎看不出差别。 */

/* ---------- 1. 页面切换：原生 View Transitions（有则用，最丝滑） ---------- */
::view-transition-old(root) {
  animation: vtOut .22s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vtIn var(--dur-page) var(--ease-back-soft) both;
}
@keyframes vtOut {
  to { opacity: 0; transform: translate3d(0, -6px, 0) scale(.995); }
}
@keyframes vtIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.99); }
  to { opacity: 1; transform: none; }
}
/* 底栏独立于页面动画之外（不参与淡入淡出，保持悬浮稳定） */
#tabbar { view-transition-name: tabbar; }
::view-transition-old(tabbar), ::view-transition-new(tabbar) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- 2. 兜底：不支持 View Transitions 时的进场动画 ---------- */
.fade-up {
  /* 同 #app.page-enter：不用 both —— 动画没跑时元素保持默认可见，不会卡在 opacity:0 */
  animation: fadeUp .34s var(--ease-out-ios);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, -22px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- 3. 底栏指示器：滑动胶囊（丝滑关键） ---------- */
/* 性能要点：只动 transform，绝不动 width（动 width 会触发布局并让玻璃滤镜整个重算） */
.tb-ind {
  position: absolute;
  left: 0;
  top: 5px;
  bottom: calc(5px + env(safe-area-inset-bottom, 0px));
  width: 72px;                       /* 基准宽度；实际宽度用 scaleX 缩放得到 */
  transform-origin: left center;
  border-radius: 999px;
  background: var(--primary-gradient-deep);
  box-shadow: 0 6px 18px rgba(78, 168, 222, .34);
  z-index: 0;
  pointer-events: none;
  will-change: transform;            /* 提升为独立合成层：移动时不重绘父级 */
  backface-visibility: hidden;
  transition: transform .48s var(--ease-back-soft);   /* 轻微过冲 → 滑动 Q 弹 */
}
.tb-ind.no-anim { transition: none; }
/* 选中项不再自己涂色，交给滑动胶囊 */
.tabbar .t.on {
  background: transparent;
  box-shadow: none;
  color: var(--blue);
  font-weight: 700;
}
.tabbar.lg-held .t.on { box-shadow: none; }

/* ---------- 4. 弹窗：淡入 + Q 弹上浮 ---------- */
/* 入场不用 both：万一动画没跑，弹窗也要能正常显示（both 会停在 opacity:0 →
   弹窗看不见却还挡着操作）。关闭动画保留 both（需要保持隐去状态直到节点被移除）。 */
.mask { animation: maskIn .22s ease; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.modal { animation: modalIn .46s var(--ease-back); }
@keyframes modalIn {
  0%   { opacity: 0; transform: translate3d(0, 26px, 0) scale(.9); }
  100% { opacity: 1; transform: none; }
}
/* 关闭：淡出 + 下沉微缩（比"瞬间消失"顺很多） */
.mask.closing { animation: maskOut .24s ease both; }
@keyframes maskOut { to { opacity: 0; } }
.mask.closing .modal { animation: modalOut .24s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes modalOut { to { opacity: 0; transform: translate3d(0, 12px, 0) scale(.96); } }

/* ---------- 5. 微交互：按压 / 列表 / 标签 ---------- */
/* 可点整卡的按压回弹（放在 .btn 之前，保证按钮用自己的规则） */
.glass { transition: transform .26s var(--ease-back); }
.btn, .chip, .tab, .tag, .emp-card, .t {
  transition: transform .24s var(--ease-back),
              background-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}
.btn:active, .chip:active, .t:active { transform: scale(.94); }
.emp-card:active { transform: scale(.982); }
/* 可点整卡：轻微下压，松手回弹 */
.glass[data-act]:active, .glass[onclick]:active { transform: scale(.987); }

/* 输入框聚焦：轻微抬起 + 光晕 */
.input, .textarea, .select {
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-ios);
}
.input:focus, .textarea:focus, .select:focus {
  box-shadow: 0 0 0 3px rgba(78, 168, 222, .16), 0 6px 18px rgba(78, 168, 222, .12);
  transform: translate3d(0, -1px, 0);
}

/* 底栏抬起：带一点回弹，更有"拎起来"的质感 */
.tabbar {
  transition: transform .34s var(--ease-out-ios), box-shadow .3s ease,
              background .3s ease, border-color .3s ease;
}
.tabbar.lg-held { transition: transform .18s var(--ease-out-ios), box-shadow .3s ease; }

/* 顶部栏出现/离开 */
.topbar { transition: transform var(--dur-base) var(--ease-out-ios), opacity var(--dur-base) ease; }

/* ---------- 6. 无障碍：尊重"减少动态效果" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}




/* ---------- 登录页底部的两个小入口（忘记密码 / 注册）----------
   2026-10-05：登录改为「只用密码」后，注册和忘记密码收成两个不起眼的小链接，
   主按钮下面不再堆文字说明，保持干净。 */
.login-links {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; font-size: 12.5px;
}
.login-links a {
  color: var(--primary-dark); text-decoration: none; padding: 2px 4px;
  transition: opacity .2s ease;
}
.login-links a:active { opacity: .55; }
.login-links .ll-dot { color: var(--text-light); }

/* ---------- 「全部订单」汇总卡：金额字数多，窄屏别撑破格子 ---------- */
#aoSummary .stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
#aoSummary .stat { padding: 12px 6px; }
#aoSummary .stat .num { font-size: 20px; line-height: 1.25; word-break: break-all; }
#aoSummary .stat .lbl { font-size: 11.5px; }

/* ================================================================
   动态广场（2026-09-19）
   · 列表卡片沿用 .glass 液态玻璃，这里只加动态特有的排版
   · 图片九宫格 / 语音播放条 / 点赞评论栏
   ================================================================ */
.mo-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mo-title { font-size: 21px; font-weight: 800; letter-spacing: .3px; }
.mo-new { padding: 8px 14px; font-size: 13px; border-radius: 999px; }
.mo-guest {
  font-size: 12.5px; color: var(--text-sub); background: rgba(78,168,222,.08);
  border: 1px solid rgba(78,168,222,.16); border-radius: 12px;
  padding: 9px 12px; margin-bottom: 12px; line-height: 1.5;
}
.mo-guest a { color: var(--primary-dark); font-weight: 700; }
.mo-more-box { text-align: center; padding: 6px 0 18px; }

/* ---------- 卡片 ---------- */
.mo-card { margin-bottom: 12px; padding: 14px; }
.mo-head { display: flex; align-items: center; gap: 10px; }
.mo-av {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: rgba(78,168,222,.1); cursor: pointer;
}
.mo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-who { flex: 1; min-width: 0; }
.mo-name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mo-badge {
  font-size: 10px; font-weight: 700; color: #fff; background: var(--primary-gradient-deep);
  padding: 1px 6px; border-radius: 6px; line-height: 1.5;
}
.mo-badge.sm { font-size: 9px; padding: 0 4px; margin: 0 4px; }
.mo-time { font-size: 11.5px; color: var(--text-sub); margin-top: 1px; }
.mo-del {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); font-size: 13px; cursor: pointer;
  background: rgba(0,0,0,.04);
}
.mo-del:active { transform: scale(.9); }

/* ---------- 正文 ---------- */
.mo-text {
  margin-top: 10px; font-size: 14.5px; line-height: 1.62; white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- 图片九宫格 ---------- */
.mo-imgs { display: grid; gap: 5px; margin-top: 10px; }
.mo-imgs.one { grid-template-columns: 1fr; }
.mo-imgs.two { grid-template-columns: repeat(2, 1fr); }
.mo-imgs.three { grid-template-columns: repeat(3, 1fr); }
.mo-imgs img {
  width: 100%; display: block; border-radius: 10px; cursor: pointer;
  object-fit: cover; background: rgba(78,168,222,.06);
  aspect-ratio: 1 / 1;
}
.mo-imgs.one img { aspect-ratio: auto; max-height: 320px; object-fit: contain; }

/* ---------- 语音条 ---------- */
.mo-voice {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 10px 13px; border-radius: 14px; cursor: pointer;
  background: rgba(78,168,222,.09); border: 1px solid rgba(78,168,222,.18);
  transition: background .22s ease;
}
.mo-voice:active { transform: scale(.985); }
.mo-voice.playing { background: rgba(78,168,222,.17); }
.mo-vp { font-size: 14px; color: var(--primary-dark); width: 16px; text-align: center; }
.mo-wave { display: flex; align-items: center; gap: 2.5px; flex: 1; height: 22px; }
.mo-wave i {
  display: block; width: 3px; border-radius: 2px; background: rgba(78,168,222,.5);
}
.mo-voice.playing .mo-wave i { animation: moWave .9s ease-in-out infinite; }
.mo-voice.playing .mo-wave i:nth-child(2n) { animation-delay: .12s; }
.mo-voice.playing .mo-wave i:nth-child(3n) { animation-delay: .24s; }
@keyframes moWave { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1.25); } }
.mo-vd { font-size: 12px; color: var(--primary-dark); font-weight: 700; flex: 0 0 auto; }
.mo-voice audio { display: none; }

/* ---------- 操作栏 ---------- */
.mo-acts { display: flex; gap: 18px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(78,168,222,.1); }
.mo-act {
  display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-sub);
  cursor: pointer; padding: 3px 2px; user-select: none;
}
.mo-act.on { color: #e0508a; font-weight: 700; }
.mo-act:active { transform: scale(.93); }

/* ---------- 评论 ---------- */
.mo-comments { margin-top: 9px; background: rgba(78,168,222,.05); border-radius: 11px; padding: 9px 11px; }
.mo-cm { font-size: 12.8px; line-height: 1.62; color: var(--text); word-break: break-word; }
.mo-cm b { color: var(--primary-dark); font-weight: 700; }
.mo-more { font-size: 12px; color: var(--primary-dark); margin-top: 4px; cursor: pointer; padding: 2px 0; }

/* ---------- 发布弹窗：选图 / 录音 ---------- */
.mo-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mo-thumb { position: relative; aspect-ratio: 1/1; border-radius: 9px; overflow: hidden; background: rgba(78,168,222,.06); }
.mo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-x {
  position: absolute; top: 2px; right: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 19px; text-align: center;
  cursor: pointer;
}
.mo-rec { width: 100%; text-align: center; padding: 11px; border-radius: 13px; }
.mo-rec.off {
  background: rgba(0,0,0,.035); border: 1px dashed rgba(0,0,0,.14);
  color: var(--text-sub); font-size: 12.5px; line-height: 1.6; padding: 14px;
}
.mo-rec.on {
  background: rgba(224,80,138,.14); border: 1px solid rgba(224,80,138,.4);
  color: #c0336b; font-weight: 700;
}
.mo-recdone {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(78,168,222,.09); border: 1px solid rgba(78,168,222,.2);
  border-radius: 13px; padding: 11px 13px; font-size: 13px; position: relative;
}
.mo-recdone .mo-x { position: static; background: rgba(0,0,0,.4); }
.mo-rec-hint { font-size: 11.5px; color: var(--text-sub); margin-top: 6px; text-align: center; }

/* ============ 盲盒下单入口 ============ */
.bb-entry {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
}
.bb-entry::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: none;
  pointer-events: none;
}
.bb-icon { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(63,145,193,.35)); }
.bb-main { flex: 1; min-width: 0; }
.bb-title { font-size: 16px; font-weight: 800; }
.bb-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.bb-arrow { font-size: 22px; color: #3F91C1; font-weight: 700; }
/* 盲盒订单在列表里的标记 */
.od-blind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 8px; background: rgba(63,145,193,.16); color: #2F7CA8; margin-left: 6px; }

/* ---------- 提现 / 结算（工作台蓝色大卡 + 结算记录） ---------- */
.settle-hero {
  border-radius: 20px;
  padding: 20px 18px 14px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 10px 26px rgba(63, 125, 254, .32);
  margin-bottom: 14px;
}
.sh-row { display: flex; align-items: center; justify-content: space-between; }
.sh-num { font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: .5px; }
.sh-lbl { font-size: 12px; opacity: .85; margin-top: 2px; }
.sh-btn {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid #FFFFFF;
  border-radius: 999px; padding: 8px 18px;
  font-size: 15px; font-weight: 700; color: #fff;
  cursor: pointer; user-select: none;
  background: #FFFFFF;
}
.sh-btn:active { background: #FFFFFF; }
.sh-ic { font-size: 14px; }
.sh-tip {
  display: flex; align-items: center; gap: 7px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid #CFE2EE;
  font-size: 12px; opacity: .95;
}
.sh-i {
  flex: 0 0 15px; width: 15px; height: 15px; line-height: 15px;
  border-radius: 50%; border: 1px solid #CFE2EE;
  text-align: center; font-size: 10px; font-style: normal;
}
/* 结算记录卡 */
.st-card { padding: 14px 16px; margin-bottom: 12px; }
.st-head { display: flex; align-items: center; gap: 8px; }
.st-no { flex: 1; min-width: 0; font-size: 12px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-no b { color: var(--text-main); font-weight: 700; }
.st-tag { font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.st-pending { color: #e6a23c; }
.st-settled { color: #2E78A3; }
.st-cancelled { color: var(--text-light); }
.st-cols { display: flex; align-items: center; margin-top: 12px; }
.st-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.st-big { font-size: 22px; font-weight: 800; }
.st-yuan { font-size: 12px; font-weight: 400; margin-left: 2px; color: var(--text-sub); }
.st-name { font-size: 16px; font-weight: 700; }
.st-lbl { font-size: 11px; color: var(--text-light); }
.st-qr { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(127, 140, 136, .25); background: #fff; }
.st-qr-empty { display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(127, 140, 136, .10); }
.st-time { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(127, 140, 136, .25); font-size: 12px; color: var(--text-sub); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-remark { color: var(--text-light); }



/* ---------- 店员详情页 · 顶部标题栏（透明，白字浮在照片上——照参考图）---------- */
.ed-topbar {
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 130;
  margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px;
  color: #fff;
}
.ed-topbar .etb-btn {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: #fff;
  background: rgba(0, 0, 0, .22);
  cursor: pointer;
}
.ed-topbar .etb-btn:active { transform: scale(.92); }
.ed-topbar .etb-title {
  flex: 1; text-align: center;
  font-size: 15.5px; font-weight: 700; letter-spacing: .3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

/* ---------- 照片底部：白色文字信息区（照参考图——没有白卡，直接压在照片上）---------- */
/* ★ 2026-09-24：头像与名字/等级/语音**同一行**（用户要求"和头像平行"）
   —— 整行上移压到照片下沿，行内 align-items:center 让文字与头像垂直居中 */
.ed-head-row {
  display: flex; align-items: center; gap: 12px;
  margin: -58px 16px 16px;      /* 底部 16px：给绝对定位的语音行留位 */
  position: relative; z-index: 7;
}
.ed-info {
  flex: 1; min-width: 0;
  padding: 0;
  /* ★ 2026-09-24：作为语音行的定位参照。语音行改为绝对定位后不撑高容器，
     于是 flex 的 align-items:center 居中的就是「名字+等级」这一行本身 →
     它的垂直中心与头像中心重合（用户要求"名字和等级要和头像平行"）。 */
  position: relative;
}
/* ★ 不换行：一旦换行 .ed-info 会变高，居中后名字就被顶偏、与头像不平齐 */
.ed-info .ed-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.ed-info .ed-name {
  color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .2px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%;
}
/* 金牌徽章：红底白字（照参考图） */
.ed-badge-gold {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 7px; border-radius: 999px; flex: 0 0 auto;
  background: var(--danger);
  color: #fff; font-size: 10px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* 年龄红胶囊 */
.ed-age-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px; flex: 0 0 auto;
  background: var(--danger);
  color: #fff; font-size: 10.5px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* 语音条：红色胶囊 + 右侧白字地区 */
/* ★ 语音条挂在「名字行」的正下方（绝对定位，不参与居中计算 —— 见上面的注释） */
.ed-voice-row {
  position: absolute; left: 0; top: 100%; margin-top: 8px;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-width: 0;
}
.ed-voice-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px; flex: 0 0 auto;
  background: var(--danger);
  color: #fff; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.ed-voice-pill .ev-play { font-size: 11px; }
.ed-voice-pill .ev-waves { display: flex; align-items: center; gap: 2px; height: 13px; }
.ed-voice-pill .ev-waves i { width: 2.5px; border-radius: 2px; background: #FFFFFF; }
.ed-voice-pill .ev-waves i:nth-child(1) { height: 45%; }
.ed-voice-pill .ev-waves i:nth-child(2) { height: 85%; }
.ed-voice-pill .ev-waves i:nth-child(3) { height: 60%; }
.ed-voice-pill .ev-waves i:nth-child(4) { height: 100%; }
.ed-voice-pill .ev-waves i:nth-child(5) { height: 55%; }
.ed-voice-pill.playing .ev-waves i { animation: evWave .9s ease-in-out infinite; }
.ed-voice-loc {
  color: #fff; font-size: 13px; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 大头像：一半压在照片上、一半压在白色区（照参考图） */
.ed-av-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 96px; height: 96px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  background: #EAF4FA;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-dark); font-weight: 700; font-size: 26px;
  flex: 0 0 auto;
}
.ed-av-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* ================================================================
   店员详情页 · 沉浸式大图布局（2026-09-23 改版）
   —— 顶部全屏形象照 + 浮动信息卡 + 吸底操作栏
   —— 配色/材质仍用我们的浅蓝绿 + 液态玻璃，只改版式
   ================================================================ */
.ed-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;        /* 竖幅大图；不支持 aspect-ratio 的浏览器由下面的 height 兜底 */
  max-height: 62vh;
  /* ★ 2026-09-24：改成 visible —— 头像要压出照片下沿（跨越到白区），
     照片自身的裁剪交给内层 .ed-track（它有自己的 overflow）。 */
  overflow: visible;
  background: var(--blue-tint);
}
@supports not (aspect-ratio: 3 / 4) {
  .ed-hero { height: 62vh; }
}
.ed-hero .ed-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 图底部渐隐，让浮动信息卡过渡自然 */
.ed-hero::after {
  /* ★ 2026-09-24：渐变延展到照片下沿之外（bottom 负值）——
     因为"名字/等级与头像平行"后，文字会有一小截探出照片，
     没有这层压暗白字就看不清了。照片裁剪由 .ed-track 负责，这里不受影响。 */
  content: ''; position: absolute; left: 0; right: 0; bottom: -46px; height: 62%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .52) 62%, rgba(0, 0, 0, .18));
  pointer-events: none;
}
/* 多图时左右滑 */
.ed-hero .ed-track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ed-hero .ed-track::-webkit-scrollbar { display: none; }
.ed-hero .ed-track > img {
  flex: 0 0 100%; height: 100%; object-fit: cover;
  scroll-snap-align: center;
}
.ed-online {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: #FFFFFF;

  font-size: 12px; font-weight: 600; color: #2F7CA8;
}
.ed-online.off { color: var(--text-sub); }
.ed-dots {
  position: absolute; bottom: 74px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.ed-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFFFFF;
}
.ed-dots i.on { background: #fff; width: 16px; border-radius: 999px; }

.ed-card .ed-row { display: flex; align-items: center; gap: 11px; }
.ed-card .ed-av {
  width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  border: 2px solid #fff; box-shadow: 0 3px 10px rgba(30, 58, 71, .16);
  background: #EAF4FA; display: flex; align-items: center; justify-content: center;
  color: var(--primary-dark); font-weight: 700; font-size: 20px;
}
.ed-card .ed-av img { width: 100%; height: 100%; object-fit: cover; }
.ed-card .ed-main { flex: 1; min-width: 0; }
.ed-card .ed-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 16.5px; font-weight: 800;
}
.ed-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: #FBF0DF; color: #6b4a10;
}
.ed-ga { font-size: 11.5px; color: var(--text-sub); font-weight: 500; }
/* 语音条（店员的语音自我介绍，点了能播） */
.ed-voice {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 7px 11px; border-radius: 999px;
  background: rgba(78, 168, 222, .10);
  font-size: 12.5px; color: var(--primary-dark); cursor: pointer;
  max-width: 100%;
}
.ed-voice .ev-play {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: var(--primary-gradient-deep); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.ed-voice.playing .ev-play { background: var(--danger); }
.ed-voice .ev-waves { display: flex; align-items: center; gap: 2px; height: 14px; flex: 0 0 auto; }
.ed-voice .ev-waves i {
  width: 2.5px; border-radius: 2px; background: currentColor; opacity: .45;
}
.ed-voice.playing .ev-waves i { animation: evWave .9s ease-in-out infinite; }
.ed-voice .ev-waves i:nth-child(1) { height: 45%; animation-delay: 0s; }
.ed-voice .ev-waves i:nth-child(2) { height: 85%; animation-delay: .12s; }
.ed-voice .ev-waves i:nth-child(3) { height: 60%; animation-delay: .24s; }
.ed-voice .ev-waves i:nth-child(4) { height: 100%; animation-delay: .36s; }
.ed-voice .ev-waves i:nth-child(5) { height: 55%; animation-delay: .48s; }
@keyframes evWave { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.ed-voice .ev-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-voice .ev-sec { font-size: 11px; color: var(--text-sub); flex: 0 0 auto; }
/* 无语音时的占位（点了提示去补录，不摆空壳） */
.ed-voice.none { background: rgba(30, 58, 71, .05); color: var(--text-sub); cursor: default; }
.ed-voice.none .ev-play { background: rgba(30, 58, 71, .18); }

.ed-body { padding: 14px 14px 0; padding-bottom: 128px; }
.ed-sign {
  font-size: 13.5px; line-height: 1.6; color: var(--text-main);
  padding: 12px 14px; border-radius: 14px;
  background: #FFFFFF; border: 1px solid #CFE2EE;
}
.ed-gift-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ed-gift-head .eg-t { font-size: 15px; font-weight: 700; }
.ed-gift-head .eg-n { font-size: 12px; color: var(--text-sub); }
.ed-gift-head .eg-n b { color: #de9a3c; }

/* 吸底操作栏（在底栏之上，不遮挡底栏导航） */
.ed-acts {
  position: fixed; left: 0; right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #FFFFFF;
  border-top: 1px solid #CFE2EE;
  box-shadow: 0 -6px 20px rgba(30, 58, 71, .10);
}
.ed-acts .ea-home {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 2px 10px; font-size: 10.5px; color: var(--text-sub); cursor: pointer;
}
.ed-acts .ea-home .ico { font-size: 17px; line-height: 1; }
.ed-acts {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .05);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}
.ed-acts .ea-gift {
  flex: 1; padding: 12px 0; border-radius: 999px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--text-main);
  background: #fff; border: 1.5px solid #c9d6e2;
  cursor: pointer;
}
.ed-acts .ea-order {
  flex: 1.5; padding: 12px 0; border-radius: 999px; text-align: center;
  font-size: 15px; font-weight: 700; color: #fff;
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(69, 119, 184, .35);
  cursor: pointer;
}