/* ============================================================
   ZLIN MALL · H5 Design System
   Base unit 4px · Type scale 12/13/14/16/18/22/28 · Radius 8-24
   Themes: aurum (default) / lumen / nocturne
   ============================================================ */

:root {
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
    Georgia, "Times New Roman", serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-full: 999px;

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

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;

  --shell-w: 390px;
  --shell-h: 844px;

  /* 全局左右留白：所有页面统一的安全边距 */
  --gutter: 22px;

  /* 商品首图规格：统一正方形 800×800（等比自适应容器宽度） */
  --thumb-size: 800px;
  --thumb-ratio: 1 / 1;

  /* 登录页光效层用的柔光色（青花云蓝：钴蓝淡光） */
  --brand-glow: rgba(27, 79, 138, 0.18);
}

/* ---------- A · 墨玉鎏金 Jade Noir (default) ---------- */
[data-theme="aurum"] {
  --bg: #0a0e0c;
  --surface: #101613;
  --surface-2: #161e1a;
  --surface-3: #1f2924;
  --line: #22302a;
  --line-strong: #30413a;
  --text: #f2f5f1;
  --text-2: #9daea5;
  --text-3: #6b7c73;
  --brand: #c9a96a;
  --brand-2: #e2cb94;
  --on-brand: #171208;
  --brand-soft: rgba(201, 169, 106, 0.15);
  --accent: #4fb89b;
  --hot: #d1614c;
  --hot-soft: rgba(209, 97, 76, 0.15);
  --gold-grad: linear-gradient(135deg, #c9a96a 0%, #e2cb94 50%, #a9884e 100%);
  --jade-grad: linear-gradient(165deg, #1e3a31 0%, #0f211b 60%, #081310 100%);
  --wood-grad: linear-gradient(165deg, #3a2417 0%, #21130c 60%, #140b06 100%);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
  --device: #1c2420;
  --stage: #0c110f;
}

/* ---------- B · 宣白典藏 Porcelain ---------- */
[data-theme="lumen"] {
  --bg: #f5f2ea;
  --surface: #ffffff;
  --surface-2: #f1ede3;
  --surface-3: #e6e0d3;
  --line: #e4ded1;
  --line-strong: #cfc7b6;
  --text: #171a18;
  --text-2: #6a736c;
  --text-3: #9aa298;
  --brand: #14453a;
  --brand-2: #1e5f50;
  --on-brand: #ffffff;
  --brand-soft: rgba(20, 69, 58, 0.08);
  --accent: #8a5a16;
  --hot: #a33b2a;
  --hot-soft: rgba(163, 59, 42, 0.1);
  --gold-grad: linear-gradient(135deg, #14453a 0%, #1e5f50 55%, #9a7428 100%);
  --jade-grad: linear-gradient(165deg, #2b4d43 0%, #16281f 100%);
  --wood-grad: linear-gradient(165deg, #4d3120 0%, #2a1810 100%);
  --shadow-1: 0 1px 3px rgba(23, 26, 24, 0.07);
  --shadow-2: 0 12px 30px rgba(23, 26, 24, 0.12);
  --device: #e0dacd;
  --stage: #ece8df;
}

/* ---------- C · 紫檀夜宴 Rosewood ---------- */
[data-theme="nocturne"] {
  --bg: #120b09;
  --surface: #1a110e;
  --surface-2: #221613;
  --surface-3: #2c1c18;
  --line: #30201b;
  --line-strong: #3f2a23;
  --text: #f6efe6;
  --text-2: #b49e8e;
  --text-3: #7e6a5c;
  --brand: #d8a25a;
  --brand-2: #ebc489;
  --on-brand: #1a1005;
  --brand-soft: rgba(216, 162, 90, 0.15);
  --accent: #c25a3c;
  --hot: #e0603c;
  --hot-soft: rgba(224, 96, 60, 0.15);
  --gold-grad: linear-gradient(135deg, #d8a25a 0%, #ebc489 50%, #b87f3c 100%);
  --jade-grad: linear-gradient(165deg, #1d3029 0%, #0e1613 100%);
  --wood-grad: linear-gradient(165deg, #3a2418 0%, #1a0f09 100%);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.55);
  --device: #231713;
  --stage: #150d0b;
}

/* ---------- D · 天青汝窑 Celadon ---------- */
[data-theme="celadon"] {
  --bg: #edf1ee;
  --surface: #ffffff;
  --surface-2: #f2f5f2;
  --surface-3: #e5ebe7;
  --line: #e0e7e3;
  --line-strong: #cbd6d0;
  --text: #16201c;
  --text-2: #5c6b64;
  --text-3: #93a09a;
  --brand: #2c4a4e;
  --brand-2: #3e666b;
  --on-brand: #ffffff;
  --brand-soft: rgba(44, 74, 78, 0.08);
  --accent: #8a5a16;
  --hot: #a33b2a;
  --hot-soft: rgba(163, 59, 42, 0.1);
  --gold-grad: linear-gradient(135deg, #2c4a4e 0%, #3e666b 55%, #a9803a 100%);
  --jade-grad: linear-gradient(165deg, #2b4d43 0%, #16281f 100%);
  --wood-grad: linear-gradient(165deg, #4d3120 0%, #2a1810 100%);
  --shadow-1: 0 1px 3px rgba(22, 32, 28, 0.07);
  --shadow-2: 0 12px 30px rgba(22, 32, 28, 0.13);
  --device: #d9e1dc;
  --stage: #e6ebe8;
}

/* ---------- E · 敦煌金阙 Gilt ---------- */
[data-theme="gilt"] {
  --bg: #100c07;
  --surface: #191309;
  --surface-2: #221a0e;
  --surface-3: #2c2114;
  --line: #342818;
  --line-strong: #45331e;
  --text: #f7efdc;
  --text-2: #c0ac8a;
  --text-3: #8a7a5e;
  --brand: #d4af61;
  --brand-2: #ebd398;
  --on-brand: #17100a;
  --brand-soft: rgba(212, 175, 97, 0.16);
  --accent: #4e7fa6;
  --hot: #c94a32;
  --hot-soft: rgba(201, 74, 50, 0.16);
  --gold-grad: linear-gradient(135deg, #d4af61 0%, #ebd398 50%, #a8823c 100%);
  --jade-grad: linear-gradient(165deg, #1e3a31 0%, #0c1512 100%);
  --wood-grad: linear-gradient(165deg, #3a2417 0%, #170e07 100%);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.56);
  --device: #241a0f;
  --stage: #130e08;
}

/* ---------- F · 大漆朱红 Lacquer ---------- */
[data-theme="lacquer"] {
  --bg: #140a08;
  --surface: #1e0f0c;
  --surface-2: #281512;
  --surface-3: #331b17;
  --line: #3a1f1a;
  --line-strong: #4c2922;
  --text: #fbefe9;
  --text-2: #c9a69c;
  --text-3: #967a72;
  --brand: #be3a2b;
  --brand-2: #d9573f;
  --on-brand: #ffffff;
  --brand-soft: rgba(190, 58, 43, 0.18);
  --accent: #e0b25c;
  --hot: #ff6a4d;
  --hot-soft: rgba(255, 106, 77, 0.16);
  --gold-grad: linear-gradient(135deg, #8e2b20 0%, #be3a2b 55%, #e0b25c 100%);
  --jade-grad: linear-gradient(165deg, #1d3029 0%, #0d1412 100%);
  --wood-grad: linear-gradient(165deg, #3a2418 0%, #180c0a 100%);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.56);
  --device: #26120e;
  --stage: #160b09;
}

/* ---------- G · 青花云蓝 Porcelain ---------- */
[data-theme="porcelain"] {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e8eef6;
  --line: #e2e9f2;
  --line-strong: #c9d6e6;
  --text: #101a26;
  --text-2: #56687f;
  --text-3: #8b9cb2;
  --brand: #1b4f8a;
  --brand-2: #2f6fae;
  --on-brand: #ffffff;
  --brand-soft: rgba(27, 79, 138, 0.08);
  --accent: #9a7b3c;
  --hot: #b53f2c;
  --hot-soft: rgba(181, 63, 44, 0.1);
  --gold-grad: linear-gradient(135deg, #1b4f8a 0%, #2f6fae 55%, #9ec4e8 100%);
  --jade-grad: linear-gradient(165deg, #23405f 0%, #0d1a29 100%);
  --wood-grad: linear-gradient(165deg, #4a3320 0%, #231710 100%);
  --shadow-1: 0 1px 3px rgba(16, 26, 38, 0.07);
  --shadow-2: 0 12px 30px rgba(16, 26, 38, 0.14);
  --device: #d8e2ee;
  --stage: #e6ecf4;
}

/* ---------- H · 紫薇禁苑 Amethyst ---------- */
[data-theme="amethyst"] {
  --bg: #100b18;
  --surface: #181123;
  --surface-2: #201830;
  --surface-3: #2a203d;
  --line: #302543;
  --line-strong: #402f5a;
  --text: #f2ecfa;
  --text-2: #bda9d6;
  --text-3: #8d7ba6;
  --brand: #b394dc;
  --brand-2: #cbb0ea;
  --on-brand: #1b1226;
  --brand-soft: rgba(179, 148, 220, 0.16);
  --accent: #d9c48a;
  --hot: #ff6f91;
  --hot-soft: rgba(255, 111, 145, 0.16);
  --gold-grad: linear-gradient(135deg, #8e6bb8 0%, #b394dc 45%, #e6d4b0 100%);
  --jade-grad: linear-gradient(165deg, #2a1c3d 0%, #100a1a 100%);
  --wood-grad: linear-gradient(165deg, #3a2418 0%, #180f22 100%);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.56);
  --device: #221a33;
  --stage: #130d1d;
}

/* ---------- I · 银霜月白 Platinum ---------- */
[data-theme="platinum"] {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --line: #e6e8ec;
  --line-strong: #cfd3da;
  --text: #14171c;
  --text-2: #5a616d;
  --text-3: #9097a3;
  --brand: #3f4a57;
  --brand-2: #5b6878;
  --on-brand: #ffffff;
  --brand-soft: rgba(63, 74, 87, 0.08);
  --accent: #7b8fa5;
  --hot: #a4553a;
  --hot-soft: rgba(164, 85, 58, 0.1);
  --gold-grad: linear-gradient(135deg, #3f4a57 0%, #7b8fa5 48%, #c3ccd6 100%);
  --jade-grad: linear-gradient(165deg, #2b3238 0%, #14181c 100%);
  --wood-grad: linear-gradient(165deg, #4a3325 0%, #241811 100%);
  --shadow-1: 0 1px 3px rgba(20, 23, 28, 0.07);
  --shadow-2: 0 12px 30px rgba(20, 23, 28, 0.13);
  --device: #dee1e6;
  --stage: #ebedf0;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--stage);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 40px 24px;
  transition: background var(--dur) var(--ease);
  flex-wrap: wrap;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 14px;
}

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

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================ STAGE / DEVICE ============================ */

.stage-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.device {
  width: var(--shell-w);
  height: var(--shell-h);
  background: var(--bg);
  border-radius: 44px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--dur) var(--ease);
}

.notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 26px;
  background: #000;
  border-radius: var(--r-full);
  z-index: 60;
  pointer-events: none;
}

.screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding-bottom: 12px;
}

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

.statusbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--gutter) + 4px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

.statusbar .sb-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* ============================ TOP APP BAR ============================ */

.appbar {
  padding: 2px var(--gutter) 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.appbar .title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  flex: 1;
}

.appbar .sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}

.icon-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.searchbar {
  margin: 0 var(--gutter) 14px;
  height: 42px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  flex-shrink: 0;
}

.searchbar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.searchbar span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 首页搜索条现在真的可点了（进搜索页），给个手型提示 */
.searchbar {
  cursor: pointer;
}

/* ---------- 搜索页（2026-10-05：原来首页搜索条是死代码，点了没反应） ---------- */
.search-input {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: 14px;
}

.search-input:focus-within {
  border-color: var(--brand);
  background: var(--surface);
}

.search-input .si-ico {
  display: flex;
  color: var(--text-3);
}

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

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

.search-input .si-clear {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 46px 0;
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
}

/* 搜索结果 / 各类列表行里放真图时的统一约束 */
.list-row .lr-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ============================ BANNER ============================ */

.banner {
  margin: 0 var(--gutter) 16px;
  height: 156px;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}

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

.banner-slide {
  min-width: 100%;
  height: 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 22px;
  overflow: hidden;
  color: #fff;
}

.banner-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      120% 90% at 88% 15%,
      rgba(255, 255, 255, 0.28),
      transparent 60%
    ),
    radial-gradient(90% 80% at 8% 100%, rgba(0, 0, 0, 0.3), transparent 60%);
}

/* 后台只传了图的 Banner：走纯图模式，去掉这层「提亮+压暗」的装饰渐变，
   否则运营上传的实拍图会被盖上一层不自然的明暗（这层本是给文字做对比度的） */
.banner-slide.img-only::after { display: none; }

.banner-slide .bs-text {
  position: relative;
  z-index: 2;
  max-width: 62%;
}

.banner-slide .bs-kicker {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}

.banner-slide .bs-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

/* banner 已取消点击：这里只是一行静态提示，不能长得像按钮 */
.banner-slide .bs-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 12px;
  white-space: nowrap;
}

.banner-slide .bs-hint::before {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.banner-dots {
  position: absolute;
  bottom: 10px;
  right: 18px;
  display: flex;
  gap: 5px;
  z-index: 5;
}

.banner-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all var(--dur) var(--ease);
}

.banner-dots i.on {
  width: 16px;
  border-radius: 3px;
  background: #fff;
}

/* ============================ NOTICE ============================ */

.notice {
  margin: 0 var(--gutter) 18px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  overflow: hidden;
}

.notice .tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand);
  flex-shrink: 0;
}

.notice-track {
  flex: 1;
  overflow: hidden;
  height: 16px;
  position: relative;
}

.notice-track .n-item {
  font-size: 12px;
  color: var(--text-2);
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: noticeUp 9s infinite;
}

@keyframes noticeUp {
  0%,
  28% {
    transform: translateY(0);
    opacity: 1;
  }
  33%,
  61% {
    transform: translateY(-16px);
    opacity: 1;
  }
  66%,
  94% {
    transform: translateY(-32px);
    opacity: 1;
  }
  100% {
    transform: translateY(-48px);
    opacity: 1;
  }
}

/* ============================ QUICK ENTRY ============================ */
/* 首页中部的五宫格快捷入口（限时抢购 / 积分商城 / 平台严选 / 申请寄卖 / 推广赚钱）
   已按客户要求整块移除 —— 首页保持「公告 + 甄选新品」的纯陈列结构。
   如需恢复，把这段样式和 app.js 里的 quickHtml() 一起找回来即可。 */

/* ============================ TYPOGRAPHY ACCENTS ============================ */

.serif {
  font-family: var(--font-serif);
  font-weight: 600;
}

.appbar .title,
.sec-head h3,
.banner-slide .bs-title,
.session-poster .sp-name,
.point-hero .ph-num,
.auth h2,
.profile-head .pf-name,
.subbar .sb-title,
.stat-cell b,
.gc-price .p,
.si-price,
.order-card .oc-p,
.stage-panel h5 {
  font-family: var(--font-serif);
}

.appbar .title,
.sec-head h3,
.banner-slide .bs-title,
.session-poster .sp-name,
.profile-head .pf-name,
.subbar .sb-title {
  font-weight: 600;
}

/* 展柜射灯：商品图顶部柔光，营造珠宝柜台质感 */
.gc-img::before,
.si-img::before,
.order-card .oc-img::before,
.session-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    58% 42% at 50% 14%,
    rgba(255, 255, 255, 0.2),
    transparent 72%
  );
  pointer-events: none;
  z-index: 1;
}

.gc-img svg,
.si-img svg,
.order-card .oc-img svg {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}

/* 展台高光：一条极细的反射线，模拟玻璃柜台 */
.gc-img::after,
.si-img::after,
.order-card .oc-img::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 7px;
  height: 1px;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  pointer-events: none;
}

.order-card .oc-img {
  position: relative;
}

/* ============================ SECTION ============================ */

.sec {
  margin: 0 0 20px;
}

.sec-head {
  padding: 0 var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sec-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.sec-head .more {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 2px;
}

.sec-head .more svg {
  width: 13px;
  height: 13px;
}

/* ============================ SESSION (FLASH SALE) ============================ */

.session-card {
  margin: 0 var(--gutter) 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.session-poster {
  height: 152px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  overflow: hidden;
}

.session-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 62%),
    radial-gradient(110% 85% at 88% 8%, rgba(255, 255, 255, 0.3), transparent 62%);
}

.session-poster.ended {
  filter: saturate(0.4) brightness(0.78);
}

.session-poster .sp-deco {
  position: absolute;
  right: -36px;
  top: -46px;
  width: 190px;
  height: 190px;
  z-index: 1;
  opacity: 0.22;
  pointer-events: none;
}

.session-poster .sp-body {
  position: relative;
  z-index: 3;
}

.session-poster .sp-kicker {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 7px;
}

.session-poster .sp-name {
  position: relative;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

.session-poster .sp-meta {
  position: relative;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
  letter-spacing: 0.3px;
}

.session-poster .sp-badge {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 3;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  backdrop-filter: blur(4px);
}

.session-poster .sp-badge.live {
  background: var(--hot);
  color: #fff;
}

.session-body {
  padding: 12px 14px 14px;
}

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

.countdown-row .cd-label {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.5px;
}

.countdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.countdown .cd-box {
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown .cd-box.hot {
  background: var(--hot);
  color: #fff;
}

.countdown .cd-sep {
  font-size: 12px;
  color: var(--text-3);
}

.countdown .cd-text {
  font-size: 12px;
  color: var(--text-2);
}

.session-items {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.session-items::-webkit-scrollbar {
  display: none;
}

.si {
  width: 118px;
  flex: 0 0 118px;
}

.si .si-img {
  width: 118px;
  height: 118px;
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.si .si-img svg {
  width: 46px;
  height: 46px;
  opacity: 0.9;
}

.si .si-img img.si-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.si .si-name {
  font-size: 12px;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si .si-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--hot);
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
}

.si .si-origin {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-3);
  text-decoration: line-through;
}

/* ============================ GOODS GRID ============================ */

.goods-grid {
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.goods-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.goods-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.gc-img {
  height: 128px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gc-img svg {
  width: 54px;
  height: 54px;
}

.gc-img .gc-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(4px);
}

.gc-body {
  padding: 10px 11px 12px;
}

.gc-name {
  font-size: 13px;
  line-height: 1.35;
  height: 35px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gc-price {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.gc-price .p {
  font-size: 17px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -0.4px;
}

.gc-price .o {
  font-size: 11px;
  color: var(--text-3);
  text-decoration: line-through;
}

.gc-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
}

.progress {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 8px;
}

.progress i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gold-grad);
}

/* ============================ POINTS MALL ============================ */

.point-hero {
  margin: 0 var(--gutter) 18px;
  border-radius: var(--r-lg);
  background: var(--gold-grad);
  padding: 18px 20px;
  color: var(--on-brand);
  position: relative;
  overflow: hidden;
}

[data-theme="lumen"] .point-hero {
  color: #fff;
}

.point-hero::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.point-hero .ph-label {
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.8;
  position: relative;
  z-index: 2;
}

.point-hero .ph-num {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 4px 0 12px;
  position: relative;
  z-index: 2;
}

.point-hero .ph-row {
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.point-hero .ph-row div {
  font-size: 11px;
  opacity: 0.85;
}

.point-hero .ph-row b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  opacity: 1;
}

.chips {
  display: flex;
  gap: 8px;
  padding: 0 var(--gutter);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}

.chip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
}

/* ============================ PROFILE / LIST ============================ */

.profile-head {
  margin: 0 var(--gutter) 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--gold-grad);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

[data-theme="lumen"] .avatar {
  color: #fff;
}

.profile-head > svg {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  flex-shrink: 0;
}

.profile-head .pf-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-head .pf-id {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pf-id .copy-btn {
  font-size: 10px;
  padding: 1px 6px;
}

.pf-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  margin-left: 8px;
}

.stat-row {
  margin: 0 var(--gutter) 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 10px;
  text-align: center;
}

.stat-cell b {
  display: block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.stat-cell span {
  font-size: 11px;
  color: var(--text-3);
  display: block;
  margin-top: 3px;
}

.panel {
  margin: 0 var(--gutter) 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel-title {
  padding: 14px 16px 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title .pt-more {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
}

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

.list-row:first-of-type {
  border-top: none;
}

.list-row:hover {
  background: var(--surface-2);
}

.list-row .lr-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}

.list-row .lr-icon svg {
  width: 17px;
  height: 17px;
}

/* 明细行左侧小图：寄卖藏品用真实主图，铺满方框 */
.list-row .lr-icon img.lr-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.list-row .lr-main {
  flex: 1;
  min-width: 0;
}

.list-row .lr-t {
  font-size: 13px;
  font-weight: 500;
}

.list-row .lr-d {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 后台驳回理由：必须完整显示给会员看（原样展示），所以不能沿用 .lr-d 的单行省略 */
.list-row .lr-reject {
  font-size: 11px;
  color: #DC2626;
  margin-top: 3px;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}

.list-row .lr-r {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.list-row .lr-r svg {
  width: 13px;
  height: 13px;
}

/* ============================ ORDERS ============================ */

.order-tabs {
  display: flex;
  gap: 6px;
  padding: 0 var(--gutter);
  margin-bottom: 14px;
}

.order-tabs .ot {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}

.order-tabs .ot.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
}

[data-theme="lumen"] .order-tabs .ot.on {
  color: #fff;
}

/* 订单卡放在二级页的 .pg-body 里，左右留白已由 .pg-body 统一提供，这里不再重复加 */
.order-card {
  margin: 0 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  gap: 12px;
}

.order-card .oc-img {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.order-card .oc-img svg {
  width: 30px;
  height: 30px;
}

/* 「我抢到的」卡片：真实商品图填满 62×62。
   以前这里只有占位图标（不管抢到什么货都是同一个图标），会员看着像假数据。 */
.order-card .oc-img img.ocimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 订单详情页里的商品缩略图（以前也是占位图标） */
.po-img img.ocimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 价格后面的小字说明（如「挂卖价」），用来区分成本价与挂出去的价 */
.order-card .oc-note {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
}

/* 「预计挂卖价格」：按后台转售涨幅算的下一手参考价（不参与交易，只给会员一个预期）。
   价格本身用品牌绿，跟上面的成交价（红色）区分开，不抢主价的视觉。 */
.order-card .oc-est {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}

.order-card .oc-est b {
  color: var(--brand);
  font-weight: 600;
}

.order-card .oc-main {
  flex: 1;
  min-width: 0;
}

.order-card .oc-t {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-card .oc-m {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}

.order-card .oc-p {
  font-size: 15px;
  font-weight: 600;
  color: var(--hot);
  margin-top: 5px;
}

.status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-2);
}

.status-pill.warn {
  background: var(--hot-soft);
  color: var(--hot);
}

/* 「待支付」：和同为暖色的「待确认」并排时容易看混，所以用描边+实心红做区分，
   一眼能认出哪张单还欠服务费、要去点那个红色按钮。 */
.status-pill.due {
  background: #fff;
  color: #c0392b;
  box-shadow: inset 0 0 0 1px #c0392b;
}

.status-pill.ok {
  background: rgba(62, 207, 142, 0.14);
  color: var(--accent);
}

.status-pill.brand {
  background: var(--brand-soft);
  color: var(--brand);
}

/* ============================ TAB BAR ============================ */

.tabbar {
  flex-shrink: 0;
  height: 66px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding-bottom: 8px;
}

.tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
  position: relative;
}

.tabbar .tab svg {
  width: 22px;
  height: 22px;
}

.tabbar .tab span {
  font-size: 10px;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.tabbar .tab.on {
  color: var(--brand);
}

.tabbar .tab.on::before {
  content: "";
  position: absolute;
  top: -1px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.tabbar .tab .dot {
  position: absolute;
  top: -2px;
  right: 24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hot);
  border: 1.5px solid var(--surface);
}

/* ============================ SUB PAGE ============================ */

.subbar {
  gap: 6px;
  padding-bottom: 10px;
  position: relative;
}

.subbar .sb-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subbar .sb-pad {
  width: 30px;
  flex-shrink: 0;
}

.subbar::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.pg-sub {
  margin: 0 0 16px;
  padding: 0 var(--gutter);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-3);
}

.pg-foot {
  padding: 18px var(--gutter) 26px;
}

/* 二级页面内容区：统一左右留白，内部 block 不再自己带左右 margin */
.pg-body {
  padding: 0 var(--gutter);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--brand-soft);
  color: var(--brand);
}

.pill.ok {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  background: var(--brand);
  color: var(--on-brand);
  transition: all var(--dur) var(--ease);
  width: 100%;
}

[data-theme="lumen"] .btn {
  color: #fff;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:active {
  transform: scale(0.985);
}

.btn.ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.btn.hot {
  background: var(--hot);
  color: #fff;
}

/* 退出登录长按钮（2026-10-05 用户要求）：白底红字 + 细描边，
   既有「危险操作」的辨识度，又不会像实心红那么刺眼。
   ★ 宽度与上面的 .panel 卡片对齐：卡片是 margin:0 var(--gutter)，
     所以这里也要左右各留一个 gutter（.btn 本身是 width:100%，不加 calc 会溢出） */
.btn.logout-btn {
  background: var(--surface);
  color: var(--hot);
  border: 1px solid var(--line);
  font-weight: 600;
  width: calc(100% - var(--gutter) * 2);
  margin: 0 var(--gutter) 24px;
}

.btn.logout-btn:hover {
  border-color: var(--hot);
}

.btn-row {
  display: flex;
  gap: 10px;
}

/* ============================ FORMS ============================ */

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0 12px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

.field textarea {
  height: 76px;
  padding: 10px 12px;
  resize: none;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
}

.field-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ============================ PAY BOX ============================ */

.pay-box {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 14px;
}

.pay-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.pay-row .pk {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}

.pay-row .pv {
  font-size: 13px;
  text-align: right;
  word-break: break-all;
}

.copy-btn {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-2);
  margin-left: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.copy-btn svg {
  width: 11px;
  height: 11px;
}
.copy-btn i {
  font-style: normal;
}

.qr-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 14px;
}

.qr {
  width: 108px;
  height: 108px;
  border-radius: var(--r-sm);
  background: #fff;
  padding: 8px;
  flex-shrink: 0;
}

.qr svg {
  width: 100%;
  height: 100%;
}

.qr-note {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.6;
}

.qr-note b {
  display: block;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

/* ============================ LOGIN ============================ */

.auth-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- 登录页背景装饰层：玉璧 / 水印 / 水纹，全部走主题变量 ---- */
.auth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.ab-halo {
  position: absolute;
  top: -120px;
  right: -90px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-soft) 0%, transparent 66%);
}

.ab-halo-2 {
  position: absolute;
  bottom: -140px;
  left: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-soft) 0%, transparent 68%);
}

/* 背景装饰：只用「光」，一根线条都不留。
   被删过两次：水波纹（太抢）、斜向光栅 .ab-lattice（太乱）、玉璧/平安扣线稿（还是线条）。
   结论：登录页背景只保留柔光与月晕，装饰层要"被感觉到"而不是"被看到"。 */
.ab-beam {
  position: absolute;
  top: -120px;
  left: -40%;
  width: 180%;
  height: 300px;
  background: linear-gradient(
    102deg,
    transparent 32%,
    var(--brand-glow) 50%,
    transparent 68%
  );
  transform: rotate(-10deg);
  filter: blur(20px);
  animation: beamDrift 17s ease-in-out infinite;
}

.ab-aurora {
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 470px;
  height: 310px;
  transform: translateX(-50%);
  background: radial-gradient(
    58% 60% at 50% 62%,
    var(--brand-glow) 0%,
    transparent 72%
  );
  filter: blur(14px);
  animation: auroraBreathe 12s ease-in-out infinite;
}

@keyframes beamDrift {
  0%,
  100% {
    transform: rotate(-10deg) translateX(-5%);
    opacity: 0.7;
  }
  50% {
    transform: rotate(-10deg) translateX(5%);
    opacity: 1;
  }
}

@keyframes auroraBreathe {
  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translateX(-50%) translateY(-16px) scale(1.06);
  }
}

.ab-mark {
  position: absolute;
  right: 20px;
  top: 62px;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 14px;
  color: var(--brand);
  opacity: 0.055;
}

.auth {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 26px 24px;
  overflow-y: auto;
  scrollbar-width: none;
}

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

.auth-logo {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--gold-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--on-brand);
  margin: 22px 0 14px;
  box-shadow: var(--shadow-1);
  position: relative;
}

.auth-logo::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 26px;
  border: 1px solid var(--brand);
  opacity: 0.22;
}

[data-theme="lumen"] .auth-logo {
  color: #fff;
}

.auth h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
}

.auth .a-sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 6px 0 26px;
  line-height: 1.5;
}

.auth-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.auth-tabs button {
  padding: 0 0 10px;
  font-size: 14px;
  color: var(--text-3);
  position: relative;
}

.auth-tabs button.on {
  color: var(--text);
  font-weight: 500;
}

.auth-tabs button.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.auth .a-foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
}

.auth .a-skip {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

.auth .a-skip button {
  color: var(--brand);
  font-weight: 500;
}

.agree {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.6;
  margin: 14px 0;
}

.agree b {
  color: var(--brand);
  font-weight: 500;
}

/* ---------- 注册页协议勾选（《用户协议》+《寄售规则》合并成一条） ----------
   2026-10-05：原来是两条独立勾选，现在合并成一条；点协议名跳独立页面看全文（不再用浮层）。 */
.agr-box {
  margin: 14px 0 4px;
}

.agr-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.7;
  /* 整行可点：点文字也能勾，不用非戳那个 16px 的小方块 */
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.agr-line.on .agr-txt {
  color: var(--text-2);
}

/* 自绘勾选框：不依赖原生 checkbox，点击只切 class（不重新 render，保住已填表单） */
.agr-chk {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.agr-chk.on {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.agr-chk.on::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.agr-txt {
  flex: 1;
}

.agr-link {
  font-style: normal;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
}

.agr-and {
  font-style: normal;
}

/* 协议全文页正文段落（注册页点《用户协议》/《寄售规则》跳进的二级页） */
.agr-p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text-2);
}

/* ============================ TOAST ============================ */

.toast {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 12px);
  background: var(--text);
  color: var(--bg);
  font-size: 12.5px;
  padding: 10px 18px;
  border-radius: var(--r-full);
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  box-shadow: var(--shadow-2);
}

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

/* ============================ STAGE CONTROLS ============================ */

.stage-panel {
  width: 268px;
  align-self: flex-start;
  position: sticky;
  top: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-1);
}

.stage-panel h5 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.stage-panel .sp-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 16px;
  line-height: 1.6;
}

.stage-panel .sp-group {
  margin-bottom: 16px;
}

.stage-panel .sp-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.swatch {
  flex: 1;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  padding: 3px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.swatch.on {
  border-color: var(--brand);
}

.swatch i {
  display: block;
  height: 38px;
  border-radius: 8px;
}

.swatch span {
  display: block;
  font-size: 10px;
  text-align: center;
  margin-top: 5px;
  color: var(--text-2);
}

.lang-switch {
  display: flex;
  gap: 6px;
}

.lang-switch button {
  flex: 1;
  padding: 7px 0;
  font-size: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--surface-2);
}

.lang-switch button.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
}

[data-theme="lumen"] .lang-switch button.on {
  color: #fff;
}

@media (max-width: 900px) {
  body {
    flex-direction: column;
    padding: 24px 12px;
  }
  .stage-panel {
    position: static;
    width: 100%;
    max-width: 390px;
  }
}

/* ============================================================
   青花云蓝 · 细节迭代（2026-09-30）
   甄选新品标题 / 目录式商品卡 / 场次预告锁 / 注册表单 / 空状态
   ============================================================ */

/* ---- 主题锁定卡片（验收面板） ---- */
.theme-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.theme-locked i {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
}
.theme-locked b {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.theme-locked span {
  display: block;
  font-size: 10px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.5;
}

/* ---- 公告条：整条可点 ---- */
.notice {
  cursor: pointer;
}
.notice .n-more {
  display: flex;
  align-items: center;
  color: var(--text-3);
  flex-shrink: 0;
}
.notice .n-more svg {
  width: 14px;
  height: 14px;
}

/* ---- 「甄选新品」标题 ---- */
.feat-head {
  text-align: center;
  margin: 2px 0 18px;
}
.feat-head .fh-en {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
}
.feat-head h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 6px;
  text-indent: 6px;
  margin: 7px 0 9px;
}
.feat-head .fh-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.feat-head .fh-rule i {
  display: block;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.feat-head .fh-rule i:last-child {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.feat-head .fh-rule b {
  width: 5px;
  height: 5px;
  background: var(--brand);
  transform: rotate(45deg);
}
.feat-head .fh-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 9px;
  letter-spacing: 0.4px;
}

/* ---- 国际目录式商品卡 ---- */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px;
  padding: 0 var(--gutter);
}
.pg-card {
  cursor: pointer;
}
/* 商品首图：正方形 800×800，容器宽度等比自适应 */
.pg-media {
  position: relative;
  aspect-ratio: var(--thumb-ratio);
  border-radius: var(--r-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    72% 52% at 50% 6%,
    rgba(255, 255, 255, 0.22),
    transparent 62%
  );
}
.pg-media svg {
  width: 62%;
  height: 62%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
/* 后端配了真实商品图就用图，没配才回退到图标 */
.pg-media img.pg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.pg-detail-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: #fff;
  display: block;
}
.pg-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  font-size: 9px;
  letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-2);
}
.pg-badge.on {
  background: var(--brand);
  color: var(--on-brand);
}
.pg-info {
  text-align: center;
  padding: 10px 2px 0;
}
.pg-en {
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.5;
  min-height: 27px;
}
.pg-name {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.pg-meta {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
}
.pg-price {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.pg-price s {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-3);
  margin-left: 5px;
  text-decoration: line-through;
}

/* ---- 场次卡：进行中可进入 / 预告锁死 ---- */
.session-card.clickable {
  cursor: pointer;
}
.session-card.preview {
  cursor: default;
  opacity: 0.86;
}
.session-poster.preview {
  filter: saturate(0.7);
}
.sp-badge.prev {
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand);
}
.sc-enter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 8px 0 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--brand);
}
.sc-enter svg {
  width: 13px;
  height: 13px;
}
.lock-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  font-size: 11px;
  color: var(--text-2);
}
.lock-note svg {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* ---- 空状态 ---- */
.empty {
  text-align: center;
  padding: 46px 20px 40px;
}
.empty .ep-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-3);
}
.empty .ep-icon svg {
  width: 24px;
  height: 24px;
}
.empty .ep-t {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
}
.empty .ep-d {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.6;
}

/* ---- 注册表单：锁定邀请码 + 扫码 + 明文密码 ---- */
.lock-row {
  display: flex;
  gap: 8px;
}
.lock-row input {
  flex: 1;
  min-width: 0;
}
input.locked {
  background: var(--surface-2);
  color: var(--text-3);
  border-style: dashed;
  font-family: var(--font-num);
  letter-spacing: 1px;
  cursor: not-allowed;
}
input.locked.filled {
  color: var(--brand);
  border-style: solid;
  border-color: var(--brand);
  font-weight: 600;
}
/* 邀请码输入框：可手输 / 可粘贴（扫码只是其中一种填入方式） */
input.code-in {
  font-family: var(--font-num);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
input.code-in::placeholder {
  letter-spacing: 0;
  text-transform: none;
}
.scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.scan-btn svg {
  width: 14px;
  height: 14px;
}
input.mono {
  font-family: var(--font-num);
  letter-spacing: 0.5px;
}
.f-tip {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.55;
}

/* ---- 按钮状态 ---- */
.btn.disabled {
  background: var(--surface-3);
  color: var(--text-3);
  border: 1px solid var(--line);
}
.mini-btn {
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: none;
  background: var(--hot);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.sale-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin-bottom: 14px;
}
.sale-strip svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-3);
}
.sale-strip.on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.sale-strip.on svg {
  color: var(--brand);
}
.pill.brand {
  background: var(--brand-soft);
  color: var(--brand);
}

/* ---- 推广码 · 注册秘钥 ---- */
.qr-stage {
  text-align: center;
  padding: 6px 0 14px;
}
.qs-label {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-3);
}
.qs-code {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 2.5px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.qs-code .copy-btn {
  letter-spacing: 0;
  font-weight: 400;
}
.qs-note {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 5px;
}
.key-box {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 14px;
  margin-bottom: 14px;
}
.kb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kb-t {
  font-size: 12.5px;
  font-weight: 600;
}
.kb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--brand);
  color: var(--brand);
  background: var(--surface);
  font-size: 11.5px;
  cursor: pointer;
}
.kb-btn svg {
  width: 13px;
  height: 13px;
}
.kb-btn i {
  font-style: normal;
}
.kb-key {
  margin-top: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.4px;
  word-break: break-all;
}
.kb-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  font-size: 11px;
  color: var(--text-2);
}
.kb-tip {
  margin: 9px 0 0;
  font-size: 10.5px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ---- 公告中心 ---- */
.nc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
}
.nc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.nc-date {
  font-size: 11px;
  color: var(--text-3);
}
.nc-card h4 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
}
.nc-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-2);
}
.nc-sec-title {
  margin: 18px 2px 8px;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- 注册成功 · 截图保存页 ---- */
.save-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.sv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.sv-row:last-child {
  border-bottom: none;
}
.sv-row span {
  font-size: 12px;
  color: var(--text-3);
  flex-shrink: 0;
}
.sv-row b {
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}
.sv-row b.sv-pwd {
  color: var(--hot);
  font-size: 16px;
  letter-spacing: 1px;
}
.save-warn {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--hot-soft);
  border: 1px solid var(--hot);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.save-warn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--hot);
  margin-top: 1px;
}

/* ---- 我的 · 注册时间 ---- */
.pf-reg {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ============================================================
   NEW-1 · 抢购倒计时光效（距结束）
   ============================================================ */

.cd-live {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--hot);
  background: linear-gradient(
    100deg,
    var(--hot-soft) 0%,
    color-mix(in srgb, var(--hot) 26%, transparent) 45%,
    var(--hot-soft) 100%
  );
  background-size: 220% 100%;
  box-shadow: 0 0 20px var(--hot-soft),
    inset 0 0 12px color-mix(in srgb, var(--hot) 10%, transparent);
  animation: cdShift 2.6s linear infinite;
}

@keyframes cdShift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 220% 50%;
  }
}

.cd-live::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--hot) 55%, transparent);
  opacity: 0.5;
  animation: cdHalo 1.7s ease-in-out infinite;
}

@keyframes cdHalo {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.045);
  }
}

.cd-live .cd-box.hot {
  background: var(--hot);
  color: #fff;
  box-shadow: 0 0 12px var(--hot-soft);
  animation: cdPulse 1.7s ease-in-out infinite;
}

@keyframes cdPulse {
  50% {
    box-shadow: 0 0 20px color-mix(in srgb, var(--hot) 48%, transparent);
  }
}

.cd-live .cd-sep {
  color: var(--hot);
}

/* 场次卡外圈：抢购中整卡描一层呼吸光边 */
.session-card.live-glow {
  border: 1px solid color-mix(in srgb, var(--hot) 40%, transparent);
  box-shadow: 0 0 22px var(--hot-soft);
  animation: cardGlow 2.4s ease-in-out infinite;
}

@keyframes cardGlow {
  50% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--hot) 30%, transparent);
  }
}

/* ============================================================
   NEW-2 · 售罄置灰（抢完即灰，不可点击）
   ============================================================ */

.si.out,
.pg-card.out {
  pointer-events: none;
}

.si.out .si-img,
.pg-card.out .pg-media,
.lot-card.out .lot-img,
.order-card.out .oc-img {
  filter: grayscale(1) saturate(0.15);
  opacity: 0.5;
}

.si.out .si-name,
.si.out .si-price,
.pg-card.out .pg-name,
.pg-card.out .pg-price,
.pg-card.out .pg-en,
.pg-card.out .pg-meta {
  color: var(--text-3);
}

.out-stamp {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.pg-card.out .pg-badge,
.lot-card.out .lot-tag {
  background: var(--surface-3);
  color: var(--text-3);
}

/* ============================================================
   NEW-3 · 商品详情页（多图 banner 800×800 + 图文详情 + 底部按钮）
   ============================================================ */

.gd-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.gd-gallery {
  position: relative;
  margin: 0 var(--gutter) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: var(--thumb-ratio);
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.gd-gallery::-webkit-scrollbar {
  display: none;
}

.gd-shot {
  min-width: 100%;
  aspect-ratio: var(--thumb-ratio);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    72% 52% at 50% 6%,
    rgba(255, 255, 255, 0.24),
    transparent 62%
  );
}

.gd-shot svg {
  width: 54%;
  height: 54%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38));
}
/* 商品详情画廊里放真实商品图时铺满整屏 */
.gd-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.gd-idx {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(6px);
}

.gd-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.gd-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all var(--dur) var(--ease);
}

.gd-dots i.on {
  width: 16px;
  border-radius: 3px;
  background: #fff;
}

.gd-hint {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin-top: 10px;
}

.gd-body {
  padding: 16px var(--gutter) 8px;
}

.gd-price-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.gd-price {
  font-size: 30px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -1px;
  line-height: 1.1;
}

.gd-origin {
  font-size: 11.5px;
  color: var(--text-3);
  padding-bottom: 4px;
}

.gd-origin s {
  margin-left: 3px;
  text-decoration: line-through;
}

.gd-off {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--hot-soft);
  color: var(--hot);
  padding-bottom: 3px;
  margin-bottom: 3px;
}

.gd-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-top: 12px;
  line-height: 1.45;
}

.gd-en {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 5px;
}

.gd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.gd-tags span {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}

.gd-spec {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.gd-spec div {
  display: flex;
  gap: 12px;
  padding: 10px 13px;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}

.gd-spec div:last-child {
  border-bottom: none;
}

.gd-spec b {
  width: 62px;
  flex-shrink: 0;
  font-weight: 400;
  color: var(--text-3);
}

.gd-spec span {
  flex: 1;
  color: var(--text);
}

.gd-sec {
  margin-top: 18px;
}

.gd-sec-title {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.gd-sec-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.gd-para {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-2);
  margin-bottom: 10px;
}

/* 富文本图文详情（后台编辑器产物）：排版跟 gd-para 一致，额外处理图片/标题/列表 */
.gd-rich {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-2);
  margin-bottom: 10px;
}
.gd-rich p { margin: 0 0 10px; }
.gd-rich p:last-child { margin-bottom: 0; }
.gd-rich h1,
.gd-rich h2,
.gd-rich h3,
.gd-rich h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin: 14px 0 8px;
  line-height: 1.5;
}
.gd-rich h3:first-child,
.gd-rich h4:first-child { margin-top: 0; }
.gd-rich ul,
.gd-rich ol { margin: 0 0 10px 18px; padding: 0; }
.gd-rich li { margin: 3px 0; }
.gd-rich b,
.gd-rich strong { color: var(--text-1); font-weight: 600; }
.gd-rich a { color: var(--brand); text-decoration: underline; }
.gd-rich img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md, 12px);
  margin: 10px 0;
  background: var(--surface-2, #f5f6f8);
}
.gd-rich hr {
  border: none;
  border-top: 1px solid var(--line, #e8eaee);
  margin: 14px 0;
}
.gd-rich blockquote {
  margin: 10px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--brand);
  background: var(--surface-2, #f5f6f8);
  border-radius: 0 8px 8px 0;
}

.gd-pics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.gd-pic {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.gd-pic svg {
  width: 40%;
  height: 40%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.34));
}

.gd-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gd-pic em {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.gd-bar {
  flex-shrink: 0;
  padding: 11px var(--gutter) 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  gap: 10px;
  align-items: center;
}

.gd-bar .gd-bar-info {
  font-size: 10.5px;
  color: var(--text-3);
  width: 78px;
  flex-shrink: 0;
  line-height: 1.5;
}

.gd-bar .btn {
  height: 48px;
}

.btn.disabled,
.btn.is-off {
  background: var(--surface-3);
  color: var(--text-3);
  cursor: not-allowed;
}

.btn.disabled:hover,
.btn.is-off:hover {
  filter: none;
}

/* ============================================================
   NEW-4 · 场次详情：双排大卡片
   ============================================================ */

.lot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 13px;
}

.lot-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.lot-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}

.lot-img {
  position: relative;
  aspect-ratio: var(--thumb-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lot-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    72% 52% at 50% 6%,
    rgba(255, 255, 255, 0.22),
    transparent 62%
  );
}

.lot-img svg {
  width: 56%;
  height: 56%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

/* 场次详情页商品真图：铺满缩略框（没图时才回退到上面的 icon） */
.lot-img img.lot-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.lot-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  font-size: 9px;
  letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-2);
}

.lot-left {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  font-size: 9.5px;
  padding: 3px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--hot) 82%, transparent);
  color: #fff;
}

.lot-info {
  padding: 11px 12px 12px;
}

.lot-en {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lot-name {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.4;
  height: 38px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lot-origin {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 5px;
}

.lot-origin s {
  margin-left: 3px;
  text-decoration: line-through;
}

.lot-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
}

.lot-price {
  font-size: 17px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -0.3px;
}

.lot-seller {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lot-btn {
  width: 100%;
  height: 36px;
  margin-top: 10px;
  border-radius: var(--r-sm);
  background: var(--hot);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 0 14px var(--hot-soft);
  transition: filter var(--dur) var(--ease);
}

.lot-btn:active {
  filter: brightness(0.94);
}

.lot-btn svg {
  width: 13px;
  height: 13px;
}

.lot-card.out .lot-btn {
  background: var(--surface-3);
  color: var(--text-3);
  box-shadow: none;
  cursor: not-allowed;
}

/* ============================================================
   NEW-5 · 线下付款页：收款渠道切换（按卖家上传的可选）
   ============================================================ */

.pm-wrap {
  padding: 0 var(--gutter);
}

.pm-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.pm-tab {
  flex: 1;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all var(--dur) var(--ease);
}

.pm-tab i {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.pm-tab.on {
  border-color: var(--ch-c, var(--brand));
  background: color-mix(in srgb, var(--ch-c, var(--brand)) 12%, transparent);
  color: var(--ch-c, var(--brand));
  font-weight: 500;
  box-shadow: 0 0 14px color-mix(in srgb, var(--ch-c, var(--brand)) 22%, transparent);
}

/* 不可用渠道（未配置 / 已停用 / 未上传收款码）：置灰 + 不可点 */
.pm-tab.off,
.pm-tab:disabled {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
  background: var(--bg-2, #f3f4f6);
  border-style: dashed;
}

.pm-tab.off:hover,
.pm-tab:disabled:hover {
  border-color: var(--line);
}

.pm-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 18px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pm-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -70px;
  transform: translateX(-50%);
  width: 240px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--ch-c, var(--brand)) 16%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.pm-brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-full);
  background: var(--ch-c, var(--brand));
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
}

.pm-qr {
  position: relative;
  z-index: 2;
  width: 194px;
  height: 194px;
  margin: 15px auto 0;
  padding: 11px;
  background: #fff;
  border-radius: var(--r-sm);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}

.pm-qr svg {
  width: 100%;
  height: 100%;
}

/* 卖家没上传收款码时：不伪造二维码，如实提示改用账号转账 */
.pm-qr.is-none,
.up-qr.is-none {
  background: rgba(255, 255, 255, 0.92);
  border: 1px dashed var(--line);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-qr-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: var(--text-2);
  padding: 10px;
}

.pm-qr-none svg {
  width: 30px;
  height: 30px;
  color: var(--text-3);
}

.pm-qr-none b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.pm-qr-none em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
}

/* 「我的收款方式」里的收款码位只有 76px，文字要缩一号 */
.up-qr.is-none .pm-qr-none {
  padding: 2px;
  gap: 2px;
}
.up-qr.is-none .pm-qr-none svg {
  width: 18px;
  height: 18px;
}
.up-qr.is-none .pm-qr-none b {
  font-size: 10px;
  line-height: 1.3;
}
.up-qr.is-none .pm-qr-none em {
  font-size: 9px;
  line-height: 1.3;
}

.pm-hint {
  position: relative;
  z-index: 2;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 12px;
  line-height: 1.6;
}

.pm-acct {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 12px;
}

.pm-acct-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
}

.pm-acct-line span {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}

.pm-acct-line b {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.pm-note {
  display: flex;
  gap: 7px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-2);
}

.pm-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--brand);
  margin-top: 1px;
}

.pm-amount {
  text-align: center;
  padding: 6px 0 16px;
}

.pm-amount .pm-l {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--text-3);
}

.pm-amount .pm-n {
  font-size: 32px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -1px;
  margin: 3px 0 8px;
}

/* 付款页关联的藏品：确认买的对不对 */
.pm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.pm-i-img {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.pm-i-img svg {
  width: 26px;
  height: 26px;
}

.pm-i-t {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.pm-i-d {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}

/* ============================================================
   NEW-5B · 我的收款方式（上传渠道）
   ============================================================ */

.up-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 13px;
  margin-bottom: 12px;
}

.up-card.pending {
  border-style: dashed;
  background: transparent;
}

.up-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.up-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.up-t {
  font-size: 13px;
  font-weight: 500;
}

.up-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.45;
}

.up-state {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-3);
  flex-shrink: 0;
}

.up-state.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.up-body {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}

.up-qr {
  width: 76px;
  height: 76px;
  padding: 7px;
  border-radius: var(--r-xs);
  background: #fff;
  flex-shrink: 0;
}

.up-qr svg {
  width: 100%;
  height: 100%;
}

.up-act {
  flex: 1;
  min-width: 0;
}

/* ============================================================
   NEW-6 · 我的订单入口（两个独立模块）
   ============================================================ */

.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 var(--gutter);
  margin-bottom: 18px;
}

.entry-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 14px 13px 15px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.entry-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.entry-card .ec-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
}

.entry-card .ec-icon svg {
  width: 18px;
  height: 18px;
}

.entry-card .ec-t {
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 11px;
  letter-spacing: -0.1px;
}

.entry-card .ec-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
}

.entry-card .ec-n {
  position: absolute;
  right: 12px;
  top: 12px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--hot);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 订单二级页的页签 */
.seg-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.seg-tabs button {
  flex: 1;
  height: 34px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}

.seg-tabs button.on {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
  box-shadow: var(--shadow-1);
}

/* 「我抢到的」三页签：按钮里带件数徽标（待付款 / 待确认 / 已完成） */
.won-seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.won-n {
  font-style: normal;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 10.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-3);
}
.won-seg button.on .won-n {
  background: transparent;
  border-color: transparent;
  color: var(--on-brand);
  opacity: 0.75;
}

/* ============================================================
   NEW-7 · 右上角语言按钮（文字切换：中文页显示「英文」）
   ============================================================ */

.lang-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--text-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all var(--dur) var(--ease);
}

.lang-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.lang-btn svg {
  width: 13px;
  height: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .cd-live,
  .cd-live::before,
  .cd-live .cd-box.hot,
  .session-card.live-glow {
    animation: none;
  }
}
.pf-reg b {
  font-weight: 500;
  color: var(--text-2);
}

/* ============================================================
   NEW-8 · 积分商城：分类导轨 + 正方形商品 + 积分商品详情
   ============================================================ */

/* 分类标题行 */
/* 分类：只写分类名字，按钮等宽等高等分；选中态整块填品牌色。
   （淘汰过两版：胶囊 chips → 图标方块+数量，客户都嫌花） */
.cat-seg {
  display: flex;
  gap: 7px;
  padding: 0 var(--gutter);
  margin-bottom: 18px;
}

.cat-seg .cat-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cat-seg .cat-btn.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}

/* 积分商品卡上的积分价 */
.pt-price {
  color: var(--brand);
}

.pt-price small {
  font-size: 9.5px;
  font-weight: 400;
  margin-left: 3px;
  letter-spacing: 0.3px;
}

.gd-price.pt-price {
  font-size: 27px;
}

/* 三宫格：可点的两格加一层可点暗示 */
.stat-cell.tap {
  position: relative;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.stat-cell.tap:active {
  background: var(--surface-2);
}

.stat-cell .stat-go {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  opacity: 0.5;
  font-style: normal;
}

.stat-cell .stat-go svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* 订单卡：纯展示（无按钮） */
.order-card.plain {
  align-items: center;
  cursor: default;
}

.order-card .oc-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.oc-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
}

.oc-link svg {
  width: 11px;
  height: 11px;
}

/* ============================================================
   NEW-9 · 申请寄卖：多选藏品 + 寄卖记录 + 买家打款明细
   ============================================================ */

.apply-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 11px;
}

.apply-sec-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.apply-sec-head span {
  font-size: 11px;
  color: var(--text-3);
}

.apply-sec-head span b {
  color: var(--brand);
  font-weight: 600;
}

.apply-hint {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.6;
  margin: -4px 0 12px;
}

/* 我拥有的藏品：两列可勾选卡片 */
.own-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 12px;
  margin-bottom: 18px;
}

.own-tile {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 8px 8px 10px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.own-tile.on {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-1);
}

.own-img {
  position: relative;
  aspect-ratio: var(--thumb-ratio);
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.own-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 50% at 50% 8%,
    rgba(255, 255, 255, 0.22),
    transparent 62%
  );
}

.own-img svg {
  width: 58%;
  height: 58%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

/* 真实商品主图：铺满格子（与 .lot-pic / .si-pic 同一套写法） */
.own-img img.own-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.own-tick {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.own-tick svg {
  width: 12px;
  height: 12px;
  color: #fff;
  filter: none;
}

.own-tile.on .own-tick {
  background: var(--brand);
  border-color: var(--brand);
}

/* 已在寄卖流程中的藏品：仍然展示（会员能看到自己所有藏品），但置灰不可勾选 */
.own-tile.off {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.own-tile.off .own-tick {
  display: none;
}

/* 「已提交」角标：替代勾选圆圈，说明这件为什么点不动 */
.own-flag {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(17, 24, 39, 0.74);
  color: #fff;
  font-size: 10px;
  line-height: 1.55;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}

.own-t {
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 9px;
  line-height: 1.45;
}

.own-d {
  font-size: 11px;
  color: var(--hot);
  font-weight: 500;
  margin-top: 3px;
}

.own-d2 {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

.own-d2 b {
  font-weight: 500;
  color: var(--text-2);
}

/* 大额合并规则说明 */
.sys-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.65;
}

.sys-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brand);
}

/* 底部提交条：贴在滚动区底部 */
.screen.has-applybar {
  padding-bottom: 0;
}

.apply-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 6px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.apply-bar .ab-info {
  flex: 0 0 92px;
  min-width: 0;
}

.apply-bar .ab-info span {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
}

.apply-bar .ab-info b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -0.3px;
}

.apply-bar .btn {
  flex: 1;
}

/* 寄卖记录卡 */
.cs-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 13px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cs-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}

.cs-card.static {
  cursor: default;
  margin-bottom: 20px;
}

.cs-card.static:hover {
  border-color: var(--line);
  box-shadow: none;
}

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

.cs-amount {
  font-size: 15px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -0.3px;
}

.cs-name {
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 9px;
  line-height: 1.5;
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-3);
}

.cs-meta b {
  font-weight: 500;
  color: var(--text-2);
}

.cs-flag {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--brand-soft);
  font-size: 10.5px;
  color: var(--text-2);
  line-height: 1.6;
}

.cs-flag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brand);
}

/* 买家成交与打款行 */
.buy-row {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 13px;
  margin-bottom: 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.br-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

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

.br-t {
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.br-item {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-3);
}

.br-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.5;
}

.br-r {
  text-align: right;
  flex-shrink: 0;
}

.br-r b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.pay-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  margin-top: 4px;
  background: var(--surface-3);
  color: var(--text-2);
}

.pay-tag.ok {
  background: var(--brand-soft);
  color: var(--brand);
}

.pay-tag.wait {
  background: var(--hot-soft);
  color: var(--hot);
}

/* 买家已转账并上传凭证、等卖家核对确认 —— 介于「待打款」和「已打款」之间，用橙色区分 */
.pay-tag.warn {
  background: #fff7ed;
  color: #c2410c;
}

/* ============================================================
   NEW-10 · 服务费待支付卡 + 积分抵扣支付
   ============================================================ */

.fee-tip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 var(--gutter) 16px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--hot) 32%, var(--line));
  border-radius: var(--r-md);
  background: linear-gradient(
    100deg,
    var(--hot-soft) 0%,
    var(--surface) 62%
  );
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.fee-tip:hover {
  border-color: var(--hot);
  box-shadow: var(--shadow-1);
}

.fee-tip .ft-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hot-soft);
  color: var(--hot);
  font-style: normal;
}

.fee-tip .ft-icon svg {
  width: 17px;
  height: 17px;
}

.fee-tip .ft-main {
  flex: 1;
  min-width: 0;
}

.fee-tip .ft-t {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

.fee-tip .ft-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 红点 */
.fee-tip .ft-dot {
  position: absolute;
  right: 30px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 0 3px var(--hot-soft);
  animation: dotPulse 1.9s ease-in-out infinite;
}

@keyframes dotPulse {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--hot) 6%, transparent);
  }
}

.fee-tip > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-3);
  opacity: 0.6;
}

/* 服务费详情 hero */
.fee-hero {
  border-radius: var(--r-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hot) 88%, #000) 0%,
    var(--hot) 55%,
    color-mix(in srgb, var(--hot) 70%, #fff) 100%
  );
  color: #fff;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.fee-hero::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -44px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.fee-hero .fh-label {
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.82;
  position: relative;
  z-index: 2;
}

.fee-hero .fh-num {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 4px 0 8px;
  position: relative;
  z-index: 2;
}

.fee-hero .fh-item {
  font-size: 11.5px;
  opacity: 0.86;
  position: relative;
  z-index: 2;
  line-height: 1.5;
}

/* 抵扣滑块 */
.fee-range-box {
  padding: 14px 16px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.fee-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  outline: none;
}

.fee-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.fee-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  cursor: pointer;
}

.fr-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10px;
  color: var(--text-3);
}

.fee-quick {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.fee-quick .kb-btn {
  flex: 1;
  justify-content: center;
}

.fee-offline.off,
.fee-nooffline.off {
  display: none;
}

/* ============================================================
   NEW-11 · 订单管理（积分兑换单 / 平台商品订单） + 订单详情
   ============================================================ */

/* 「我的」页的整宽入口 */
.entry-wide {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px var(--gutter) 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.entry-wide:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.entry-wide .ew-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
}

.entry-wide .ew-icon svg {
  width: 18px;
  height: 18px;
}

.entry-wide .ew-main {
  flex: 1;
  min-width: 0;
}

.entry-wide .ew-t {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

.entry-wide .ew-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.45;
}

.entry-wide .ew-n {
  min-width: 21px;
  height: 21px;
  padding: 0 7px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-wide > svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-3);
  opacity: 0.6;
}

/* 我寄卖的：单品陈列卡（上下三段：商品名+状态药丸 / 主图+信息 / 服务费+操作） */
.mc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  margin-bottom: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.mc-card:hover {
  border-color: var(--line-strong);
}

/* 第一行：商品名在左，审核状态药丸在**右上角** */
.mc-card .mc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.mc-card .mc-head .mc-t {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}

.mc-card .mc-head .status-pill {
  flex-shrink: 0;
}

/* 第二行：主图 + 信息 */
.mc-card .mc-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.mc-card .mc-img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mc-card .mc-img svg {
  width: 30px;
  height: 30px;
}

.mc-card .mc-img img.mc-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-card .mc-t {
  font-size: 13px;
  font-weight: 600;
}

.mc-card .mc-d {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -0.2px;
}

.mc-card .mc-d b {
  color: var(--hot);
}

/* 上架时间单独一行：混在价格后面会因为换行把日期从中间断开 */
.mc-card .mc-d2 {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  white-space: nowrap;
}

.mc-card .mc-d2 b {
  font-weight: 500;
  color: var(--text-2);
}

.mc-card .mc-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand);
  margin-top: 6px;
}

.mc-card .mc-link svg {
  width: 11px;
  height: 11px;
}

/* 第三行：左「待支付 + 去支付」，右「服务费 + 金额」（右下角） */
.mc-card .mc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 9px;
  min-height: 30px;
}

.mc-card .mc-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mc-card .mc-act .mini-btn {
  padding: 4px 11px;
  font-size: 11px;
}

/* 服务费落在卡片右下角：浅灰标签 + 深色金额 */
.mc-card .mc-fee {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.mc-card .mc-fee b {
  color: var(--text);
  font-weight: 600;
}

/* 卡片右上角：审核状态 + 服务费状态竖排（「待支付」落在「待确认」正下方） */
.mc-card .mc-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* 待上架：下一次上架时间整行高亮，一眼看到「什么时候上」 */
.mc-card .mc-next {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 11.5px;
  font-weight: 500;
}

.mc-card .mc-next svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--on-brand);
}

.mc-card .mc-next b {
  margin-left: auto;
  font-weight: 700;
  font-size: 12.5px;
}

/* 寄卖详情 · 下一次上架时间（同款高亮，字号更大） */
.cs-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
}

.cs-next svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--on-brand);
}

.cs-next span {
  display: block;
  font-size: 11.5px;
  opacity: 0.85;
}

.cs-next b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}

/* 我寄卖的 · 状态切换（4 个等分，带件数角标） */
.mc-seg {
  margin-bottom: 16px;
}

.mc-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  font-size: 12.5px;
}

.mc-seg button i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mc-seg button.on i {
  background: rgba(255, 255, 255, 0.24);
  color: var(--on-brand);
}

/* 往期场次：已结束提示 */
.past-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-3);
  padding: 2px 0 10px;
}

.past-note svg {
  width: 14px;
  height: 14px;
}

/* 积分明细头部：总积分 / 可兑换积分 / 可抵扣积分 */
.pl-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.pl-cell {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 12px 8px 11px;
  text-align: center;
}

.pl-cell span {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.pl-cell b {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin-top: 5px;
}

.pl-cell em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-3);
  margin-top: 3px;
}

/* 收款方式：只展示二维码本身 */
.up-qr-tip {
  font-size: 10.5px;
  color: var(--text-3);
  padding: 0 0 8px;
}

/* ============================================================
   NEW-12 · 收款方式禁用 / 订单列表内联按钮 / 我抢到的状态
   ============================================================ */

/* 小按钮的三种语气 */
.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  background: var(--hot);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: filter var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.mini-btn svg {
  width: 12px;
  height: 12px;
}

.mini-btn.ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-2);
}

.mini-btn.ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.mini-btn.ghost.danger:hover {
  border-color: var(--hot);
  color: var(--hot);
}

.up-btns {
  display: flex;
  gap: 8px;
}

/* 订单卡底部的操作区（2026-10-05 起整卡可点进详情，这里只放「进详情做不到」的操作） */
.po-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* 我抢到的：等待寄卖卡可点开 */
.order-card.tapable {
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.order-card.tapable:hover {
  border-color: var(--line-strong);
}

.order-card .oc-transfer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--brand);
}

.order-card .oc-transfer svg {
  width: 11px;
  height: 11px;
}

.order-card .oc-side .mini-btn {
  margin-top: 2px;
}

/* 等待寄卖详情：成交价 / 明日预计价 */
.wp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.wp-cell {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px 12px 13px;
  text-align: center;
}

.wp-cell.hot {
  border-color: color-mix(in srgb, var(--hot) 32%, var(--line));
  background: linear-gradient(160deg, var(--hot-soft), var(--surface) 72%);
}

.wp-cell span {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
}

.wp-cell b {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin-top: 6px;
}

.wp-cell.hot b {
  color: var(--hot);
}

.wp-cell em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
}

.wp-cell.hot em {
  color: var(--hot);
  font-weight: 600;
}

/* 转单：粉丝列表 */
.fan-list {
  margin-bottom: 16px;
}

.fan-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.fan-row:hover {
  border-color: var(--line-strong);
}

.fan-row.on {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.fan-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

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

.fan-t {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fan-lv {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
}

.fan-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
}

.fan-row > svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-3);
  opacity: 0.6;
}

/* 会员等级：团长徽标更醒目 */
.pf-badge.leader {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 62%, #fff));
  color: var(--on-brand);
}

.lv-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 92%, #000) 0%,
    var(--brand) 58%,
    color-mix(in srgb, var(--brand) 66%, #fff) 100%
  );
  color: var(--on-brand);
  position: relative;
  overflow: hidden;
}

.lv-hero::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -44px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.lv-hero-ico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
  font-style: normal;
}

.lv-hero-ico svg {
  width: 21px;
  height: 21px;
}

.lv-hero .lv-hero-l {
  font-size: 10.5px;
  opacity: 0.82;
  position: relative;
  z-index: 2;
}

.lv-hero .lv-hero-n {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 2px 0 3px;
  position: relative;
  z-index: 2;
}

.lv-hero .lv-hero-d {
  font-size: 10.5px;
  opacity: 0.86;
  position: relative;
  z-index: 2;
}

.lv-hero .status-pill {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.22);
  color: var(--on-brand);
}

.lv-list {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

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

.lv-row:last-child {
  border-bottom: none;
}

.lv-row.on {
  background: var(--brand-soft);
}

.lv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--line-strong);
}

.lv-row.on .lv-dot {
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

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

.lv-t {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.lv-rate {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
}

.lv-row.on .lv-rate {
  background: var(--brand-soft);
  color: var(--brand);
}

.lv-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.5;
}

/* ============================================================
   NEW-13 · 交易规则页美化
   ============================================================ */

.rule-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 22px 20px 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 94%, #000) 0%,
    var(--brand) 60%,
    color-mix(in srgb, var(--brand) 58%, #fff) 100%
  );
  color: var(--on-brand);
}

.rule-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.rule-hero .rh-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
}

.rule-hero .rh-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.3px;
  margin-top: 13px;
  position: relative;
  z-index: 2;
}

.rule-hero .rh-line {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  margin: 14px 0 10px;
  position: relative;
  z-index: 2;
}

.rule-hero .rh-en {
  font-size: 9px;
  letter-spacing: 1.6px;
  opacity: 0.72;
  position: relative;
  z-index: 2;
}

/* 三步流程 */
.rule-steps {
  margin-bottom: 20px;
}

.rs-row {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
}

.rs-row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 2px;
  width: 1px;
  background: var(--line-strong);
}

.rs-row:last-child {
  padding-bottom: 0;
}

.rs-row:last-child::before {
  display: none;
}

.rs-no {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
}

.rs-body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.rs-t {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}

.rs-t svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
  flex-shrink: 0;
}

.rs-d {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.65;
  margin-top: 5px;
}

.rule-note {
  font-size: 10.5px;
  color: var(--text-3);
  line-height: 1.7;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
}

/* 规则页 · 费用说明：图标 + 标题 + 可换行正文（不用 list-row，避免单行 ellipsis 截断） */
.rule-fees {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.rf-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.rf-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
}

.rf-ico svg {
  width: 15px;
  height: 15px;
}

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

.rf-t {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1px;
}

.rf-d {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.65;
  margin-top: 3px;
}

/* 平台订单卡（订单管理列表卡 / 订单详情头卡 / 确认下单摘要卡 共用）
   2026-10-05 用户反馈「卡样式不搭配」：旧版是「灰底表头 + 三条分隔线」的表格感，
   现在改成一整块留白卡片 —— 顶部订单号+状态 → 商品行 → 金额行 → 操作行，
   只有「操作行」上方留一条分隔线，其余靠间距分组。整卡可点进详情。 */
.po-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 13px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.po-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}

.po-card:active {
  transform: scale(0.996);
}

/* 同款但不可点的卡（订单详情头卡）：只保留外观，去掉可点反馈 */
.po-card.static {
  cursor: default;
}

.po-card.static:hover {
  border-color: var(--line);
  box-shadow: none;
}

.po-card.static:active {
  transform: none;
}

.po-card .po-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border-bottom: 0;
  background: none;
}

.po-card .po-no {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.2px;
}

/* 右上角：状态药丸 + 「›」提示整卡可点进详情 */
.po-card .po-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.po-card .po-arrow {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-top: 1.5px solid var(--text-3);
  border-right: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  opacity: 0.7;
}

/* 通用商品行（「我抢到的」等卡也在用，左右留白由各自容器提供） */
.po-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
}

/* 订单卡里的商品行：左右留白已在 .po-card 上，这里只留与上面订单号行的间距 */
.po-card .po-body {
  padding: 12px 0 0;
}

.po-card .po-body > svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-3);
  opacity: 0.6;
}

.po-body .po-img,
.po-card .po-img {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.po-body .po-img svg {
  width: 32px;
  height: 32px;
}

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

.po-body .po-t {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.po-body .po-d {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
}

.po-body .po-p {
  font-size: 15px;
  font-weight: 600;
  color: var(--hot);
  margin-top: 6px;
  letter-spacing: -0.3px;
}

/* 卡片右下角的「使用积分 / 金额」行
   （2026-10-05 用户要求：订单号固定在卡片左上角，使用积分固定在卡片右下角） */
.po-card .po-amt {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}

.po-card .po-amt .po-k {
  font-size: 11px;
  color: var(--text-3);
}

.po-card .po-amt .num {
  font-size: 16px;
  font-weight: 600;
  color: var(--hot);
  letter-spacing: -0.3px;
}

/* 订单卡的操作行：左右留白交给卡片本身，与上面的金额行之间留出间距 */
.po-card .po-acts {
  padding: 12px 0 0;
  margin-top: 12px;
}

/* 订单卡操作区的小按钮（2026-10-05）
   ★ 必须重定一遍：文件后面还有一条全局 .mini-btn（描边款，无 .hot 变体），
     会把「去支付」这种实心主按钮也压成次要描边，两个按钮长得一样、看不出主次。
     这里按全站 .btn 的语言来：默认 = 主色实心；.hot = 矾红实心；.ghost = 白底描边。
     选择器带 .po-acts 前缀（0,2,0 起）就是为了稳压后面那条 (0,1,0)。 */
.po-acts .mini-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 15px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.po-acts .mini-btn:hover {
  background: var(--brand);
  filter: brightness(1.06);
}

.po-acts .mini-btn.hot {
  background: var(--hot);
  color: #fff;
}

.po-acts .mini-btn.hot:hover {
  background: var(--hot);
  filter: brightness(1.05);
}

.po-acts .mini-btn.ghost {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-2);
}

.po-acts .mini-btn.ghost:hover {
  background: var(--surface-2);
  border-color: var(--brand);
  color: var(--brand);
  filter: none;
}

/* 订单卡上的「自提商品」标签：只在自提单出现（快递单不加，免得满屏标签）。
   和状态药丸并排放在订单号右边 —— 品牌色表示"类型"，状态药丸表示"进度"，两种信息分得开。 */
.tag-pick {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  white-space: nowrap;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid var(--brand-soft);
}

/* 订单详情里的「自提核销」摘要块：点一下进核销码页 */
.pc-mini {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.pc-mini:active {
  background: var(--surface-2);
}

.pc-mini-k {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.2px;
}

.pc-mini-c {
  margin-top: 7px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--text);
  word-break: break-all;
}

.pc-mini-t {
  margin-top: 9px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-2);
}

.pc-mini-go {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}

.pc-mini-arrow {
  font-size: 15px;
  line-height: 1;
}

/* 自提核销码页：会员出示给门店，二维码固定白底（深色主题下也不能反色，否则扫不出来） */
.pc-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 18px 16px 16px;
  margin-bottom: 18px;
  text-align: center;
}

.pc-qr {
  width: 196px;
  height: 196px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
}

.pc-qr svg {
  display: block;
}

.pc-qr-fail {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #a33b2a;
  text-align: center;
}

.pc-k {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-3);
}

.pc-code {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--text);
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.pc-tip {
  margin-top: 11px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-2);
  text-align: left;
}

.pc-order {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: 0.4px;
  word-break: break-all;
}

/* 收货地址卡 */
.addr-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 13px 14px;
  margin-bottom: 18px;
}

.addr-card .addr-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.addr-card .addr-top b {
  font-size: 13px;
  font-weight: 600;
}

.addr-card .addr-top span {
  font-size: 11.5px;
  color: var(--text-2);
}

.addr-card .addr-d {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 6px;
}

/* 自提点卡 */
.pick-list {
  margin-bottom: 14px;
}

.pick-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 12px 13px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pick-card.on {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* 只读展示（真实订单的收货方式不可改）：去掉可点手感 */
.pick-card.static {
  cursor: default;
}
.seg-tabs button:disabled {
  cursor: default;
}

.pick-card .pick-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pick-card .pick-top b {
  font-size: 12.5px;
  font-weight: 600;
}

.pick-card .pick-time {
  font-size: 10.5px;
  color: var(--text-3);
  flex-shrink: 0;
}

.pick-card .pick-d {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 6px;
}

.pick-card .pick-tel {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
}

/* 物流信息卡：后台「发货」填的物流公司 + 运单号，支持复制去快递官网自查 */
.lg-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px 15px;
  margin-bottom: 18px;
  transition: box-shadow 0.35s, border-color 0.35s;
}

.lg-card.hl {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.lg-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}

.lg-line:last-of-type {
  border-bottom: none;
}

.lg-k {
  color: var(--text-3);
  flex-shrink: 0;
}

.lg-v {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.lg-acts {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.lg-acts .btn {
  flex: 1;
  height: 38px;
  font-size: 13px;
}

.lg-tip {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.7;
}

/* 物流轨迹 */
.lg-track {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 15px 15px 4px;
  margin-bottom: 18px;
}

.lg-row {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
}

.lg-row::before {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 12px;
  bottom: -2px;
  width: 1px;
  background: var(--line-strong);
}

.lg-row:last-child::before {
  display: none;
}

.lg-dot {
  position: relative;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  background: var(--line-strong);
}

.lg-row.now .lg-dot {
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

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

.lg-row .lg-t {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}

.lg-row.now .lg-t {
  color: var(--text);
  font-weight: 500;
}

.lg-row .lg-at {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
}


/* ---------- 首页商品排期：不能直接购买，只能在场次开抢 ---------- */
.pg-sched {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--brand);
}
.pg-sched span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 商品详情页 · 开抢场次卡片 */
.sess-card {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sess-card.on {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.sess-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.sess-top b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.sess-row {
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--text-2);
}
.sess-row b {
  color: var(--text);
}

/* ============================================================
   2026-10-05 · 详情页开抢提示卡：光晕 + 呼吸 + 流光（用户要求「要明显一点」）
   倒计时直接复用 .cd-live 的流光/光环/脉冲体系，这里只补品牌色变体与整卡光边。
   ============================================================ */

/* 整卡呼吸光边：未开抢 = 品牌色，呼吸慢 */
.sess-card.gd-launch {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  animation: launchGlowBrand 2.9s ease-in-out infinite;
}

/* 卡片上一道横向流光扫过（纯装饰，pointer-events 关掉避免挡住点击） */
.sess-card.gd-launch::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, var(--brand) 14%, transparent) 50%,
    transparent 70%
  );
  background-size: 240% 100%;
  animation: launchSheen 3.6s linear infinite;
}

@keyframes launchGlowBrand {
  0%,
  100% {
    box-shadow: 0 0 12px var(--brand-soft);
  }
  50% {
    box-shadow: 0 0 26px color-mix(in srgb, var(--brand) 30%, transparent);
  }
}

@keyframes launchSheen {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -40% 0;
  }
}

/* 正在开抢：红色系、呼吸更快更亮（一眼能看出「就在卖」） */
.sess-card.gd-launch.live {
  border-color: color-mix(in srgb, var(--hot) 52%, transparent);
  background: color-mix(in srgb, var(--hot) 7%, var(--surface-2));
  animation: launchGlowHot 1.9s ease-in-out infinite;
}

.sess-card.gd-launch.live::after {
  background: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, var(--hot) 20%, transparent) 50%,
    transparent 70%
  );
  background-size: 240% 100%;
  animation: launchSheen 2.4s linear infinite;
}

@keyframes launchGlowHot {
  0%,
  100% {
    box-shadow: 0 0 14px var(--hot-soft);
  }
  50% {
    box-shadow: 0 0 34px color-mix(in srgb, var(--hot) 42%, transparent);
  }
}

/* 倒计时那一行：左边标签、右边光带，右对齐更醒目 */
.sess-cd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0 4px;
}

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

/* 未开抢的倒计时：把 .cd-live 的红换成品牌金，避免一屏全是红 */
.cd-live.cd-calm {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  background: linear-gradient(
    100deg,
    var(--brand-soft) 0%,
    color-mix(in srgb, var(--brand) 26%, transparent) 45%,
    var(--brand-soft) 100%
  );
  background-size: 220% 100%;
  box-shadow: 0 0 18px var(--brand-soft),
    inset 0 0 12px color-mix(in srgb, var(--brand) 10%, transparent);
}

.cd-live.cd-calm::before {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

.cd-live.cd-calm .cd-sep {
  color: var(--brand);
}

.cd-live.cd-calm .cd-box {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  color: var(--text);
}

/* ---------- 我的 · 昵称就地编辑 ---------- */
.profile-head .pf-name {
  cursor: pointer;
}
.profile-head .pf-name .nick-pen {
  font-style: normal;
  font-size: 12px;
  color: var(--text-3);
  margin-left: 6px;
}
.nick-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nick-edit input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.nick-edit input:focus {
  border-color: var(--brand);
}
.nick-btn {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.nick-btn.ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}
.nick-tip {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ---------- 首页商品左上角「暂未开售」标签（不整体置灰，保持正常配色） ---------- */
.pg-badge.off {
  background: rgba(255, 251, 235, 0.96);
  color: #9a6408;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ---------- 我的订单详情：支付凭证 / 上传时间 / 卖家信息 ---------- */
.od-proof {
  margin: 4px 0 8px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.od-proof img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  cursor: zoom-in;
}
.od-proof-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-2);
  border-top: 1px solid var(--line);
}
.od-proof-meta b {
  color: var(--text);
}
.od-proof-tip {
  padding: 0 12px 10px;
  font-size: 10.5px;
  color: var(--text-3);
}
.od-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

/* ---------- 逐笔付款明细：拆条后一笔订单多笔，逐笔转账 / 传凭证 / 确认或驳回 ---------- */
/* 折叠态：只有标题栏（收款明细 · N 笔 / 点击展开 / 箭头），点一下才铺开明细。
   一笔订单常拆成十几笔，全铺开会把上面的「支付凭证」「订单信息」顶得很远。 */
.pd-collapse .pd-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pd-collapse .pd-tt {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}
.pd-collapse .pd-hint {
  font-size: 11px;
  color: var(--brand);
}
.pd-collapse .pd-caret {
  flex: none;
  width: 7px;
  height: 7px;
  border: solid var(--text-3);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease);
}
.pd-collapse.open .pd-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}
/* 收起时明细整体不渲染高度（不是 display:none 那种闪，而是高度折叠，动画更顺） */
.pd-collapse .pd-body {
  display: none;
}
.pd-collapse.open .pd-body {
  display: block;
}

.pd-row {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.pd-row:first-child {
  border-top: none;
}
/* 被后台驳回的那一笔：底色染红，一眼能看出是「哪一笔」被打回 */
.pd-row.is-reject {
  background: rgba(220, 38, 38, 0.06);
}
.pd-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pd-hl {
  flex: 1;
  min-width: 0;
}
.pd-hr {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}
.pd-hr b {
  font-size: 14px;
}
.pd-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.pd-seq {
  flex-shrink: 0;
  display: inline-block;
  min-width: 22px;
  height: 17px;
  line-height: 17px;
  padding: 0 5px;
  border-radius: 5px;
  text-align: center;
  font-size: 10.5px;
  background: var(--surface-2);
  color: var(--text-3);
}
.pd-d {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-reject {
  margin-top: 6px;
  font-size: 11.5px;
  color: #DC2626;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}
/* 凭证缩略图：小图 + 点击放大（会员端和订单详情页共用） */
.pd-shot {
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.pd-shot img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
}
.pd-shot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-3);
}
.pd-shot-meta b {
  color: var(--text-2);
  font-weight: 500;
}
/* 明细行右侧的凭证小图：挂在金额 / 状态下面，尺寸小、不占整行。
   不加「点图放大」提示 —— 用户看到图自然会点，点一下即整屏（app.openImg）。 */
.pd-thumb {
  display: block;
  width: 54px;
  height: 54px;
  margin-top: 2px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: zoom-in;
}
.pd-thumb:active {
  opacity: 0.85;
}
/* 上传时间：原来跟在大图下面的整块 .pd-shot-meta，现在挪到左侧信息区一行小字 */
.pd-time {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-3);
}
.pd-time b {
  color: var(--text-2);
  font-weight: 500;
}
.pd-btns {
  margin-top: 9px;
}
.mini-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.mini-btn:hover {
  background: var(--surface-2);
}
.mini-btn.is-danger {
  border-color: #DC2626;
  color: #DC2626;
}
.pd-hint {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--text-3);
}

/* 凭证大图浮层：点任意处关闭 */
.img-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.86);
  cursor: zoom-out;
}
.img-viewer img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* ===== 地址管理（轮㊹）=====
   ★ `.panel` 自己是没有 padding 的（它默认装 .list-row，内边距由行负责），
     往 panel 里直接塞表单字段会被 overflow:hidden 裁掉第一个标签 —— 用这个变体补内边距。 */
.addr-form {
  padding: 16px 16px 6px;
}

/* ★ 这一节的规则一律放在文件末尾：`.mini-btn` 在文件里被定义过 3 次（2768 / 5378 / 6958），
     后面的基础款会静默盖掉前面的变体 —— 新增规则放最后才不会被覆盖。
     改完必须回浏览器量 getComputedStyle，只读 CSS 看不出谁生效。 */
.addr-act {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* 地址卡上的「默认」小徽标：跟状态药丸区分开，别抢主信息的视觉 */
.addr-def {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 16px;
  color: var(--brand);
  border: 1px solid var(--brand);
}

/* 省 / 市 / 区 三格并排 */
.ad-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 「设为默认地址」勾选行 */
.ad-defchk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}