/* ==========================================================
   连麦树洞 · 陪聊陪玩 H5
   浅粉紫 · 白卡片 · 双列瀑布流（移动端优先）
   ========================================================== */

:root {
  --bg-0: #FFF6F8;
  --bg-1: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFF4F6;
  --line: #FBE4EA;
  --line-strong: #F6CFDA;

  --text: #2E1C2A;
  --text-2: #7C6A79;
  --text-3: #AC9CAB;

  --pink: #EE7A9B;
  --pink-soft: #F49AB6;
  --purple: #7FB2E8;
  --gold: #FF9F1C;
  --green: #18C08F;
  --red: #FF4D4F;

  --grad-main: linear-gradient(90deg, #FBA984, #F4B3E3);
  --grad-bg: linear-gradient(178deg, #FFE9EA 6%, #DEF5FF 54%, #CAF1FA 100%);

  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 12px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 62px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  background-image: var(--grad-bg);
  background-attachment: fixed;
  background-size: 100% 100%;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

#app { overflow-x: hidden; }

/* 顶部柔光 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 420px;
  background:
    radial-gradient(520px 300px at 8% -4%, rgba(255, 170, 190, 0.40), transparent 70%),
    radial-gradient(520px 320px at 96% -2%, rgba(150, 208, 244, 0.42), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { border: none; background: none; cursor: pointer; }
input, textarea { -webkit-appearance: none; }

#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 249, 250, 0.94) 62%, rgba(255, 249, 250, 0));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 9px; }

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: linear-gradient(140deg, #FBA984, #F4B3E3);
  box-shadow: 0 5px 14px rgba(238, 122, 155, 0.30);
}

.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #2E1C2A;
}

.brand-sub {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.2px;
  margin-top: -3px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #EAFBF4;
  border: 1px solid #C9F1E2;
  font-size: 11px;
  color: #0FA97E;
  white-space: nowrap;
}

.dot-live {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.9s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(24, 192, 143, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(24, 192, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 192, 143, 0); }
}

/* ---------- 视图容器 ---------- */
.view {
  flex: 1;
  padding: 0 16px calc(var(--tabbar-h) + var(--safe-b) + 22px);
}

/* ---------- 搜索 ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(238, 122, 155, 0.06);
}

.sb-ico { font-size: 13px; opacity: 0.55; }

.sb-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
}

.sb-input::placeholder { color: var(--text-3); }

/* ---------- 轮播 ---------- */
.carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(238, 122, 155, 0.14);
}

.cb-track { display: flex; will-change: transform; }

.cb-slide {
  position: relative;
  flex: 0 0 100%;
  height: 148px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.cb-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(52, 20, 40, 0.42) 0%, rgba(52, 20, 40, 0.06) 64%, transparent 100%);
}

.cb-emoji {
  position: absolute;
  right: -4px;
  top: -12px;
  font-size: 100px;
  line-height: 1;
  opacity: 0.32;
  z-index: 1;
  transform: rotate(-8deg);
}

.cb-tag {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 3px 9px;
  margin-bottom: 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.cb-title {
  position: relative;
  z-index: 2;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(60, 20, 40, 0.35);
}

.cb-sub {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 8px rgba(60, 20, 40, 0.3);
}

.cb-dots {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 5px;
}

.cb-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transition: width .26s ease, background .26s ease;
}

.cb-dot.on { width: 14px; background: #fff; }

/* ---------- 金刚区 ---------- */
.kings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 4px;
  margin: 4px 0 16px;
}

.kg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.kg-ico {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: linear-gradient(150deg, var(--c1, #FFC2D6), var(--c2, #EE7A9B));
  box-shadow: 0 6px 14px rgba(238, 122, 155, 0.18);
  transition: transform .14s ease;
}

.kg:active .kg-ico { transform: scale(0.92); }
.kg-t { font-size: 11px; color: var(--text-2); font-weight: 500; }

/* ---------- 公告 ---------- */
.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}

.nt-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
}

.nt-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.nt-txt {
  display: block;
  font-size: 11.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- 分类胶囊 ---------- */
.cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 14px;
  margin: 0 -16px;
  scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }

.cat {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: all .18s ease;
}

.cat.active {
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(238, 122, 155, 0.28);
}

/* ---------- 列表头 ---------- */
.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
}

.list-title { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
.list-meta { font-size: 11px; color: var(--text-3); }

/* ---------- 双列瀑布流卡片 ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: start;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(238, 122, 155, 0.07);
  overflow: hidden;
  transition: transform .16s ease;
}

.card:active { transform: scale(0.975); }

.card-cover {
  position: relative;
  height: 132px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cover-emoji {
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(90, 40, 70, 0.16));
}

.cover-lvl {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 6px;
}

.cover-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.95);
}

.cover-dot.off { background: #D9CDD7; }

.cover-price {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--pink);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.2px;
  box-shadow: 0 2px 8px rgba(238, 122, 155, 0.18);
}

.cover-price i { font-size: 10px; font-weight: 600; font-style: normal; }
.cover-price em { font-size: 9px; font-weight: 400; color: var(--text-3); font-style: normal; margin-left: 1px; }

.card-body { padding: 8px 9px 10px; }

.name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}

.c-name {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-gender { flex: 0 0 auto; font-size: 10px; color: var(--text-3); }

.c-tags {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin: 5px 0 7px;
  height: 18px;
}

.tag {
  flex: 0 0 auto;
  font-size: 9.5px;
  padding: 1.5px 6px;
  border-radius: 5px;
  background: #FFF1F6;
  color: #E85C86;
  border: 1px solid #FFE9EA;
  white-space: nowrap;
}

.c-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-3);
}

.c-stat { display: flex; align-items: center; gap: 6px; }
.c-stat b { color: var(--gold); font-weight: 650; }
.c-resp { font-size: 9.5px; color: var(--text-3); }

/* 兼容旧结构 */
.c-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.card-row1 { display: flex; align-items: center; gap: 6px; }
.price { display: flex; align-items: baseline; gap: 2px; color: var(--pink); }
.price .cur { font-size: 10px; font-weight: 600; }
.price .num { font-size: 17px; font-weight: 750; }
.price .unit { font-size: 10px; color: var(--text-3); }

/* ---------- 等级徽章 ---------- */
.lvl {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.lvl-jinli    { color: #7A4A00; background: linear-gradient(135deg, #FFE9B8, #FFC46B); }
.lvl-shouxi   { color: #12406B; background: linear-gradient(135deg, #DFF0FB, #A9D2F0); }
.lvl-zhendian { color: #96234A; background: linear-gradient(135deg, #FFDCE8, #FFB3CB); }
.lvl-nanshen  { color: #12406B; background: linear-gradient(135deg, #D6ECFF, #9BD8FF); }
.lvl-nvshen   { color: #8C1B3E; background: linear-gradient(135deg, #FFD9E2, #FFA8BE); }
.lvl-jinpai   { color: #0C5A44; background: linear-gradient(135deg, #D3F7E8, #A5E9CE); }

/* ---------- 空状态 / 骨架 ---------- */
.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-3);
}

.empty-ico { font-size: 40px; opacity: 0.5; margin-bottom: 10px; }
.empty-title { font-size: 14px; color: var(--text-2); margin-bottom: 5px; font-weight: 600; }
.empty-desc { font-size: 12px; line-height: 1.65; }

.skeleton {
  height: 200px;
  border-radius: var(--radius);
  background: linear-gradient(100deg, #FFF4F6 28%, #FFE7ED 46%, #FFF4F6 64%);
  background-size: 220% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

/* ---------- 底部 tabbar ---------- */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 40;
  display: flex;
  padding: 5px 8px calc(5px + var(--safe-b));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(238, 122, 155, 0.05);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 500;
  transition: color .16s ease;
}

.tab-ico { font-size: 18px; line-height: 1.15; filter: grayscale(0.55) opacity(0.7); transition: filter .16s; }
.tab.active { color: var(--pink); font-weight: 600; }
.tab.active .tab-ico { filter: none; }

/* ---------- 详情页 ---------- */
.detail-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-0);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideUp .28s cubic-bezier(.22, .9, .3, 1);
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.detail-hero {
  position: relative;
  padding: 14px 16px 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF0F3 0%, rgba(255, 247, 250, 0) 100%);
}

.detail-hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 175, 0.34), transparent 68%);
}

.back-btn {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  box-shadow: 0 3px 10px rgba(238, 122, 155, 0.10);
  font-size: 16px;
  color: var(--text);
  margin-bottom: 16px;
}

.detail-id {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
  align-items: center;
}

.detail-ava {
  width: 80px;
  height: 80px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  font-size: 36px;
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(255, 120, 155, 0.20);
}

.detail-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.detail-name { font-size: 21px; font-weight: 750; letter-spacing: 0.3px; }

.detail-meta {
  font-size: 11.5px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.meta-sep { width: 3px; height: 3px; border-radius: 50%; background: #E3D3DD; }
.meta-charm { color: var(--gold); font-weight: 600; }

/* 语音条 */
.voice-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #FFE0EC;
  box-shadow: 0 6px 16px rgba(238, 122, 155, 0.07);
}

.wave { display: flex; align-items: center; gap: 3px; height: 20px; flex: 0 0 auto; }

.wave i {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: #F8B4C6;
  animation: waveBeat 1.1s infinite ease-in-out;
}

.wave i:nth-child(1) { height: 8px;  animation-delay: 0s; }
.wave i:nth-child(2) { height: 15px; animation-delay: .12s; }
.wave i:nth-child(3) { height: 11px; animation-delay: .24s; }
.wave i:nth-child(4) { height: 19px; animation-delay: .36s; }
.wave i:nth-child(5) { height: 12px; animation-delay: .48s; }
.wave i:nth-child(6) { height: 9px;  animation-delay: .60s; }

@keyframes waveBeat {
  0%, 100% { transform: scaleY(0.42); }
  50%      { transform: scaleY(1); }
}

.voice-text { font-size: 12px; color: var(--text-2); line-height: 1.55; font-style: italic; }

/* 区块 */
.section { padding: 0 16px 18px; }

.sec-title {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sec-title::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #FBA984, #F4B3E3);
}

.intro-box {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
  padding: 13px 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
}

.svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  margin-bottom: 9px;
  border-radius: var(--radius);
  background: #fff;
  border: 1.5px solid var(--line);
  transition: all .16s ease;
}

.svc.sel {
  border-color: #FFB3C8;
  background: #FFF6FA;
  box-shadow: 0 6px 16px rgba(238, 122, 155, 0.10);
}

.svc-name { font-size: 13.5px; font-weight: 650; margin-bottom: 2px; }
.svc-sub { font-size: 11px; color: var(--text-3); }
.svc-price { font-size: 15px; font-weight: 750; color: var(--pink); white-space: nowrap; }
.svc-price small { font-size: 10px; color: var(--text-3); font-weight: 400; }

.qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 3px;
}

.qty button {
  width: 32px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--pink);
  background: #fff;
  border: 1px solid var(--line);
}

.qty button:active { background: #FFF4F6; }

.qty span {
  min-width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.action-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 62;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px calc(11px + var(--safe-b));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(238, 122, 155, 0.07);
}

.ab-price { flex: 1; }
.ab-label { font-size: 10.5px; color: var(--text-3); }
.ab-amount { display: flex; align-items: baseline; gap: 1px; color: var(--pink); }
.ab-amount .cur { font-size: 12px; font-weight: 600; }
.ab-amount .num { font-size: 23px; font-weight: 800; letter-spacing: -0.6px; }

.btn-primary {
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  box-shadow: 0 8px 20px rgba(238, 122, 155, 0.32);
  transition: transform .14s ease;
  white-space: nowrap;
}

.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: .5; box-shadow: none; }

.btn-ghost {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--pink);
  background: #fff;
  border: 1px solid var(--line-strong);
}

.btn-block { width: 100%; text-align: center; }

/* ---------- 底部弹层 ---------- */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(46, 28, 42, 0.42);
  animation: fadeIn .2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 81;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 8px 18px calc(20px + var(--safe-b));
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -12px 40px rgba(90, 40, 70, 0.18);
  animation: sheetUp .28s cubic-bezier(.22, .9, .3, 1);
}

@keyframes sheetUp {
  from { transform: translate(-50%, 100%); }
  to   { transform: translate(-50%, 0); }
}

.sheet-handle {
  width: 38px;
  height: 4px;
  margin: 4px auto 12px;
  border-radius: 99px;
  background: #F0DDE6;
}

.sheet-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.sheet-sub { font-size: 12px; color: var(--text-3); margin-bottom: 16px; }

.field { margin-bottom: 14px; }

.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 7px;
}

.field-label .fn { font-size: 10.5px; color: var(--text-3); font-weight: 400; }

.input, .textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
}

.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus { border-color: #FFB3C8; background: #fff; }

.textarea { resize: none; min-height: 74px; line-height: 1.6; }

.summary {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  margin: 4px 0 16px;
}

.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 3px 0;
}

.srow b { color: var(--text); font-weight: 650; }

.srow.total {
  border-top: 1px dashed #F6D3E1;
  margin-top: 6px;
  padding-top: 9px;
  font-size: 13px;
}

.srow.total b { color: var(--pink); font-size: 18px; font-weight: 800; }
.srow .cut { color: var(--green); font-weight: 600; }

/* ---------- 订单 ---------- */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.seg::-webkit-scrollbar { display: none; }

.seg button {
  flex: 1;
  padding: 7px 6px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  transition: all .16s;
  white-space: nowrap;
}

.seg button.on {
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(238, 122, 155, 0.24);
}

.oc {
  padding: 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(238, 122, 155, 0.05);
  margin-bottom: 10px;
}

.oc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--surface-2);
}

.oc-ava {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.oc-who { flex: 1; min-width: 0; }
.oc-name { font-size: 13.5px; font-weight: 650; }
.oc-no { font-size: 10px; color: var(--text-3); letter-spacing: 0.2px; }

.oc-status {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
}

.st-pending   { color: #B26A00; background: #FFF3DE; }
.st-paid      { color: #D93A68; background: #FFEDF3; }
.st-serving   { color: #2C6FB8; background: #EAF3FD; }
.st-completed { color: #0E9C76; background: #E7FAF3; }
.st-cancelled { color: var(--text-3); background: #F6F2F5; }

.oc-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-2);
  padding: 5px 0;
}

.oc-line b { color: var(--text); font-weight: 650; }

.oc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--surface-2);
}

.btn-sm {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.btn-sm.solid {
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  box-shadow: 0 4px 12px rgba(238, 122, 155, 0.26);
}

.btn-sm.line {
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--line-strong);
}

.btn-sm.green { color: #fff; background: #18C08F; }

.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #EFFBF6;
  border: 1px solid #CFF1E4;
}

.cc-label { font-size: 10px; color: #0E9C76; letter-spacing: 0.3px; }
.cc-val { font-size: 14px; font-weight: 700; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.3px; color: #14614C; }

/* ---------- 我的 / 接单台 ---------- */
.profile {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #FFF4F6, #EEF7FE);
  border: 1px solid #FCE1EC;
  margin-bottom: 14px;
}

.pf-row { display: flex; align-items: center; gap: 13px; }

.pf-ava {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  box-shadow: 0 6px 16px rgba(238, 122, 155, 0.26);
}

.pf-name { font-size: 17px; font-weight: 700; margin-bottom: 1px; }
.pf-sub { font-size: 11.5px; color: var(--text-2); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.stat {
  padding: 12px 8px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
}

.stat-num { font-size: 19px; font-weight: 750; color: var(--text); letter-spacing: -0.4px; }
.stat-num.pink { color: var(--pink); }
.stat-lb { font-size: 10px; color: var(--text-3); margin-top: 1px; }

.menu {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 14px;
}

.mi {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--surface-2);
}

.mi:last-child { border-bottom: none; }
.mi:active { background: #FFF8FB; }
.mi-ico { font-size: 16px; width: 20px; text-align: center; }
.mi-txt { flex: 1; font-size: 13.5px; }
.mi-sub { display: block; font-size: 10.5px; color: var(--text-3); font-weight: 400; margin-top: 1px; }
.mi-arrow { color: var(--text-3); font-size: 13px; }
.mi-note { font-size: 11px; color: var(--text-3); }

/* ---------- 分销中心 ---------- */
.inv-hero {
  background: linear-gradient(150deg, #FBA984 0%, #F4B3E3 100%);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 24px rgba(244, 179, 227, 0.35);
  margin-bottom: 14px;
}
.inv-rate { font-size: 44px; font-weight: 850; letter-spacing: -1px; line-height: 1; }
.inv-rate span { font-size: 22px; font-weight: 750; }
.inv-rate-txt { margin-top: 10px; font-size: 12.5px; line-height: 1.7; opacity: 0.95; }
.inv-rate-txt b { font-weight: 800; }
.inv-code { font-size: 17px; letter-spacing: 2.5px; color: #EE7A9B; font-family: Menlo, Consolas, monospace; }

.wb-tip {
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
  background: #FFF4F6;
  border: 1px solid var(--line);
}

/* 店员端页签栏 */
.wb-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.wb-tab {
  flex: 1;
  padding: 9px 0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all .18s ease;
}

.wb-tab span { font-size: 13px; }

.wb-tab.on {
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(238, 122, 155, 0.28);
}

/* 上下线开关 */
.wb-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
}

.wb-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }

.wb-switch i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #E5E0E8;
  transition: background .25s ease;
}

.wb-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform .25s ease;
}

.wb-switch input:checked + i { background: linear-gradient(90deg, #FBA984, #F4B3E3); }
.wb-switch input:checked + i::after { transform: translateX(18px); }

/* 店员表单 */
.wb-form {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
}

.wb-field { margin-bottom: 11px; }

.wb-field label {
  display: block;
  font-size: 11.5px;
  color: var(--text-2);
  margin-bottom: 5px;
  font-weight: 600;
}

.wb-field input,
.wb-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #FFF9FA;
  font-size: 13px;
  color: var(--text);
  outline: none;
  resize: none;
  font-family: inherit;
}

.wb-field input:focus,
.wb-field textarea:focus { border-color: var(--pink); background: #fff; }

.wb-seg { display: flex; gap: 8px; }

.wb-seg-i { flex: 1; position: relative; }

.wb-seg-i input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.wb-seg-i span {
  display: block;
  text-align: center;
  padding: 9px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #FFF9FA;
  font-size: 13px;
  color: var(--text-2);
  transition: all .18s ease;
}

.wb-seg-i input:checked + span {
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  border-color: transparent;
  font-weight: 650;
}

.wb-note {
  margin-top: 10px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-3);
  text-align: center;
}

.stat-num.blue { color: #4A8FD0; }

.oc-amt {
  font-size: 15px;
  font-weight: 750;
  color: #0E9C76;
  letter-spacing: -0.3px;
  flex: 0 0 auto;
}

/* ---------- 抢单大厅 ---------- */
.hl-card {
  border: 1.2px dashed #F6B9A2;
  background: linear-gradient(150deg, #FFF7F2 0%, #FFFFFF 55%);
}

.hl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 9px;
}

.hl-chips span {
  font-size: 11.5px;
  font-weight: 620;
  color: #C06B3F;
  background: #FFF0E6;
  border: 1px solid #FFDFCB;
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.3;
}

.oc-amt.out { color: #E8637E; }

/* ---------- 聊天 ---------- */
.chat-note {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #FFF4F6;
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--text-2);
  margin-bottom: 12px;
}

.cv-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 9px;
  cursor: pointer;
}

.cv-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  flex: 0 0 auto;
}

.cv-main { flex: 1; min-width: 0; }

.cv-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cv-top b { font-size: 14px; }

.cv-time { font-size: 10px; color: var(--text-3); flex: 0 0 auto; }

.cv-last {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 4px 10px 0;
  background: linear-gradient(180deg, rgba(255, 249, 250, 0.96) 70%, rgba(255, 249, 250, 0));
  backdrop-filter: blur(10px);
}

.thread-peer { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.thread-peer b { font-size: 15px; }
.thread-peer .cv-ava { width: 30px; height: 30px; font-size: 14px; }
.thread-role {
  font-size: 10px;
  color: var(--pink);
  background: #FFEDF3;
  padding: 2px 7px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.thread-tip { font-size: 9.5px; color: var(--text-3); text-align: right; max-width: 34%; }

.thread-body {
  padding: 6px 2px 10px;
  min-height: 46vh;
  max-height: calc(100dvh - 200px);
  overflow-y: auto;
}

.thread-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-3);
  font-size: 12.5px;
}

.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

.msg-row.mine { flex-direction: row-reverse; }

.msg-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex: 0 0 auto;
}

.msg-bubble {
  position: relative;
  max-width: 74%;
  padding: 9px 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}

.msg-row.mine .msg-bubble {
  background: linear-gradient(135deg, #FFF1E3, #FDE7F1);
  border-color: transparent;
  border-radius: 16px 16px 4px 16px;
}

.msg-time {
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 9px;
  color: var(--text-3);
}

.thread-input {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 0 calc(10px + var(--safe-b));
  background: linear-gradient(0deg, rgba(255, 249, 250, 0.98) 70%, rgba(255, 249, 250, 0));
}

.thread-input input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 13px;
  outline: none;
}

.chat-send {
  flex: 0 0 auto;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  box-shadow: 0 5px 12px rgba(238, 122, 155, 0.3);
}

.dh-chat {
  width: 52px;
  height: 44px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 15px;
  line-height: 1;
}

.dh-chat i { font-style: normal; font-size: 8.5px; color: var(--text-3); margin-top: 1px; }

.wb-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

/* ---------- 评价 ---------- */
.rv-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 2px 12px;
}

.rv-summary b { font-size: 26px; color: var(--pink); letter-spacing: -1px; }
.rv-summary span { font-size: 11.5px; color: var(--text-3); }

.rv-stars i {
  font-style: normal;
  font-size: 12px;
  color: #E8DCC8;
}

.rv-stars i.on { color: #FFB13C; }

.rv-item {
  padding: 11px 2px;
  border-top: 1px solid var(--line);
}

.rv-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rv-top b { font-size: 12.5px; }
.rv-time { margin-left: auto; font-size: 10px; color: var(--text-3); }

.rv-txt { margin-top: 5px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }

.rv-reply {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: #FFF4F6;
  font-size: 11.5px;
  color: #B2597A;
  line-height: 1.6;
}

.rv-form { padding-top: 6px; }

.rv-pick { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }

.rv-star-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 14px;
}

.rv-star-row i {
  font-style: normal;
  font-size: 30px;
  color: #E8DCC8;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}

.rv-star-row i.on { color: #FFB13C; }
.rv-star-row i:active { transform: scale(1.2); }

.rv-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #FFF9FA;
  font-size: 13px;
  color: var(--text);
  outline: none;
  resize: none;
  font-family: inherit;
  margin-bottom: 12px;
}

.rv-form textarea:focus { border-color: var(--pink); background: #fff; }

/* ---------- 钱包 ---------- */
.wallet-hero {
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  background: linear-gradient(160deg, #FFE9EA 0%, #DDF2FC 100%);
  border: 1px solid var(--line);
  text-align: center;
}

.wh-label { font-size: 11.5px; color: var(--text-2); }

.wh-coins {
  margin: 6px 0 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
}

.wh-sub { font-size: 10.5px; color: var(--text-3); }

/* ---------- 管理后台 ---------- */
.admin-tip {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #FFF1E3, #FDE7F1);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 650;
  color: #B2597A;
  margin-bottom: 12px;
}

.wb-tip {
  padding: 14px;
  border-radius: var(--radius);
  background: #FFF8EC;
  border: 1px solid #FFECC7;
  font-size: 12.5px;
  line-height: 1.7;
  color: #7A5A20;
  margin-bottom: 14px;
}

/* ---------- 榜单 ---------- */
.rank-head { padding: 2px 0 12px; }
.rank-eyebrow { font-size: 10px; letter-spacing: 2px; color: #F9A9C0; font-weight: 600; }
.rank-title { font-size: 23px; font-weight: 800; letter-spacing: 0.4px; margin: 1px 0 2px; }
.rank-sub { font-size: 11px; color: var(--text-3); }

.seg-gender { margin-bottom: 11px; }
.seg-gender button { font-size: 12.5px; padding: 9px 4px; }

.rk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rk-toolbar-t { font-size: 12.5px; font-weight: 700; }

.rk-period {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
}

.rk-period button {
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-2);
}

.rk-period button.on {
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  color: #fff;
  font-weight: 600;
}

/* 领奖台 */
.podium { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 14px; }
.pod { position: relative; flex: 1; min-width: 0; text-align: center; padding: 0 2px; }
.pod-1 { order: 2; }
.pod-2 { order: 1; }
.pod-3 { order: 3; }

.pod-crown { font-size: 17px; line-height: 1; margin-bottom: 1px; }

.pod-ava {
  width: 58px;
  height: 58px;
  margin: 0 auto 6px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  font-size: 25px;
  box-shadow: 0 6px 14px rgba(255, 120, 155, 0.16);
}

.pod-1 .pod-ava {
  width: 72px;
  height: 72px;
  border-radius: 23px;
  font-size: 31px;
  box-shadow: 0 0 0 2.5px #FFD98A, 0 8px 20px rgba(255, 180, 60, 0.28);
}

.pod-name { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-charm { font-size: 10.5px; font-weight: 700; color: var(--gold); margin-top: 1px; }

.pod-plinth {
  margin-top: 7px;
  padding: 6px 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #FFF4F6, #FFEAF0);
  border: 1px solid #FCE1EC;
  border-bottom: none;
  font-size: 13px;
  font-weight: 800;
  color: #D98BA6;
}

.pod-1 .pod-plinth {
  padding: 13px 0;
  background: linear-gradient(180deg, #FFE9B8, #FFF6DF);
  border-color: #FFE0A3;
  color: #B8730A;
}

.pod-3 .pod-plinth { padding: 4px 0; }

/* 榜单行 */
.rk-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.rk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(238, 122, 155, 0.04);
}

.rk:active { background: #FFF8FB; }

.rk-no { width: 17px; text-align: center; font-size: 12px; font-weight: 800; color: var(--text-3); }
.rk-ava { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; }
.rk-info { flex: 1; min-width: 0; }
.rk-name { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 650; }
.rk-sub { font-size: 10px; color: var(--text-3); margin-top: 1px; }
.rk-val { text-align: right; }
.rk-val b { display: block; font-size: 14px; font-weight: 750; color: #E8952B; }
.rk-val small { font-size: 9px; color: var(--text-3); }

/* ---------- PK 条 ---------- */
.pk-strip {
  padding: 12px 13px;
  border-radius: 15px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #FFF4F6, #EAF4FD);
  border: 1px solid #FCE1EC;
  box-shadow: 0 6px 16px rgba(238, 122, 155, 0.06);
}

.pk-strip:active { transform: scale(0.99); }

.pk-strip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.pk-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--pink); }
.pk-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--pink); animation: pulse 1.6s infinite; }
.pk-strip-timer { font-size: 10px; color: var(--text-3); }

.pk-strip-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 700; }
.pk-strip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.pk-strip-vs { font-size: 10.5px; font-weight: 800; font-style: italic; letter-spacing: 1px; color: #C9B2C0; }

.pk-strip-bar { height: 6px; border-radius: 99px; background: #FBE7EF; overflow: hidden; margin: 8px 0 6px; }
.pk-strip-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FBA984, #F4B3E3); }
.pk-strip-foot { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--text-3); }
.pk-strip-foot span:nth-child(2) { flex: 1; text-align: center; padding: 0 8px; }

/* ---------- PK 擂台页 ---------- */
.pk-wrap {
  position: fixed;
  inset: 0;
  z-index: 70;
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 34px;
  background: var(--bg-0);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideUp .28s cubic-bezier(.22, .9, .3, 1);
}

.pk-hero {
  position: relative;
  padding: 14px 16px 6px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF0F3 0%, rgba(255, 247, 250, 0) 100%);
}

.pk-hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 175, 0.34), transparent 68%);
}

.pk-eyebrow { position: relative; z-index: 2; font-size: 10px; letter-spacing: 1.6px; color: #F9A9C0; font-weight: 600; }
.pk-title { position: relative; z-index: 2; font-size: 22px; font-weight: 800; margin: 2px 0 3px; }
.pk-topic { position: relative; z-index: 2; font-size: 12px; color: var(--text-2); }

.pk-tabs { display: flex; gap: 7px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; }
.pk-tabs::-webkit-scrollbar { display: none; }

.pk-tab {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--line);
}

.pk-tab.on {
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  border-color: transparent;
  font-weight: 600;
}

.pk-arena { display: flex; align-items: flex-start; gap: 6px; padding: 20px 16px 4px; }
.pk-side { flex: 1; min-width: 0; text-align: center; }

.pk-ava {
  width: 74px;
  height: 74px;
  margin: 0 auto 7px;
  border-radius: 25px;
  display: grid;
  place-items: center;
  font-size: 33px;
  box-shadow: 0 8px 20px rgba(255, 120, 155, 0.18);
}

.pk-name { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.pk-side .lvl { display: inline-block; }
.pk-charm { font-size: 10px; color: var(--gold); margin-top: 4px; font-weight: 600; }

.pk-vs {
  flex: 0 0 auto;
  align-self: center;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
  color: #D9C6D2;
}

.pk-bar {
  display: flex;
  height: 12px;
  margin: 0 16px;
  border-radius: 99px;
  overflow: hidden;
  background: #FBE7EF;
}

.pk-bar i { display: block; height: 100%; transition: width .45s cubic-bezier(.22, .9, .3, 1); }
.pk-bar-l { background: linear-gradient(90deg, #FBA984, #F4B3E3); }
.pk-bar-r { background: linear-gradient(90deg, #A9C4FF, #6B8CF0); }

.pk-pct { display: flex; justify-content: space-between; margin: 7px 16px 0; font-size: 11.5px; }
.pk-pct-l { color: #E8457A; font-weight: 700; }
.pk-pct-r { color: #4C6FE0; font-weight: 700; }
.pk-timer { margin-top: 8px; text-align: center; font-size: 11px; color: var(--text-3); }

.pk-actions { display: flex; gap: 8px; padding: 15px 16px 0; }

.pk-send {
  flex: 1;
  padding: 9px 4px 8px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .14s ease;
}

.pk-send:active { transform: scale(0.96); }
.pk-send-ico { font-size: 17px; }
.pk-send b { font-size: 13px; font-weight: 750; }
.pk-send small { font-size: 9.5px; color: var(--text-3); }

.pk-send.l { border-color: #FBE0E6; background: #FFF4F8; }
.pk-send.l b { color: var(--pink); }
.pk-send.r { border-color: #D6E0FF; background: #F4F7FF; }
.pk-send.r b { color: #4C6FE0; }

.pk-hint { padding: 9px 16px 0; text-align: center; font-size: 10px; color: var(--text-3); }

.pk-feed-head { padding: 18px 16px 8px; font-size: 12.5px; font-weight: 700; }
.pk-feed { padding: 0 16px; }

.pk-feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-2);
  font-size: 11.5px;
  color: var(--text-2);
}

.pk-feed-row:last-child { border-bottom: none; }
.pk-feed-dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--pink); }
.pk-feed-dot.right { background: #6B8CF0; }
.pk-feed-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-feed-time { font-size: 9.5px; color: var(--text-3); }
.pk-feed-empty { font-size: 11.5px; color: var(--text-3); padding: 2px 0 0; }

.pk-wrap .rule-note { margin: 18px 16px 0; }

/* ---------- 登录卡 ---------- */
.login-card {
  margin: 26px 0;
  padding: 28px 20px 24px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(238, 122, 155, 0.08);
  text-align: center;
}

.login-ico { font-size: 42px; margin-bottom: 12px; }
.login-title { font-size: 17px; font-weight: 750; margin-bottom: 6px; }
.login-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.7; margin-bottom: 20px; }

.login-hint {
  margin-top: 14px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-3);
}

.rule-note {
  font-size: 10.5px;
  line-height: 1.75;
  color: var(--text-3);
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  background: #FFF8FB;
  border: 1px solid #FCE9F1;
  margin-bottom: 14px;
}

/* ---------- toast / loading ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 26px);
  transform: translate(-50%, 12px);
  z-index: 200;
  max-width: 84%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(46, 28, 42, 0.92);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

#toast.show { opacity: 1; transform: translate(-50%, 0); }

.loading-mask {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  background: rgba(255, 247, 250, 0.55);
  backdrop-filter: blur(2px);
}

.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid #FFD9E6;
  border-top-color: var(--pink);
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================
   星尘树洞式重构：温馨提示 / 打赏公告 / 榜单卡 / PK 卡
   店员列表 / 表白墙 / 盲盒 / 会员页
   ========================================================== */

/* ---------- 搜索按钮 ---------- */
.sb-btn {
  flex: 0 0 auto;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 620;
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  box-shadow: 0 4px 10px rgba(238, 122, 155, 0.28);
}

/* ---------- 温馨提示（轮播） ---------- */
.tips-carousel {
  position: relative;
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: height 0.35s ease;
}

.tips-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.5s ease;
}

.tips-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.tips-slide .tips-card { margin-bottom: 0; }

.tips-dots {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.tips-dots i {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: rgba(62, 158, 114, 0.28);
  transition: all 0.3s;
  cursor: pointer;
}

.tips-dots i.active {
  width: 14px;
  background: #3E9E72;
}

/* 其它主题的提示卡 */
.tips-blue {
  background: linear-gradient(150deg, #EAF4FD 0%, #DDF2FC 100%);
  border-color: #C7D9F0;
  box-shadow: 0 6px 18px rgba(90, 140, 200, 0.10);
}
.tips-blue .tips-title { color: #4A7EC2; }
.tips-blue .tips-body { color: #5B6E8A; }
.tips-blue .tips-foot { color: #8E7BCC; }

.tips-gold {
  background: linear-gradient(150deg, #FDF6E9 0%, #FDF0F5 100%);
  border-color: #F0DEC2;
  box-shadow: 0 6px 18px rgba(220, 170, 90, 0.12);
}
.tips-gold .tips-title { color: #C98A3E; }
.tips-gold .tips-body { color: #8A7355; }
.tips-gold .tips-foot { color: #E88AA8; }

.tips-card {
  padding: 14px 16px 10px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  background: linear-gradient(150deg, #EAF7F0 0%, #FDF3F7 100%);
  border: 1px solid #CBE8DB;
  box-shadow: 0 6px 18px rgba(90, 190, 140, 0.10);
}

.tips-title {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #3E9E72;
  margin-bottom: 8px;
}

.tips-body {
  font-size: 11px;
  line-height: 1.85;
  color: #5B7A6B;
}

.tips-foot {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #E88AA8;
}

/* ---------- 打赏公告 ---------- */
.notice-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 143, 184, 0.30);
}

.ns-ico { font-size: 13px; }
.ns-txt { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-arrow { font-size: 14px; opacity: 0.85; }

/* ---------- 榜单卡（女神榜/男神榜） ---------- */
.rank-card {
  padding: 12px 14px 6px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  background: linear-gradient(165deg, #A9D2F0 0%, #DDF0FB 46%, #FFE9F0 100%);
  box-shadow: 0 10px 24px rgba(180, 150, 240, 0.28);
}

.rc-tabs { display: flex; gap: 8px; margin-bottom: 10px; }

.rc-tabs button {
  flex: 1;
  padding: 8px 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #7A63B8;
  background: rgba(255, 255, 255, 0.42);
}

.rc-tabs button.on {
  color: #fff;
  background: linear-gradient(135deg, #7FB2E8, #F4B3E3);
  box-shadow: 0 4px 12px rgba(255, 123, 170, 0.36);
}

.rc-podium {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: 4px;
}

.rc-pod { flex: 1; min-width: 0; text-align: center; position: relative; }
.rc-pod-1 { order: 2; }
.rc-pod-2 { order: 1; }
.rc-pod-3 { order: 3; }

.rc-crown { font-size: 16px; line-height: 1; }

.rc-ava {
  width: 52px;
  height: 52px;
  margin: 0 auto 5px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 23px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.rc-pod-1 .rc-ava {
  width: 66px;
  height: 66px;
  font-size: 29px;
  border-color: #FFD868;
  box-shadow: 0 0 0 3px rgba(255, 216, 104, 0.45), 0 8px 18px rgba(255, 180, 60, 0.30);
}

.rc-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(90, 40, 120, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-rank {
  font-size: 26px;
  font-weight: 800;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 8px rgba(120, 60, 160, 0.30);
  line-height: 1.1;
}

.rc-pod-1 .rc-rank { font-size: 34px; color: #FFE9A8; }
.rc-pod-2 .rc-rank { color: #EAF2FF; }
.rc-pod-3 .rc-rank { color: #FFE3D2; }

.pod-empty {
  padding: 26px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.95);
}

/* ---------- PK 卡 ---------- */
.pk-card {
  padding: 16px 14px 10px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  background: linear-gradient(150deg, #FFD9C4 0%, #FFC0D8 100%);
  box-shadow: 0 10px 24px rgba(255, 150, 170, 0.26);
}

.pkc-inner { display: flex; align-items: center; justify-content: space-between; }

.pkc-side { flex: 1; min-width: 0; text-align: center; }

.pkc-ava {
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.pkc-name { font-size: 13px; font-weight: 700; color: #5A3550; }
.pkc-name i { font-style: normal; font-size: 10px; color: #B57E96; }

.pkc-votes { font-size: 20px; font-weight: 800; margin-top: 2px; }
.pkc-votes.l { color: #E23C64; }
.pkc-votes.r { color: #3C6FE2; }

.pkc-vs {
  flex: 0 0 auto;
  padding: 0 10px;
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #F4B3E3, #7FB2E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pkc-bar {
  height: 8px;
  margin-top: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: #fff;
}

.pkc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #F4B3E3, #FBA984); transition: width .45s ease; }

.pkc-timer { margin-top: 7px; text-align: center; font-size: 11px; font-weight: 600; color: #9A5E78; }

.pkc-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.pkc-dot { width: 5px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.75); }
.pkc-dot.on { width: 14px; background: #EE7A9B; }

/* ---------- 推荐店员头 ---------- */
.rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rec-title { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 750; }
.rec-ico { font-size: 16px; }

.rec-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 620;
  color: var(--pink);
  background: #fff;
  border: 1px solid #FBE0E6;
}

/* ---------- 店员列表行 ---------- */
.stf {
  display: flex;
  gap: 11px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(238, 122, 155, 0.05);
}

.stf-ava {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}

.stf-emoji { font-size: 30px; }

.stf-dot {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #43D08C;
  border: 2px solid #fff;
}

.stf-dot.off { background: #C4BCCE; }

.stf-lvl {
  position: absolute;
  left: -4px;
  bottom: -4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.stf-main { flex: 1; min-width: 0; }

.stf-r1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.stf-name { font-size: 14.5px; font-weight: 720; }
.stf-con { font-size: 11px; color: #9B5E7E; }

.pill-g, .pill-on, .pill-loc {
  padding: 1.5px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.pill-g { color: #7A4AB8; background: #F1E8FF; }
.pill-on { color: #1B8A54; background: #DDF5E8; }
.pill-on.off { color: #8A8494; background: #EFECEF; }
.pill-loc { color: #C2557E; background: #FFEDF3; }

.fav {
  margin-left: auto;
  font-size: 17px;
  color: #D9D2E2;
  transition: color .15s ease, transform .15s ease;
}

.fav:active { transform: scale(1.25); }
.fav.on { color: #FFB020; }

.stf-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.tg {
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.tg-line { color: #D2598C; background: #FFF4F6; border: 1px solid #FFD3E3; }
.tg-skill { color: #5B72D8; background: #F0F4FF; border: 1px solid #D8E1FF; }

.stf-intro {
  margin-top: 6px;
  font-size: 11.5px;
  color: #8E7B99;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--text-3);
}

.stf-price { font-size: 16px; font-weight: 750; color: var(--pink); }
.stf-price i { font-style: normal; font-size: 10.5px; margin-right: 1px; }
.stf-price em { font-style: normal; font-size: 10px; font-weight: 500; color: var(--text-3); margin-left: 1px; }

/* ---------- 表白墙 ---------- */
.wall-hero {
  padding: 18px 16px 14px;
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  text-align: center;
  background: linear-gradient(160deg, #FFE9EA 0%, #FBE0E6 55%, #DDF2FC 100%);
  box-shadow: 0 10px 24px rgba(255, 150, 180, 0.22);
  position: relative;
  overflow: hidden;
}

.wall-hero::before,
.wall-hero::after {
  content: "✨";
  position: absolute;
  top: 18px;
  font-size: 34px;
  opacity: 0.8;
}

.wall-hero::before { left: 14px; transform: scaleX(-1) rotate(-8deg); }
.wall-hero::after { right: 14px; transform: rotate(-8deg); }

.wh-gift {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 640;
  color: #C2557E;
  background: rgba(255, 255, 255, 0.75);
}

.wh-pair { display: flex; justify-content: center; align-items: center; margin: 12px 0 8px; }

.wh-ava {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 27px;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.wh-ava + .wh-ava { margin-left: -10px; }
.wh-ava.wl-mascot { background: linear-gradient(145deg, #E4F2FD, #CFE8FA); }

.wh-to {
  font-size: 13px;
  font-weight: 700;
  color: #A24B70;
  letter-spacing: 1px;
}

.wl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFF5F8, #FFEFF5);
  border: 1px solid #FFE0EB;
}

.wl-avas { flex: 0 0 auto; display: flex; }

.wl-a, .wl-b {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
}

.wl-a { background: linear-gradient(145deg, #E4F2FD, #CFE8FA); }
.wl-b { margin-left: -8px; }

.wl-mid { flex: 1; min-width: 0; }

.wl-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 640;
  color: #C2557E;
  background: #FFDCE9;
}

.wl-msg {
  margin-top: 4px;
  font-size: 11.5px;
  color: #8E6B7E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-time { margin-top: 3px; font-size: 9.5px; color: #C4A8B8; }

.wl-gift {
  flex: 0 0 auto;
  text-align: center;
  font-size: 26px;
}

.wl-gift b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #E88AA8;
}

.wall-fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px);
  z-index: 40;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 720;
  color: #fff;
  background: linear-gradient(135deg, #F4B3E3, #7FB2E8);
  box-shadow: 0 10px 24px rgba(255, 123, 170, 0.42);
}

.wall-fab:active { transform: scale(0.96); }

/* ---------- 礼物选择 ---------- */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gift {
  padding: 10px 4px 8px;
  border-radius: 13px;
  text-align: center;
  background: #FFF7FA;
  border: 1.5px solid var(--line);
  transition: transform .14s ease;
}

.gift:active { transform: scale(0.96); }
.gift.on { border-color: var(--pink); background: #FFEDF3; }

.gift-emoji { font-size: 22px; display: block; }
.gift b { display: block; font-size: 11px; font-weight: 640; margin-top: 3px; }
.gift small { display: block; font-size: 9.5px; color: #E88AA8; margin-top: 1px; }

.to-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.to-scroll::-webkit-scrollbar { display: none; }

.to-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #8E7B99;
  background: #FFF7FA;
  border: 1.5px solid var(--line);
}

.to-chip.on { color: #fff; background: linear-gradient(135deg, #FBA984, #F4B3E3); border-color: transparent; }

/* ---------- 盲盒 ---------- */
.bb-card {
  padding: 14px 15px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(238, 122, 155, 0.05);
}

.bb-group { margin-bottom: 14px; }
.bb-group:last-child { margin-bottom: 0; }

.bb-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }

.bb-pills { display: flex; flex-wrap: wrap; gap: 7px; }

.bb-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #6E6788;
  background: #F6F2F8;
  border: 1.5px solid transparent;
}

.bb-pill.on {
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  box-shadow: 0 4px 10px rgba(238, 122, 155, 0.26);
}

.bb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.bb-lb { flex: 0 0 62px; font-size: 12.5px; font-weight: 640; }

.bb-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FAF6FA;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
}

.bb-hint { padding: 2px 0 6px 72px; font-size: 10px; color: #D96A6A; }

.bb-payrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 620;
}

.bb-payrow + .bb-payrow { border-top: 1px solid var(--line); }

.bb-switch {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #E4DEEA;
  position: relative;
  transition: background .2s ease;
}

.bb-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: left .2s ease;
}

.bb-switch.on { background: linear-gradient(135deg, #FBA984, #F4B3E3); }
.bb-switch.on::after { left: 20px; }

.bb-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
}

.bb-total > span { font-size: 14px; font-weight: 640; }

.bb-amount { font-size: 20px; font-weight: 800; color: var(--pink); margin-left: 4px; }

/* ---------- 我的 ---------- */
.mine-hero {
  position: relative;
  padding: 30px 18px 22px;
  margin: -14px -0px 14px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(160deg, #58B8B4 0%, #7BC8C0 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(88, 184, 180, 0.30);
}

.mh-level {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.92);
}

.mh-refresh { font-size: 12px; color: rgba(255, 255, 255, 0.9); margin-top: 10px; }

.mh-row { display: flex; align-items: center; gap: 14px; }

.mh-ava {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(145deg, #E0F1FC, #B9DCF3);
  border: 3px solid rgba(255, 255, 255, 0.8);
}

.mh-info { flex: 1; min-width: 0; }

.mh-id { font-size: 13px; font-weight: 620; opacity: 0.96; }

.mh-lv {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 10.5px;
  opacity: 0.95;
}

.mh-bar {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.mh-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FFF3B0, #FFD868); }

.mh-lvtip { margin-top: 5px; font-size: 10.5px; opacity: 0.82; }

.mine-menu4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 16px 8px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(238, 122, 155, 0.05);
}

.mm4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  padding: 6px 0;
}

.mm4:active { opacity: 0.7; }
.mm4-ico { font-size: 21px; }

/* ---------- 收藏网格 ---------- */
.fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fav-card {
  padding: 12px 6px 10px;
  border-radius: 14px;
  text-align: center;
  background: #FFF7FA;
  border: 1px solid var(--line);
}

.fav-card:active { transform: scale(0.97); }

.fav-ava {
  width: 46px;
  height: 46px;
  margin: 0 auto 5px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
}

.fav-card b { display: block; font-size: 12px; font-weight: 640; }
.fav-card small { display: block; font-size: 9.5px; color: #E88AA8; margin-top: 1px; }

/* ---------- 神级等级 ---------- */
.lvl-shenji {
  color: #fff;
  background: linear-gradient(135deg, #A855F7, #EC4899);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

/* ---------- 4 tab 底栏 ---------- */
.tabbar .tab { padding: 6px 0 5px; font-size: 10.5px; }
.tabbar .tab-ico { font-size: 19px; }

/* ==========================================================
   店员资料卡详情页（星尘树洞式）
   大图轮播 / 悬浮信息卡 / 礼物列表 / 服务价格表 / 底部三按钮
   ========================================================== */

/* ---------- 顶部照片轮播 ---------- */
.dh-hero {
  position: relative;
  height: 420px;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(238, 122, 155, 0.14);
}

.dh-scroll {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.dh-scroll::-webkit-scrollbar { display: none; }

.dh-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dh-big {
  font-size: 118px;
  line-height: 1;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.14));
}

.dh-decor {
  position: absolute;
  right: 34px;
  bottom: 46px;
  font-size: 44px;
  opacity: 0.8;
  transform: rotate(-10deg);
}

.dh-count {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 640;
  color: #fff;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(4px);
}

.dh-back {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  color: #5A3550;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---------- 信息卡 ---------- */
.dh-card {
  position: relative;
  margin: 12px 12px;
  padding: 14px 15px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(238, 122, 155, 0.08);
}

.dh-idcard { z-index: 5; margin-top: -46px; }

.dh-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dh-ava {
  position: relative;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  margin-top: -30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.dh-lvl {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 9.5px;
  white-space: nowrap;
}

.dh-who { flex: 1; min-width: 0; padding-top: 4px; }

.dh-r1 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.dh-r1 b { font-size: 17px; font-weight: 750; }

.dh-con {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 640;
  color: #E23C8B;
  background: linear-gradient(135deg, #FF9DC4, #EE8FBC);
  box-shadow: 0 3px 8px rgba(255, 123, 170, 0.30);
}

.dh-r2 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.dh-chip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #B07A2A;
  background: linear-gradient(135deg, #FFF3D6, #FFE9BC);
}

.dh-on {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 640;
  color: #3E9E72;
}

.dh-on i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43D08C;
  box-shadow: 0 0 0 2.5px rgba(67, 208, 140, 0.22);
}

.dh-loc {
  font-size: 10.5px;
  color: #7FA8C9;
  font-weight: 600;
}

.dh-fav { font-size: 20px; margin-top: 4px; }

/* ---------- 服务胶囊行 ---------- */
.dh-svcline {
  margin-top: 13px;
  font-size: 14px;
  font-weight: 680;
  color: #E23C8B;
  letter-spacing: 0.5px;
}

.dh-svcline i {
  font-style: normal;
  color: #F0B9CF;
  margin: 0 7px;
  font-weight: 400;
}

/* ---------- 技能标签 ---------- */
.dh-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.dh-skill {
  padding: 3.5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #D96A9C;
  background: #FFF4F6;
  border: 1px solid #FFD3E3;
}

/* ---------- 介绍 ---------- */
.dh-intro {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4A3B52;
}

/* ---------- 礼物列表 ---------- */
.dh-gift-title {
  font-size: 15px;
  font-weight: 720;
  color: #3A2E44;
}

.dh-gift-title span { font-size: 12px; font-weight: 500; color: #8E7B99; }

.dh-gift-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 4px;
  margin-top: 12px;
}

.dh-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dh-gift-emoji {
  font-size: 30px;
  line-height: 1.15;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.10));
}

.dh-gift b {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 620;
  color: #6E5B7A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dh-gsend {
  margin-top: 4px;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 640;
  color: #E88AA8;
  background: #FFF4F6;
  border: 1px solid #FFC9DC;
}

.dh-gsend:active { transform: scale(0.94); background: #FFE0EE; }

.dh-gift-empty {
  padding: 14px 0 4px;
  text-align: center;
  font-size: 12px;
  color: #A794B0;
}

/* ---------- 服务 / 评论 tab + 价格表 ---------- */
.dh-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}

.dh-tabs button {
  position: relative;
  padding: 4px 2px 10px;
  font-size: 14.5px;
  font-weight: 640;
  color: #8E7B99;
}

.dh-tabs button.on { color: #2E1C2A; font-weight: 720; }

.dh-tabs button.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #5BC8C2, #45D6A0);
}

.dh-tablewrap { margin-top: 4px; }

.dh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.dh-table th {
  padding: 11px 4px 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3A2E44;
  text-align: center;
  border-bottom: 1px solid #F0E8F2;
}

.dh-table td {
  padding: 9px 4px;
  text-align: center;
  color: #5B4E66;
  border-bottom: 1px solid #F6F1F8;
}

.dh-table tr:last-child td { border-bottom: none; }

.dh-table td.dh-tname {
  font-size: 13.5px;
  font-weight: 680;
  color: #3A2E44;
  border-right: 1px solid #F0E8F2;
}

.dh-table tbody tr { cursor: pointer; }

.dh-table tbody tr.sel td {
  color: #E23C8B;
  font-weight: 680;
  background: #FFF5F9;
}

.dh-table tbody tr.sel td.dh-tname { background: #FFF4F6; }

.dh-notes {
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px dashed #F0E8F2;
  font-size: 11px;
  line-height: 1.9;
  color: #9B8CA6;
}

.dh-cmt-empty {
  padding: 26px 0 10px;
  text-align: center;
  font-size: 12px;
  color: #A794B0;
}

/* ---------- 底部三按钮栏 ---------- */
.dh-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px calc(9px + var(--safe-b, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}

.dh-home {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 8px;
  color: #6E5B7A;
}

.dh-home span { font-size: 17px; line-height: 1; }
.dh-home i { font-style: normal; font-size: 9.5px; }

.dh-reward {
  flex: 1;
  padding: 11px 0;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 720;
  color: var(--pink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  box-shadow: 0 4px 12px rgba(238, 122, 155, 0.10);
}

.dh-reward:active { background: #FFF4F6; }

.dh-order {
  flex: 1.35;
  padding: 11px 0;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 720;
  color: #fff;
  background: linear-gradient(135deg, #FBA984, #F4B3E3);
  box-shadow: 0 8px 18px rgba(238, 122, 155, 0.32);
}

.dh-order:active { transform: scale(0.98); }