/* 凡逢予你 · 网页版 —— 共享样式（液态玻璃主题 · 浅蓝 + 浅绿配色，与 App 端统一） */
:root {
  /* 主色：浅蓝 */
  --primary: #4EA8DE;
  --primary-dark: #3B8FC4;
  --primary-soft: #7FC3E8;
  /* 辅色：浅绿 */
  --accent: #3FC1A0;
  --accent-dark: #2FA88A;
  --accent-soft: #7AD6BC;
  /* 渐变：浅蓝 → 浅绿（装饰/背景用，浅色系） */
  --primary-gradient: linear-gradient(135deg, #4EA8DE, #3FC1A0);
  /* 深一档渐变：用在「白字压上去」的地方（按钮/选中胶囊/标签），保证对比度够 */
  --primary-gradient-deep: linear-gradient(135deg, #3B8FC4, #2FA88A);
  /* 文字：深蓝灰系（沿用 App 端配色） */
  --text-main: #1E3A47;
  --text-sub: #63838F;
  --text-light: #96AEB9;
  --danger: #e2603f;
  --gold: #de9a3c;
  --radius-lg: 20px;   /* 卡片圆角：24 → 20，更精致不笨重 */
  --radius: 16px;
  --page-pad: 18px;   /* 2026-09-23 收紧：24 → 18，手机端更利落 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 流畅度：去掉移动端 300ms 点击延迟与双击缩放；防下拉链式滚动；iOS 惯性滚动 */
html { overscroll-behavior-y: none; }
img, video { -webkit-user-drag: none; user-select: none; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 18% 12%, rgba(78, 168, 222, 0.36), transparent 46%),
    radial-gradient(circle at 86% 22%, rgba(63, 193, 160, 0.32), transparent 50%),
    radial-gradient(circle at 50% 92%, rgba(127, 195, 232, 0.28), transparent 56%),
    linear-gradient(160deg, #EAF4FC 0%, #E3F4EE 48%, #E9F6FD 100%);
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- 玻璃容器 ---------- */
/* 性能说明：卡片**不再各自做 backdrop-filter**。
   一个屏幕上同时可见的卡片可能有 10 个，滚动时每个都要重新采样背景 → 掉帧主因。
   改为更实的半透明渐变底（视觉几乎一致），只让「hero 元素」——悬浮底栏 / 顶栏 /
   靠前的几张卡片 / 弹窗 —— 通过 lg-glass.js 挂真正的高斯模糊或折射。 */
.glass {
  /* ★ 2026-09-23：改成「高度透明的磨砂玻璃」——原来 .80/.64 太白太实，
     现在压到 .44/.26，配合 backdrop blur 得到通透的磨砂质感（字仍是深色，可读性够） */
  background: linear-gradient(180deg, rgba(255, 255, 255, .44), rgba(255, 255, 255, .26));
  /* ★ 2026-09-23：直接在样式里挂磨砂，不再依赖 lg-glass 逐个元素去写 ——
     否则只有"前 5 个元素"有磨砂，列表里靠后的卡片会显得没处理过。
     纯 CSS blur 比原来的 SVG 折射便宜得多（不用生成透镜贴图），性能更好。 */
  backdrop-filter: blur(14px) saturate(1.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, .58);
  /* ★ 2026-09-23 精简：原来 7 层阴影（2 外 + 5 内）视觉很"厚重/杂乱"，
     减到 3 层且色更淡 → 卡片变轻、页面更安静舒适。
     （折射/立体感交给底栏和弹窗，列表卡不需要堆那么多高光） */
  /* 3 层 → 2 层：最细的那层（0 1px 3px）视觉贡献极小，删掉省一次绘制 */
  box-shadow:
    0 4px 16px rgba(30, 58, 71, .08),
    inset 0 1px 0 rgba(255, 255, 255, .86);
  border-radius: var(--radius-lg);
}
.glass-strong {
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8);
}

/* ---------- 布局 ---------- */
.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 78px;   /* 贴底栏之后收窄（原悬浮胶囊要 90px） */
  /* ★ 2026-09-23 性能：把样式计算与布局**局部化**在这个容器内。
     切页时会整块重建 #app 的内容，没有 contain 的话浏览器要重算整棵树的
     样式与布局；加上之后（实测 9 次切页累计）脚本 109→84ms、样式 377→341ms、
     布局 427→402ms。（topbar 的 sticky 不受影响 —— 项目里并没有页面真正渲染 .topbar；
     弹窗 .modal-acts 的 sticky 在 .modal 内，也不在这个容器里） */
  contain: layout style;
}
.app.wide { max-width: 1180px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.topbar .title { font-size: 17px; font-weight: 700; flex: 1; }
.topbar .back { cursor: pointer; font-size: 20px; color: var(--primary-dark); user-select: none; }
.topbar .act { cursor: pointer; font-size: 14px; color: var(--primary-dark); }

.pad { padding: 0 var(--page-pad); }
.section { margin-top: 18px; }
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; margin-bottom: 12px;
}
.section-title::before {
  content: ''; width: 4px; height: 16px; border-radius: 3px; background: var(--primary-gradient);
}
.section-title .sub { font-size: 12px; font-weight: 400; color: var(--text-sub); margin-left: auto; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.5); color: var(--primary-dark);
  font-size: 14px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--primary-gradient-deep); color: #fff; border: none; }
.btn.danger { background: rgba(226,96,63,.16); color: var(--danger); border-color: transparent; }
.btn.ghost { background: rgba(0,0,0,.05); color: var(--text-sub); border-color: transparent; }
.btn.sm { padding: 7px 14px; font-size: 13px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 13px; color: var(--text-sub); margin-bottom: 7px; font-weight: 600; }
.field-label .req { color: var(--danger); }
.input, .textarea, .select {
  width: 100%; padding: 12px 14px; font-size: 15px;
  background: rgba(255,255,255,0.75); border: 1px solid rgba(78,168,222,0.18);
  border-radius: var(--radius); color: var(--text-main); outline: none;
  font-family: inherit;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); }
.textarea { min-height: 88px; resize: vertical; }
.row2 { display: flex; gap: 12px; }
.row2 > * { flex: 1; }

/* ---------- 图片上传 ---------- */
.pick {
  width: 108px; height: 108px; border-radius: var(--radius);
  background: rgba(255,255,255,0.6); border: 1px dashed rgba(78,168,222,.35);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; flex-shrink: 0; color: var(--text-light); font-size: 13px;
}
.pick img { width: 100%; height: 100%; object-fit: cover; }
.pick-row { display: flex; align-items: center; gap: 14px; }
.pick-tip { font-size: 13px; color: var(--text-sub); }

.grid-img { display: flex; flex-wrap: wrap; gap: 10px; }
.grid-img .item { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.6); }
.grid-img .item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.grid-img .del {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(30,58,71,.6); color: #fff; font-size: 14px; line-height: 22px; text-align: center; cursor: pointer;
}
.grid-img .add {
  width: 92px; height: 92px; border-radius: 12px; border: 1px dashed rgba(78,168,222,.35);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-light); font-size: 30px; background: rgba(255,255,255,.5);
}

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,.6); color: var(--text-sub); border: 1px solid transparent;
  user-select: none;
}
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary-dark); }

/* ---------- chips 横向滚动变体（2026-09-23）----------
   原来 8 个分类 chip 会换成 4 行、白占 3 行高度（手机上尤其明显）。
   改成单行横向滚动（可左右滑）→ 省 ~120px，更接近原生 App 的分类条观感。
   ⚠️ 与 .chips.slide（滑动胶囊）兼容：胶囊用 offsetLeft 定位，不受容器滚动影响。 */
.chips.scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 右侧出血 + 右边距：暗示"还能往右滑" */
  margin-right: calc(-1 * var(--page-pad));
  padding-right: var(--page-pad);
}
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll > .chip { flex: 0 0 auto; white-space: nowrap; }

/* ---------- 单选 chips：滑动胶囊（选中态滑过去） ---------- */
.chips.slide { position: relative; }
.chips.slide > .chip {
  position: relative; z-index: 1;
  background: transparent;
  border-color: rgba(78, 168, 222, .16);
  transition: color .24s ease, border-color .24s ease, transform var(--dur-fast) var(--ease-spring);
}
.chips.slide > .chip.on {
  background: transparent; border-color: transparent; color: #fff; box-shadow: none;
}
.chips.slide > .chip-ind {
  position: absolute; left: 0; top: 0; width: 100px; height: 100%;
  border-radius: 999px;
  background: var(--primary-gradient-deep);
  box-shadow: 0 5px 16px rgba(78, 168, 222, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform-origin: left center;
  pointer-events: none; z-index: 0;
  will-change: transform;
  transition: transform .4s var(--ease-back-soft);
}
.chips.slide > .chip-ind.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .chips.slide > .chip-ind { transition: none; } }

/* ---------- 卡片/列表 ---------- */
.card { padding: 16px; margin-bottom: 14px; }
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* ---------- 首页紧凑头部（2026-09-23 改版）----------
   原来是 44px 大图标 + 居中 + 大按钮 → 占掉近 1/4 屏、信息密度低。
   改成「小圆角 logo + 左对齐标题 + 并排按钮」，高度约减半，视觉更利落。 */
.home-hero { padding: 16px; }
.home-hero .hh-row { display: flex; align-items: center; gap: 12px; }
.home-hero .hh-logo {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  background: linear-gradient(135deg, rgba(78, 168, 222, .20), rgba(63, 193, 160, .20));
}
.home-hero .hh-text { flex: 1; min-width: 0; }
.home-hero .hh-title { font-size: 18px; font-weight: 800; letter-spacing: .2px; }
.home-hero .hh-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.home-hero .hh-acts { display: flex; gap: 10px; margin-top: 14px; }
.home-hero .hh-acts .btn { flex: 1; padding: 11px 16px; }

/* ---------- 「我的」页：用户卡 + 分组列表（2026-09-23 改版）----------
   原来每个入口一张独立大卡（最多 12 张）→ 铺满两屏、信息密度极低。
   改成「一张卡装多行」，同屏信息量约翻倍，观感清爽很多。 */
.me-user { display: flex; align-items: center; gap: 12px; padding: 15px 16px; }
.me-user .mu-avatar {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  background: linear-gradient(135deg, rgba(78, 168, 222, .20), rgba(63, 193, 160, .20));
}
.me-user .mu-text { flex: 1; min-width: 0; }
.me-user .mu-name { font-size: 16.5px; font-weight: 700; }
.me-user .mu-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }

.me-list { padding: 2px 0; }
.me-list .ml-item {
  display: flex; align-items: center; gap: 11px;
  padding: 12.5px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(30, 58, 71, .06);
  transition: background .16s ease;
}
.me-list .ml-item:last-child { border-bottom: none; }
.me-list .ml-item:active { background: rgba(78, 168, 222, .07); }
.me-list .ml-ic { width: 21px; text-align: center; font-size: 16.5px; flex: 0 0 auto; }
.me-list .ml-t { flex: 1; min-width: 0; font-size: 14.5px; }
.me-list .ml-v { font-size: 12.5px; color: var(--text-sub); flex: 0 0 auto; }
.me-list .ml-arrow { color: var(--text-light); font-size: 16px; flex: 0 0 auto; }

 /* 员工卡瘦身（2026-09-23）：头像 56→46、内边距 14→12、间距 12→10
   → 单卡高度约减 24px，一屏能多看到一个店员 */
.emp-card { display: flex; gap: 10px; padding: 12px; margin-bottom: 10px; align-items: center; }
.emp-avatar {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #eafaf4; display: flex; align-items: center; justify-content: center;
  color: var(--primary-dark); font-weight: 700; font-size: 17px;
}
.emp-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* 图片淡入：base64 大图解码时有短暂空窗，直接"啪"地出现很突兀，
   加一层淡入 + 浅底色占位，观感上更顺，也避免布局跳动。 */
.emp-avatar img[data-fade], .imgs img[data-fade] { opacity: 0; transition: opacity .28s ease; }
.emp-avatar img[data-fade].loaded, .imgs img[data-fade].loaded { opacity: 1; }
.emp-meta { flex: 1; min-width: 0; }
.emp-name { font-size: 15px; font-weight: 700; }
.emp-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
/* 服务标签：照参考图用彩色软胶囊（粉/绿/青轮换） */
.tag {
  font-size: 11.5px; padding: 4px 12px; border-radius: 999px;
  background: rgba(78,168,222,.12); color: var(--primary-dark);
}
.tag.c0 { background: rgba(255, 178, 195, .30); color: #d4506b; }
.tag.c1 { background: rgba(150, 220, 175, .28); color: #2f9e68; }
.tag.c2 { background: rgba(130, 208, 222, .28); color: #2b8fa3; }
/* 「+N」收起标签：卡片上只展示前 2 个服务，其余折叠成这个，避免换行撑高卡片 */
.tag.more { background: rgba(30, 58, 71, .07); color: var(--text-sub); }
.tag.more i { font-style: normal; }
.tag.gold { background: rgba(63,193,160,.18); color: #2FA88A; }
.tag.red { background: rgba(226,96,63,.14); color: var(--danger); }
/* 服务项目标签上的价格：让"这个项目多少钱"一眼可见 */
.tag.svc { background: rgba(78,168,222,.10); color: var(--primary-dark); }
.tag.svc b { color: #de9a3c; font-weight: 800; margin-left: 2px; }
.tag.svc i { font-style: normal; font-size: 10px; color: #2FA88A; margin-left: 2px; }

/* 价目表编辑行（店员自助编辑用） */
.pl-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.pl-row .input { min-width: 0; }
.pl-row .input:nth-child(1) { flex: 1.3; }
.pl-row .input:nth-child(2) { flex: 0.9; }
.pl-row .input:nth-child(3) { flex: 0.8; }

/* 温馨提示弹窗（打开 App 时弹出） */
.notice-head {
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 12px;
  letter-spacing: .5px;
}
.notice-box {
  max-height: 52vh;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.85;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(78, 168, 222, .18);
  color: var(--text-main);
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 2px 8px rgba(78, 168, 222, .06);
}
/* 员工守则阅读框（入驻页 · 必须滑动阅读） */
.rules-box {
  max-height: 240px;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(78, 168, 222, .20);
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  color: var(--text-main);
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 2px 8px rgba(78, 168, 222, .06);
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot.on { background: #22c55e; }
.dot.off { background: #cbd5e1; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,.5); color: var(--text-sub);
}
.tab.on { background: var(--primary-gradient-deep); color: #fff; }

/* ---------- 统计 ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat { padding: 14px; text-align: center; }
.stat .num { font-size: 22px; font-weight: 800; color: var(--primary-dark); }
.stat .num.gold { color: #2FA88A; }
.stat .lbl { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* ---------- 表格（后台） ---------- */
.tablewrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(78,168,222,.12); white-space: nowrap; }
th { font-size: 12px; color: var(--text-sub); font-weight: 600; background: rgba(255,255,255,.35); }
td .btn { padding: 5px 10px; font-size: 12px; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; max-width: 560px; margin: 0 auto;
  background: rgba(255,255,255,.55); backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.6);
}
.tabbar.wide { max-width: 1180px; }
.tabbar .t {
  flex: 1; text-align: center; padding: 9px 0 11px; font-size: 11px; color: var(--text-sub); cursor: pointer;
}
.tabbar .t .ico { display: block; font-size: 19px; margin-bottom: 2px; }
.tabbar .t.on { color: var(--primary-dark); font-weight: 700; }

/* ---------- 弹窗 / 提示 ---------- */
.mask {
  position: fixed; inset: 0; background: rgba(30,58,71,.32); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;                     /* 兜底：弹窗再高也能整页滚动 */
  -webkit-overflow-scrolling: touch;
}
.modal {
  width: 100%; max-width: 420px; padding: 24px; border-radius: 24px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 20px 60px rgba(30,58,71,.28);
  /* 关键修复：弹窗内容超过屏幕时必须能滚动（下单弹窗字段多，手机上很容易超出） */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);      /* 支持 dvh 的浏览器按动态视口算，更准 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;         /* 滚到边界不带动背后页面 */
  margin: auto;                         /* 配合 .mask 的 flex 居中，保证顶部够得着 */
  scrollbar-width: thin;
}
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-thumb { background: rgba(78,168,222,.28); border-radius: 999px; }
.modal h3 { margin: 0 0 14px; font-size: 17px; text-align: center; }
/* 操作按钮吸底：内容滚动时「取消 / 立即下单」始终看得见 */
.modal-acts {
  display: flex; gap: 10px; margin-top: 16px;
  position: sticky; bottom: -24px;
  padding: 12px 0 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.94) 30%);
}
.modal-acts .btn { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: rgba(30,58,71,.86); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: 14px; z-index: 300; max-width: 80%; text-align: center;
}

.empty { text-align: center; color: var(--text-light); font-size: 14px; padding: 34px 10px; }
.err { color: var(--danger); font-size: 13px; margin-top: 8px; }
.hint { font-size: 12px; color: var(--text-light); margin-top: 6px; }
.hint.ok { color: var(--primary-dark); }
.hint.warn { color: var(--danger); }
.muted { color: var(--text-sub); font-size: 13px; }
.hr { height: 1px; background: rgba(78,168,222,.12); margin: 14px 0; }
.imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.imgs img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; cursor: pointer; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; }
.kv .k { color: var(--text-sub); }
.kv .v { color: var(--text-main); text-align: right; max-width: 62%; word-break: break-all; }

/* ================================================================
   液态玻璃（Liquid Glass）增强层
   —— 多层高光液面反光 + 边缘折射光 + 流动背景 + 按钮流光
   ================================================================ */
:root {
  --lg-blur: 26px;
  --lg-sat: 200%;
  --lg-border: rgba(255, 255, 255, .46);   /* ★ 高透明磨砂：白边柔化，避免"描了一圈白线" */
  --lg-hi: rgba(255, 255, 255, .92);
  --lg-shadow: 0 6px 20px rgba(30, 58, 71, .07);   /* ★ 原蓝色重阴影(.16) 收轻 */
}

/* 会缓慢流动的背景光斑：给玻璃提供"可折射"的内容 */
body::before, body::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(58px); opacity: .5; will-change: transform;
}
body::before {
  width: 48vmax; height: 48vmax; left: -14vmax; top: -16vmax;
  background: radial-gradient(circle, rgba(31, 184, 144, .62), rgba(31, 184, 144, 0) 68%);
  animation: lgDriftA 26s ease-in-out infinite alternate;
}
body::after {
  width: 46vmax; height: 46vmax; right: -16vmax; top: 16vmax;
  background: radial-gradient(circle, rgba(63, 193, 160, .55), rgba(63, 193, 160, 0) 68%);
  animation: lgDriftB 34s ease-in-out infinite alternate;
}
/* 滚动流畅度：滚动期间暂停"常驻无限动画"（背景漂移 / 按钮扫光）。
   这些是大范围 blur 图层，滚动时与内容合成抢 GPU，是掉帧主因；停下即恢复。 */
body.is-scrolling::before,
body.is-scrolling::after,
body.is-scrolling .btn.primary::after,
body.is-scrolling .bot-fab-dot,
body.is-scrolling .bot-fab { animation-play-state: paused; }
@keyframes lgDriftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vmax, 5vmax, 0) scale(1.14); } }
@keyframes lgDriftB { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-8vmax, 7vmax, 0) scale(.95); } }

.app { position: relative; z-index: 1; }

/* ---------- 玻璃基底：更厚的液面高光 + 四边边缘光 ---------- */
.glass, .glass-strong { position: relative; overflow: hidden; }
.glass > *, .glass-strong > * { position: relative; z-index: 1; }

.glass {
  /* ★ 高度透明的磨砂玻璃：白底 .80/.60/.74 → .40/.24/.34 */
  background: linear-gradient(160deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .24) 46%, rgba(255, 255, 255, .34));
  /* ★ 直接挂 CSS 磨砂（原来是 none，靠 lg-glass 的折射层当模糊源） */
  backdrop-filter: blur(14px) saturate(1.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  border: 1px solid var(--lg-border);
  /* ★ 2026-09-23：6 层（2 外 + 4 边 inset）→ 2 层。
     高透明的底子再叠四边白描边，会显得"糊"且发白；只留顶部一道柔光即可。 */
  box-shadow:
    0 6px 20px rgba(30, 58, 71, .07),
    inset 0 1px 0 rgba(255, 255, 255, .80);
  border-radius: var(--radius-lg);
}
.glass-strong {
  background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .64));
  backdrop-filter: blur(14px) saturate(190%);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .76);
}

/* 顶部斜向液面反光 */
.glass::before, .glass-strong::before {
  content: ''; position: absolute; left: -30%; top: -72%; width: 165%; height: 152%;
  background: linear-gradient(115deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .18) 26%, rgba(255, 255, 255, 0) 52%);
  transform: rotate(-8deg); pointer-events: none; z-index: 0;
}
/* 底部冷色折射光边 */
.glass::after, .glass-strong::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -2px; height: 48%;
  background: radial-gradient(120% 100% at 50% 122%, rgba(120, 220, 255, .32), rgba(255, 255, 255, 0) 72%);
  pointer-events: none; z-index: 0;
}

/* ---------- 顶部栏 / 底部导航：厚玻璃 ---------- */
.topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .80));
  backdrop-filter: blur(14px) saturate(200%);
  -webkit-backdrop-filter: blur(14px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, .64);
  box-shadow: 0 6px 22px rgba(78, 168, 222, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tabbar {
  background: linear-gradient(0deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84));
  backdrop-filter: blur(14px) saturate(200%);
  -webkit-backdrop-filter: blur(14px) saturate(200%);
  border-top: 1px solid rgba(255, 255, 255, .66);
  box-shadow: 0 -6px 22px rgba(78, 168, 222, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- 弹窗：厚玻璃 + 深投影 ---------- */
.modal {
  background: linear-gradient(160deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .72));
  backdrop-filter: blur(14px) saturate(190%);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 24px 70px rgba(30, 58, 71, .3), inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ---------- 按钮 / 选择器：玻璃质感 + 主按钮流光 ---------- */
.btn {
  border: 1px solid rgba(255, 255, 255, .66);
  box-shadow: 0 4px 14px rgba(78, 168, 222, .1), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.btn.primary {
  position: relative; overflow: hidden;
  box-shadow: 0 8px 20px rgba(78, 168, 222, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn.primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg); animation: lgSweep 4.8s ease-in-out infinite; pointer-events: none;
}
@keyframes lgSweep { 0% { left: -60%; } 55% { left: 125%; } 100% { left: 125%; } }

.chip.on, .tab.on {
  box-shadow: 0 5px 16px rgba(78, 168, 222, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.stat, .emp-card { position: relative; overflow: hidden; }
.input, .textarea, .select {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(78, 168, 222, .06);
}

/* ---------- 无障碍 / 兼容降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .btn.primary::after { animation: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong, .topbar, .tabbar, .modal { background: rgba(255, 255, 255, .9); }
}

/* ================================================================
   贴底全宽底栏（2026-09-23 改版：从「悬浮胶囊」改为「贴底整体栏」）
   —— 全宽贴底 + 只圆上两角 + 液态玻璃 + 选中态胶囊
   —— 比悬浮胶囊更省纵向空间（内容能多露出一行）
   ================================================================ */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;                      /* 宽屏时限宽居中 */
  width: 100%;
  max-width: 560px;
  display: flex;
  gap: 2px;
  /* 底部再垫一层 safe-area，避开 iPhone 小白条 */
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .82);
  /* ★ 液态玻璃（archisvaze/liquid-glass 折射）：底色要**半透**，玻璃才透得出来。
     背景的"糊"由 lg-glass.js 的折射滤镜（feGaussianBlur=LG_BAR.blur）负责。
     降级模式（frosted/plain）下由下面 [data-lg] 规则把不透明度加回去，保证可读。 */
  background: linear-gradient(180deg, rgba(255, 255, 255, .60), rgba(255, 255, 255, .48) 52%, rgba(255, 255, 255, .54));
  backdrop-filter: blur(14px) saturate(210%);
  -webkit-backdrop-filter: blur(14px) saturate(210%);
  box-shadow:
    0 -8px 28px rgba(30, 58, 71, .13),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(255, 255, 255, .5);
  overflow: hidden;
  z-index: 120;
}
/* 降级兜底：非"真折射"模式下没有折射滤镜糊背景，底色得加回来，否则字看不清 */
.tabbar[data-lg="frosted"] {
  /* 底栏要承载图标+文字，比卡片稍实一点，但同样走通透路线 */
  background: linear-gradient(180deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .40) 52%, rgba(255, 255, 255, .48));
}
.tabbar[data-lg="plain"] {
  background: linear-gradient(160deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .86) 52%, rgba(255, 255, 255, .90));
}
/* 液面斜向反光 */
.tabbar::before {
  content: ''; position: absolute; left: -20%; top: -130%; width: 150%; height: 175%;
  background: linear-gradient(112deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 56%);
  transform: rotate(-6deg); pointer-events: none;
}
/* 底部冷色折射光 */
.tabbar::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: -8px; height: 64%;
  background: radial-gradient(120% 100% at 50% 132%, rgba(120, 220, 255, .38), rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
.tabbar .t {
  position: relative; z-index: 2;
  /* ★ 2026-09-23 修复：原来 `flex: 0 0 auto` + `min-width: 64px` 让 5 个标签
     按内容宽度挤在容器左侧（一圈空白在右边，很难看）。
     改成 `flex: 1 1 0` 让每个标签**平均瓜分**整条底栏；
     选中胶囊用 offsetLeft + scaleX 定位，宽度随标签自适应，不受影响。 */
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 4px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 11px;
  color: var(--text-sub);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .16s ease;
}
.tabbar .t .ico { display: block; font-size: 19px; margin-bottom: 1px; }
.tabbar .t.on {
  color: #fff; font-weight: 700;
  background: var(--primary-gradient-deep);
  box-shadow: 0 6px 18px rgba(78, 168, 222, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.tabbar .t:active { transform: scale(.94); }
.tabbar.wide { max-width: min(780px, calc(100vw - 36px)); }

/* ---------- 5 标签适配（2026-09-19：新增「动态」标签后从 4 → 5 个） ----------
   原来的 min-width:64px 是按 4 个标签设计的，加到 5 个后总宽会顶到手机屏幕边缘。
   这里只在「非 wide（手机为主）」时收紧，桌面宽屏（.wide）保持原样。 */
.tabbar:not(.wide) .t {
  /* 5 个标签也靠 flex:1 平均分配，不再需要 min-width（否则窄屏仍会挤在一边） */
  padding: 6px 2px 7px;
}
/* 极窄屏（≤340px，如 iPhone SE 一代）再收一档，确保 5 个标签不换行不溢出 */
@media (max-width: 340px) {
  .tabbar:not(.wide) .t { min-width: 46px; padding: 7px 5px 8px; font-size: 10px; }
  .tabbar:not(.wide) .t .ico { font-size: 17px; }
}

/* 悬浮底栏不遮挡内容 / 提示 */
.app { padding-bottom: 124px; }
.toast { bottom: 122px; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: rgba(255, 255, 255, .95); }
}

/* ================================================================
   性能优化层（视觉基本不变，GPU 开销大幅下降）
   ================================================================ */
/* 1) 嵌套玻璃不再叠加毛玻璃：backdrop-filter 嵌套是最大的 GPU 杀手 */
.glass .glass,
.glass-strong .glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, .52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

/* 2) 全局降低模糊半径（26~34px → 16~22px，肉眼几乎无差别） */
:root { --lg-blur: 16px; }
.glass-strong { backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); }
.modal { backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); }

/* 3) 顶部栏固定定位，独立合成层，滚动更顺（底栏由长按拖拽逻辑管理 transform） */
.topbar { transform: translateZ(0); }

/* 4) 手机端专项减负 */
@media (max-width: 600px) {
  /* 固定背景在手机上滚动时反复重绘，改成随内容滚动 */
  html, body { background-attachment: scroll; }
  :root { --lg-blur: 13px; }
  /* 背景光斑：停止动画（静止的同样好看），模糊半径调小 */
  body::before, body::after { animation: none !important; filter: blur(42px); opacity: .42; }
  .topbar, .tabbar {
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
  }
  .modal {
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
  }
  /* 列表项数量多，逐个毛玻璃最费性能 → 换成半透明底 */
  .emp-card {
    /* ★ 改为直接挂 CSS 磨砂：不再依赖 lg-glass 逐个元素挂（那样只有前几个元素有磨砂），
       纯 CSS blur 比 SVG 折射便宜得多，且滚动时也不会被重新采样 */
    backdrop-filter: blur(14px) saturate(1.45);
    -webkit-backdrop-filter: blur(14px) saturate(1.45);
    background: linear-gradient(160deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .58));
    box-shadow: 0 4px 14px rgba(78, 168, 222, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
  }
  /* 小控件不需要毛玻璃 */
  .btn, .chip, .tab, .tag { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ================================================================
   液态玻璃 · 更标准 / 更厚（加深高光、边缘折射、色散）
   ================================================================ */
:root {
  --lg-blur: 22px;
  --lg-sat: 195%;
  --lg-lift-blur: 36px;
}

  .glass {
    /* ★ 2026-09-24：高度透明的磨砂玻璃（照参考图布局，质感按用户要求） */
    background: linear-gradient(180deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .24));
    /* ★ 直接挂 CSS 磨砂（原来是 none，靠 lg-glass 的折射层当模糊源）
       纯 CSS blur 比 SVG 折射便宜得多（不用 canvas 逐像素生成透镜贴图） */
    backdrop-filter: blur(14px) saturate(1.45);
    -webkit-backdrop-filter: blur(14px) saturate(1.45);
    border: 1px solid rgba(255, 255, 255, .55);
    /* ★ 阴影收轻：高透明的底子不需要堆阴影 */
    box-shadow:
      0 6px 20px rgba(30, 58, 71, .07),
      inset 0 1px 0 rgba(255, 255, 255, .82);
  }
/* 液面反光更亮、更宽 */
.glass::before, .glass-strong::before {
  background: linear-gradient(114deg,
    rgba(255, 255, 255, .78) 0%,
    rgba(255, 255, 255, .30) 22%,
    rgba(255, 255, 255, .06) 40%,
    rgba(255, 255, 255, 0) 56%);
}
/* 底部折射光带 + 轻微色散（青/品红），更像真实玻璃 */
.glass::after, .glass-strong::after {
  background:
    radial-gradient(130% 100% at 50% 128%, rgba(150, 235, 255, .42), rgba(255, 255, 255, 0) 70%),
    linear-gradient(90deg, rgba(120, 220, 255, .16), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 160, 220, .16));
  height: 54%;
}

/* ================================================================
   贴底底栏（2026-09-23）：**取消**长按拖拽
   —— 拖拽是"悬浮胶囊"时代的交互；改成贴底后拖动没有意义，
      而且旧规则里的 `translate(-50%)` 会把贴底栏整体推出屏幕左侧（真踩过）。
   —— 同时移除 touch-action:none，让底栏区域也能正常上下滚页面。
   ================================================================ */
.tabbar {
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  /* 注意：不要用 contain: paint —— 它会影响 backdrop 采样，是玻璃渲染异常的常见诱因 */
}
/* 抬起态：更大更透明更"厚"，投影更深（浮起来了） */
.tabbar.lg-held {
  transition: none;
  cursor: grabbing;
  --lg-scale: 1.08;
    background: linear-gradient(160deg,
      rgba(255, 255, 255, .76) 0%,
      rgba(255, 255, 255, .60) 50%,
      rgba(255, 255, 255, .70) 100%);
  backdrop-filter: blur(var(--lg-lift-blur)) saturate(230%) brightness(1.14);
  -webkit-backdrop-filter: blur(var(--lg-lift-blur)) saturate(230%) brightness(1.14);
  border-color: rgba(255, 255, 255, .92);
  box-shadow:
    0 34px 80px rgba(30, 58, 71, .36),
    0 12px 30px rgba(78, 168, 222, .28),
    0 0 0 1px rgba(255, 255, 255, .35),
    inset 0 2.5px 0 rgba(255, 255, 255, 1),
    inset 0 -2.5px 0 rgba(255, 255, 255, .62),
    inset 2.5px 0 0 rgba(255, 255, 255, .55),
    inset -2.5px 0 0 rgba(255, 255, 255, .55),
    inset 0 0 34px rgba(255, 255, 255, .34);
}
.tabbar.lg-held .t.on {
  box-shadow: 0 10px 26px rgba(78, 168, 222, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* 长按蓄力时的轻微按压反馈 */
.tabbar.lg-press { --lg-scale: .97; }

/* ================================================================
   骨架屏（替代"加载中…"，体感明显更快）
   ================================================================ */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .52);
  border-radius: 10px;
}
.skel::after {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  animation: skelSweep 1.3s ease-in-out infinite;
}
@keyframes skelSweep { to { transform: translateX(100%); } }
.skel-line { height: 12px; margin-bottom: 10px; }
.skel-line.w70 { width: 70%; }
.skel-card {
  position: relative;
  overflow: hidden;
  height: 76px;
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .55);
}
.skel-card::after {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  animation: skelSweep 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skel::after, .skel-card::after { animation: none; }
}

/* ================================================================
   滚动期间的临时降级（帧率关键）
   折射用的是 SVG 滤镜，滚动时每个都每帧重算 → 明显掉帧。
   滚动中临时换成一次普通高斯模糊，停下 140ms 后自动恢复折射。
   （plain 模式不参与）
   ================================================================ */
/* ⚠️ 2026-09-23 已删除「滚动时关闭滤镜 + 换实底」这套降级。
   原因：用**真实 GPU 窗口**实测，滚动时降级与否帧率完全一样（都是 89fps / 0 掉帧）——
   之前以为它有用，是在无 GPU 的 headless 环境测出来的假象（那个环境帧率上限只有 22fps）。
   而这个降级有个明显副作用：滚动瞬间 backdrop 被移除、背景从半透明渐变**被换成纯色**，
   在滑动时能明显看到底栏/卡片"闪一下变白/变色"（用户反馈的"滑动时颜色渲染异常"）。
   低端机若真的跑不动，由 lg-glass 的性能看门狗统一降级（refraction→frosted→plain），不靠这个。 */

/* ================================================================
   液态玻璃「降级模式」样式（backdrop-filter 一律在元素自己身上）
   html[data-lg-mode] 由 lg-glass.js 检测后写上：
     refraction = 真折射；frosted = 毛玻璃；plain = 非液态玻璃（纯色面板）
   ================================================================ */
/* 历史遗留：早期版本注入过 .lg-warp 子层（会遮住弹窗内容），这里确保它不显示 */
.lg-warp { display: none !important; }
/* 非液态玻璃：纯半透明面板，零模糊零滤镜（最省性能、最稳） */
html[data-lg-mode="plain"] .glass {
  background: rgba(255, 255, 255, .80);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(78, 168, 222, .14);
}
html[data-lg-mode="plain"] .glass::before,
html[data-lg-mode="plain"] .glass::after { display: none; }
html[data-lg-mode="plain"] body::before,
html[data-lg-mode="plain"] body::after { display: none; }
html[data-lg-mode="plain"] .topbar,
html[data-lg-mode="plain"] .tabbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-lg-mode="plain"] .modal {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-lg-mode="plain"] .btn.primary::after { animation: none; }
/* 毛玻璃模式：去掉色散等花哨内阴影，保证稳 */
html[data-lg-mode="frosted"] .glass {
  /* 高度透明磨砂：白底压到 .42/.24，阴影也收轻，避免"一块块白板"的厚重感 */
  background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.24));
  box-shadow: 0 6px 20px rgba(30, 58, 71, .07), inset 0 1px 0 rgba(255,255,255,.78);
}
.lg-warp {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.glass > .lg-warp, .glass-strong > .lg-warp, .tabbar > .lg-warp, .modal > .lg-warp {
  z-index: 0;
}

/* ================================================================
   过渡动画系统（丝滑优先：只动 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), inset 0 1px 0 rgba(255, 255, 255, .5);
  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: #fff;
  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: linear-gradient(135deg, rgba(63,193,160,.15), rgba(78,168,222,.10));
  border: 1px solid rgba(63,193,160,.30);
  cursor: pointer; position: relative; overflow: hidden;
}
.bb-entry::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,193,160,.22), transparent 70%);
  pointer-events: none;
}
.bb-icon { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(63,193,160,.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: #3FC1A0; font-weight: 700; }
/* 盲盒订单在列表里的标记 */
.od-blind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 8px; background: rgba(63,193,160,.16); color: #2FA88A; margin-left: 6px; }

/* ---------- 提现 / 结算（工作台蓝色大卡 + 结算记录） ---------- */
.settle-hero {
  border-radius: 20px;
  padding: 20px 18px 14px;
  color: #fff;
  background: linear-gradient(135deg, #3f7dfe 0%, #4d8dff 100%);
  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 rgba(255, 255, 255, .85);
  border-radius: 999px; padding: 8px 18px;
  font-size: 15px; font-weight: 700; color: #fff;
  cursor: pointer; user-select: none;
  background: rgba(255, 255, 255, .08);
}
.sh-btn:active { background: rgba(255, 255, 255, .22); }
.sh-ic { font-size: 14px; }
.sh-tip {
  display: flex; align-items: center; gap: 7px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: 12px; opacity: .95;
}
.sh-i {
  flex: 0 0 15px; width: 15px; height: 15px; line-height: 15px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9);
  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: #2ea36b; }
.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: linear-gradient(135deg, #e05a6d, #c94557);
  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: linear-gradient(135deg, #e05a6d, #c94557);
  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: linear-gradient(135deg, #e05a6d, #c94557);
  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: rgba(255,255,255,.85); }
.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: #eafaf4;
  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: linear-gradient(160deg, #dceefb, #e3f4ee);
}
@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: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 600; color: #2FA88A;
}
.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: rgba(255, 255, 255, .55);
}
.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: #eafaf4; 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: linear-gradient(135deg, #f6d98a, #de9a3c); 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: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .7);
}
.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: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .94));
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, .8);
  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: linear-gradient(180deg, #5a8ed0, #4577b8);
  box-shadow: 0 4px 12px rgba(69, 119, 184, .35);
  cursor: pointer;
}