/* 可点击交互原型 — 小程序感 */
:root {
  --bg: #f3efe8;
  --surface: #ffffff;
  --ink: #1c1916;
  --muted: #7a7268;
  --line: #e6dfd4;
  --accent: #c45c26;
  --accent-soft: #f4e4d8;
  --ok: #2f9e44;
  --danger: #c0392b;
  --phone-w: 375px;
  --phone-h: 812px;
  --tab-h: 56px;
  --status-h: 44px;
  --nav-h: 44px;
  --font-display: "Georgia", "Songti SC", "SimSun", serif;
  --font-ui: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-ui);
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, #d9ebe3 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 10%, #efe0d0 0%, transparent 50%),
    #e8e4dc;
  color: var(--ink);
}

.app-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
}
.shell-head {
  width: min(960px, 100%);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.shell-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .02em;
}
.shell-head p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.shell-links { display: flex; flex-wrap: wrap; gap: 8px; }
.shell-links a {
  color: var(--accent);
  font-size: .85rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.shell-links a:hover { border-bottom-color: var(--accent); }

.phone {
  width: var(--phone-w);
  height: var(--phone-h);
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  position: relative;
}
/* 移动端原型：隐藏滚动条，保留滚动 */
.phone,
.phone * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.phone::-webkit-scrollbar,
.phone *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.status-bar {
  height: var(--status-h);
  padding: 14px 16px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
  z-index: 6;
  color: #111;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif;
}
.status-bar .ios-time { line-height: 1; font-size: 16px; font-weight: 600; }
.status-bar .sb-signal,
.status-bar .sb-wifi {
  fill: currentColor;
  display: block;
}
.status-bar .sb-battery {
  position: relative;
  width: 25px;
  height: 12px;
  border-radius: 3.5px;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-bar .sb-battery::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lv, 100%);
  background: #111;
}
.status-bar .sb-battery em {
  position: relative;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.2px;
}
.status-bar .ios-trailing::after {
  content: "";
  width: 1.5px;
  height: 4.5px;
  margin-left: -4.5px;
  border-radius: 0 1px 1px 0;
  background: rgba(0, 0, 0, 0.35);
}
.status-bar .ios-trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 12px;
}
.status-bar .ios-signal {
  width: 17px;
  height: 10px;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
}
.status-bar .ios-signal i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
}
.status-bar .ios-signal i:nth-child(1) { height: 3.5px; }
.status-bar .ios-signal i:nth-child(2) { height: 5.5px; }
.status-bar .ios-signal i:nth-child(3) { height: 7.5px; }
.status-bar .ios-signal i:nth-child(4) { height: 10px; }
.status-bar .ios-wifi {
  width: 15px;
  height: 11px;
  position: relative;
  margin: 0 1px;
}
.status-bar .ios-wifi::before,
.status-bar .ios-wifi::after {
  content: "";
  position: absolute;
  left: 50%;
  border: 1.6px solid currentColor;
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.status-bar .ios-wifi::before {
  width: 15px;
  height: 7px;
  top: 0;
}
.status-bar .ios-wifi::after {
  width: 9px;
  height: 5px;
  top: 3px;
}
.status-bar .ios-wifi b {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3.5px;
  height: 3.5px;
  margin-left: -1.75px;
  border-radius: 50%;
  background: currentColor;
}
.status-bar .ios-battery {
  width: 27px;
  height: 12px;
  border: 1.2px solid currentColor;
  border-radius: 3px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-bar .ios-battery em {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: #111;
  transform: scale(0.92);
}
.status-bar .ios-battery::before {
  content: "";
  position: absolute;
  inset: 1.5px 3px 1.5px 1.5px;
  border-radius: 1.5px;
  background: currentColor;
}
.status-bar .ios-battery::after {
  content: "";
  position: absolute;
  right: -3.5px;
  top: 3px;
  width: 1.8px;
  height: 5px;
  border-radius: 0 1.5px 1.5px 0;
  background: currentColor;
  opacity: .55;
}

/* 微信小程序右上角胶囊按钮 */
.mp-capsule {
  position: absolute;
  top: 50px;
  right: 8px;
  z-index: 40;
  width: 87px;
  height: 32px;
  display: flex;
  align-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  overflow: hidden;
}
.mp-capsule-more,
.mp-capsule-close {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mp-capsule-divider {
  width: 0.5px;
  height: 18px;
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.mp-capsule-more::before {
  content: "";
  width: 18px;
  height: 6px;
  background:
    radial-gradient(circle 1.6px at 2px 50%, #1a1a1a 98%, transparent),
    radial-gradient(circle 2.1px at 9px 50%, #1a1a1a 98%, transparent),
    radial-gradient(circle 1.6px at 16px 50%, #1a1a1a 98%, transparent);
}
.mp-capsule-close::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1.5px solid #1a1a1a;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
}
.mp-capsule-close::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: #1a1a1a;
  border-radius: 50%;
}
.nav-bar {
  position: relative;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 100px 0 6px;
  gap: 8px;
  border-bottom: none;
  background: var(--surface);
  flex-shrink: 0;
}
.nav-bar .title {
  position: absolute;
  left: 100px;
  right: 100px;
  text-align: center;
  font-weight: 600;
  font-size: 17px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.nav-bar .back, .nav-bar .action {
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 4px;
}
.nav-bar .back {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
.nav-bar .back svg {
  width: 12px;
  height: 20px;
  display: block;
}
.nav-bar .action {
  margin-left: auto;
}
.nav-bar.home-style {
  border: none;
  background: transparent;
  position: absolute;
  top: var(--status-h);
  left: 0; right: 0;
  z-index: 3;
}
.nav-bar.home-style .title { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); margin-right: 0; }

.page-stack {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.page {
  display: none;
  position: absolute;
  inset: 0;
  overflow: auto;
  padding-bottom: calc(var(--tab-h) + 8px);
  -webkit-overflow-scrolling: touch;
}
.page.active { display: block; }
.page.no-tab { padding-bottom: 12px; }

#page-tenantCate.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
#page-shop.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-tenantCate .tenant-cate-body,
#page-shop .shop-page {
  flex: 1;
  min-height: 0;
  height: auto;
}

.tab-bar {
  height: var(--tab-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  flex-shrink: 0;
  z-index: 5;
}
.tab-bar button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0 8px;
}
.tab-bar button .ico {
  font-size: 18px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab-bar button .tab-svg,
.home-tabbar .tab-svg,
.tab-bar button .hi,
.home-tabbar .hi {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}
.tab-bar button .tab-svg path,
.home-tabbar .tab-svg path,
.tab-bar button .hi path,
.home-tabbar .hi path {
  fill: currentColor;
}
.tab-bar button.on { color: var(--accent); font-weight: 650; }
.tab-bar button .ico {
  width: 24px;
  height: 24px;
}
.tb-ico {
  width: 24px;
  height: 24px;
  display: block;
}
.tb-ico .f {
  fill: none;
  transition: fill 0.15s;
}
.tab-bar button.on .tb-ico .f,
.home-tabbar .on .tb-ico .f {
  fill: currentColor;
  fill-opacity: 0.16;
}
.tab-bar button.on .tb-ico {
  stroke-width: 1.9;
}

/* common UI */
.banner {
  height: 180px;
  background:
    linear-gradient(160deg, rgba(28,25,22,.35), rgba(28,25,22,.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23c9a882' width='80' height='80'/%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e8d5c4'/%3E%3C/svg%3E") center/cover;
  color: #fff;
  padding: 56px 100px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.banner h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
}
.banner p { margin: 0; font-size: 13px; opacity: .9; }

.section { padding: 12px 14px; }
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-weight: 650;
}
.section-title .more {
  border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer;
}

.search-bar {
  margin: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 4px 14px 12px;
}
.cats button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: var(--ink);
}
.cats .dot {
  width: 44px; height: 44px; margin: 0 auto 4px;
  border-radius: 14px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  font-size: 18px;
}

.goods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.goods .item {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}
.goods .pic {
  height: 110px;
  background: linear-gradient(145deg, #e8d5c4, #b8956e 60%, #8f6a45);
}
.goods .meta { padding: 8px 10px 10px; }
.goods .name {
  font-size: 13px;
  line-height: 1.35;
  height: 2.7em;
  overflow: hidden;
}
.goods .price { color: var(--accent); font-weight: 700; margin-top: 4px; font-size: 15px; }
.goods .price small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 4px; }

.list-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.list-row:last-child { border-bottom: none; }
.list-row .arrow { margin-left: auto; color: var(--muted); }
.list-row .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-soft); display: grid; place-items: center;
}

.cart-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 10px;
  align-items: flex-start;
}
.cart-item .check {
  width: 18px; height: 18px; margin-top: 16px; accent-color: var(--accent);
}
.cart-item .pic {
  width: 72px; height: 72px; border-radius: 8px;
  background: linear-gradient(145deg, #e8d5c4, #b8956e); flex-shrink: 0;
}
.cart-item .info { flex: 1; min-width: 0; }
.cart-item .name { font-size: 14px; margin-bottom: 6px; }
.qty {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.qty button {
  width: 28px; height: 28px; border: none; background: #faf8f5; cursor: pointer;
}
.qty span { width: 32px; text-align: center; line-height: 28px; font-size: 13px; }

.bottom-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
}
.bottom-bar .sum { flex: 1; font-size: 13px; }
.bottom-bar .sum b { color: var(--accent); font-size: 18px; }
.btn {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.block { width: 100%; border-radius: 10px; }
.btn.lg { padding: 12px 20px; font-size: 15px; }

.detail-pic {
  height: 280px;
  background: linear-gradient(160deg, #e8d5c4, #9a7048);
}
.detail-panel {
  margin-top: -16px;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  padding: 16px 14px 90px;
  position: relative;
}
.sku-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.sku-row button {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.sku-row button.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ===== 我的 ===== */
#page-mine { background: #f5f5f5; }
/* 沉浸式：状态栏 + 标题栏与头部同色衔接 */
.phone.is-mine .status-bar,
.phone.is-mine .nav-bar { background: #ff7a45; color: #fff; }
.phone.is-mine .nav-bar .title { color: #fff; }
.phone.is-mine .status-bar .ios-battery em,
.phone.is-mine .status-bar .sb-battery em { color: #ff7a45; }
.phone.is-mine .status-bar .sb-battery { background: rgba(255, 255, 255, 0.45); }
.phone.is-mine .status-bar .sb-battery::before { background: #fff; }
.phone.is-mine .status-bar .ios-trailing::after { background: rgba(255, 255, 255, 0.6); }
.phone.is-mine .mp-capsule { background: rgba(0, 0, 0, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.phone.is-mine .mp-capsule-divider { background: rgba(255, 255, 255, 0.4); }
.phone.is-mine .mp-capsule-more::before {
  background:
    radial-gradient(circle 1.6px at 2px 50%, #fff 98%, transparent),
    radial-gradient(circle 2.1px at 9px 50%, #fff 98%, transparent),
    radial-gradient(circle 1.6px at 16px 50%, #fff 98%, transparent);
}
.phone.is-mine .mp-capsule-close::before { border-color: #fff; }
.phone.is-mine .mp-capsule-close::after { background: #fff; }
.phone.is-lottery .status-bar,
.phone.is-lottery .nav-bar { background: #ff7a45; color: #fff; }
.phone.is-lottery .nav-bar .title,
.phone.is-lottery .nav-bar .back { color: #fff; }
.phone.is-lottery .status-bar .ios-battery em,
.phone.is-lottery .status-bar .sb-battery em { color: #ff7a45; }
.phone.is-lottery .status-bar .sb-battery { background: rgba(255, 255, 255, 0.45); }
.phone.is-lottery .status-bar .sb-battery::before { background: #fff; }
.phone.is-lottery .status-bar .ios-trailing::after { background: rgba(255, 255, 255, 0.6); }
.phone.is-lottery .mp-capsule { background: rgba(0, 0, 0, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.phone.is-lottery .mp-capsule-divider { background: rgba(255, 255, 255, 0.4); }
.phone.is-lottery .mp-capsule-more::before {
  background:
    radial-gradient(circle 1.6px at 2px 50%, #fff 98%, transparent),
    radial-gradient(circle 2.1px at 9px 50%, #fff 98%, transparent),
    radial-gradient(circle 1.6px at 16px 50%, #fff 98%, transparent);
}
.phone.is-lottery .mp-capsule-close::before { border-color: #fff; }
.phone.is-lottery .mp-capsule-close::after { background: #fff; }
.mn { padding-bottom: 20px; }
.mn-head {
  padding: 8px 16px 52px;
  color: #fff;
  background: linear-gradient(180deg, #ff7a45 0%, #ff5a2c 60%, #f5402a 100%);
}
.mn-user { display: flex; align-items: center; gap: 12px; }
.mn-avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.mn-avatar .ic { width: 30px; height: 30px; color: #fff; }
button.mn-avatar { padding: 0; overflow: hidden; cursor: pointer; }
.mn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mn-name { flex: 1; min-width: 0; cursor: pointer; }
.mn-name b { display: block; font-size: 18px; font-weight: 700; line-height: 24px; }
.mn-level {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding: 0 9px 0 7px;
  border-radius: 10px; background: rgba(0, 0, 0, 0.14);
  font-size: 11px; line-height: 20px;
}
.mn-level .ic { width: 12px; height: 12px; color: #ffd98a; }
button.mn-level { border: 0; color: #fff; cursor: pointer; font-family: inherit; }
.mn-go { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin-right: -6px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.85); cursor: pointer; }
.mn-go .ic { width: 18px; height: 18px; }
.mn-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; width: 56px; height: 56px; padding: 0; border: 0.5px solid rgba(255, 255, 255, 0.35); border-radius: 14px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; }
.mn-qr .ic { width: 26px; height: 26px; }

/* 消息中心 · 香槟金分类条横滑 + 会话列表 */
.msg-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #f5f5f5;
}
.msg-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 0.5px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 4px;
}
.msg-sum {
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.2;
}
.msg-sum b {
  color: #1c1916;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.msg-readall {
  height: 28px;
  padding: 0 12px;
  border: 0.5px solid rgba(201, 162, 91, 0.45);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
  color: #8c6a2f;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.msg-readall:disabled {
  border-color: #e8e0d4;
  color: #c4b8a4;
  background: transparent;
  cursor: default;
}
.msg-cats-wrap {
  position: relative;
}
.msg-cats-wrap::before,
.msg-cats-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.msg-cats-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #fff 18%, rgba(255, 255, 255, 0));
}
.msg-cats-wrap::after {
  right: 0;
  width: 40px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 72%);
}
.msg-cats-wrap.can-left::before,
.msg-cats-wrap.can-right::after {
  opacity: 1;
}
.msg-cats {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.msg-cats-wrap.can-right .msg-cats {
  padding-right: 22px;
}
.msg-cats::-webkit-scrollbar {
  display: none;
}
.msg-cats.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.msg-cat {
  flex: 0 0 auto;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: #8c8c8c;
}
.msg-cat-ico {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.msg-cat-ico .ic { width: 22px; height: 22px; }
.msg-cat-ico.tone-all { background: #f0f0f0; color: #595959; }
.msg-cat-ico.tone-notice { background: #f0f2f5; color: #434343; }
.msg-cat-ico.tone-trade { background: #fff1f0; color: #cf1322; }
.msg-cat-ico.tone-after { background: #fff7e6; color: #d46b08; }
.msg-cat-ico.tone-market { background: #eef3ff; color: #3b6de0; }
.msg-cat-ico.tone-member { background: #faf6ee; color: #a07a35; }
.msg-cat-ico.tone-asset { background: #e6fffb; color: #08979c; }
.msg-cat-ico.tone-more { background: #f5f5f5; color: #8c8c8c; }
.msg-cat.on { color: #1c1916; }
.msg-cat.on .msg-cat-ico {
  border-color: #c9a25b;
  box-shadow:
    0 0 0 3px rgba(201, 162, 91, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.msg-cat.on em {
  font-weight: 650;
  color: #1c1916;
}
.msg-cat em {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
}
.msg-cat-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff6b6b, #ee0a24);
  border: 1.5px solid #fffefb;
  box-sizing: border-box;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.msg-list {
  margin: 0;
  background: #fff;
}
.msg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-bottom: 0.5px solid #f0f0f0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.msg-item:last-child { border-bottom: none; }
.msg-item:active { background: #f7f8fa; }
.msg-ico {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-ico .ic { width: 22px; height: 22px; }
.msg-ico.tone-notice { background: #f0f2f5; color: #434343; }
.msg-ico.tone-trade { background: #fff1f0; color: #cf1322; }
.msg-ico.tone-after { background: #fff7e6; color: #d46b08; }
.msg-ico.tone-market { background: #eef3ff; color: #3b6de0; }
.msg-ico.tone-member { background: #faf6ee; color: #a07a35; }
.msg-ico.tone-asset { background: #e6fffb; color: #08979c; }
.msg-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d4f;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.msg-main { flex: 1; min-width: 0; padding-top: 1px; }
.msg-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.msg-hd b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  color: #1c1916;
  line-height: 1.35;
}
.msg-item.unread .msg-hd b { font-weight: 650; }
.msg-hd time {
  flex-shrink: 0;
  font-size: 12px;
  color: #bbb;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.msg-item p {
  margin: 0;
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 24px 40px;
  text-align: center;
  background: #fff;
  min-height: 360px;
}
.msg-empty-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #c0c0c0;
  display: grid;
  place-items: center;
}
.msg-empty-ico .ic { width: 28px; height: 28px; }
.msg-empty b {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #666;
}
.msg-empty p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #bbb;
  line-height: 1.5;
}
.msg-detail-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 12px 12px 20px;
  box-sizing: border-box;
}
.msg-detail-wrap.has-cta {
  padding-bottom: 88px;
}
.msg-detail {
  margin: 0;
  padding: 0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(28, 25, 22, 0.06);
}
.msg-detail-src {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 0.5px solid #f2f2f2;
}
.msg-detail-src .msg-ico {
  width: 48px;
  height: 48px;
}
.msg-detail-src .msg-ico .ic { width: 24px; height: 24px; }
.msg-detail-src-txt {
  flex: 1;
  min-width: 0;
}
.msg-detail-src b {
  display: block;
  font-size: 16px;
  font-weight: 650;
  color: #1c1916;
  line-height: 1.3;
}
.msg-detail-tpl {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #999;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-detail-main {
  padding: 20px 18px 18px;
}
.msg-detail-title {
  margin: 0 0 8px;
  padding: 0;
  font-size: 22px;
  font-weight: 650;
  color: #1c1916;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.msg-detail-time {
  display: block;
  margin: 0 0 16px;
  font-size: 12px;
  color: #bbb;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.msg-detail-body {
  margin: 0;
  padding: 0 0 20px;
  border: none;
  font-size: 15px;
  color: #444;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-biz {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin: 8px 0 0;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #faf8f5;
  box-shadow: inset 0 0 0 0.5px rgba(201, 162, 91, 0.28);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.msg-biz:active { filter: brightness(0.98); }
.msg-biz-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.msg-biz-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-biz-ico .ic { width: 20px; height: 20px; }
.msg-biz-ico.tone-notice { background: #e8eaed; color: #434343; }
.msg-biz-ico.tone-trade { background: #fff1f0; color: #cf1322; }
.msg-biz-ico.tone-after { background: #fff7e6; color: #d46b08; }
.msg-biz-ico.tone-market { background: #eef3ff; color: #3b6de0; }
/* 业务卡底已是浅香槟，会员色块需加深才看得见框 */
.msg-biz-ico.tone-member { background: #f0e4cc; color: #8a6520; }
.msg-biz-ico.tone-asset { background: #e6fffb; color: #08979c; }
.msg-biz-shop {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  color: #1c1916;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-biz-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.msg-biz-rows li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  min-width: 0;
}
.msg-biz-rows li span {
  flex-shrink: 0;
  width: 4.5em;
  color: #8c8c8c;
}
.msg-biz-rows li em {
  flex: 1;
  min-width: 0;
  font-style: normal;
  color: #3d3a36;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-biz .ic-arr {
  width: 16px;
  height: 16px;
  color: #c9a25b;
  flex-shrink: 0;
}
.msg-biz.msg-biz-cp {
  padding: 0;
  background: transparent;
  box-shadow: none;
  gap: 0;
}
.msg-biz.msg-biz-cp .mc-card,
.msg-biz.msg-biz-cp .mc-stk {
  width: 100%;
  pointer-events: none;
}
.msg-detail-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 5;
  width: 100%;
  max-width: var(--phone-w, 390px);
  transform: translateX(-50%);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.96);
  border-top: 0.5px solid #eee;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phone .msg-detail-bar,
#phone .msg-detail-bar {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
}
.msg-cta {
  display: block;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 23px;
  background: linear-gradient(90deg, #d4a85a, #c9a25b);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(184, 135, 60, 0.28);
}
.msg-cta:active { opacity: 0.92; }
.mn-svip { margin-left: 6px; background: linear-gradient(90deg, #f7e1b5, #e8bf79); color: #6b4410; font-weight: 600; }
.mn-svip-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin-top: 14px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: linear-gradient(90deg, #3a2f25, #5a4630); color: #f3d9a4; cursor: pointer; text-align: left;
}
.mn-svip-bar b { font-size: 14px; font-weight: 700; }
.mn-svip-bar span { display: flex; align-items: center; gap: 2px; font-size: 12px; color: rgba(243, 217, 164, 0.85); white-space: nowrap; }
.ic-arr { width: 14px; height: 14px; flex-shrink: 0; }
.mn-assets { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.mn-asset { border: none; background: none; color: #fff; cursor: pointer; padding: 0; }
.mn-asset + .mn-asset { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.mn-asset b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-asset span { display: block; margin-top: 2px; font-size: 12px; opacity: 0.85; }
.mn-card { margin: 0 12px; padding: 0 12px 6px; border-radius: 12px; background: #fff; }
.mn-head + .mn-card { position: relative; margin-top: -36px; }
.mn-card + .mn-card { margin-top: 12px; }
.mn-card-hd { display: flex; align-items: center; height: 44px; }
.mn-card-hd b { font-size: 15px; color: #1c1916; }
.mn-more {
  display: flex; align-items: center; gap: 2px; margin-left: auto;
  border: none; background: none; padding: 0;
  font-size: 12px; color: #999; cursor: pointer;
}
.mn-orders { display: grid; grid-template-columns: repeat(6, 1fr); padding: 4px 0 8px; }
.mn-oe, .mn-svc {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: none; background: none; padding: 6px 0; cursor: pointer;
  font-size: 12px; color: #333;
}
.mn-oe-ico { position: relative; }
.mn-oe .ic { width: 26px; height: 26px; color: #1c1916; }
.mn-oe-ico em {
  position: absolute; top: -5px; left: 16px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #ee0a24; color: #fff; border: 1.5px solid #fff;
  font-style: normal; font-size: 10px; line-height: 13px; text-align: center;
}
.mn-grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 8px; padding-bottom: 8px; }
.mn-svc { font-weight: 500; color: #333; }
.mn-svc .ic { width: 26px; height: 26px; color: #ff4d00; }

/* ===== 我的订单 ===== */
#page-orders { background: #f5f5f5; }
.order-tabs {
  position: sticky; top: 0; z-index: 2;
  display: flex;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  user-select: none;
}
.order-tabs::-webkit-scrollbar { display: none; }
.order-tabs.is-dragging { cursor: grabbing; }
.order-tabs button {
  position: relative; flex: 0 0 auto;
  height: 44px; border: none; background: none; padding: 0 12px;
  font-size: 13px; color: #666; white-space: nowrap; cursor: inherit;
}
.order-tabs button.on { color: #1c1916; font-weight: 700; }
.order-tabs button.on::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: 18px; height: 3px; margin-left: -9px; border-radius: 2px;
  background: #ee0a24;
}

.toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  background: rgba(28,25,22,.88);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
  /* 高于 mp-sheet / cf-mask 等弹层，保证复制成功等提示始终顶层可见 */
  z-index: 50;
  max-width: calc(100% - 48px);
  text-align: center;
  white-space: normal;
  word-break: break-word;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mask {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 15;
  align-items: flex-end;
  justify-content: center;
}
.mask.open { display: flex; }
.sheet {
  width: 100%;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 16px 14px 24px;
  animation: up .22s ease;
}
@keyframes up {
  from { transform: translateY(40%); }
  to { transform: translateY(0); }
}

.cate-layout {
  display: flex;
  height: 100%;
}
.cate-side {
  width: 92px;
  background: #ebe6de;
  overflow: auto;
  flex-shrink: 0;
}
.cate-side button {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 14px 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.cate-side button.on {
  background: var(--bg);
  color: var(--accent);
  font-weight: 650;
  border-left-color: var(--accent);
}
.cate-main {
  flex: 1;
  overflow: auto;
  padding: 12px;
}

.shop-banner {
  height: auto;
  min-height: 0;
  background: linear-gradient(120deg, #2c4a3e, #4a6b5c);
  color: #fff;
  padding: 16px 14px 12px;
}
.shop-banner-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.shop-banner-name {
  font-size: 18px;
  font-weight: 700;
}
.shop-banner-meta {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
}
.shop-banner-links {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.shop-banner-links button {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.shop-banner .btn.ghost.sm {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: transparent;
  padding: 4px 12px;
  font-size: 12px;
}

.shop-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.shop-l1-tabs {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-shrink: 0;
}
.shop-l1-tabs button {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.shop-l1-tabs button.on {
  color: var(--accent);
  font-weight: 650;
  border-bottom-color: var(--accent);
}
.shop-cate-body {
  flex: 1;
  min-height: 0;
  height: auto;
}
.tenant-cate-body {
  height: 100%;
}

.goods .shop {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods .name {
  height: auto;
  max-height: 2.7em;
}
.goods.goods-row {
  grid-template-columns: 1fr;
  gap: 16px;
}
.gcard {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.gcard-pic {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px 10px 0 0;
}
.gcard-body { padding: 8px 2px 0; }
.gcard-name {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink, #1f1f1f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gcard-self {
  display: inline-block;
  font-style: normal;
  font-size: 10px;
  line-height: 14px;
  padding: 0 4px;
  margin-right: 4px;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(90deg, #ff5a1f, #e8380d);
  vertical-align: 1px;
  font-weight: 600;
}
/* 保障标签仅展示排序前两个 */
.gcard-tags {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  min-width: 0;
}
.gcard-tags span {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 3px;
  color: var(--accent);
  border: 0.5px solid currentColor;
  opacity: 0.85;
}
.gcard-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.gcard-pv {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
  line-height: 1;
}
.gcard-pv .gcard-sales { padding-bottom: 1px; }
.gcard-cart {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.gcard-cart svg { width: 16px; height: 16px; }
.gcard-price {
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
}
.gcard-price small { font-size: 11px; margin-right: 1px; }
.gcard-sales { font-size: 11px; color: var(--muted); }
.cate-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
#navBar .back {
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0 6px 0 12px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}
.nav-search .ico {
  font-size: 15px;
  line-height: 1;
}
.nav-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
}
.tc-l1-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 5;
}
.tc-l1-tabs.has-more {
  padding-right: 56px;
}
.tc-l1-more {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1px;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  box-shadow: -10px 0 12px -4px rgba(255, 255, 255, 0.95);
}
.tc-l1-more::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--line);
}
.tc-more-ico {
  width: 22px;
  height: 22px;
  background:
    radial-gradient(circle at 5px 5px, var(--ink) 3px, transparent 3.5px),
    radial-gradient(circle at 17px 5px, var(--ink) 3px, transparent 3.5px),
    radial-gradient(circle at 5px 17px, var(--ink) 3px, transparent 3.5px),
    radial-gradient(circle at 17px 17px, var(--ink) 3px, transparent 3.5px);
}
.tc-l1-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 900px;
  background: rgba(0, 0, 0, 0.45);
}
.tc-l1-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: var(--surface);
  border-radius: 0 0 14px 14px;
  padding: 0 0 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  animation: tcPanelIn 0.18s ease-out;
}
@keyframes tcPanelIn {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.tc-l1-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 4px;
  font-size: 14px;
  font-weight: 650;
}
.tc-l1-panel-head button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.tc-l1-panel-head button::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(1px) rotate(45deg);
}
.tc-l1-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 4px;
  padding: 0 6px;
}
.tc-l1-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 10px 0 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.tc-l1-grid button.on {
  color: var(--accent);
  font-weight: 650;
}
.tc-l1-grid button.on .tc-l1-ico {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--surface) inset;
}
.tc-l1-tabs {
  display: flex;
  overflow-x: auto;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tc-l1-tabs::-webkit-scrollbar {
  display: none;
}
.tc-l1-tabs button {
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 10px 0 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.tc-l1-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.tc-l1-tabs button.on {
  color: var(--accent);
  font-weight: 650;
}
.tc-l1-tabs button.on .tc-l1-ico {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--surface) inset;
}
/* 店铺列表 */
.sl-list { display: flex; flex-direction: column; gap: 14px; }
.sl-card {
  position: relative;
  background: var(--surface);
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(60, 40, 20, 0.07);
}
/* 封面：店铺主色 + 光斑 + 首字水印 */
.sl-cover {
  position: relative;
  height: 92px;
  padding: 0 12px 12px 76px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: #fff;
  overflow: hidden;
}
.sl-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(255, 255, 255, 0.45), transparent 42%),
    radial-gradient(circle at 10% 120%, rgba(255, 255, 255, 0.22), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 10px);
}
.sl-wm {
  position: absolute;
  right: 70px;
  top: -18px;
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.sl-cover.has-img::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
}
.sl-cover-info { position: relative; flex: 1; min-width: 0; }
.sl-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  overflow: hidden;
}
.sl-self {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  padding: 0 5px;
  border-radius: 4px;
  color: #c4361a;
  background: #fff;
  text-shadow: none;
  flex-shrink: 0;
}
.sl-meta {
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.88;
}
.sl-logo {
  position: absolute;
  left: 12px;
  top: 62px;
  width: 54px;
  height: 54px;
  padding: 3px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
.sl-logo i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  font-style: normal;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.sl-sub {
  padding: 8px 12px 0 76px;
  min-height: 26px;
  font-size: 12px;
  font-weight: 650;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sl-sub::before {
  content: "";
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: var(--accent);
}
.sl-gap { height: 12px; }
.sl-enter {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 9px 5px 13px;
  cursor: pointer;
}
.sl-enter svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sl-thumbs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 12px 14px;
}
.sl-thumb { min-width: 0; cursor: pointer; }
.sl-thumb i {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}
.sl-thumb-name {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.sl-thumb-price {
  margin-top: 3px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.sl-thumb-price small { font-size: 10px; margin-right: 1px; }

/* 三级分类：单行横滑，溢出时右侧固定展开按钮 + 下拉面板 */
.tc-l3-wrap {
  position: sticky;
  top: -12px;
  z-index: 4;
  margin: -12px -12px 10px;
  padding: 12px 12px 8px;
  background: var(--bg);
}
.tc-l3-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tc-l3-bar::-webkit-scrollbar { display: none; }
.tc-l3-bar.has-more { padding-right: 36px; }
.tc-l3-bar button { flex-shrink: 0; white-space: nowrap; }
.tc-l3-more {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 28px;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(90deg, rgba(243, 239, 232, 0), var(--bg) 35%);
}
.tc-l3-more i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}
.tc-l3-more i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translate(-50%, -70%) rotate(45deg);
}
.tc-l3-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 900px;
  background: rgba(0, 0, 0, 0.35);
}
.tc-l3-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: var(--surface);
  border-radius: 0 0 12px 12px;
  padding: 0 12px 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  animation: tcPanelIn 0.18s ease-out;
}
.tc-l3-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 10px;
  font-size: 13px;
  font-weight: 650;
}
.tc-l3-panel-head button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.tc-l3-panel-head button::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(1px) rotate(45deg);
}
.tc-l3-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tc-l3-grid button {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.tc-l3-grid button.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
}
.tc-l3-bar button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.tc-l3-bar button.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
}
.empty-inline {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 12px;
  color: var(--muted);
  font-size: 13px;
}

.shop-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf8f5;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.shop-entry-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, #e8d5c4, #8d6e63);
  flex-shrink: 0;
}
.shop-entry-meta {
  flex: 1;
  min-width: 0;
}
.shop-entry-meta .name {
  font-size: 14px;
  font-weight: 650;
}
.shop-entry-meta .sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty .btn { margin-top: 12px; }

.hidden { display: none !important; }


/* ===== 店铺首页（沉浸式） ===== */
.phone.is-shop .status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}
#page-shop.active {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
  background: #f5f5f5;
}
#page-shop .ss-scroll,
#page-shop #shopCateView {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}
#page-shop #shopCateView.hidden,
#page-shop .ss-scroll.hidden { display: none; }
#shopCateView .shop-banner { display: none; }
.ss-bg {
  position: absolute;
  left: -30px;
  right: -30px;
  top: -30px;
  height: 300px;
  filter: blur(28px) saturate(1.1);
  opacity: 0.55;
  z-index: 0;
}
.ss-scroll::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  height: 180px;
  background: linear-gradient(180deg, rgba(245, 245, 245, 0), #f5f5f5);
  z-index: 0;
}
.ss-scroll > * { position: relative; z-index: 1; }
.ss-scroll > .ss-bg { position: absolute; z-index: 0; }
#page-shop > .ss-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 88px;
  padding: 50px 103px 6px 8px;
  background: rgba(255, 255, 255, var(--ss-a, 0));
}
.ss-nav .ss-cap,
.ss-nav .ss-search { transition: background 0.2s, border-color 0.2s; }
.ss-nav.solid .ss-cap { background: #fff; border-color: rgba(0, 0, 0, 0.12); }
.ss-nav.solid .ss-search { background: #f3f3f3; }
.phone.is-shop .status-bar { z-index: 6; }
.ss-cap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}
.ss-cap button {
  width: 38px;
  height: 32px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.ss-cap i { width: 0.5px; height: 18px; background: rgba(0, 0, 0, 0.15); }
.ss-cap svg, .ss-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #1c1916;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-search {
  flex: 1;
  min-width: 0;
  height: 32px;
  border-radius: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  color: #999;
  cursor: pointer;
}
.ss-search svg { stroke: #999; width: 16px; height: 16px; }
.ss-shop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px;
}
.ss-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ss-logo i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  font-style: normal;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}
.ss-info { flex: 1; min-width: 0; }
.ss-name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  padding: 0;
  font-size: 17px;
  font-weight: 800;
  color: #1c1916;
  cursor: pointer;
  max-width: 100%;
}
.ss-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-name svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-tags { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ss-tags em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  color: #fff;
  background: #ffa31a;
}
.ss-tags em.self { background: linear-gradient(90deg, #ff5a1f, #e8380d); }
.ss-stars { display: inline-flex; gap: 1px; }
.ss-stars svg { width: 14px; height: 14px; fill: #d6d6d6; }
.ss-stars svg.on { fill: #f0442b; }
.ss-follow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #ff6034, #ee0a24);
  cursor: pointer;
}
.ss-follow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
}
.ss-follow.on { background: rgba(0, 0, 0, 0.08); color: #666; }
.ss-banner { position: relative; margin: 0 8px; border-radius: 10px; overflow: hidden; }
.ss-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ss-slides::-webkit-scrollbar { display: none; }
.ss-slide {
  flex: 0 0 100%;
  aspect-ratio: 750 / 400;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 22px;
  color: #fff;
}
.ss-slide b {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  max-width: 60%;
}
.ss-slide span { margin-top: 8px; font-size: 12px; opacity: 0.92; letter-spacing: 1px; }
.ss-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.ss-dots i { width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); transition: width 0.2s; }
.ss-dots i.on { width: 14px; background: #fff; }
.ss-block { margin: 12px 8px 0; padding: 12px; background: #fff; border-radius: 10px; }
.ss-member {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  padding: 18px 12px 16px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 15% 120%, rgba(255, 255, 255, 0.12), transparent 50%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, #3a3a3a, #1f1f1f);
}
.ss-member-tt { font-size: 16px; font-weight: 600; letter-spacing: 1px; }
.ss-member-sub { margin-top: 6px; font-size: 13px; opacity: 0.9; }
.ss-member button {
  margin-top: 12px;
  border: none;
  border-radius: 4px;
  background: #fff5f3;
  color: #e5402a;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 32px;
  cursor: pointer;
}
.ss-goods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 8px 16px;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
}
.ss-good { min-width: 0; cursor: pointer; }
.ss-good i { display: block; aspect-ratio: 1 / 1.05; border-radius: 6px; }
.ss-good-name {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #1c1916;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.ss-good-foot { display: flex; align-items: flex-end; gap: 6px; margin-top: 4px; line-height: 1; }
.ss-good-foot .sl-pr { color: #ee0a24; font-size: 16px; font-weight: 700; }
.ss-good-foot .sl-pr small { font-size: 11px; }
.ss-good-sales { font-size: 11px; color: #999; padding-bottom: 1px; }
.ss-empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: #999; font-size: 13px; }
.ss-tabbar {
  flex-shrink: 0;
  height: var(--tab-h);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border-top: 0.5px solid #eee;
}
.ss-tabbar button {
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  color: #333;
  cursor: pointer;
  padding: 6px 0 8px;
}
.ss-tabbar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-tabbar button.on { color: #ee0a24; font-weight: 600; }
.ss-tabbar button.on .f { fill: currentColor; fill-opacity: 0.16; }


/* 店铺分类 · 底部购物车条 */
#page-shop #shopCateView:not(.hidden) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#shopCateView > .cate-layout { flex: 1; min-height: 0; height: auto; }
#shopCateView { position: relative; }
.ss-cartbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 8px 10px 10px;
  pointer-events: none;
}
.ss-cartcap { pointer-events: auto; }
#shopCateView .cate-main,
#shopCateView .cate-side { padding-bottom: 72px; }
.ss-cartcap {
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: 23px;
  background: rgba(30, 30, 30, 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ss-cart-ico {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin: 0 10px 0 6px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6034, #ee0a24);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.ss-cart-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-cart-ico em {
  position: absolute;
  top: -1px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #fff;
  color: #ee0a24;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-sizing: border-box;
}
.ss-cart-sum {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  overflow: hidden;
}
.ss-cart-sum b {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-cart-sum b small { font-size: 11px; margin-right: 1px; }
.ss-cart-sum span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-cart-go {
  flex-shrink: 0;
  align-self: stretch;
  border: none;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #ff7a2f, #ee0a24);
  cursor: pointer;
}
.ss-cartcap.is-empty .ss-cart-ico { background: rgba(255, 255, 255, 0.12); }
.ss-cartcap.is-empty .ss-cart-ico svg { stroke: #8c8c8c; }
.ss-cartcap.is-empty .ss-cart-sum span { font-size: 13px; color: #8c8c8c; }
.ss-cartcap.is-empty .ss-cart-go { background: rgba(255, 255, 255, 0.1); color: #8c8c8c; cursor: default; }

#page-shop .ss-scroll { padding-top: 88px; }
#page-shop #shopCateView:not(.hidden) { margin-top: 88px; }


/* ===== 店铺 · 优惠券 tab ===== */
#page-shop .ss-cp-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 88px;
  padding: 10px 10px 20px;
  background: #f5f5f5;
}
#page-shop .ss-cp-view.hidden { display: none; }
.ss-cp-hero {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 16px 16px 14px;
  color: #fff;
  background:
    radial-gradient(circle at 92% -10%, rgba(255, 255, 255, 0.28), transparent 45%),
    radial-gradient(circle at -5% 120%, rgba(255, 210, 120, 0.35), transparent 50%),
    linear-gradient(120deg, #ff6034, #ee0a24);
}
.ss-cp-hero::after {
  content: "券";
  position: absolute;
  right: 14px;
  top: 6px;
  font-size: 64px;
  font-weight: 900;
  opacity: 0.12;
  pointer-events: none;
}
.ss-cp-hero-tt { font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.ss-cp-hero-sub { margin-top: 4px; font-size: 12px; opacity: 0.88; }
.ss-cp-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
}
.ss-cp-hero-stat b { font-size: 15px; margin-right: 2px; }
.ss-cp-hero-stat i { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.45); }
.ss-cp-chips { display: flex; gap: 8px; margin: 12px 0 10px; }
.ss-cp-chips button {
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  color: #555;
  background: #fff;
  cursor: pointer;
}
.ss-cp-chips button.on { color: #ee0a24; background: #ffeceb; font-weight: 600; }
.ss-cp-list { display: flex; flex-direction: column; gap: 10px; }
.ss-cp {
  position: relative;
  display: flex;
  min-height: 104px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.ss-cp-l {
  position: relative;
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ee0a24;
  background: linear-gradient(180deg, #fff3f0, #ffe4de);
}
.ss-cp-l::before,
.ss-cp-l::after {
  content: "";
  position: absolute;
  right: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f5f5f5;
}
.ss-cp-l::before { top: -7px; }
.ss-cp-l::after { bottom: -7px; }
.ss-cp-val { line-height: 1; white-space: nowrap; }
.ss-cp-val b { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.ss-cp-val small { font-size: 13px; font-weight: 700; margin: 0 1px; }
.ss-cp-th { font-size: 11px; color: #e5533d; }
.ss-cp-r {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 10px 14px;
  border-left: 1px dashed #ffd2c9;
}
.ss-cp-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1916;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-cp-name em.vip {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #7a4b12;
  background: linear-gradient(90deg, #ffe7b3, #f4c46a);
  border-radius: 3px;
  padding: 1px 4px;
  margin-right: 4px;
  vertical-align: 1px;
}
.ss-cp-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #999; }
.ss-cp-scope { color: #e5533d; border: 0.5px solid #ffb8a8; border-radius: 3px; padding: 0 4px; line-height: 15px; }
.ss-cp-valid { font-size: 11px; color: #999; }
.ss-cp-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.ss-cp-prog { flex: 0 0 56px; height: 4px; border-radius: 2px; background: #ffe4de; overflow: hidden; }
.ss-cp-prog i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ff9a6b, #ee0a24); }
.ss-cp-pct { flex: 1; min-width: 0; font-size: 10px; color: #e5533d; white-space: nowrap; }
.ss-cp-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #ff6034, #ee0a24);
  cursor: pointer;
}
.ss-cp-btn.use { color: #ee0a24; background: #fff; border: 1px solid #ee0a24; padding: 4px 11px; }
.ss-cp-btn.vip { color: #7a4b12; background: linear-gradient(90deg, #ffe7b3, #f4c46a); }
.ss-cp-btn.off { background: #ddd; color: #fff; cursor: default; }
.ss-cp.is-out .ss-cp-l { color: #bbb; background: #f4f4f4; }
.ss-cp.is-out .ss-cp-th, .ss-cp.is-out .ss-cp-pct { color: #bbb; }
.ss-cp.is-out .ss-cp-r { border-left-color: #e6e6e6; }
.ss-cp.is-out .ss-cp-prog i { background: #ccc; }
.ss-cp-stamp {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #ee0a24;
  border: 1px solid #ee0a24;
  border-radius: 3px;
  padding: 0 4px;
  line-height: 15px;
  transform: rotate(8deg);
  opacity: 0.75;
}
.ss-cp.is-got .ss-cp-name { padding-right: 40px; }
.ss-cp-note { margin: 14px 0 0; text-align: center; font-size: 11px; color: #aaa; }


/* ===== 平台购物车（按店铺分组） ===== */
#page-cart, #page-confirm { background: #f5f5f5; padding-bottom: 0; }
.ct-list { box-sizing: border-box; min-height: calc(100% - 56px); align-content: flex-start; padding: 10px 10px 4px; display: flex; flex-direction: column; gap: 10px; }
.ct-shop { background: #fff; border-radius: 12px; padding: 4px 12px 6px; }
.ct-shop-hd { display: flex; align-items: center; gap: 6px; height: 44px; }
.ct-ckbtn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
.ck {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
}
.ck.on { border-color: #ee0a24; background: #ee0a24; }
.ck.on::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ct-shop-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1c1916;
  cursor: pointer;
}
.ct-shop-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-shop-name svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: #999; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-shop-name .gcard-self { flex-shrink: 0; }
.ct-shop-logo {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.ct-shop-cp {
  flex-shrink: 0;
  border: none;
  background: #fff0ed;
  color: #ee0a24;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.ct-item, .co-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; }
.ct-item .ct-ckbtn { height: 84px; }
.ct-pic { flex-shrink: 0; width: 84px; height: 84px; border-radius: 8px; cursor: pointer; }
.co-item .ct-pic { width: 72px; height: 72px; cursor: default; }
.ct-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; min-height: 84px; }
.co-item .ct-info { min-height: 72px; }
.ct-name {
  font-size: 13px;
  line-height: 1.4;
  color: #1c1916;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.ct-spec { margin-top: 4px; font-size: 11px; color: #888; background: #f5f5f5; border-radius: 4px; padding: 1px 6px; }
.ct-row { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.ct-price-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.co-origin { color: #b5b0aa; font-size: 11px; font-weight: 400; white-space: nowrap; }
.co-origin s { color: inherit; }
.ct-price { color: #ee0a24; font-size: 16px; font-weight: 700; }
.ct-price small { font-size: 11px; }
.ct-qty { display: flex; align-items: center; border: 0.5px solid #e5e5e5; border-radius: 6px; overflow: hidden; }
.ct-qty button { width: 26px; height: 24px; border: none; background: #fafafa; font-size: 15px; color: #333; cursor: pointer; padding: 0; }
.ct-qty button:disabled { color: #ccc; cursor: default; }
.ct-qty span { min-width: 30px; text-align: center; font-size: 13px; border-left: 0.5px solid #e5e5e5; border-right: 0.5px solid #e5e5e5; line-height: 24px; }
.ct-bar, .co-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  background: #fff;
  border-top: 0.5px solid #eee;
}
.ct-all { display: flex; align-items: center; gap: 6px; border: none; background: none; padding: 0; font-size: 13px; color: #333; cursor: pointer; flex-shrink: 0; }
.ct-sum, .co-sum { flex: 1; min-width: 0; font-size: 13px; color: #1c1916; line-height: 1.25; }
.ct-sum { text-align: right; }
.co-sum { text-align: left; }
.ct-sum b, .co-sum b { color: #ee0a24; font-size: 18px; }
.ct-sum b small, .co-sum b small { font-size: 12px; }
.ct-split { display: block; margin-top: 2px; font-size: 10px; color: #ee0a24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-split em { font-style: normal; font-weight: 700; }
.ct-split.muted { color: #999; }
.ct-go {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  height: 40px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #ff6034, #ee0a24);
  cursor: pointer;
}
.ct-go:disabled { background: #ccc; cursor: default; }
.ct-go.del { background: #fff; color: #ee0a24; border: 1px solid #ee0a24; }
.ct-go.del:disabled { color: #ccc; border-color: #ddd; }
.ct-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 90px 0; color: #999; font-size: 14px; }
.ct-empty-ico { width: 72px; height: 72px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.2 10.5a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.2L20.5 8H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E") center/40px no-repeat; }

/* ===== 确认订单（按店铺拆单） ===== */
.co-body { box-sizing: border-box; min-height: calc(100% - 56px); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.co-addr {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 12px;
  background: #fff;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.co-addr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: repeating-linear-gradient(135deg, #ff6c6c 0 12px, transparent 12px 18px, #5b9bff 18px 30px, transparent 30px 36px);
}
.co-addr > div { flex: 1; min-width: 0; }
.co-addr svg { width: 14px; height: 14px; fill: none; stroke: #999; stroke-width: 1.6; flex-shrink: 0; }
.co-addr-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff6034, #ee0a24); position: relative; }
.co-addr-ico::after { content: ""; position: absolute; left: 10px; top: 8px; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; border: 2px solid #fff; transform: rotate(-45deg); box-sizing: border-box; }
.co-addr-name { font-size: 15px; font-weight: 700; color: #1c1916; }
.co-addr-name span { font-weight: 400; color: #666; font-size: 13px; margin-left: 6px; }
.co-addr-detail { margin-top: 4px; font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-split { border-radius: 10px; background: #fff7e6; color: #ad6800; font-size: 12px; line-height: 1.5; padding: 9px 12px; }
.co-split b { display: block; font-size: 13px; color: #d46b08; }
.co-shop { background: #fff; border-radius: 12px; padding: 4px 12px 2px; }
.co-shop-hd { display: flex; align-items: center; gap: 6px; height: 42px; font-size: 14px; font-weight: 700; color: #1c1916; }
.co-shop-hd span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-shop-hd .gcard-self { flex-shrink: 0; }
.co-tag { margin-left: auto; flex-shrink: 0; font-style: normal; font-size: 10px; font-weight: 600; color: #d46b08; background: #fff7e6; border-radius: 3px; padding: 1px 5px; }
.co-x { font-size: 12px; color: #999; }
.co-rows { border-top: 0.5px solid #f0f0f0; }
.co-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 13px; color: #666; }
.co-row b { font-weight: 400; color: #1c1916; text-align: right; }
.co-row b.red { color: #ee0a24; font-weight: 600; }
.co-row b.muted { color: #bbb; }
.co-row b small { display: block; font-size: 10px; font-weight: 400; color: #999; }
.co-remark { flex: 1; min-width: 0; border: none; outline: none; text-align: right; font-size: 13px; color: #1c1916; background: none; }
.co-row.co-sub { justify-content: flex-end; gap: 12px; border-top: 0.5px solid #f0f0f0; font-size: 12px; color: #999; }
.co-row.co-sub b { color: #ee0a24; font-size: 15px; font-weight: 700; }

/* ===== 支付 / 支付结果 ===== */
#page-payok { background: #f5f5f5; }
.po-head { text-align: center; padding: 28px 20px 14px; background: #fff; }
.po-ico { display: block; width: 52px; height: 52px; margin: 0 auto; color: #07c160; }
.po-tt { margin-top: 8px; font-size: 16px; font-weight: 600; color: #1c1916; }
.po-amt-big { margin-top: 6px; font-size: 32px; font-weight: 700; color: #1c1916; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.po-amt-big small { margin-right: 2px; font-size: 18px; }
.po-sub { margin-top: 6px; font-size: 12px; color: #999; }
.po-head .po-ops { padding: 18px 0 0; }
.po-btn { min-width: 112px; height: 36px; padding: 0 18px; border: 1px solid #ddd; border-radius: 18px; background: #fff; font-size: 14px; color: #333; cursor: pointer; }
.po-btn.primary { border: none; color: #fff; background: linear-gradient(90deg, #ff6034, #ee0a24); font-weight: 600; }
.po-sec { padding-top: 12px; }
.po-list-hd { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px; font-size: 13px; color: #1c1916; }
.po-list-hd .ic { width: 16px; height: 16px; color: #ff5a2c; }
.po-list-hd span { margin-left: auto; font-size: 12px; color: #999; }
.po-next { margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: #f7f7f7; font-size: 12px; color: #666; }
.po-no { display: flex; align-items: center; justify-content: space-between; }
.po-no span:last-child { display: flex; align-items: center; color: #999; }
.po-list { display: flex; flex-direction: column; gap: 10px; }
.po-order { background: #fff; border-radius: 12px; padding: 4px 12px 10px; cursor: pointer; }
.po-order-hd { display: flex; align-items: center; gap: 6px; height: 40px; font-size: 14px; font-weight: 700; color: #1c1916; }
.po-order-hd em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: #ee0a24; }
.po-order-bd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.po-pics { display: flex; gap: 6px; }
.po-pics i { width: 52px; height: 52px; border-radius: 6px; }
.po-amt { text-align: right; font-size: 12px; color: #666; }
.po-amt b { color: #1c1916; font-size: 15px; }
.po-amt span { display: block; margin-top: 2px; color: #999; }
.po-no { margin-top: 8px; font-size: 11px; color: #aaa; }
.po-ops { display: flex; justify-content: center; gap: 12px; padding: 18px 0 24px; }

/* 确认订单：每店独立选择配送方式 */
.co-mode { align-items: center; }
.co-seg { display: inline-flex; padding: 2px; border-radius: 16px; background: #f2f2f2; }
.co-seg button { border: 0; background: none; padding: 5px 12px; border-radius: 14px; font-size: 12px; color: #666; }
.co-seg button.on { background: #fff; color: #ee0a24; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.co-seg button:disabled { color: #ccc; }
.co-hint { margin: -2px 0 6px; text-align: right; font-size: 11px; color: #f60; }
.co-select { max-width: 200px; height: 28px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; padding: 0 6px; font-size: 12px; color: #1c1916; text-overflow: ellipsis; }
.co-only { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid #f6c2a0; border-radius: 3px; font-size: 10px; line-height: 14px; color: #f60; }
.co-addr-for { margin-bottom: 4px; font-size: 11px; color: #ee0a24; }
.po-mode { padding: 0 5px; border-radius: 3px; font-style: normal; font-size: 10px; line-height: 16px; font-weight: 600; }
.po-mode.express { background: #eef4ff; color: #3a6ff7; }
.po-mode.pickup { background: #fff3e8; color: #f60; }
.po-pick { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #fff8f0; font-size: 12px; line-height: 1.6; color: #8a5a2b; }

/* 收银台 */
#page-pay { display: none; flex-direction: column; background: #f5f5f5; padding-bottom: 0; }
#page-pay.active { display: flex; }
.cs-head { padding: 34px 20px 28px; text-align: center; background: #fff; }
.cs-amt { font-size: 40px; font-weight: 700; color: #1c1916; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1.1; }
.cs-amt small { margin-right: 3px; font-size: 22px; }
.cs-amt em { font-style: normal; font-size: 24px; }
.cs-left { margin-top: 10px; font-size: 12px; color: #999; }
.cs-left b { margin-left: 2px; font-weight: 600; color: #ee0a24; font-variant-numeric: tabular-nums; }
.cs-card { margin: 10px 12px 0; padding: 0 14px; border-radius: 12px; background: #fff; }
.cs-card:empty { display: none; }
.cs-card-hd { display: flex; align-items: center; height: 42px; font-size: 13px; font-weight: 600; color: #1c1916; }
.cs-card-hd span { margin-left: auto; font-size: 12px; font-weight: 400; color: #999; }
.cs-method { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.cs-wx { flex: none; width: 30px; height: 30px; }
.cs-method-tt { flex: 1; min-width: 0; }
.cs-method-tt b { display: block; font-size: 15px; font-weight: 600; color: #1c1916; }
.cs-method-tt small { display: block; margin-top: 2px; font-size: 11px; color: #999; }
.cs-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #ccc; box-sizing: border-box; }
.cs-radio.on { border: none; background: #07c160 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.cs-order { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 0.5px solid #f0f0f0; }
.cs-order .ct-shop-logo { flex: none; }
.cs-order-tt { flex: 1; min-width: 0; }
.cs-order-tt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: #1c1916; }
.cs-order-tt small { display: block; margin-top: 2px; font-size: 12px; color: #999; }
.cs-order em { font-style: normal; font-size: 15px; font-weight: 600; color: #1c1916; font-variant-numeric: tabular-nums; }
.cs-bar { position: sticky; bottom: 0; margin-top: auto; padding: 12px 16px 16px; background: linear-gradient(rgba(245,245,245,0), #f5f5f5 30%); }
.cs-pay { width: 100%; height: 46px; border: none; border-radius: 23px; background: linear-gradient(90deg, #ff6034, #ee0a24); font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; box-shadow: 0 6px 14px rgba(238,10,36,.22); }
.cs-pay:active { opacity: .88; }

/* ===== 商品详情 ===== */
#page-detail { background: #f4f4f6; padding-bottom: 0; scrollbar-width: none; }
#page-detail::-webkit-scrollbar { display: none; }

/* banner */
.dt-banner { position: relative; height: 375px; background: #fff; }
.dt-swiper { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.dt-swiper::-webkit-scrollbar { display: none; }
.dt-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.dt-slide-cap { position: absolute; left: 12px; bottom: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; color: #fff; }
.dt-video { cursor: pointer; }
.dt-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dt-play::after { content: ""; position: absolute; left: 23px; top: 17px; border-left: 17px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.dt-dur { position: absolute; left: 50%; top: calc(50% + 40px); transform: translateX(-50%); padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,.3); font-size: 11px; color: #fff; }
.dt-vbar { display: none; position: absolute; left: 14px; right: 14px; bottom: 44px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); overflow: hidden; }
.dt-vbar i { display: block; width: 0; height: 100%; background: #fff; }
.dt-vtip { display: none; position: absolute; left: 14px; bottom: 54px; font-size: 11px; color: #fff; }
.dt-video.playing .dt-play, .dt-video.playing .dt-dur { display: none; }
.dt-video.playing .dt-vbar, .dt-video.playing .dt-vtip { display: block; }
.dt-video.playing .dt-vbar i { animation: dtv 18s linear forwards; }
@keyframes dtv { to { width: 100%; } }
.dt-count { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; letter-spacing: .5px; color: #fff; }
.dt-count.hidden { display: none; }

/* 规格缩略 */
.dt-spec { display: flex; align-items: center; padding: 10px 0 10px 12px; background: #fff; }
.dt-spec-list { flex: 1; min-width: 0; display: flex; gap: 8px; padding: 3px 12px 3px 3px; overflow-x: auto; scrollbar-width: none; }
.dt-spec-list::-webkit-scrollbar { display: none; }
.dt-spec-it { position: relative; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 8px; background: #f5f5f5; box-shadow: 0 0 0 1px #eee; overflow: hidden; transition: box-shadow .15s; }
.dt-spec-it i { display: block; width: 100%; height: 100%; }
.dt-spec-it.on { box-shadow: 0 0 0 2px #ee0a24; }
.dt-album span { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; line-height: 16px; background: rgba(0,0,0,.5); font-size: 10px; color: #fff; text-align: center; }
.dt-album.has-v::before { content: ""; position: absolute; left: 50%; top: 11px; margin-left: -4px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 0 2px rgba(0,0,0,.35)); }
.dt-spec-more { position: relative; flex: 0 0 auto; display: flex; align-items: center; height: 48px; padding: 0 12px 0 10px; border: 0; background: #fff; }
.dt-spec-more::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none; }
.dt-spec-more b { display: inline-flex; align-items: center; height: 26px; padding: 0 8px 0 10px; border-radius: 13px; background: #f5f5f7; font-size: 12px; font-weight: 600; color: #1c1916; }
.dt-spec-more b::after { content: "›"; margin-left: 3px; font-size: 14px; font-weight: 400; color: #999; }

/* 价格条 */
.dt-price-card { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(105deg, #ff6a3d 0%, #ee0a24 55%, #d4001c 100%); overflow: hidden; }
.dt-price-card::after { content: ""; position: absolute; right: -30px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); pointer-events: none; }
.dt-price { font-size: 26px; font-weight: 800; line-height: 1; color: #ee0a24; font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif; }
.dt-price small { margin-right: 1px; font-size: 15px; }
.dt-line { font-size: 12px; line-height: 1; color: #aaa; }
.dt-price-card .dt-price { font-size: 30px; color: #fff; }
.dt-price-card .dt-line { color: rgba(255,255,255,.7); }
.dt-vip { display: inline-flex; align-items: center; height: 20px; padding-right: 6px; border-radius: 4px; background: #2b2118; font-size: 12px; font-weight: 700; color: #f3d39b; overflow: hidden; }
.dt-vip i { margin-right: 4px; padding: 0 5px; height: 100%; line-height: 20px; background: linear-gradient(90deg,#f6dca8,#e3b56b); font-style: normal; font-size: 10px; color: #4a3417; }
.dt-price-card .dt-vip { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.dt-sales { position: relative; z-index: 1; margin-left: auto; font-size: 12px; color: rgba(255,255,255,.85); }

/* 名称 / 标签 / 保障 */
.dt-card { margin: 10px 10px 0; padding: 14px; border-radius: 14px; background: #fff; }
#dtMain { margin: 0; border-radius: 0 0 16px 16px; padding: 12px 14px 14px; }
.dt-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: #1c1916; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-name .gcard-self { vertical-align: 2px; margin-right: 4px; }
.dt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dt-tags span { padding: 0 6px; height: 18px; line-height: 16px; border: 1px solid; border-radius: 4px; font-size: 11px; }
.dt-guar { cursor: pointer; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 10px; border-radius: 10px; background: #fafafa; font-size: 12px; }
.dt-guar b { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; color: #1c1916; font-weight: 600; }
.dt-guar b::before { content: ""; width: 14px; height: 14px; background: #ee0a24; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.dt-guar div { flex: 1; min-width: 0; display: flex; gap: 10px; overflow: hidden; white-space: nowrap; }
.dt-guar span { color: #555; }
.dt-guar span::before { content: "·"; margin-right: 4px; color: #ccc; }
.dt-guar span:first-child::before { content: none; }
.dt-guar em { font-style: normal; font-size: 14px; color: #bbb; }
/* 营销信息：会员专属 / 预售 / 起购限购 / 送积分 / 送券 */
.dt-mkt { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #fff7f0; font-size: 12px; line-height: 1.5; }
.dt-mkt > div { display: flex; gap: 8px; padding: 2px 0; }
.dt-mkt b { flex: 0 0 auto; padding: 0 4px; height: 16px; line-height: 16px; margin-top: 1px; border-radius: 3px; background: #ff6a00; color: #fff; font-size: 10px; font-weight: 500; }
.dt-mkt span { color: #5c4a3a; }

/* 区块标题 */
.dt-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.dt-hd b { font-size: 15px; color: #1c1916; }
.dt-hd b small { margin-left: 4px; font-size: 12px; font-weight: 400; color: #999; }
.dt-rate { padding: 1px 7px; border-radius: 10px; background: #fff1f0; font-size: 11px; color: #ee0a24; }
.dt-hd button { margin-left: auto; border: 0; background: none; font-size: 12px; color: #999; }
.dt-sec-title { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0 12px; font-size: 15px; font-weight: 700; color: #1c1916; }
.dt-sec-title::before, .dt-sec-title::after { content: ""; width: 36px; height: 1px; }
.dt-sec-title::before { background: linear-gradient(90deg, rgba(238,10,36,0), #ee0a24); }
.dt-sec-title::after { background: linear-gradient(90deg, #ee0a24, rgba(238,10,36,0)); }

/* 评价 */
.dt-rv { padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.dt-rv:last-child { border-bottom: 0; padding-bottom: 0; }
.dt-rv-hd { display: flex; align-items: center; gap: 8px; }
.dt-rv-hd > i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 600; line-height: 30px; text-align: center; color: #fff; }
.dt-rv-who { display: flex; flex-direction: column; gap: 1px; }
.dt-rv-who b { font-size: 13px; font-weight: 600; color: #333; }
.dt-stars { font-size: 10px; letter-spacing: 1px; color: #ffb400; }
.dt-rv-date { margin-left: auto; font-size: 11px; color: #bbb; }
.dt-rv-spec { margin-top: 8px; font-size: 11px; color: #999; }
.dt-rv-txt { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-rv-imgs { display: flex; gap: 6px; margin-top: 8px; }
.dt-rv-imgs i { width: 72px; height: 72px; border-radius: 8px; }

/* 优品推荐 */
.dt-rec { margin: 16px 10px 12px; }
.dt-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dt-rec-it { border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.dt-rec-it > i { display: block; aspect-ratio: 1; }
.dt-rec-name { margin: 8px 10px 0; font-size: 13px; line-height: 1.4; height: 36px; color: #1c1916; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-rec-ft { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 10px 10px; font-size: 11px; color: #aaa; }
.dt-rec-pr { font-size: 17px; font-weight: 700; color: #ee0a24; font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif; }
.dt-rec-pr small { font-size: 11px; }

/* 商品详情 */
.dt-detail { margin-top: 10px; }
.dt-sub { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: #1c1916; }
.dt-sub::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: #ee0a24; }
.dt-params { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #f0f0f0; border-radius: 10px; overflow: hidden; font-size: 12px; margin-bottom: 16px; }
.dt-params th, .dt-params td { padding: 9px 10px; border-bottom: 1px solid #f0f0f0; text-align: left; vertical-align: top; line-height: 1.5; }
.dt-params tr:last-child th, .dt-params tr:last-child td { border-bottom: 0; }
.dt-params th { width: 72px; background: #fafafa; font-weight: 400; color: #999; }
.dt-params td { color: #333; }
.dt-rich { margin: 0 -14px -14px; border-radius: 0 0 14px 14px; overflow: hidden; }
.dt-rich-img { display: flex; flex-direction: column; justify-content: flex-end; height: 320px; padding: 20px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.dt-rich-img b { font-size: 20px; }
.dt-rich-img span { margin-top: 4px; font-size: 12px; }
.dt-rich-txt { margin: 0; padding: 16px; font-size: 13px; line-height: 1.8; color: #555; }
.dt-rich-tip { margin: 0; padding: 14px; font-size: 11px; text-align: center; color: #bbb; background: #fafafa; }

/* 底部操作栏 */
.dt-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 2px; height: 58px; padding: 0 10px 0 6px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
.dt-bar-ico { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 44px; border: 0; background: none; font-size: 10px; color: #555; }
.dt-bar-ico i { width: 21px; height: 21px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.dt-i-shop { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 9h16l-1-4H5L4 9zm0 0v10h16V9M9 19v-5h6v5'/%3E%3C/svg%3E"); }
.dt-i-cs { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 12a8 8 0 1 1 3 6.2L4 19l.9-3A8 8 0 0 1 4 12z'/%3E%3Cpath d='M9 11h.01M12 11h.01M15 11h.01' stroke-linecap='round' stroke-width='2.4'/%3E%3C/svg%3E"); }
.dt-i-cart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 4h2l2 11h11l2-8H6.2'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='17' cy='19' r='1.4'/%3E%3C/svg%3E"); }
.dt-bar-ico em { position: absolute; top: -4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border: 1.5px solid #fff; border-radius: 9px; background: #ee0a24; font-style: normal; font-size: 10px; line-height: 13px; color: #fff; box-sizing: border-box; }
.dt-bar-ico em:empty { display: none; }
.dt-act-panel { margin: 0 12px 12px; padding: 12px 14px; background: #fff; border-radius: 12px; }
.dt-act-panel h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.dt-act-panel p, .dt-act-empty { margin: 0; color: #8c8c8c; font-size: 12px; line-height: 1.6; }
/* 我的砍价 / 正在拼：按钮、倒计时、行距同一套 */
.dt-act-panel .bg-mine-one {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid #f0f0f0;
}
.dt-act-panel .bg-mine-one:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.dt-act-panel .bg-mine-one > b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #262626;
}
.dt-act-panel .bg-mine-one > p { margin-top: 4px; }
.dt-act-panel .dt-act-clock {
  margin-top: 4px;
  color: #fa541c;
  font-size: 12px;
  line-height: 1.4;
}
.dt-act-panel .dt-act-clock span { font-weight: 600; color: #fa541c; }
.dt-act-panel .bg-mine-one .go {
  margin-top: 8px;
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: #fa541c;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}
.dt-act-panel .gp-team .gp-go,
.dt-act-panel .gp-team .gp-go.is-off,
.dt-act-panel .gp-team .gp-go:disabled {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 13px;
}
.dt-act-panel .gp-lack {
  display: block;
  margin-top: 2px;
  color: #fa541c;
  font-size: 12px;
  line-height: 1.4;
}
.dt-act-rule {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #fafafa;
  border-radius: 8px;
  color: #595959;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.dt-act-rule .dt-act-rule-var {
  font-style: normal;
  font-weight: 700;
  color: #262626;
}
.dt-act-share { display: flex; gap: 8px; margin-top: 10px; }
.dt-act-share button { flex: 1; height: 32px; border: 0; border-radius: 16px; background: #fff1f0; color: #ee0a24; font-size: 12px; }
.dt-bar-btns { flex: 1; display: flex; height: 40px; margin-left: 6px; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 10px rgba(238,10,36,.2); }
.dt-bar-btns button { flex: 1; border: 0; font-size: 14px; font-weight: 700; letter-spacing: .5px; color: #fff; }
.dt-add { background: linear-gradient(90deg,#ffc53d,#ff9500); }
.dt-buy { background: linear-gradient(90deg,#ff6034,#ee0a24); }

/* 详情弹窗：规格选择 / 商品保障 */
.dt-mask-bg { position: absolute; inset: 0; }
.dt-sheet { position: relative; max-height: 78%; display: flex; flex-direction: column; padding: 14px 12px 12px; }
.dt-sh-x { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; border: 0; background: none; font-size: 22px; line-height: 1; color: #999; }
.dt-sh-title { position: relative; margin: -2px 0 10px; text-align: center; font-size: 15px; font-weight: 700; color: #1c1916; }
.dt-sh-title .dt-sh-x { top: -6px; right: -2px; }
.dt-sku-hd { display: flex; gap: 10px; padding-right: 30px; }
.dt-sku-hd > i { flex: 0 0 auto; width: 92px; height: 92px; margin-top: -30px; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.dt-sku-hd > div { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.dt-sku-pr { display: flex; align-items: center; gap: 6px; }
.dt-sku-hd p { margin: 0; font-size: 12px; color: #999; }
.dt-sku-bd { flex: 1; overflow: auto; margin-top: 12px; }
.dt-sku-name { font-size: 13px; font-weight: 600; color: #1c1916; }
.dt-sku-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dt-sku-opts button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 4px; border: 1px solid #f2f2f2; border-radius: 6px; background: #f5f5f5; font-size: 12px; color: #333; }
.dt-sku-opts button i { width: 26px; height: 26px; border-radius: 4px; }
.dt-sku-opts.txt button { padding: 0 12px; }
.dt-sku-bd .dt-sku-name ~ .dt-sku-name { margin-top: 14px; }
.dt-sku-opts button.on { border-color: #ee0a24; background: #fff1f0; color: #ee0a24; }
.dt-sku-opts button.off, .dt-sku-opts button:disabled { opacity: .45; }
.dt-sku-pr .pm-sku-unit { margin-left: 4px; font-size: 12px; font-style: normal; font-weight: 600; color: #ee0a24; }
.dt-sku-pr .pm-sku-sub { margin-left: 6px; font-size: 12px; font-weight: 600; color: #ee0a24; }
.dt-sku-hd .dt-price { font-size: 22px; color: #ee0a24; }
/* 积分详情底栏：客服图标列 + 兑换积分/可用 + 规格×数量 + 兑换按钮 */
.pm-dt-bar.dt-bar {
  gap: 0;
  height: auto;
  min-height: 56px;
  padding: 8px 12px 8px 4px;
}
.pm-dt-bar .pm-bar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pm-bar-sum-hit {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.pm-bar-sum {
  min-width: 0;
  padding: 0 4px 0 2px;
  text-align: left;
  line-height: 1.2;
}
.pm-bar-pay {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2px 8px;
  max-width: 100%;
  color: #ee0a24;
}
.pm-bar-pay b {
  font-size: 20px;
  font-weight: 800;
  font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.4px;
  color: #ee0a24;
}
.pm-bar-pay i {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: #ee0a24;
}
.pm-bar-pay .pm-bar-avail {
  font-size: 11px;
  font-weight: 500;
  color: #999;
}
.pm-bar-sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-style: normal;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-bar-go {
  flex: 0 0 auto;
  height: 40px;
  min-width: 108px;
  padding: 0 18px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #ff6034, #ee0a24);
  box-shadow: 0 4px 10px rgba(238, 10, 36, 0.22);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  white-space: nowrap;
}
.pm-bar-go.warn {
  background: linear-gradient(90deg, #ff9f43, #ee0a24);
}
.pm-bar-go.off,
.pm-bar-go:disabled {
  background: #c8c9cc;
  box-shadow: none;
  color: #fff;
}
.dt-sku-qty { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid #f3f3f3; font-size: 13px; color: #1c1916; }
.dt-sku-qty small { margin-left: 6px; font-size: 11px; color: #ff6a00; }
.dt-stepper { display: flex; align-items: center; gap: 2px; }
.dt-stepper button { width: 28px; height: 26px; border: 0; border-radius: 4px; background: #f5f5f5; font-size: 15px; color: #333; }
.dt-stepper button:disabled { color: #ccc; }
.dt-stepper b { min-width: 34px; height: 26px; line-height: 26px; text-align: center; background: #f5f5f5; font-size: 13px; }
.dt-sku-btns { flex: 0 0 auto; margin: 14px 0 0; }
.dt-guar-list { overflow: auto; }
.dt-guar-it { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.dt-guar-it > i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: #ee0a24; font-style: normal; font-size: 11px; line-height: 18px; text-align: center; color: #fff; }
.dt-guar-it b { font-size: 14px; color: #1c1916; }
.dt-guar-it p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: #888; }
.svip-body { overflow-y: auto; }
.svip-cur { margin: 0 0 10px; font-size: 12px; color: #8a5a12; }
.svip-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.svip-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px; border: 1.5px solid #eee; border-radius: 10px; background: #fff; cursor: pointer;
}
.svip-card b { font-size: 14px; color: #333; }
.svip-card em { font-style: normal; font-size: 11px; color: #999; }
.svip-price { font-size: 22px; font-weight: 700; color: #8a5a12; }
.svip-price i { font-style: normal; font-size: 12px; margin-right: 1px; }
.svip-card.on { border-color: #d9a54a; background: #fdf6e8; }
.svip-rights { margin: 14px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.9; color: #555; }
.svip-desc { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #999; }

/* 付费会员落地页：沉浸顶栏 + 黑金身份，皇冠与等级会员同款 */
.phone.is-svip .status-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  background: transparent; color: #f3d9a4;
}
.phone.is-svip .nav-bar {
  position: absolute; top: var(--status-h); left: 0; right: 0; z-index: 6;
  background: transparent; color: #f7e7c4; border-bottom: none;
}
.phone.is-svip .nav-bar .back,
.phone.is-svip .nav-bar .back svg { color: #f7e7c4; }
.phone.is-svip .nav-bar .title { display: none; }
.phone.is-svip .status-bar .ios-battery em,
.phone.is-svip .status-bar .sb-battery em { color: #3a2f25; }
.phone.is-svip .status-bar .sb-battery { background: rgba(243, 217, 164, 0.35); }
.phone.is-svip .status-bar .sb-battery::before { background: #f3d9a4; }
.phone.is-svip .status-bar .ios-trailing::after { background: rgba(243, 217, 164, 0.55); }
.phone.is-svip .mp-capsule { background: rgba(0, 0, 0, 0.22); border-color: rgba(243, 217, 164, 0.35); }
.phone.is-svip .mp-capsule-divider { background: rgba(243, 217, 164, 0.35); }
.phone.is-svip .mp-capsule-more::before {
  background:
    radial-gradient(circle 1.6px at 2px 50%, #f7e7c4 98%, transparent),
    radial-gradient(circle 2.1px at 9px 50%, #f7e7c4 98%, transparent),
    radial-gradient(circle 1.6px at 16px 50%, #f7e7c4 98%, transparent);
}
.phone.is-svip .mp-capsule-close::before { border-color: #f7e7c4; }
.phone.is-svip .mp-capsule-close::after { background: #f7e7c4; }
.phone.is-svip .page-stack { background: #f3efe8; }
#page-svip.active {
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
}
.svip-page {
  flex: 1; min-height: 0; background: #f3efe8;
  display: flex; flex-direction: column;
}
.svip-land {
  flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0;
}
.svip-land-body {
  flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
.svip-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--status-h) + var(--nav-h) + 6px) 16px 48px;
  background: linear-gradient(165deg, #1f1a14 0%, #3a2f25 42%, #5a4630 78%, #8a6a3a 100%);
  color: #f3d9a4;
}
.svip-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 92% 20%, rgba(243, 217, 164, 0.2), transparent 52%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(196, 92, 38, 0.16), transparent 48%);
}
.svip-hero-row {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.svip-hero-copy { flex: 1; min-width: 0; padding-right: 4px; }
.svip-brand {
  margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: rgba(247, 231, 196, 0.92); letter-spacing: 0.04em;
}
.svip-hero h1 {
  margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25;
  color: #fff8e8; letter-spacing: 0.01em;
}
.svip-hero-sub {
  margin: 6px 0 0; font-size: 12px; line-height: 1.4;
  color: rgba(243, 217, 164, 0.78);
}
.svip-medal {
  flex: 0 0 auto; min-width: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; text-align: center;
  background: none; border: 0; box-shadow: none;
}
.svip-medal-ic {
  position: relative;
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px;
  color: #f3d9a4;
}
.svip-medal-ic::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 217, 164, 0.26) 0%, transparent 70%);
  pointer-events: none;
}
.svip-medal.on .svip-medal-ic { color: #f7e1b5; }
.svip-medal-ic svg {
  position: relative; z-index: 1;
  width: 34px; height: 34px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.svip-medal b {
  font-size: 13px; font-weight: 700; color: #fff8e8; line-height: 1.2;
}
.svip-medal.on b { color: #f7e1b5; }
.svip-medal span {
  margin-top: 2px; font-size: 10px; line-height: 1.35;
  color: rgba(243, 217, 164, 0.72); white-space: nowrap;
}
.svip-panel {
  position: relative; z-index: 2;
  margin: 0 12px 12px; padding: 16px 14px 14px;
  border-radius: 14px; background: #fff;
  box-shadow: 0 1px 0 rgba(28, 25, 22, 0.03);
}
.svip-panel-pack { margin-top: -36px; }
.svip-panel-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 14px;
}
.svip-panel-hd b { font-size: 15px; color: #1c1916; }
.svip-panel-hd span { font-size: 11px; color: #9a9186; }
.svip-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.svip-pack {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 108px; padding: 14px 10px 12px; border: 1.5px solid #ebe4da;
  border-radius: 12px; background: #fbfaf8; cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.svip-pack:active { transform: scale(0.98); }
.svip-pack.on {
  border-color: #c9a25b;
  background: linear-gradient(180deg, #fff9ee 0%, #fff 70%);
  box-shadow: 0 0 0 1px rgba(201, 162, 91, 0.25);
}
.svip-pack.hot { padding-top: 18px; }
.svip-pack-badge {
  position: absolute; top: -1px; left: -1px; padding: 2px 8px;
  border-radius: 12px 0 10px 0; font-style: normal; font-size: 10px; font-weight: 700;
  color: #fff8e8; background: linear-gradient(90deg, #c45c26, #a0481c);
}
.svip-pack-name { font-size: 13px; font-weight: 600; color: #5c5348; }
.svip-pack.on .svip-pack-name { color: #6b4a18; }
.svip-pack-price {
  display: flex; align-items: baseline; gap: 1px; margin-top: 8px;
  color: #1c1916; font-variant-numeric: tabular-nums;
}
.svip-pack-price i { font-style: normal; font-size: 12px; font-weight: 700; }
.svip-pack-price b { font-size: 24px; font-weight: 700; line-height: 1; }
.svip-pack.on .svip-pack-price { color: #8a5a12; }
.svip-pack-meta {
  margin-top: 8px; font-size: 10px; line-height: 1.3; color: #9a9186;
  white-space: nowrap; letter-spacing: -0.02em;
}
.svip-pack-check {
  position: absolute; right: -1.5px; bottom: -1.5px;
  display: grid; place-items: center; width: 22px; height: 18px;
  border-radius: 12px 0 12px 0;
  background: linear-gradient(135deg, #e8bf79, #b8893a); color: #fff;
}
.svip-pack-check svg { width: 11px; height: 11px; stroke-width: 2.2; }
.svip-rights-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.svip-right {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 0; padding: 12px 6px 10px;
  border-radius: 10px; background: #faf8f5; text-align: center; min-width: 0;
}
.svip-right-ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(145deg, #3a2f25, #5a4630); color: #f3d9a4;
}
.svip-right-ic svg { width: 16px; height: 16px; }
.svip-right-body {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; width: 100%;
}
.svip-right-body b {
  display: block; font-size: 12px; font-weight: 600; color: #1c1916; line-height: 1.25;
}
.svip-right-body span {
  display: block; max-width: 100%; font-size: 10px; line-height: 1.35; color: #8a8176;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svip-fee-entry {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 24px); margin: 0 12px 12px; padding: 14px 14px;
  border: 0; border-radius: 14px; background: #fff; cursor: pointer; text-align: left;
  font-family: inherit; box-shadow: 0 1px 0 rgba(28, 25, 22, 0.03);
}
.svip-fee-entry b { font-size: 14px; font-weight: 600; color: #1c1916; }
.svip-fee-entry span { margin-left: auto; font-size: 12px; color: #9a9186; }
.svip-fee-entry .ic-arr { width: 14px; height: 14px; color: #c4bbb0; flex-shrink: 0; }
.svip-fees-page { min-height: 100%; background: #f3efe8; }
.svip-fees-list {
  margin: 12px; padding: 0 14px; border-radius: 14px; background: #fff;
}
.svip-fees-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-top: 1px solid #f0ebe3;
}
.svip-fees-row:first-child { border-top: 0; }
.svip-fees-main { flex: 1; min-width: 0; }
.svip-fees-main b { display: block; font-size: 14px; font-weight: 600; color: #1c1916; }
.svip-fees-main span { display: block; margin-top: 4px; font-size: 12px; color: #8a8176; }
.svip-fees-main small { display: block; margin-top: 2px; font-size: 11px; color: #b0a89e; }
.svip-fees-row em {
  flex: 0 0 auto; font-style: normal; font-size: 16px; font-weight: 700;
  color: #8a5a12; font-variant-numeric: tabular-nums;
}
.svip-fees-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 52vh; padding: 24px; color: #9a9186; font-size: 14px;
}
.svip-fees-empty .btn {
  min-width: 160px; height: 40px; border: 0; border-radius: 20px;
  background: linear-gradient(90deg, #3a2f25, #5a4630 55%, #8a6a3a);
  color: #f7e7c4; font-size: 14px; font-weight: 600; cursor: pointer;
}
.svip-land-bar {
  flex: 0 0 auto; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 12px;
  background: rgba(255, 255, 255, 0.98); border-top: 1px solid #ebe4da;
  box-shadow: 0 -4px 16px rgba(28, 25, 22, 0.04);
}
.svip-bar-sum { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.svip-bar-sum > span { font-size: 12px; color: #8a8176; }
.svip-bar-sum b {
  font-size: 22px; font-weight: 700; color: #8a5a12; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.svip-bar-sum b i { font-style: normal; font-size: 13px; margin-right: 1px; }
.svip-bar-sum small { width: 100%; font-size: 11px; color: #9a9186; }
.svip-land-pay {
  flex: 0 0 auto; min-width: 132px; height: 44px; padding: 0 22px; border: 0; border-radius: 22px;
  background: linear-gradient(90deg, #3a2f25, #5a4630 55%, #8a6a3a);
  color: #f7e7c4; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px rgba(58, 47, 37, 0.28);
}
.svip-land-pay:active { opacity: 0.92; }
.ct-price-line { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dt-sh-ok { flex: 0 0 auto; height: 40px; margin-top: 14px; border: 0; border-radius: 20px; background: linear-gradient(90deg,#ff6034,#ee0a24); font-size: 14px; font-weight: 700; color: #fff; }

/* 详情页沉浸式头部 */
.phone.is-detail .status-bar { position: absolute; top: 0; left: 0; right: 0; background: transparent; z-index: 7; }
.nav-bar.dt-nav { --a: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: block; height: auto; padding: var(--status-h) 0 0; background: rgba(255,255,255,var(--a)); box-shadow: 0 1px 0 rgba(0,0,0,calc(var(--a) * .06)); }
.dtn-row { position: relative; height: var(--nav-h); display: flex; align-items: center; padding: 0 0 0 8px; }
.dtn-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: .5px solid rgba(0,0,0,calc((1 - var(--a)) * .08)); border-radius: 50%; background: rgba(255,255,255,calc((1 - var(--a)) * .78)); color: #1a1a1a; cursor: pointer; }
.dtn-btn svg { width: 18px; height: 18px; }
.dtn-btn:first-child svg { width: 11px; height: 18px; }
.dtn-share { position: absolute; right: 103px; top: 6px; }
.dtn-tabs { display: flex; height: 0; overflow: hidden; opacity: 0; transition: height .2s, opacity .2s; }
.nav-bar.dt-nav.scrolled .dtn-tabs { height: 40px; opacity: 1; border-top: .5px solid #f2f2f2; }
.dtn-tabs button { position: relative; flex: 1; border: 0; background: none; font-size: 14px; color: #666; cursor: pointer; }
.dtn-tabs button.on { font-weight: 700; color: #1c1916; }
.dtn-tabs button.on::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: linear-gradient(90deg, #ff6034, #ee0a24); }
.dt-share-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 0 8px; }
.dt-share-list button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; font-size: 12px; color: #333; }
.dt-share-list i { width: 48px; height: 48px; border-radius: 50%; font-style: normal; font-size: 16px; font-weight: 700; line-height: 48px; text-align: center; color: #fff; }
.dt-share-list .wx { background: #07c160; }
.dt-share-list .pyq { background: #4f7ef2; }
.dt-share-list .hb { background: #ff9500; }
.dt-share-list .lk { background: #8c8c8c; }

/* 详情：店铺信息 */
.dt-shop-hd { display: flex; align-items: center; gap: 10px; }
.dt-shop-logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; font-style: normal; font-size: 18px; font-weight: 700; line-height: 44px; text-align: center; color: #fff; box-shadow: 0 0 0 1px #f0f0f0; }
.dt-shop-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dt-shop-info b { display: flex; align-items: center; gap: 4px; font-size: 15px; color: #1c1916; white-space: nowrap; overflow: hidden; }
.dt-shop-info span { font-size: 11px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-shop-go { flex: 0 0 auto; height: 28px; padding: 0 12px; border: 1px solid #ee0a24; border-radius: 14px; background: #fff; font-size: 12px; font-weight: 600; color: #ee0a24; }

/* ===== 我的订单 / 订单详情（与后台订单管理同源 ara-orders） ===== */
.od-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 24px; }
.od-card { cursor: pointer; }
.od-card .po-order-hd em.od-st.end { color: #999; font-weight: 400; }
.od-card .po-order-bd { justify-content: flex-start; }
.od-sum { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; font-size: 12px; color: #666; }
.od-sum b { font-size: 15px; color: #1c1916; font-variant-numeric: tabular-nums; }
.od-merge { margin-right: auto; padding: 0 6px; border-radius: 3px; background: #fff3ed; font-size: 11px; line-height: 18px; color: #e8590c; }
.od-one { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; max-width: 150px; }
.od-one b { font-size: 13px; font-weight: 500; color: #1c1916; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-one span { font-size: 11px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-ft { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.od-ft:empty { display: none; }
.od-btn { height: 30px; padding: 0 14px; border: 1px solid #ddd; border-radius: 15px; background: #fff; font-size: 12px; color: #333; cursor: pointer; }
.od-btn.primary { border-color: #ee0a24; color: #ee0a24; }
.od-empty { display: flex; flex-direction: column; align-items: center; padding: 90px 0; text-align: center; }
.od-empty-ico { width: 56px; height: 56px; color: #ccc; }
.od-empty b { margin-top: 12px; font-size: 14px; font-weight: 500; color: #666; }
.od-empty p { margin: 6px 0 16px; font-size: 12px; color: #bbb; }
/* ===== 售后 ===== */
.as-body { overflow-y: auto; padding: 0 2px 8px; }
.as-goods { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #f7f7f7; }
.as-goods .po-pics i { width: 44px; height: 44px; }
.as-goods span { font-size: 13px; color: #1c1916; line-height: 1.5; }
.as-goods small { font-size: 11px; color: #999; }
/* 售后选择商品 */
.as-items { display: flex; flex-direction: column; gap: 8px; }
.as-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #f7f7f7; }
.as-ck { flex-shrink: 0; width: 18px; height: 18px; padding: 0; border: 1.5px solid #ccc; border-radius: 50%; background: #fff; cursor: pointer; }
.as-item.on .as-ck { border-color: #ee0a24; background: #ee0a24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.as-item > i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 6px; }
.as-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-item b { font-size: 13px; font-weight: 500; color: #1c1916; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-item small { font-size: 11px; color: #999; }
.as-step { flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
.as-step button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: #fff; font-size: 15px; line-height: 1; color: #333; cursor: pointer; }
.as-step button:disabled { color: #ccc; cursor: default; }
.as-step em, .as-q { min-width: 34px; font-style: normal; font-size: 12px; color: #333; text-align: center; font-variant-numeric: tabular-nums; }
.odd-rf { margin-left: 6px; font-style: normal; color: #ee0a24; }
.as-label { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: #1c1916; }
.as-label small { font-size: 11px; font-weight: 400; color: #999; }
.as-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.as-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 1px solid #eee; border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.as-opt b { font-size: 14px; color: #1c1916; }
.as-opt small { font-size: 11px; color: #999; }
.as-opt.on { border-color: #ee0a24; background: #fff5f5; }
.as-opt.on b { color: #ee0a24; }
.as-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chip { height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 15px; background: #f5f5f5; font-size: 12px; color: #333; cursor: pointer; }
.as-chip.on { border-color: #ee0a24; background: #fff5f5; color: #ee0a24; }
.as-amt { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border-radius: 10px; background: #f7f7f7; }
.as-amt span { font-size: 16px; font-weight: 700; color: #ee0a24; }
.as-amt input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 18px; font-weight: 700; color: #ee0a24; font-variant-numeric: tabular-nums; }
.as-input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: #f7f7f7; outline: none; font: inherit; font-size: 13px; color: #1c1916; }
.as-desc { height: 72px; padding: 10px 12px; resize: none; }
.as-note { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: #999; }
.as-card { padding: 14px 14px 12px; border-radius: 12px; background: #fff; }
.as-card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.as-card-hd b { font-size: 15px; color: #ee0a24; }
.as-card.st-refunded .as-card-hd b { color: #2f9e44; }
.as-card.st-rejected .as-card-hd b,
.as-card.st-cancelled .as-card-hd b { color: #666; }
.as-card-hd span { font-size: 12px; color: #666; }
.as-card > p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #999; }
.as-steps { display: flex; margin: 14px 0 4px; }
.as-steps span { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #bbb; }
.as-steps span i { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: #ddd; box-shadow: 0 0 0 3px #fff; }
.as-steps span + span::before { content: ""; position: absolute; top: 3px; right: 50%; width: 100%; height: 2px; background: #eee; }
.as-steps span.done, .as-steps span.cur { color: #1c1916; }
.as-steps span.done i { background: #ee0a24; }
.as-steps span.cur i { background: #fff; box-shadow: 0 0 0 2px #ee0a24, 0 0 0 4px #fff; }
.as-steps span.done + span::before, .as-steps span.done + span.cur::before { background: #ee0a24; }
.as-meta { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f2f2f2; }
.as-meta div { display: flex; gap: 12px; padding: 3px 0; font-size: 12px; }
.as-meta span { flex-shrink: 0; width: 56px; color: #999; }
.as-meta em { flex: 1; min-width: 0; font-style: normal; color: #333; word-break: break-all; }
.as-ops { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* ===== 订单详情 ===== */
#page-orderDetail { background: #f5f5f5; padding-bottom: 0; }
#page-orderDetail.active { display: flex; flex-direction: column; }
.odd { flex: 1 0 auto; }
.odd-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 20px 50px;
  color: #fff;
  background: linear-gradient(135deg, #ff6a3d 0%, #ee0a24 100%);
}
.odd-hero.closed { background: linear-gradient(135deg, #9a9a9a 0%, #6b6b6b 100%); }
.odd-hero b { display: block; font-size: 19px; font-weight: 700; }
.odd-hero p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; opacity: 0.9; }
.odd-hero-ico { flex-shrink: 0; width: 44px; height: 44px; margin-top: 2px; opacity: 0.85; }
.odd-body { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: -36px; padding: 0 12px 14px; }
.odd-card { position: relative; padding: 14px; border-radius: 12px; background: #fff; }
.odd-card-hd { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: #1c1916; }
.odd-ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: #1c1916; }
.odd-ico.ok { color: #2f9e44; }

.odd-place { overflow: hidden; padding-bottom: 16px; }
.odd-place::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(-45deg, #ff7a45 0 10px, transparent 10px 15px, #5b8def 15px 25px, transparent 25px 30px);
  opacity: 0.75;
}
.odd-track, .odd-addr { display: flex; align-items: flex-start; gap: 10px; }
.odd-track { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed #eee; cursor: pointer; }
.odd-track > div, .odd-addr > div { flex: 1; min-width: 0; }
.odd-track b { font-size: 14px; color: #2f9e44; }
.odd-track p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #333; }
.odd-track small { display: block; margin-top: 4px; font-size: 11px; color: #999; }
.odd-track .ic-arr { margin-top: 18px; color: #bbb; }
.odd-addr b { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: #1c1916; }
.odd-addr b span { font-size: 13px; font-weight: 400; color: #666; }
.odd-addr p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: #555; }
.odd-addr small { display: block; margin-top: 4px; font-size: 12px; color: #999; }

.odd-code { display: flex; align-items: center; gap: 14px; }
.odd-code-qr {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 108px;
  height: 108px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  background: #fff;
  color: #1c1916;
}
.odd-code-qr .ic { width: 44px; height: 44px; }
.odd-code-qr svg,
.odd-code-qr .verify-qr-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.odd-code span { font-size: 12px; color: #999; }
.odd-code b { display: block; margin: 2px 0; font-size: 24px; letter-spacing: 3px; color: #ee0a24; font-variant-numeric: tabular-nums; }
.odd-code small { font-size: 11px; color: #999; }
.odd-code-sheet { text-align: center; padding: 4px 8px 0; }
.odd-code-sheet-qr {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 180px;
  height: 180px;
  margin: 0 auto 12px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  background: #fff;
}
.odd-code-sheet-qr svg { display: block; width: 100%; height: 100%; }
.odd-code-sheet-lab { font-size: 12px; color: #999; }
.odd-code-sheet-num {
  display: block;
  margin: 6px 0 10px;
  font-size: 28px;
  letter-spacing: 4px;
  color: #ee0a24;
  font-family: "DIN Alternate", "DIN Condensed", monospace;
  font-variant-numeric: tabular-nums;
}
.odd-code-sheet p { margin: 0; font-size: 13px; color: #888; line-height: 1.5; }
.odd-code-sheet .odd-code-sheet-point { margin-top: 8px; font-size: 12px; color: #aaa; }

/* 核销码：绝对居中弹窗，关闭钮在卡片下方便于单手点 */
#asMask.is-center {
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}
#asMask.is-center > .odd-code-panel {
  width: auto;
  max-width: 300px;
  max-height: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: odd-code-pop 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@keyframes odd-code-pop {
  from { transform: scale(0.94); opacity: 0.6; }
  to { transform: scale(1); opacity: 1; }
}
.odd-code-dialog {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 16px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.odd-code-dialog .dt-sh-title { margin: 0 0 12px; }
.odd-code-dialog .dt-sh-ok { width: 100%; margin-top: 14px; }
.odd-code-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #595959;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.odd-code-close:active { opacity: 0.85; }

.odd-shop { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; cursor: pointer; }
.odd-shop b { font-size: 14px; color: #1c1916; }
.odd-shop .ic-arr { color: #bbb; }
.odd-item { display: flex; gap: 10px; padding: 8px 0; }
.odd-item i { flex-shrink: 0; width: 76px; height: 76px; border-radius: 8px; }
.odd-item div { flex: 1; min-width: 0; }
.odd-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.45; color: #1c1916; }
.odd-item span { display: inline-block; max-width: 100%; margin-top: 6px; padding: 0 6px; border-radius: 3px; background: #f5f5f5; font-size: 11px; line-height: 18px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odd-item em { flex-shrink: 0; font-style: normal; font-size: 13px; font-weight: 600; color: #1c1916; text-align: right; font-variant-numeric: tabular-nums; }
.odd-item em small { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; color: #999; }
.odd-item em small.odd-origin s { color: #b5b0aa; }
.odd-fees { margin-top: 6px; padding-top: 10px; border-top: 1px solid #f2f2f2; }
.odd-fee { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; color: #666; }
.odd-fee em { font-style: normal; color: #333; font-variant-numeric: tabular-nums; }
.odd-fee.off em { color: #ee0a24; }
.odd-fee.total { padding-top: 8px; font-size: 13px; color: #1c1916; }
.odd-fee.total em { font-size: 18px; font-weight: 700; color: #ee0a24; }
.odd-fee.total em small { font-size: 12px; }
.odd-contact { display: grid; grid-template-columns: 1fr 1fr; margin: 10px -14px -14px; border-top: 1px solid #f2f2f2; }
.odd-contact button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: 0; background: none; font-size: 13px; color: #333; cursor: pointer; }
.odd-contact button + button { border-left: 1px solid #f2f2f2; }
.odd-contact .ic { width: 16px; height: 16px; }

.odd-info-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 12px; }
.odd-info-row span { flex-shrink: 0; width: 56px; color: #999; }
.odd-info-row em { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-style: normal; color: #333; word-break: break-all; }
.odd-info-row .od-merge { margin: 0; font-style: normal; }
.odd-copy { flex-shrink: 0; height: 22px; padding: 0 8px; border: 1px solid #e5e5e5; border-radius: 11px; background: #fff; font-size: 11px; color: #666; cursor: pointer; }

.odd-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 10px;
  background: #fff;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.odd-bar:empty { display: none; }
.odd-bar-svc { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0 4px; font-size: 10px; color: #666; cursor: pointer; }
.odd-bar-svc .ic { width: 20px; height: 20px; }
.odd-bar-btns { flex: 1; display: flex; justify-content: flex-end; gap: 8px; }
.odd-bar-btns .od-btn { height: 34px; padding: 0 16px; border-radius: 17px; font-size: 13px; }
.odd-bar-btns .od-btn.primary { border: 0; color: #fff; background: linear-gradient(90deg, #ff6034, #ee0a24); }
.odd .as-card { box-shadow: none; }
.od-detail { display: flex; flex-direction: column; gap: 10px; }
.od-detail .list-card { margin: 0; }
.od-status { padding: 18px 16px; border-radius: 12px; background: linear-gradient(135deg, #ff5a3c, #ee0a24); color: #fff; }
.od-status b { display: block; font-size: 18px; }
.od-status span { display: block; margin-top: 4px; font-size: 12px; opacity: 0.85; }
.od-status.st-unreviewed, .od-status.st-completed, .od-status.st-refunded { background: linear-gradient(135deg, #8c8c8c, #595959); }
.od-items { padding: 4px 12px; }
.od-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.od-item + .od-item { border-top: 1px solid #f2f2f2; }
.od-item i { width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px; }
.od-item div { flex: 1; min-width: 0; }
.od-item b { display: block; font-size: 13px; font-weight: 500; color: #1c1916; }
.od-item span { display: block; margin-top: 4px; font-size: 11px; color: #999; }
.od-item em { font-style: normal; font-size: 13px; color: #1c1916; text-align: right; }
.od-item em small { display: block; font-size: 11px; color: #999; }
/* 已售罄：与后台「已售罄商品」一致，可浏览不可购买 */
.gcard-pic, .item .pic, .dt-rec-it i, .ss-good i, .sl-thumb i { position: relative; overflow: hidden; }
.soldout-mask { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-style: normal; font-weight: 600; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gcard-soldout { margin-left: auto; font-size: 12px; color: #999; }
.dt-bar-btns .dt-soldout { background: #c8c9cc; cursor: not-allowed; }
.dt-bar-btns:has(.dt-soldout) { box-shadow: none; }
/* 购物车失效商品：已售罄 / 已下架（仓库中），不可勾选结算 */
.ct-inv-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 12px; color: #999; }
.ct-inv-clear { border: 1px solid #ee0a24; background: #fff; color: #ee0a24; font-size: 12px; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ck.off { background: #f2f2f2; border-color: #e0e0e0; }
.ct-ckbtn:disabled { cursor: not-allowed; }
.ct-inv-tag { flex-shrink: 0; align-self: center; width: 26px; height: 16px; line-height: 16px; border-radius: 8px; background: #e5e5e5; color: #999; font-size: 10px; text-align: center; }
.ct-invalid .ct-pic { position: relative; overflow: hidden; opacity: .75; }
.ct-invalid .ct-pic:not([data-product]), .ct-invalid .ct-name:not([data-product]) { cursor: default; }
.ct-inv-mask { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; line-height: 22px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; text-align: center; }
.ct-invalid .ct-name { color: #999; }
.ct-inv-tip { margin-top: auto; font-size: 12px; color: #999; }
/* 优惠券商品 / 虚拟商品：无配送方式，单独成单 */
.po-mode.coupon { background: #fff0f0; color: #e53935; }
.po-mode.virtual { background: #f0f9eb; color: #389e0d; }
.co-kind { flex-shrink: 0; font-style: normal; font-size: 10px; font-weight: 600; color: #389e0d; background: #f0f9eb; border-radius: 3px; padding: 1px 5px; }
/* 确认页：按商品选快递/自提；快递商品可分别设置收货地址 */
.co-addr { box-sizing: border-box; }
.co-addr-split { flex-shrink: 0; border: 1px solid #ee0a24; background: #fff; color: #ee0a24; font-size: 12px; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.co-seg-sm { margin-top: 6px; padding: 2px; }
.co-seg-sm button { padding: 3px 12px; font-size: 11px; }
.co-info-gap { margin-top: 6px; }
.co-kind.express { color: #3a6ff7; background: #eef4ff; }
.co-kind.pickup { color: #f60; background: #fff3e8; }
.co-kind.coupon { color: #e53935; background: #fff0f0; }
.co-kind.virtual { color: #389e0d; background: #f0f9eb; }
.ca-tip { margin: -4px 0 8px; font-size: 12px; color: #999; text-align: center; }
.ca-body { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.ca-shop { background: #f7f7f7; border-radius: 10px; padding: 8px 10px; }
.ca-shop-hd { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1c1916; margin-bottom: 4px; }
.ca-item { padding: 8px 0; border-top: 0.5px solid #ececec; }
.ca-item:first-of-type { border-top: 0; }
.ca-goods { display: flex; gap: 8px; align-items: center; }
.ca-goods i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 6px; }
.ca-goods b { display: block; font-size: 12px; font-weight: 600; color: #1c1916; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ca-goods span { font-size: 11px; color: #999; }
.ca-opts { display: flex; gap: 6px; margin-top: 8px; }
.ca-opts button { flex: 1; min-width: 0; border: 1px solid #e5e5e5; background: #fff; border-radius: 8px; padding: 5px 4px; text-align: center; cursor: pointer; }
.ca-opts button b { display: block; font-size: 12px; font-weight: 600; color: #1c1916; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-opts button span { font-size: 10px; color: #999; }
.ca-opts button.on { border-color: #ee0a24; background: #fff5f5; }
.ca-opts button.on b { color: #ee0a24; }
/* 确认页：同店一张卡片，内按「地址 / 自提 / 券 / 虚拟」分段（每段为一个子订单） */
.co-addr-more { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 12px; position: relative; overflow: hidden; }
.co-addr-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(135deg, #ff6c6c 0 12px, transparent 12px 18px, #5b9bff 18px 30px, transparent 30px 36px); }
.co-addr-more .co-addr-split { padding: 7px 18px; font-size: 13px; }
.co-addr-main { cursor: pointer; }
.co-grp + .co-grp { border-top: 0.5px dashed #eee; }
.co-sec { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0 2px; }
.co-sec .co-kind { margin-top: 1px; }
.co-sec-addr { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; }
.co-sec-addr b { display: block; font-weight: 600; color: #1c1916; }
.co-sec-addr span { display: block; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-sec-note { font-size: 12px; color: #666; line-height: 18px; }
.co-sec-rows .co-row { min-height: 34px; }
/* 确认页顶部地址 + 「修改收货地址」弹窗（按地址分组，逐件修改） */
.co-addr-line { font-size: 15px; font-weight: 700; color: #1c1916; line-height: 1.4; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-addr-who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px; font-size: 13px; color: #666; }
.co-addr .co-addr-split, .co-addr-more .co-addr-split { border: 1px solid #ff5000; color: #ff5000; background: #fff; border-radius: 4px; padding: 2px 6px; font-size: 12px; line-height: 16px; }
.co-addr-more .co-addr-split { padding: 6px 14px; font-size: 13px; }
#coAddrSheet { height: 82%; max-height: 82%; box-sizing: border-box; }
#coAddrSheet .ca-body { gap: 0; }
.ca-pin { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: #1c1916; stroke-width: 1.4; }
.ca-grp { padding: 4px 0 6px; }
.ca-grp + .ca-grp { border-top: 8px solid #f5f5f5; margin: 0 -12px; padding: 10px 12px 6px; }
.ca-grp-hd { display: flex; gap: 8px; padding: 6px 0 10px; }
.ca-grp-hd b, .ca-addr b { display: block; font-size: 14px; font-weight: 700; color: #1c1916; line-height: 1.4; }
.ca-grp-hd span, .ca-addr span { display: block; margin-top: 2px; font-size: 12px; color: #666; }
.ca-it { display: flex; gap: 10px; padding: 8px 0; }
.ca-it > i { flex-shrink: 0; width: 76px; height: 76px; border-radius: 8px; }
.ca-it-info { flex: 1; min-width: 0; }
.ca-it-top { display: flex; gap: 8px; align-items: flex-start; }
.ca-it-top b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #1c1916; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ca-it-top em { flex-shrink: 0; font-style: normal; font-size: 13px; font-weight: 600; color: #1c1916; }
.ca-it-spec { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: #999; }
.ca-it-ft { display: flex; justify-content: flex-end; margin-top: 6px; }
.ca-it-ft button { border: 0; background: #f2f3f5; color: #1c1916; font-size: 12px; border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.ca-back { position: absolute; left: -2px; top: -6px; width: 28px; height: 28px; border: 0; background: none; font-size: 24px; line-height: 1; color: #666; cursor: pointer; }
.ca-for { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px; background: #f7f7f7; border-radius: 8px; font-size: 12px; color: #666; }
.ca-for i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 4px; }
.ca-for span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-addr { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 0.5px solid #f0f0f0; background: none; padding: 12px 2px; text-align: left; cursor: pointer; }
.ca-addr > div { flex: 1; min-width: 0; }
.ca-addr span em { margin-left: 6px; font-style: normal; font-size: 10px; color: #ff5000; border: 1px solid #ffc8a8; border-radius: 3px; padding: 0 3px; }
.ca-new { margin-top: 12px; border: 1px dashed #ccc; background: #fff; border-radius: 8px; padding: 10px; font-size: 13px; color: #666; cursor: pointer; }
/* 店铺未完成二级商户进件：暂不支持下单 */
.ss-paytip { grid-column: 1 / -1; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #d46b08; font-size: 12px; line-height: 1.5; }


/* —— 结算 · 运费 —— */
.co-row small { font-size: 11px; color: #999; margin-left: 2px; }
.co-free { color: #52c41a; }
.co-freight-tip { margin: -4px 0 6px; text-align: right; font-size: 11px; color: #fa8c16; }
.dt-rich-html { padding: 4px 2px; font-size: 13px; line-height: 1.7; color: #333; }
.dt-rich-html img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; }
.dt-sku-off { color: #f5222d; font-style: normal; }
.co-presale { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 4px; background: #fff7e6; color: #fa8c16; font-size: 11px; }
.co-bargain { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 4px; background: #fff3e8; color: #ff4d00; font-size: 11px; font-weight: 600; }
.co-bargain s { margin-left: 4px; color: #b5b0aa; font-weight: 400; }
.po-mode.bargain { background: #fff3e8; color: #ff4d00; }
.po-mode.group { background: #fff7e6; color: #d46b08; }
.co-nodeliver { margin-top: 4px; padding: 3px 6px; border-radius: 4px; background: #fff1f0; color: #f5222d; font-size: 11px; line-height: 1.4; }
/* ===== 优惠券：结算选券 / 我的优惠券 ===== */
.co-cp-row { width: 100%; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.co-cp-row:disabled { cursor: default; }
.co-cp-row > span { margin-right: auto; }
.co-cp-row b.co-cp-n { color: #ee0a24; font-size: 12px; }
.co-cp-arr { font-style: normal; color: #bbb; font-size: 16px; margin-left: -4px; }
.co-cp-note { margin: -6px 0 4px; text-align: right; font-size: 11px; color: #fa8c16; }
.mc-card { position: relative; display: flex; min-height: 92px; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.mc-l { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(135deg, #ff5a4e, #ee0a24); color: #fff; }
.mc-val b { font-size: 26px; font-weight: 800; line-height: 1; }
.mc-val small { font-size: 12px; margin: 0 1px; }
.mc-th { font-size: 11px; opacity: .9; }
.mc-r { position: relative; flex: 1; min-width: 0; padding: 10px 76px 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.mc-name { font-size: 14px; font-weight: 700; color: #1c1916; }
.mc-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: #999; }
.mc-scope { padding: 0 5px; border-radius: 3px; background: #fff1f0; color: #ee0a24; }
.mc-valid { font-size: 11px; color: #999; }
.mc-save { font-size: 12px; color: #666; }
.mc-save b { color: #ee0a24; }
.mc-why { font-size: 11px; color: #fa8c16; }
.mc-use { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 26px; padding: 0 12px; border: 0; border-radius: 13px; background: #ee0a24; color: #fff; font-size: 12px; cursor: pointer; }
.mc-tag { position: absolute; right: 10px; top: 8px; padding: 0 5px; border-radius: 3px; background: #fff7e6; color: #fa8c16; font-size: 10px; font-style: normal; line-height: 16px; }
.mc-tag.wait { top: 50%; transform: translateY(-50%); background: #f2f2f2; color: #999; font-size: 12px; line-height: 22px; padding: 0 8px; }
.mc-used-at { font-size: 11px; color: #999; }
.mc-l { position: relative; }
.mc-cnt { position: absolute; left: 0; top: 0; z-index: 1; padding: 0 7px; border-bottom-right-radius: 8px; background: #ffd666; color: #ad2102; font-size: 11px; font-weight: 700; font-style: normal; line-height: 18px; }
.mc-card.is-off .mc-cnt { background: #ececec; color: #999; }
/* 同种券多张的堆叠效果：卡片下方逐层收窄露出 */
.mc-stk { position: relative; margin-bottom: 8px; }
.mc-stk.n3 { margin-bottom: 15px; }
.mc-stk > .mc-card { z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.mc-stk > i { position: absolute; left: 10px; right: 10px; bottom: -8px; height: 24px; z-index: 1; border-radius: 0 0 10px 10px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.mc-stk > i + i { left: 20px; right: 20px; bottom: -15px; z-index: 0; background: #fafafa; box-shadow: 0 2px 5px rgba(0,0,0,.08); }
.mc-stk.is-off > i { background: #f7f7f7; }
.mc-grp.open .mc-stk { margin-bottom: 0; }
.mc-grp.open .mc-stk > i { display: none; }
.mc-pick .mc-stk { margin-bottom: 0; }
.mc-pick:has(.mc-stk) { margin-bottom: 8px; }
.mc-pick:has(.mc-stk.n3) { margin-bottom: 15px; }
.mc-more { align-self: flex-start; padding: 0; border: 0; background: none; color: #ee0a24; font-size: 11px; cursor: pointer; }
.mc-grp { display: flex; flex-direction: column; }
.mc-sub { margin: -6px 8px 0; padding: 12px 12px 6px; border-radius: 0 0 10px 10px; background: #fff8f7; font-size: 11px; color: #666; }
.mc-sub > div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #f3d8d5; }
.mc-sub > div:last-child { border-bottom: 0; }
.mc-save span { display: block; margin-top: 2px; font-size: 10px; color: #999; }
.mc-card.is-off .mc-l { background: #d9d9d9; }
.mc-card.is-off .mc-name { color: #999; }
.mc-card.is-off .mc-scope { background: #f2f2f2; color: #999; }
.mc-card.is-used::after, .mc-card.is-expired::after { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(-18deg); padding: 2px 6px; border: 1.5px solid #ccc; border-radius: 4px; color: #bbb; font-size: 12px; font-weight: 700; }
.mc-card.is-used::after { content: "已使用"; }
.mc-card.is-expired::after { content: "已过期"; }
.mc-sheet-body { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 10px; background: #f5f5f5; margin: 0 -12px; padding: 10px 12px; }
.mc-sheet-tip { font-size: 11px; color: #999; }
.mc-sec-hd { font-size: 13px; font-weight: 700; color: #1c1916; margin-top: 2px; }
.mc-pick { position: relative; display: block; width: 100%; padding: 0; border: 1.5px solid transparent; border-radius: 11px; background: none; text-align: left; font: inherit; cursor: pointer; }
.mc-pick.on { border-color: #ee0a24; }
.mc-pick > .ck { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.mc-none { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; font: inherit; font-size: 13px; color: #333; cursor: pointer; }
/* 会员等级：与小程序浅色体系一致，头部取当前等级色 */
.phone.is-ml .status-bar,
.phone.is-ml .nav-bar { background: var(--ml-hd, #fff); }
.phone.is-ml .page-stack { background: #f5f5f5; }

.ml-page { min-height: 100%; padding-bottom: 28px; background: #f5f5f5; box-sizing: border-box; }
.ml-empty { padding: 60px 0; text-align: center; color: #999; font-size: 13px; }
.ml-top { padding: 8px 0 4px; background: linear-gradient(180deg, var(--hd) 0%, color-mix(in srgb, var(--acc) 8%, #f5f5f5) 70%, #f5f5f5 100%); }

/* 等级卡：取后台配置的等级底色 */
.ml-cards {
  display: flex; gap: 8px; padding: 6px 28px 12px; overflow-x: auto; cursor: grab;
  scroll-snap-type: x mandatory; scroll-padding: 0 28px; overscroll-behavior-x: contain; scrollbar-width: none;
}
.ml-cards::-webkit-scrollbar { display: none; }
.ml-cards:active { cursor: grabbing; }
.ml-lc {
  --ink: color-mix(in srgb, var(--acc) 42%, #2b2116);
  flex: 0 0 100%; height: 164px; scroll-snap-align: start; cursor: pointer; will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.ml-lc-face {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 14px 16px;
  border-radius: 14px; box-sizing: border-box; color: var(--ink); background: var(--bg);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--acc) 75%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ml-lc:active .ml-lc-face { transform: scale(0.98); }
.ml-lc-face::before {
  content: ""; position: absolute; right: -36px; top: -48px; z-index: -1; width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 68%);
}
.ml-lc-face::after {
  content: ""; position: absolute; right: 16px; bottom: -64px; z-index: -1; width: 150px; height: 150px; border-radius: 50%;
  border: 18px solid rgba(255, 255, 255, 0.28);
}
.ml-lc-shine {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 48%, transparent 60%);
  background-size: 260% 100%; animation: mlShine 5s ease-in-out infinite;
}
@keyframes mlShine { 0%, 40% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.ml-lc-wm {
  position: absolute; right: 14px; top: 34px; z-index: -1; font: italic 900 64px/1 "Arial Black", "Segoe UI", sans-serif; letter-spacing: -2px;
  color: rgba(255, 255, 255, 0.45); transform: translateX(calc(var(--d, 0) * 40px));
}
.ml-lc-top { display: flex; align-items: center; gap: 10px; }
.ml-lc-badge {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; color: #fff;
  box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--acc) 80%, transparent), inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.ml-lc-badge svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); }
.ml-lc-top > span { display: flex; flex-direction: column; min-width: 0; }
.ml-lc-top b { font-size: 18px; font-weight: 800; line-height: 1.2; }
.ml-lc-top small { font-size: 11px; font-weight: 600; opacity: 0.6; }
.ml-lc-top em {
  margin-left: auto; align-self: flex-start; padding: 0 8px; border-radius: 10px; font-style: normal; font-size: 11px; line-height: 20px;
  color: #fff; background: color-mix(in srgb, var(--acc) 75%, #3a2a14);
}
.ml-lc-top em.got { color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.ml-lc-top em.lock { color: #fff; background: rgba(0, 0, 0, 0.28); }
.ml-lc-exp { display: flex; align-items: baseline; gap: 4px; margin-top: auto; }
.ml-lc-exp b { font: 700 24px/1 "DIN Alternate", "Segoe UI", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ml-lc-exp small { font-size: 11px; opacity: 0.65; }
.ml-lc-link {
  display: inline-flex; align-items: center; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--ink); opacity: 0.7;
}
.ml-lc-link svg { width: 12px; height: 12px; }
.ml-lc-bar { height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.6); overflow: hidden; }
.ml-lc-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ffb35c, #ff6034); transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ml-lc-tip { display: flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 11px; opacity: 0.85; }
.ml-lc-exp + .ml-lc-tip { margin-top: 8px; }
.ml-lc-tip svg { width: 12px; height: 12px; }
.ml-lc-tip em { font-style: normal; font-weight: 700; color: #e4572e; }
.ml-lc.locked .ml-lc-face { filter: saturate(0.4); }

/* 等级进度轴 */
.ml-steps { position: relative; height: 52px; margin: 6px 44px 0; }
.ml-steps-line { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: rgba(0, 0, 0, 0.08); }
.ml-steps-line i { display: block; width: 0; height: 100%; border-radius: 1px; background: linear-gradient(90deg, #ffb35c, #ff6034); transition: width 1.2s 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.ml-step {
  position: absolute; left: var(--x); top: 0; display: flex; flex-direction: column; align-items: center; width: 72px; margin-left: -36px;
  padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.ml-step i { width: 10px; height: 10px; margin-top: 2px; border-radius: 50%; box-sizing: border-box; border: 2px solid #d9d9d9; background: #fff; transition: transform 0.3s, border-color 0.3s; }
.ml-step.got i { border-color: #ff7a45; }
.ml-step.cur i { background: #ff7a45; box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.2); }
.ml-step b { margin-top: 6px; font-size: 12px; font-weight: 500; color: #999; transition: color 0.3s; }
.ml-step span { font-size: 10px; color: #bbb; }
.ml-step.on i { transform: scale(1.3); }
.ml-step.on b { font-weight: 700; color: #1c1916; }

/* 白卡片：与「我的」页同规格 */
.ml-card { margin: 12px 12px 0; padding: 0 12px 14px; border-radius: 12px; background: #fff; }
.ml-hd { display: flex; align-items: center; gap: 6px; height: 44px; }
.ml-hd b { font-size: 15px; color: #1c1916; }
.ml-hd > span { font-size: 12px; color: #999; }
.ml-hd em { margin-left: auto; font-style: normal; font-size: 12px; color: #e4572e; }
.ml-hd em.lock { color: #999; }
.ml-rights { overflow: hidden; transition: height 0.36s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ml-rights .ml-hd, .ml-rights .ml-rgrid { transition: opacity 0.14s ease, transform 0.14s ease; }
.ml-rights.is-out .ml-hd, .ml-rights.is-out .ml-rgrid { opacity: 0; transform: translateY(6px); }
.ml-rgrid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
.ml-rt {
  display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 2px; border: 0; background: none; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
  animation: mlIn 0.45s backwards cubic-bezier(0.2, 0.8, 0.2, 1); animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes mlIn { from { opacity: 0; transform: translateY(8px); } }
.ml-rt:active { transform: scale(0.92); }
.ml-rt i {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: color-mix(in srgb, var(--acc) 70%, #6b4410);
  background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 14%, #fff), color-mix(in srgb, var(--acc) 30%, #fff));
}
.ml-rt i svg { width: 22px; height: 22px; }
.ml-rt b { margin-top: 6px; font-size: 12px; font-weight: 500; color: #333; }
.ml-rt span { max-width: 100%; margin-top: 2px; font-size: 10px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-rt-lock {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  color: #fff; background: #bbb; box-shadow: 0 0 0 2px #fff; text-decoration: none;
}
.ml-rt-lock svg { width: 10px !important; height: 10px !important; }
.ml-rgrid.is-lock .ml-rt i { color: #aaa; background: #f3f3f3; }
.ml-rgrid.is-lock .ml-rt b { color: #999; }

/* 付费会员：沿用「我的」页黑金条 */
.ml-plus { width: calc(100% - 24px); margin: 12px 12px 0; padding: 12px; gap: 10px; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ml-plus:active { transform: scale(0.98); }
.ml-plus-ic {
  display: grid !important; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  color: #6b4410 !important; background: linear-gradient(135deg, #f7e1b5, #e8bf79);
}
.ml-plus-ic svg { width: 17px; height: 17px; }
.ml-plus-main { display: flex !important; flex-direction: column; align-items: flex-start !important; flex: 1; min-width: 0; white-space: normal !important; }
.ml-plus-main small { margin-top: 2px; font-size: 11px; color: rgba(243, 217, 164, 0.7); }

/* 做任务赚成长值 */
.ml-earn { padding-bottom: 4px; }
.ml-tasks { display: flex; flex-direction: column; }
.ml-task { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.ml-task + .ml-task { border-top: 1px solid #f2f2f2; }
.ml-task:first-child { padding-top: 2px; }
.ml-task > i { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; color: #ff5a2c; background: #fff2ec; }
.ml-task > i svg { width: 20px; height: 20px; }
.ml-task > div { flex: 1; min-width: 0; }
.ml-task b { display: block; font-size: 14px; font-weight: 500; color: #333; }
.ml-task span { display: block; margin-top: 3px; font-size: 11px; color: #999; }
.ml-task span em { font-style: normal; font-weight: 700; color: #e4572e; }
.ml-task button {
  flex-shrink: 0; padding: 0 14px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 26px;
  color: #fff; background: linear-gradient(90deg, #ff6034, #ee0a24); transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ml-task button:active { transform: scale(0.92); }

/* 等级规则：折叠 */
.ml-rule { margin: 8px 12px 0; font-size: 11px; line-height: 1.8; color: #999; }
.ml-rule-hd {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: #999; -webkit-tap-highlight-color: transparent;
}
.ml-rule-hd i {
  width: 6px; height: 6px; margin-top: -3px; border-right: 1.2px solid #bbb; border-bottom: 1.2px solid #bbb;
  transform: rotate(45deg); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.35s;
}
.ml-rule.open .ml-rule-hd i { transform: rotate(225deg); margin-top: 3px; }
.ml-rule-bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ml-rule-bd > div { overflow: hidden; padding: 0 4px; opacity: 0; transition: opacity 0.3s; }
.ml-rule.open .ml-rule-bd { grid-template-rows: 1fr; }
.ml-rule.open .ml-rule-bd > div { opacity: 1; transition-delay: 0.08s; }
.ml-rule p { margin: 0; }

/* 进场编排 */
@keyframes mlUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes mlCardsIn { from { opacity: 0; transform: translateX(60px); } }
@keyframes mlFade { from { opacity: 0; } }
.ml-enter .ml-cards { animation: mlCardsIn 0.75s backwards cubic-bezier(0.16, 1, 0.3, 1); }
.ml-enter .ml-steps { animation: mlFade 0.5s 0.2s backwards; }
.ml-enter .ml-rights { animation: mlUp 0.55s 0.22s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.ml-enter .ml-rights .ml-rt { animation-delay: calc(0.32s + var(--i, 0) * 40ms); }
.ml-enter .ml-plus { animation: mlUp 0.55s 0.3s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.ml-enter .ml-earn { animation: mlUp 0.55s 0.38s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.ml-enter .ml-rule { animation: mlFade 0.5s 0.48s backwards; }

/* 权益详情：沿用全站半屏样式，补进出动画 */
.ml-mask.open { animation: mlFade 0.25s; }
.ml-mask.open .ml-sheet { animation: mlSheetUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.ml-mask.closing { animation: mlFadeOut 0.22s forwards; }
.ml-mask.closing .ml-sheet { animation: mlSheetDown 0.22s forwards cubic-bezier(0.4, 0, 1, 1); }
@keyframes mlSheetUp { from { transform: translateY(100%); } }
@keyframes mlSheetDown { to { transform: translateY(100%); } }
@keyframes mlFadeOut { to { opacity: 0; } }
.ml-sh-body { overflow-y: auto; padding: 4px 4px 0; }
.ml-sh-hd { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 12%, #fff), color-mix(in srgb, var(--acc) 24%, #fff)); }
.ml-sh-hd > i {
  display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; color: color-mix(in srgb, var(--acc) 70%, #6b4410); background: #fff;
  animation: mlPop 0.45s 0.08s backwards cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mlPop { from { opacity: 0; transform: scale(0.6); } }
.ml-sh-hd > i svg { width: 26px; height: 26px; }
.ml-sh-hd > div { flex: 1; min-width: 0; }
.ml-sh-hd b { display: block; font-size: 16px; color: #1c1916; }
.ml-sh-hd p { margin: 3px 0 0; font-size: 12px; color: #666; }
.ml-sh-hd em { flex-shrink: 0; padding: 0 8px; border-radius: 10px; font-style: normal; font-size: 11px; line-height: 20px; color: #fff; background: #ff7a45; }
.ml-sh-hd em.lock { background: #bbb; }
.ml-sh-sec { margin-top: 16px; }
.ml-sh-sec h4 { margin: 0 0 6px; font-size: 13px; color: #333; }
.ml-sh-sec p { margin: 0; font-size: 12px; line-height: 1.7; color: #666; }
.ml-sh-cmp { margin: 0; padding: 0; list-style: none; border: 1px solid #f0f0f0; border-radius: 10px; overflow: hidden; }
.ml-sh-cmp li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13px; }
.ml-sh-cmp li + li { border-top: 1px solid #f5f5f5; }
.ml-sh-cmp li span { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: #333; }
.ml-sh-cmp li span i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
.ml-sh-cmp li span small { padding: 0 5px; border-radius: 8px; font-size: 10px; line-height: 16px; color: #e4572e; background: #fff1e8; }
.ml-sh-cmp li b { min-width: 0; text-align: right; font-weight: 500; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-sh-cmp li.on { background: #fff8f3; }
.ml-sh-cmp li.on b { font-weight: 700; color: #e4572e; }
.ml-sh-cmp li.lock span, .ml-sh-cmp li.lock b { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .ml-page *, .ml-mask, .ml-mask * { animation: none !important; transition: none !important; }
}

#page-coupon {
  background: #f5f5f5;
  padding-bottom: 0;
}
#page-coupon.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mc-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
.mc-tabs {
  flex-shrink: 0;
  z-index: 2;
  display: flex;
  background: #fff;
}
.mc-tabs button { flex: 1; height: 44px; border: 0; background: none; font-size: 14px; color: #666; cursor: pointer; position: relative; }
.mc-tabs button.on { color: #1c1916; font-weight: 700; }
.mc-tabs button.on::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 20px; height: 3px; margin-left: -10px; border-radius: 2px; background: #ee0a24; }
.mc-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mc-empty { padding: 60px 0; text-align: center; color: #bbb; font-size: 13px; }
.mc-empty svg { width: 48px; height: 48px; }
.mc-foot {
  flex-shrink: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  box-shadow: 0 -1px 0 #f0f0f0;
}
.odd-fee span small { margin-left: 6px; color: #999; }
.odd-cp-ret em { color: #fa8c16; }.mc-sheet-body > *, .mc-list > * { flex-shrink: 0; }
.as-ret-addr { padding: 10px 12px; border-radius: 8px; background: #f7f7f7; font-size: 12px; color: #666; line-height: 1.6; }
.as-ret-addr b { display: block; font-size: 13px; color: #1c1916; }
.as-ret-addr b span { margin-left: 8px; font-weight: 400; color: #666; }
.as-ret-addr p { margin: 0; }

/* ===== 我的 · 收货地址（列表 + 新增/编辑） ===== */
#page-address, #page-addrEdit { background: #f5f5f5; padding-bottom: 0; }
#page-address.active, #page-addrEdit.active { display: flex; flex-direction: column; }
.ad-list, .ad-form { flex: 1; padding: 10px 12px; }
.ad-card { background: #fff; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.ad-main { padding: 12px 14px 10px; }
.ad-card.pick .ad-main { cursor: pointer; }
.ad-card.pick .ad-main:active { background: #fafafa; }
.ad-who { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ad-who span { color: #333; font-size: 14px; }
.ad-who em { font-style: normal; font-size: 11px; padding: 0 5px; line-height: 16px; border-radius: 3px; color: var(--accent); border: 1px solid rgba(196, 92, 38, 0.4); }
.ad-who em.ad-def { background: var(--accent); color: #fff; border-color: var(--accent); }
.ad-main p { margin: 6px 0 0; font-size: 13px; color: #666; line-height: 1.5; }
.ad-ops { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid #f0f0f0; font-size: 12px; }
.ad-ops button { border: 0; background: none; color: #666; font-size: 12px; padding: 2px 0 2px 14px; cursor: pointer; }
.ad-set { display: inline-flex; align-items: center; gap: 6px; padding-left: 0 !important; }
.ad-set i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #ccc; box-sizing: border-box; }
.ad-set.on { color: var(--accent) !important; }
.ad-set.on i { border: 4px solid var(--accent); }
.ad-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 60px 0; }
.ad-bar { position: sticky; bottom: 0; padding: 8px 12px 12px; background: #f5f5f5; }
.ad-fm { background: #fff; border-radius: 10px; padding: 0 14px; }
.ad-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f2f2f2; font-size: 14px; }
.ad-row:last-child { border-bottom: 0; }
.ad-row > span { width: 64px; flex-shrink: 0; color: #333; line-height: 22px; }
.ad-row input, .ad-row textarea { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; line-height: 22px; padding: 0; resize: none; background: none; }
.ad-pick { font-family: inherit; font-size: 14px; -webkit-tap-highlight-color: transparent; }
.ad-pick b { flex: 1; min-width: 0; font-weight: 400; line-height: 22px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pick b.ph { color: #aaa; }
.ad-pick svg { flex-shrink: 0; width: 16px; height: 16px; color: #bbb; }
.ad-pick:active { background: #fafafa; }

/* 所在地区：半屏逐级选择 */
.ar-sheet { height: 66%; padding-bottom: 0; }
.ar-tabs { position: relative; display: flex; flex-shrink: 0; gap: 4px; margin: 0 -12px; padding: 0 4px; border-bottom: 1px solid #f2f2f2; overflow-x: auto; scrollbar-width: none; }
.ar-tabs button {
  flex-shrink: 0; max-width: 40%; padding: 8px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 20px;
  color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s;
}
.ar-tabs button.on { font-weight: 600; color: #ff5a2c; }
.ar-tabs button.ph { color: #ff5a2c; }
.ar-ink {
  position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #ff6034, #ee0a24);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ar-list { flex: 1; min-height: 0; margin: 0 -12px; padding: 4px 0 16px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.ar-list button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 16px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 44px; color: #333; text-align: left; -webkit-tap-highlight-color: transparent;
}
.ar-list button:active { background: #f7f7f7; }
.ar-list button.on { font-weight: 600; color: #ff5a2c; }
.ar-list button svg { width: 16px; height: 16px; }
.ar-list.ar-next { animation: arNext 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ar-list.ar-prev { animation: arPrev 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes arNext { from { opacity: 0; transform: translateX(24px); } }
@keyframes arPrev { from { opacity: 0; transform: translateX(-24px); } }
.ad-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-tags button { border: 1px solid #ddd; background: #fff; border-radius: 12px; padding: 2px 12px; font-size: 12px; color: #555; cursor: pointer; }
.ad-tags button.on { border-color: var(--accent); color: var(--accent); background: rgba(196, 92, 38, 0.06); }
/* 居中确认框（对齐 wx.showModal） */
.cf-mask { z-index: 30; align-items: center; animation: mlFade 0.2s; }
.cf-mask.closing { animation: mlFadeOut 0.16s forwards; }
.cf-box {
  position: relative; width: 80%; max-width: 300px; overflow: hidden; border-radius: 12px; background: #fff; text-align: center;
  animation: cfIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cf-mask.closing .cf-box { animation: cfOut 0.16s forwards; }
@keyframes cfIn { from { opacity: 0; transform: scale(0.9); } }
@keyframes cfOut { to { opacity: 0; transform: scale(0.95); } }
.cf-box b { display: block; padding: 24px 20px 0; font-size: 16px; color: #1c1916; }
.cf-box p { margin: 0; padding: 10px 20px 22px; font-size: 14px; line-height: 1.6; color: #666; }
.cf-box b + p { padding-top: 8px; }
.cf-ops { display: flex; border-top: 1px solid #eee; }
.cf-ops button { flex: 1; height: 48px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 16px; color: #333; }
.cf-ops button + button { border-left: 1px solid #eee; font-weight: 600; color: #ff5a2c; }
.cf-ops button.danger { color: #e5484d; }
.cf-ops button:active { background: #f5f5f5; }
.ad-tags .ad-tag-add { border-style: dashed; color: #999; }
.ad-tag-in { display: inline-flex; align-items: center; height: 22px; border: 1px solid var(--accent); border-radius: 12px; overflow: hidden; }
.ad-tag-in input { flex: none; width: 76px; padding: 0 8px !important; font-size: 12px !important; line-height: 20px !important; }
.ad-tags .ad-tag-in button { height: 100%; padding: 0 10px; border: 0; border-left: 1px solid var(--accent); border-radius: 0; color: #fff; background: var(--accent); }
button.ad-row { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; align-items: center; }
.ad-defsw > span { width: auto !important; flex: 1; }
.ad-defsw .sw { width: 40px; height: 22px; border-radius: 11px; background: #ddd; position: relative; transition: background .2s; }
.ad-defsw .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.ad-defsw .sw.on { background: var(--accent); }
.ad-defsw .sw.on::after { left: 20px; }
.ad-del { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 10px; background: #fff; color: #e5484d; font-size: 14px; cursor: pointer; }
/* ===== 发表评价 ===== */
#page-review { background: #f5f5f5; padding-bottom: 0; }
#page-review.active { display: flex; flex-direction: column; }
.rv-form { flex: 1; padding: 10px 12px; }
.rv-card { background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.rv-goods { display: flex; gap: 10px; align-items: center; }
.rv-goods i { width: 48px; height: 48px; border-radius: 6px; flex-shrink: 0; background-size: cover; }
.rv-goods b { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; }
.rv-goods span { font-size: 12px; color: var(--muted); }
.rv-score { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: 13px; }
.rv-stars { display: flex; gap: 4px; }
.rv-stars button { border: 0; background: none; padding: 0; font-size: 22px; line-height: 1; color: #ddd; cursor: pointer; }
.rv-stars button.on { color: #faad14; }
.rv-score em { font-style: normal; color: var(--muted); font-size: 12px; }
.rv-text { width: 100%; box-sizing: border-box; min-height: 84px; border: 0; border-radius: 6px; background: #f7f7f7; padding: 8px 10px; font: inherit; font-size: 13px; resize: none; outline: 0; }
.rv-tip { font-size: 12px; color: var(--muted); text-align: center; margin: 4px 0 0; }
.dt-stars s { text-decoration: none; color: #ddd; }
.dt-rv-reply { margin: 6px 0 0; padding: 6px 8px; background: #f7f7f7; border-radius: 4px; font-size: 12px; color: #666; line-height: 1.5; }
.dt-rv-reply b { color: #333; font-weight: 500; }
/* ===== 我的 · 二级页：领券中心 / 我的积分 / 浏览记录 / 关注店铺 ===== */
#page-couponCenter, #page-points, #page-history, #page-follows { background: #f5f5f5; }
.cp-plat {
  display: inline-block; margin-right: 4px; padding: 0 4px; border-radius: 3px; vertical-align: 1px;
  font-style: normal; font-size: 10px; font-weight: 700; line-height: 15px; color: #fff; background: linear-gradient(90deg, #ff7a45, #ee0a24);
}
.mp-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 24px 40px; text-align: center; color: #bbb; }
.mp-empty svg { width: 52px; height: 52px; }
.mp-empty p { margin: 12px 0 4px; font-size: 14px; color: #666; }
.mp-empty span { font-size: 12px; color: #aaa; }
.mp-empty .btn { margin-top: 18px; padding: 0 28px; height: 34px; border-radius: 17px; font-size: 13px; }

/* 领券中心 */
.cc-page { min-height: 100%; padding-bottom: 16px; }
.cc-hero { margin: 12px 12px 0; }
button.ss-cp-hero-stat { border: 0; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.cc-tabs { margin-top: 10px; }
.cc-tabs em { margin-left: 4px; padding: 0 5px; border-radius: 8px; font-style: normal; font-size: 10px; line-height: 16px; color: #fff; background: #ee0a24; vertical-align: 1px; }
.cc-body { padding: 0 12px; }
.cc-shop + .cc-shop { margin-top: 16px; }
.cc-shop-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-shop-hd b { flex: 1; min-width: 0; font-size: 14px; color: #1c1916; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-shop-hd button { display: inline-flex; align-items: center; border: 0; background: none; font-size: 12px; color: #999; cursor: pointer; }
.cc-shop-hd .ic-arr { width: 12px; height: 12px; }
.cc-logo { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }

/* 会员码 */
#page-memberCode { background: linear-gradient(180deg, #2b2f3a 0, #2b2f3a 180px, #f5f5f5 180px); }
.mcode-page { padding: 14px 14px 28px; }
.mcode-card { padding: 16px 16px 14px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.mcode-hd { display: flex; align-items: center; gap: 10px; text-align: left; }
.mcode-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #f0f0f0; color: #bbb; }
.mcode-av img { width: 100%; height: 100%; object-fit: cover; }
.mcode-av .ic { width: 22px; height: 22px; }
.mcode-hd b { display: block; font-size: 15px; color: #1f2329; }
.mcode-hd span { display: flex; gap: 6px; margin-top: 3px; }
.mcode-hd em { padding: 1px 6px; border-radius: 4px; font-style: normal; font-size: 11px; }
.mcode-lv { background: #fff4e5; color: #b26a00; }
.mcode-vip { background: #2b2f3a; color: #f5d08a; }
.mcode-qr { width: 200px; height: 200px; margin: 16px auto 8px; }
.mcode-qr svg { display: block; width: 100%; height: 100%; }
.mcode-code { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #1f2329; font-variant-numeric: tabular-nums; }
.mcode-left { margin: 6px 0 0; font-size: 12px; color: #999; }
.mcode-left button { padding: 0; border: 0; background: none; color: #ff5a2c; font-size: 12px; }
.mcode-tip { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed #eee; font-size: 11px; color: #bbb; }
.mcode-sec { display: flex; align-items: baseline; gap: 6px; margin: 18px 2px 8px; font-size: 15px; font-weight: 700; color: #1f2329; }
.mcode-sec small { font-size: 11px; font-weight: 400; color: #999; }
.mcode-list { border-radius: 12px; background: #fff; overflow: hidden; }
.mcode-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid #f3f3f3; }
.mcode-item:last-child { border-bottom: 0; }
.mcode-item > i { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #eef4ff; color: #2f6fed; }
.mcode-item > i svg { width: 20px; height: 20px; }
.mcode-item > div { flex: 1; min-width: 0; }
.mcode-item b { font-size: 14px; color: #1f2329; }
.mcode-item p { margin: 2px 0 0; font-size: 12px; color: #666; }
.mcode-item small { display: block; margin-top: 2px; font-size: 11px; color: #999; }
.mcode-item > span { flex-shrink: 0; font-size: 11px; color: #999; text-align: right; }
.mcode-item > span em { margin: 0 1px 0 3px; font-style: normal; font-size: 16px; font-weight: 700; color: #ff5a2c; }
.mcode-item.out { opacity: 0.55; }
.mcode-item.out > span em { color: #999; }
.mcode-empty { padding: 28px 12px; border-radius: 12px; background: #fff; text-align: center; font-size: 13px; color: #999; }
.mcode-empty button { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; padding: 0; border: 0; background: none; color: #ff5a2c; font-size: 13px; }
.mcode-empty .ic-arr { width: 12px; height: 12px; }

/* 我的积分 + 签到 */
.pt-page { padding: 12px; }
.pt-head {
  position: relative; padding: 18px 16px 16px; border-radius: 14px; color: #fff;
  background: radial-gradient(circle at 90% -20%, rgba(255, 255, 255, 0.3), transparent 50%), linear-gradient(120deg, #ff8a3d, #ff5a2c);
}
.pt-head > span { font-size: 12px; opacity: 0.9; }
.pt-head > b { display: block; margin-top: 2px; font-size: 32px; font-weight: 800; letter-spacing: 0.5px; }
.pt-head p { margin: 4px 0 0; font-size: 11px; opacity: 0.85; }
.pt-mall {
  position: absolute; right: 12px; top: 16px; display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px 4px 10px;
  border: 0; border-radius: 14px; font-size: 12px; color: #fff; background: rgba(255, 255, 255, 0.22); cursor: pointer;
}
.pt-mall .ic-arr { width: 12px; height: 12px; }
/* 积分商城 */
#page-pointsMall { background: #f5f5f5; padding-bottom: 0; }
.pm-page { min-height: 100%; padding: 0 0 20px; }
/* 积分详情已复用 #page-detail，底栏与沉浸顶栏走商城同一套 */
#page-pointsMall #pmSwiper {
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.pm-hero-block.ss-cp-hero { margin: 12px 12px 0; }
.ss-cp-hero.pm-hero-block::after { content: "兑"; pointer-events: none; }
.pm-hero-ord {
  position: absolute; right: 14px; top: 14px; z-index: 2; border: 0; padding: 4px 10px; border-radius: 12px;
  font-size: 12px; color: #fff; background: rgba(255,255,255,.2); cursor: pointer;
}
.pm-hero-ord em {
  display: inline-block; margin-left: 4px; min-width: 16px; padding: 0 4px; border-radius: 8px;
  font-style: normal; font-size: 10px; line-height: 16px; background: #fff; color: #ee0a24; font-weight: 700; text-align: center;
}
/* 工具栏：左分类横滑 + 右范围切换固定 */
.pm-toolbar {
  display: flex; align-items: stretch; gap: 0;
  margin: 8px 12px 6px; padding: 0;
  background: #fff; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(28, 25, 22, 0.04);
  overflow: hidden;
}
.pm-cats-wrap {
  position: relative; flex: 1 1 0%; min-width: 0; max-width: 100%;
  overflow: hidden;
}
.pm-cats-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%);
  pointer-events: none; z-index: 1;
}
.pm-cats {
  display: flex; align-items: center; gap: 2px;
  width: 100%; height: 44px; padding: 0 18px 0 8px; box-sizing: border-box;
  margin: 0; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; touch-action: pan-x;
  overscroll-behavior-x: contain; scrollbar-width: none; flex-wrap: nowrap;
  cursor: grab;
}
.pm-cats:active { cursor: grabbing; }
.pm-cats::-webkit-scrollbar { display: none; }
.pm-cats button {
  position: relative; flex: 0 0 auto;
  height: 44px; padding: 0 12px; border: 0; border-radius: 0;
  font-size: 14px; color: #8a857e; background: transparent; cursor: inherit;
  white-space: nowrap; transition: color .15s ease;
  -webkit-user-select: none; user-select: none;
}
.pm-cats button.on {
  color: #1c1916; font-weight: 700; background: transparent;
}
.pm-cats button.on::after {
  content: ""; position: absolute; left: 50%; bottom: 7px;
  width: 16px; height: 3px; margin-left: -8px; border-radius: 2px;
  background: linear-gradient(90deg, #ff6a3d, #ee0a24);
}
.pm-filter {
  display: flex; align-items: center; flex-shrink: 0;
  gap: 2px; padding: 6px 8px 6px 4px;
  border-left: 1px solid #f0eeea;
  background: #fff;
}
.pm-filter button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; width: 40px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  color: #9a958e; background: transparent; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.pm-filter button svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.pm-filter button span {
  font-size: 9px; line-height: 1; letter-spacing: 0.02em;
}
.pm-filter button.on {
  color: #ee0a24; background: #fff1f0; font-weight: 600;
}
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
.pm-card {
  display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 12px;
  background: #fff; text-align: left; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pm-card-pic { position: relative; height: 118px; }
.pm-card-sold {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,.38);
}
.pm-card-bd { padding: 10px 10px 12px; }
.pm-card-bd > b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 36px; font-size: 13px; font-weight: 600; color: #1c1916; line-height: 1.35;
}
.pm-card-pts { margin-top: 6px; color: #ee0a24; }
.pm-card-pts strong { font-size: 18px; font-weight: 800; font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif; }
.pm-card-pts span { margin-left: 2px; font-size: 11px; }
.pm-card-ft { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 6px; }
.pm-card-ft span { font-size: 10px; color: #aaa; }
.pm-card-ft em { font-style: normal; font-size: 10px; color: #999; }
.pm-card-ft em.ok { color: #07c160; font-weight: 600; }
.pm-card.sold .pm-card-bd { opacity: 0.7; }
.pm-foot-note { margin: 14px 16px 0; font-size: 11px; line-height: 1.5; color: #bbb; text-align: center; }

/* 积分兑换订单：复用商城 od-card 结构，单品名区略放宽 */
.pm-od .od-one { flex: 1; max-width: none; min-width: 0; }
.pm-od .od-sum b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-log {
  position: relative; display: flex; gap: 10px; padding: 0 0 14px 2px;
  font-size: 13px; color: #888;
}
.pm-log:last-child { padding-bottom: 0; }
.pm-log i {
  flex-shrink: 0; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%;
  background: #ddd; box-shadow: 0 0 0 3px #f5f5f5;
}
.pm-log.on { color: #1c1916; }
.pm-log.on i { background: #ee0a24; }
.pm-log b { display: block; font-weight: 500; line-height: 1.4; }
.pm-log span { display: block; margin-top: 2px; font-size: 11px; color: #aaa; }
.pm-log + .pm-log::before {
  content: ""; position: absolute; left: 5px; top: -12px; width: 1px; height: 14px; background: #eee;
}

/* 兑换详情 */
.pm-dt { padding-bottom: 0; }
.pm-dt-hero { position: relative; height: 220px; }
.pm-dt-hero .pm-sold {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  font-style: normal; font-weight: 700; font-size: 16px; color: #fff; background: rgba(0,0,0,.4);
}
.pm-dt-price {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: 12px 14px; color: #fff;
  background: linear-gradient(105deg, #ff6a3d 0%, #ee0a24 55%, #d4001c 100%);
}
.pm-dt-pts b { font-size: 30px; font-weight: 800; font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif; line-height: 1; }
.pm-dt-pts span { margin-left: 4px; font-size: 12px; opacity: .9; }
.pm-dt-sales { font-size: 11px; opacity: .85; padding-bottom: 4px; }
.pm-dt-card { margin: 10px 12px 0; padding: 14px; border-radius: 12px; background: #fff; }
.pm-dt-card h3 { margin: 0; font-size: 17px; color: #1c1916; line-height: 1.4; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pm-tags i {
  padding: 2px 8px; border-radius: 4px; font-style: normal; font-size: 11px;
  color: #ee0a24; background: #ffeceb;
}
.pm-dt-desc { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #666; }
.pm-dt-addr { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pm-dt-addr-bd { flex: 1; min-width: 0; }
.pm-dt-addr-bd b { display: block; font-size: 14px; color: #1c1916; }
.pm-dt-addr-bd span { display: block; margin-top: 4px; font-size: 12px; color: #888; line-height: 1.45; }
.pm-dt-addr em { color: #ccc; }
.pm-dt-addr .ic-arr { width: 14px; height: 14px; }
.pm-dt-note b { display: block; font-size: 14px; color: #1c1916; }
.pm-dt-note span { display: block; margin-top: 4px; font-size: 12px; color: #888; line-height: 1.5; }
.pm-sku-lab { display: block; font-size: 14px; color: #333; margin-bottom: 10px; }
.pm-skus { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-sku {
  position: relative; max-width: 100%; padding: 7px 12px; border: 0.5px solid #e5e5e5; border-radius: 6px;
  background: #fff; font-size: 13px; color: #333; cursor: pointer;
}
.pm-sku.on { border-color: #ee0a24; color: #ee0a24; background: #fff5f4; }
.pm-sku.off, .pm-sku:disabled { color: #ccc; background: #f7f7f7; cursor: default; }
.pm-sku small { margin-left: 4px; font-size: 10px; color: #bbb; }
.pm-sku .pm-sku-pts { display: block; margin: 2px 0 0; margin-left: 0; color: #ee0a24; font-weight: 600; }
.pm-dt-rule { margin: 10px 12px 0; padding: 12px 14px; }
.pm-dt-rule b { font-size: 13px; color: #333; }
.pm-dt-rule p { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: #999; }
.pm-bar {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px; height: 58px; margin-top: 12px; padding: 0 12px;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
/* 积分详情：复用商城 dt-*，底栏展示可用/本单积分 */
.pm-dt-wrap { padding-bottom: 0; background: #f4f4f6; min-height: 100%; }
.pm-dt-wrap .dt-price.pm-dt-price-inline { display: inline-flex; align-items: baseline; gap: 4px; }
.pm-dt-wrap .dt-price.pm-dt-price-inline b {
  font-size: 30px; font-weight: 800; font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif; color: #fff;
}
.pm-dt-wrap .dt-price.pm-dt-price-inline small { font-size: 13px; color: rgba(255,255,255,.92); }
.cs-pts-ico {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #ff8a3d, #ee0a24);
  -webkit-mask: none;
  position: relative;
}
.cs-pts-ico::after {
  content: "积"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff;
}
.pm-bar-bal { flex: 1; min-width: 0; }
.pm-bar-bal span { font-size: 11px; color: #999; }
.pm-bar-bal b { display: inline; margin-left: 4px; font-size: 18px; font-weight: 800; color: #1c1916; }
.pm-bar-bal small { display: block; margin-top: 1px; font-size: 11px; color: #999; }
.pm-bar-bal small em { font-style: normal; font-weight: 700; color: #ee0a24; }
.pm-bar-btn {
  flex-shrink: 0; min-width: 128px; height: 40px; padding: 0 18px; border: 0; border-radius: 20px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #ff6034, #ee0a24); box-shadow: 0 4px 10px rgba(238,10,36,.22); cursor: pointer;
}
.pm-bar-btn.off, .pm-bar-btn:disabled { background: #c8c9cc; box-shadow: none; cursor: default; }

/* 兑换成功 / 我的兑换 */
.pm-ok { padding: 28px 20px 24px; text-align: center; }
.pm-ok-ico {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px;
  border-radius: 50%; color: #07c160; background: #e8f8ef;
}
.pm-ok-ico .ic { width: 36px; height: 36px; }
.pm-ok > b { display: block; font-size: 20px; color: #1c1916; }
.pm-ok > p { margin: 8px 0 0; font-size: 13px; color: #666; }
.pm-ok > p em { font-style: normal; font-weight: 700; color: #ee0a24; }
.pm-ok-card {
  display: flex; gap: 12px; align-items: center; margin: 20px 0 0; padding: 12px;
  border-radius: 12px; background: #fff; text-align: left;
}
.pm-ok-card > i { flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; }
.pm-ok-card b { display: block; font-size: 14px; color: #1c1916; }
.pm-ok-card span { display: block; margin-top: 4px; font-size: 12px; color: #999; }
.pm-ok-card em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 700; color: #ee0a24; }
.pm-ok-tip { margin: 14px 8px 0; font-size: 12px; line-height: 1.55; color: #999; }
.pm-ok-ops { display: flex; gap: 10px; margin-top: 22px; }
.pm-btn {
  flex: 1; height: 40px; border: 0; border-radius: 20px; font-size: 14px; font-weight: 600;
  color: #fff; background: linear-gradient(90deg, #ff6034, #ee0a24); cursor: pointer;
}
.pm-btn.ghost { color: #333; background: #fff; box-shadow: inset 0 0 0 0.5px #ddd; }
.pm-orders { padding: 12px; }
.pm-ord-tabs { margin: 0 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
.pm-ord-tabs::-webkit-scrollbar { display: none; }
.pm-ord-tabs button { flex-shrink: 0; position: relative; }
.pm-ord-tabs button em {
  display: inline-block; margin-left: 4px; min-width: 14px; padding: 0 4px; border-radius: 7px;
  font-style: normal; font-size: 10px; line-height: 14px; background: #ffeceb; color: #ee0a24; font-weight: 700; text-align: center;
}
.pm-ord {
  display: flex; gap: 12px; padding: 12px; margin-bottom: 10px; border-radius: 12px; background: #fff; cursor: pointer;
}
.pm-ord > i { flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; }
.pm-ord > div { flex: 1; min-width: 0; }
.pm-ord-hd { display: flex; align-items: flex-start; gap: 8px; }
.pm-ord-hd b { flex: 1; font-size: 14px; color: #1c1916; line-height: 1.35; }
.pm-ord-hd em { flex-shrink: 0; font-style: normal; font-size: 12px; color: #ee0a24; }
.pm-ord span { display: block; margin-top: 6px; font-size: 12px; color: #999; }
.pm-ord strong { display: block; margin-top: 8px; font-size: 14px; color: #1c1916; }
.pm-ord-no { display: block; margin-top: 4px; font-size: 11px; color: #bbb; }
.pt-card { margin-top: 10px; padding: 14px 12px; border-radius: 12px; background: #fff; }
.pt-sign-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-sign-hd b { display: block; font-size: 15px; color: #1c1916; }
.pt-sign-hd span { font-size: 12px; color: #999; }
.pt-sign-hd em { font-style: normal; font-weight: 700; color: #ff5a2c; }
.pt-sign-hd .btn { flex-shrink: 0; height: 32px; padding: 0 16px; border: 0; border-radius: 16px; font-size: 13px; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff5a2c); box-shadow: 0 4px 10px rgba(255, 90, 44, 0.25); }
.pt-sign-hd .btn.is-done { color: #ff5a2c; background: #fff1e8; box-shadow: none; cursor: default; }
.pt-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.pt-days li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px; border-radius: 8px; background: #f7f7f7; }
.pt-days li b { font-size: 11px; color: #999; }
.pt-days li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #f0b35a; background: #fff; }
.pt-days li i svg { width: 15px; height: 15px; }
.pt-days li span { font-size: 10px; color: #aaa; }
.pt-days li.big i { color: #ff5a2c; }
.pt-days li.today { background: #fff1e8; box-shadow: inset 0 0 0 1px #ffb894; }
.pt-days li.today b, .pt-days li.today span { color: #ff5a2c; font-weight: 600; }
.pt-days li.done { background: linear-gradient(160deg, #ff9a5a, #ff5a2c); }
.pt-days li.done b, .pt-days li.done span { color: #fff; }
.pt-days li.done i { color: #ff5a2c; }
.pt-days li.done i svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pt-rule { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #999; }
.pt-card-hd b { font-size: 15px; color: #1c1916; }
.pt-log { margin: 6px 0 0; padding: 0; list-style: none; }
.pt-log li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; }
.pt-log li + li { border-top: 0.5px solid #f0f0f0; }
.pt-log li div { min-width: 0; }
.pt-log li b { display: block; font-size: 13px; font-weight: 500; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-log li span { font-size: 11px; color: #aaa; }
.pt-log li em { flex-shrink: 0; font-style: normal; font-size: 15px; font-weight: 700; color: #ff5a2c; }
.pt-log li em.minus { color: #333; }

/* 浏览记录 */
.hs-page { display: flex; flex-direction: column; min-height: 100%; }
.hs-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 12px; color: #999; background: #f5f5f5; }
.hs-bar button { border: 0; background: none; font-size: 13px; color: #333; cursor: pointer; }
.hs-body { flex: 1; padding: 0 12px 12px; }
.hs-day + .hs-day { margin-top: 14px; }
.hs-day h4 { margin: 0 0 8px; font-size: 14px; color: #1c1916; }
.hs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hs-item { display: flex; flex-direction: column; min-width: 0; padding: 0 0 8px; border: 0; border-radius: 10px; background: #fff; text-align: left; overflow: hidden; cursor: pointer; }
.hs-pic { position: relative; display: block; aspect-ratio: 1; }
.hs-name { margin: 6px 8px 0; font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-price { margin: 2px 8px 0; font-size: 14px; font-weight: 700; color: #ee0a24; }
.hs-price small { font-size: 10px; }
.hs-item.is-off .hs-pic { filter: grayscale(1); opacity: 0.6; }
.hs-item.is-off .hs-price { color: #bbb; }
.hs-off { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 10px; font-style: normal; font-size: 11px; color: #fff; background: rgba(0, 0, 0, 0.55); white-space: nowrap; }
.hs-ck { display: block; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #ccc; border-radius: 50%; background: #fff; }
.hs-pic .hs-ck { position: absolute; right: 6px; top: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.hs-item.on .hs-ck, .hs-all.on .hs-ck { border-color: #ff5a2c; background: #ff5a2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.hs-item.on { box-shadow: inset 0 0 0 1.5px #ff5a2c; }
.hs-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #fff; box-shadow: 0 -1px 0 #f0f0f0; }
.hs-all { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-size: 13px; color: #333; cursor: pointer; }
.hs-clear { border: 0; background: none; font-size: 13px; color: #999; cursor: pointer; }
.hs-del { margin-left: auto; height: 34px; padding: 0 22px; border: 0; border-radius: 17px; font-size: 13px; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff5a2c); }
.hs-del[disabled] { opacity: 0.45; cursor: default; }

/* 关注店铺 */
.fs-page { padding: 0 12px 16px; }
.fs-sec { padding: 14px 2px 8px; font-size: 13px; color: #999; }
.fs-card { padding: 12px; border-radius: 12px; background: #fff; }
.fs-card + .fs-card { margin-top: 10px; }
.fs-hd { display: flex; align-items: center; gap: 10px; }
.fs-logo { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; font-style: normal; font-size: 18px; font-weight: 800; color: #fff; }
.fs-info { flex: 1; min-width: 0; }
.fs-info b { display: flex; align-items: center; gap: 4px; font-size: 15px; color: #1c1916; white-space: nowrap; overflow: hidden; }
.fs-info span { display: block; margin-top: 3px; font-size: 11px; color: #999; }
.fs-self, .fs-closed { flex-shrink: 0; padding: 0 4px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 600; line-height: 15px; color: #fff; background: #ee0a24; }
.fs-closed { color: #999; background: #f0f0f0; }
.fs-btn { flex-shrink: 0; height: 28px; padding: 0 12px; border: 1px solid #ddd; border-radius: 14px; font-size: 12px; color: #999; background: #fff; cursor: pointer; }
.fs-btn.add { border-color: #ff5a2c; color: #fff; background: #ff5a2c; }
.fs-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.fs-thumb { min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.fs-thumb i { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.fs-thumb span { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #ee0a24; }
.fs-thumb small { font-size: 10px; }
.fs-enter { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; margin-top: 10px; padding: 8px 0 0; border: 0; border-top: 0.5px solid #f0f0f0; background: none; font-size: 12px; color: #666; cursor: pointer; }
.fs-enter .ic-arr { width: 12px; height: 12px; }
.fs-card.is-closed .fs-logo { filter: grayscale(1); opacity: 0.6; }

/* 个人资料 */
.pf-page { padding: 12px 12px 20px; }
.pf-card { border-radius: 12px; background: #fff; overflow: hidden; }
.pf-card + .pf-card { margin-top: 10px; }
.pf-row { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 14px; color: #1c1916; text-align: left; cursor: pointer; }
div.pf-row { cursor: default; }
.pf-row + .pf-row { box-shadow: inset 0 0.5px 0 #f0f0f0; }
.pf-row > span { flex-shrink: 0; width: 72px; color: #333; }
.pf-row > em { flex: 1; min-width: 0; font-style: normal; text-align: right; color: #666; }
.pf-row > em.ph { color: #bbb; }
.pf-row .ic-arr { flex-shrink: 0; width: 14px; height: 14px; color: #c8c8c8; }
.pf-av { display: grid; place-items: center; width: 44px; height: 44px; margin: 10px 0 10px auto; border-radius: 50%; overflow: hidden; background: #ffe9df; }
.pf-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-av .ic { width: 26px; height: 26px; color: #ff5a2c; }
.pf-row input#pfNick { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: #666; text-align: right; }
.pf-row input#pfNick:focus { color: #1c1916; }
.pf-seg { display: flex; gap: 8px; margin-left: auto; }
.pf-seg button { height: 28px; padding: 0 14px; border: 1px solid #e5e5e5; border-radius: 14px; background: #fff; font-size: 12px; color: #666; cursor: pointer; }
.pf-seg button.on { border-color: #ff5a2c; color: #ff5a2c; background: #fff4ef; font-weight: 600; }
.pf-lock { flex-shrink: 0; padding: 0 6px; border-radius: 3px; font-size: 10px; line-height: 16px; color: #999; background: #f5f5f5; }
.pf-link { flex-shrink: 0; font-weight: 400; font-size: 13px; color: #ff5a2c; }
.pf-tip { margin: 12px 4px 0; font-size: 12px; line-height: 1.6; color: #999; }.pf-row > em small.pf-src { margin-left: 6px; padding: 0 4px; border-radius: 3px; font-size: 10px; line-height: 15px; color: #07c160; background: #e8f8ef; }
.pf-rn { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px; font-style: normal; font-size: 11px; line-height: 17px; color: #ff5a2c; background: #fff1eb; }
.pf-rn.on { color: #07c160; background: #e8f8ef; }

/* 我的页 · 实名标注 */
.mn-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mn-nm b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mn-rn { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 0; border: 0; background: none; font-family: inherit; font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, 0.75); cursor: pointer; }
.mn-rn .ic { width: 13px; height: 13px; }
.mn-rn.on { color: #fff; font-weight: 600; }
.pf-sec { padding: 14px 4px 8px; font-size: 13px; color: #999; }
.pf-row > small.pf-src { flex-shrink: 0; padding: 0 4px; border-radius: 3px; font-size: 10px; line-height: 15px; color: #07c160; background: #e8f8ef; }
.pf-row > em .pf-link { margin-left: 8px; }

/* 实名认证 */
.rn-tip { padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.6; color: #b5651d; background: #fff6e8; }
.rn-wx { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: 12px; border: 0; border-radius: 22px; font-size: 15px; font-weight: 600; color: #fff; background: #07c160; cursor: pointer; }
.rn-wx .ic { width: 18px; height: 18px; }
.rn-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: 12px; color: #bbb; }
.rn-or::before, .rn-or::after { content: ""; flex: 1; height: 0.5px; background: #e5e5e5; }
.pf-row input.rn-in { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: #1c1916; }
.rn-agree { display: flex; align-items: center; gap: 6px; margin: 14px 4px; font-size: 12px; color: #999; }
.rn-agree input { accent-color: #ff5a2c; }
.rn-agree a { color: #ff5a2c; cursor: pointer; }
.rn-submit { width: 100%; height: 44px; border: 0; border-radius: 22px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff5a2c); cursor: pointer; }
.rn-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 0 18px; }
.rn-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e8f8ef; }
.rn-badge .ic { width: 32px; height: 32px; color: #07c160; }
.rn-done b { font-size: 17px; color: #1c1916; }
.rn-done span { font-size: 12px; color: #999; }

/* 我的 · 未登录 */
.mn-user[data-action="login"] { cursor: pointer; }
.mn-guest { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.8); }

/* 通用底部弹层（登录 / 订阅消息） */
.mp-sheet-mask { z-index: 31; }
.mp-sheet { position: relative; padding: 20px 18px 22px; }
.lg-x { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; border: 0; background: none; font-size: 24px; line-height: 1; color: #bbb; cursor: pointer; }
.lg-hd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 22px; text-align: center; }
.lg-logo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-style: normal; font-size: 16px; font-weight: 800; letter-spacing: 0.5px; color: #fff; background: linear-gradient(135deg, #ff8a3d, #ff5a2c); }
.lg-logo.sm { width: 22px; height: 22px; border-radius: 50%; font-size: 12px; }
.lg-hd b { margin-top: 6px; font-size: 18px; color: #1c1916; }
.lg-hd p { margin: 0; font-size: 13px; color: #999; }
.lg-wx { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 46px; border: 0; border-radius: 23px; font-size: 16px; font-weight: 600; color: #fff; background: #07c160; cursor: pointer; }
.lg-wx .ic { width: 22px; height: 22px; }
.lg-skip { display: block; width: 100%; height: 40px; margin-top: 6px; border: 0; background: none; font-size: 14px; color: #888; cursor: pointer; }
.lg-agree { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; line-height: 1.5; color: #999; }
.lg-agree input { margin-top: 2px; accent-color: #07c160; }
.lg-agree a { color: #576b95; text-decoration: none; cursor: pointer; }
/* 邀新：首页顶栏 + 邀请成功列表 */
.inv-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 12px 10px; padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7f2, #ffe9df);
  border: 0.5px solid #ffd4c2;
  cursor: pointer;
}
.inv-banner > div { flex: 1; min-width: 0; }
.inv-banner b { display: block; font-size: 14px; color: #1c1916; }
.inv-banner small { display: block; margin-top: 2px; font-size: 12px; color: #999; }
.inv-banner button {
  flex-shrink: 0; height: 30px; padding: 0 12px; border: 0; border-radius: 15px;
  font-size: 13px; font-weight: 600; color: #fff; background: #ff5a2c; cursor: pointer;
}
.inv-list { margin-top: 14px; text-align: left; }
.inv-list-hd { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #666; }
.inv-list ul { margin: 0; padding: 0; list-style: none; max-height: 160px; overflow: auto; border-radius: 10px; background: #f7f7f7; }
.inv-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 0.5px solid #eee; font-size: 13px;
}
.inv-list li:last-child { border-bottom: 0; }
.inv-list li b { font-weight: 600; color: #1c1916; }
.inv-list li span { flex-shrink: 0; font-size: 12px; color: #999; }
.lg-hd p em { font-style: normal; color: #ff5a2c; font-weight: 600; }
.wa-hd { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #333; }
.wa-hd span { color: #999; }
.wa-title { margin: 14px 0 6px; font-size: 18px; font-weight: 700; color: #1c1916; }
.wa-opt { display: flex; align-items: center; padding: 14px 0; border-bottom: 0.5px solid #eee; }
.wa-opt span { flex: 1; font-size: 16px; color: #1c1916; }
.wa-opt small { display: block; margin-top: 2px; font-size: 12px; color: #999; }
.wa-opt .ck.on { border-color: #07c160; background: #07c160; }
.wa-note { margin: 10px 0 22px; font-size: 12px; color: #999; }
.wa-ops { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.wa-ops button { width: 120px; height: 40px; border: 0; border-radius: 6px; font-size: 15px; font-weight: 600; color: #07c160; background: #f2f2f2; cursor: pointer; }
.wa-ops button.on { color: #fff; background: #07c160; }
.sm-tip { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: #999; }
.sm-opt { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 0.5px solid #eee; font-size: 15px; color: #1c1916; }
.sm-opt input, .sm-keep input { accent-color: #07c160; width: 18px; height: 18px; }
.sm-keep { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: #666; }
.odd-subcard.done {
  background: #f2fbf5;
  cursor: default;
}
.odd-subcard.done > .ic { color: #07c160; }
.odd-subcard.done em { display: none; }

/* 设置 */
.st-page { padding: 12px 12px 24px; }
.st-card { border-radius: 12px; background: #fff; overflow: hidden; }
.st-card + .st-card { margin-top: 10px; }
.st-me { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 14px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.st-av { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #ffe9df; }
.st-av img { width: 100%; height: 100%; object-fit: cover; }
.st-av .ic { width: 28px; height: 28px; color: #ff5a2c; }
.st-me > span { flex: 1; min-width: 0; }
.st-me b { display: block; font-size: 16px; color: #1c1916; }
.st-me small { display: block; margin-top: 3px; font-size: 12px; color: #999; }
.st-me .ic-arr, .st-row .ic-arr { width: 14px; height: 14px; color: #c8c8c8; }
.st-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 14px; color: #1c1916; text-align: left; cursor: pointer; }
div.st-row { cursor: default; }
.st-row + .st-row { box-shadow: inset 0 0.5px 0 #f0f0f0; }
.st-row > .ic { width: 20px; height: 20px; color: #ff5a2c; }
.st-row > span { flex: 1; }
.st-row > em { font-style: normal; font-size: 13px; color: #999; }
.st-logout { display: block; width: 100%; height: 48px; margin-top: 18px; border: 0; border-radius: 12px; background: #fff; font-size: 15px; color: #ee0a24; cursor: pointer; }

/* 隐私协议 */
.pv-page { margin: 12px; padding: 18px 16px 24px; border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.75; color: #444; }
.pv-page h1 { margin: 0 0 6px; font-size: 17px; color: #1c1916; }
.pv-page h2 { margin: 18px 0 6px; font-size: 14px; color: #1c1916; }
.pv-page p { margin: 0 0 6px; }
.pv-page ul { margin: 0; padding-left: 18px; }
.pv-page li + li { margin-top: 4px; }
.pv-page b { color: #1c1916; }
.pv-meta { font-size: 12px; color: #999; }

/* 支付成功 · 订阅消息 */
.po-subcard { display: flex; align-items: center; gap: 10px; width: 100%; margin: 20px 0 0; padding: 12px; border: 0; border-radius: 10px; background: #fff7f2; font: inherit; text-align: left; cursor: pointer; }
.po-subcard > .ic { flex-shrink: 0; width: 22px; height: 22px; color: #ff5a2c; }
.po-subcard > span { flex: 1; min-width: 0; }
.po-subcard b { display: block; font-size: 14px; color: #1c1916; }
.po-subcard small { display: block; margin-top: 2px; font-size: 11px; color: #999; }
.po-subcard em { flex-shrink: 0; padding: 0 12px; border-radius: 14px; font-style: normal; font-size: 12px; line-height: 26px; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff5a2c); }
.po-subcard.done { background: #f2fbf5; cursor: default; }
.po-subcard.done > .ic { color: #07c160; }
.odd-subcard {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 10px; padding: 12px 14px; border: 0; border-radius: 12px;
  background: #fff7f2; font: inherit; text-align: left; cursor: pointer;
}
.odd-subcard > .ic { flex-shrink: 0; width: 22px; height: 22px; color: #ff5a2c; }
.odd-subcard > span { flex: 1; min-width: 0; }
.odd-subcard b { display: block; font-size: 14px; color: #1c1916; }
.odd-subcard small { display: block; margin-top: 2px; font-size: 11px; color: #999; }
.odd-subcard em {
  flex-shrink: 0; padding: 0 12px; border-radius: 14px; font-style: normal;
  font-size: 12px; line-height: 26px; color: #fff;
  background: linear-gradient(90deg, #ff8a3d, #ff5a2c);
}

/* 结算页 · 积分抵扣 */
.co-pts-ord {
  margin: 4px 0 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fafafa;
}
.co-pts-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.co-pts-hd b { display: block; font-size: 13px; color: #1c1916; }
.co-pts-hd small { display: block; margin-top: 2px; font-size: 11px; color: #999; line-height: 1.4; }
.co-switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: #e5e5e5; cursor: pointer; transition: background .2s; }
.co-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.co-switch.on { background: #ff5a2c; }
.co-switch.on i { left: 21px; }
.co-pts-use { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid #eee; font-size: 13px; color: #333; }
.co-pts-use input { width: 84px; height: 30px; padding: 0 8px; border: 1px solid #e5e5e5; border-radius: 6px; font: inherit; font-weight: 600; text-align: center; outline: none; }
.co-pts-use input:focus { border-color: #ff5a2c; }
.co-pts-use b { margin-left: auto; font-size: 15px; color: #ee0a24; }
.co-pts-tip { margin: 8px 0 0; font-size: 11px; color: #aaa; line-height: 1.4; }

/* 我的积分 · 待到账 */
.pt-pending { display: inline-block; margin-top: 4px; padding: 0 8px; border-radius: 10px; font-style: normal; font-size: 11px; line-height: 20px; background: rgba(255,255,255,.22); }
.pt-log li.wait em { color: #bbb; text-align: right; }
.pt-log li em small { display: block; font-size: 10px; font-weight: 400; color: #bbb; }
.po-pts { display: block; margin-top: 4px; font-style: normal; color: #ff5a2c; }
#page-lottery { background: #f6f6f6; }
.lt-mp-page {
  padding: 0 0 24px;
  min-height: 100%;
  background: #f6f6f6;
}
.lt-hero {
  position: relative;
  padding: 16px 16px 36px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,255,255,.22) 0 36px, transparent 37px),
    radial-gradient(circle at 8% 120%, rgba(255,255,255,.14) 0 48px, transparent 49px),
    linear-gradient(165deg, #ff6428 0%, #ff7a45 48%, #ff9358 100%);
}
.lt-hero-play { padding: 10px 12px 30px; }
.lt-hero-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
}
.lt-hero-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  line-height: 1.4;
}
.lt-chips {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  border: 0;
  box-shadow: 0 8px 18px rgba(160, 40, 0, .18);
}
.lt-chip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 10px 4px 9px;
  background: transparent;
  color: #262626;
  border-right: 1px solid #f3e6de;
}
.lt-chip:last-child { border-right: 0; }
.lt-chip i {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: #8c8c8c;
  opacity: 1;
}
.lt-chip b {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: #262626;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lt-chip.is-today b {
  font-size: 20px;
  color: #ff4d00;
  letter-spacing: -0.3px;
}
.lt-chip.is-today b small {
  margin-left: 1px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.lt-chip em {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: #b0b0b0;
  line-height: 1.2;
}
.lt-board {
  position: relative;
  margin: -18px 12px 0;
  padding: 10px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(120, 40, 0, .1);
}
.lt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  background: #fff3ea;
  padding: 8px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 69, .12);
}
.lt-cell {
  aspect-ratio: 1;
  background: linear-gradient(180deg, #fff 0%, #fffaf7 100%);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 5px;
  box-shadow: 0 2px 0 #f0ddd2;
  border: 1.5px solid transparent;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.lt-cell.on {
  transform: scale(1.05);
  border-color: #ff4d00;
  box-shadow: 0 0 0 2px rgba(255,77,0,.25), 0 6px 14px rgba(255,77,0,.22);
}
.lt-cell-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.lt-cell-ico.t-points { background: linear-gradient(145deg, #ffca28, #ff9100); }
.lt-cell-ico.t-coupon { background: linear-gradient(145deg, #ff7875, #f5222d); }
.lt-cell-ico.t-thanks { background: linear-gradient(145deg, #bfbfbf, #8c8c8c); }
.lt-cell-ico.t-gift { background: linear-gradient(145deg, #ff9a6b, #ff4d00); }
.lt-cell-name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  color: #262626;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.lt-cell em {
  font-style: normal;
  font-size: 10px;
  color: #ff4d00;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lt-go {
  aspect-ratio: 1;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ff9348 0%, #ff4d00 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  box-shadow: 0 5px 0 #d43800, 0 10px 16px rgba(255, 77, 0, .28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.15;
  cursor: pointer;
}
.lt-go small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .9;
}
.lt-go:active { transform: translateY(2px); box-shadow: 0 3px 0 #d43800, 0 6px 10px rgba(255, 77, 0, .22); }
.lt-go:disabled { opacity: .6; cursor: not-allowed; }
.lt-rule-card {
  margin: 12px 12px 0;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
.lt-rule-card summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lt-rule-card summary::-webkit-details-marker { display: none; }
.lt-rule-card summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
  transform: rotate(45deg);
  transition: transform .15s;
  margin-left: 8px;
  flex-shrink: 0;
}
.lt-rule-card[open] summary::after { transform: rotate(-135deg); }
.lt-rule-card p {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8c8c8c;
  white-space: pre-wrap;
}
.lt-rec {
  margin: 12px 12px 0;
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 6px;
  box-shadow: 0 8px 24px rgba(80, 30, 0, .06);
}
.lt-rec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
}
.lt-rec-hd b { font-size: 15px; color: #262626; }
.lt-rec-hd span { font-size: 12px; color: #bfbfbf; }
.lt-rec ul { list-style: none; margin: 0; padding: 0; }
.lt-rec li {
  position: relative;
  padding: 12px 0 12px 16px;
  border-top: 0;
}
.lt-rec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7a45;
}
.lt-rec li.is-thanks::before { background: #d9d9d9; }
.lt-rec li::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 26px;
  bottom: -4px;
  width: 1px;
  background: #f0e6df;
}
.lt-rec li:last-child::after { display: none; }
.lt-rec-body { min-width: 0; }
.lt-rec-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.lt-rec-top b {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  line-height: 1.35;
}
.lt-rec-top em {
  flex-shrink: 0;
  font-style: normal;
  font-size: 12px;
  color: #bfbfbf;
  line-height: 1.4;
}
.lt-rec-act {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #a3a3a3;
}
.lt-rec-body small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.4;
}
.lt-rec li.is-thanks .lt-rec-top b { color: #8c8c8c; font-weight: 500; }
.lt-rec-empty {
  margin: 12px 0 4px;
  text-align: center;
  color: #bbb;
  font-size: 13px;
  padding: 16px 0 8px;
}
.lt-empty {
  margin: 48px 24px;
  padding: 36px 20px;
  text-align: center;
  color: #8c8c8c;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.lt-empty b { display: block; color: #262626; margin-bottom: 8px; font-size: 16px; }
.lt-empty p { margin: 0; font-size: 13px; line-height: 1.5; }
.lt-empty .lt-empty-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffb088, #ff4d00);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
}
.lt-win-mask {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  background: rgba(0,0,0,.5);
  animation: ltFadeIn .18s ease;
}
.lt-win-card {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background: linear-gradient(180deg, #fff8f4 0%, #fff 72px);
  border-radius: 18px;
  padding: 20px 16px 16px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  animation: ltPop .22s ease;
}
.lt-ticket {
  margin-top: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #f3e4da;
  overflow: hidden;
}
.lt-ticket .lt-win-place { margin: 0; border-radius: 0; background: #fff7f2; }
.lt-ticket-cut {
  position: relative;
  height: 16px;
  background:
    radial-gradient(circle at 0 50%, transparent 7px, #fff 8px) left center / 16px 16px no-repeat,
    radial-gradient(circle at 100% 50%, transparent 7px, #fff 8px) right center / 16px 16px no-repeat,
    linear-gradient(#fff, #fff);
}
.lt-ticket-cut::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  border-top: 1px dashed #f0d9cc;
}
.lt-ticket .lt-win-code { margin: 2px 0 14px; }
.lt-win-ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #ff8a3d, #ff4d00);
}
.lt-win-ico.thanks { background: linear-gradient(145deg, #d9d9d9, #8c8c8c); }
.lt-win-card h3 {
  margin: 0;
  font-size: 18px;
  color: #262626;
}
.lt-win-card .lt-win-name {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #ff4d00;
  line-height: 1.35;
}
.lt-win-card .lt-win-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.45;
}
.lt-win-code {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #ff4d00;
  font-variant-numeric: tabular-nums;
}
.lt-win-place {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7f0;
  text-align: center;
}
.lt-win-place span {
  display: block;
  font-size: 11px;
  color: #8c8c8c;
}
.lt-win-place b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: #ff4d00;
  line-height: 1.35;
}
.lt-qr {
  width: 160px;
  height: 160px;
  margin: 4px auto 0;
  padding: 6px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
}
.lt-qr-svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: #1a1a1a;
}
.lt-pick-list {
  position: relative;
  margin: -18px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lt-pick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(120, 40, 0, .08);
  cursor: pointer;
}
.lt-pick-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, #ff9348, #ff4d00);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 3px 0 #e24300;
}
.lt-pick-mark svg {
  width: 20px;
  height: 20px;
}
.lt-pick-body { flex: 1; min-width: 0; }
.lt-pick-card b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #262626;
  line-height: 1.35;
}
.lt-pick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.lt-pick-meta i {
  font-style: normal;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fff4ec;
  color: #d4551a;
  font-size: 11px;
  line-height: 18px;
}
.lt-pick-card small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.4;
}
.lt-pick-card em {
  flex-shrink: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: #ff7a45;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 28px;
}
.lt-pick-empty {
  background: #fff;
  border-radius: 14px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(255, 77, 0, .08);
}
.lt-pick-empty b { display: block; color: #262626; font-size: 15px; }
.lt-pick-empty p { margin: 6px 0 0; font-size: 12px; color: #8c8c8c; line-height: 1.5; }
.lt-code-btn {
  margin-top: 8px;
  border: 0;
  background: #fff7f0;
  color: #ff7a45;
  border-radius: 14px;
  padding: 0 12px;
  height: 28px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lt-win-card .lt-win-ok {
  margin-top: 18px;
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 11px 0;
  background: linear-gradient(90deg, #ff6a00, #ff4d00);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
@keyframes ltFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ltPop {
  from { opacity: 0; transform: scale(.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

#page-bargain { background: #f5f5f5; }
#page-bargain.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
#page-group { background: #f5f5f5; }
#page-group.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
#bargainBox > .sk-page,
#groupBox > .sk-page { flex: 1; min-height: 0; overflow: auto; }
#page-bargain .bg-mp-page,
#page-group .bg-mp-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #f5f5f5;
}
.bg-campaign, .bg-play {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.bg-coins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 28%, #ffd76a 0 11px, #f5a623 12px 13px, transparent 14px),
    radial-gradient(circle at 86% 18%, #ffe7a3 0 16px, #f0b429 17px 18px, transparent 19px),
    radial-gradient(circle at 74% 72%, #ffd76a 0 8px, transparent 9px),
    radial-gradient(circle at 8% 70%, #ffb020 0 7px, transparent 8px);
}
.bg-campaign-hero, .bg-play-hero {
  position: relative;
  padding: 22px 16px 48px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(180deg, #ff6034 0%, #ff8a45 100%);
}
.bg-play-hero { padding-bottom: 28px; }
.bg-campaign-hero h2, .bg-play-hero h2 {
  position: relative;
  margin: 8px 0 0;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 3px 0 rgba(160, 20, 0, .25);
}
.bg-campaign-hero p, .bg-play-hero p {
  position: relative;
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
}
.bg-count {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: #ff4d00;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bg-sheet-list {
  position: relative;
  margin: -18px 12px 16px;
  padding: 6px 12px 8px;
  border-radius: 16px;
  background: #fff;
}
.bg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 0.5px solid #f0f0f0;
}
.bg-row:last-child { border-bottom: 0; }
.bg-pic {
  display: block;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #f5f5f5 center/cover;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.06);
}
.bg-pic.lg { width: 88px; height: 88px; margin: 0 auto 8px; }
.bg-row-main { flex: 1; min-width: 0; }
.bg-row-main b {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: #262626;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bg-row-main span { display: block; margin-top: 4px; font-size: 12px; color: #8c8c8c; }
.bg-row-main strong { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #ff4d00; }
.bg-row-main strong em { font-style: normal; font-size: 16px; font-weight: 700; }
.bg-row-main .spec {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: #8c8c8c;
}
.bg-mine-entry {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 2px 0 0;
  padding: 12px 2px;
  border: 0;
  border-bottom: 0.5px solid #f0f0f0;
  background: transparent;
  color: #262626;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.bg-mine-entry em {
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff4d00;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}
.bg-mine-entry .chev {
  margin-left: auto;
  color: #bfbfbf;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
}
.bg-join {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(90deg, #ff6a00, #ff4d00);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.bg-join svg { width: 12px; height: 12px; }
.bg-join.is-off, .bg-join:disabled { background: #f0f0f0; color: #bfbfbf; cursor: default; }
.bg-join.is-line { border: 1px solid #e93323; background: #fff; color: #e93323; }
.bg-join.is-line.is-off, .bg-join.is-line:disabled { border-color: #ddd; background: #fff; color: #999; }
.bg-row .ships { display: flex; gap: 4px; margin-top: 4px; }
.bg-row .ship, .bg-row .pick { padding: 0 4px; border-radius: 3px; background: #e6f4ff; color: #1677ff; font-size: 10px; font-style: normal; line-height: 16px; }
.bg-row .pick { background: #fff7e6; color: #d46b08; }
.bg-mine-one { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f3f3f3; }
.bg-mine-one b { display: block; font-size: 13px; }
.bg-mine-one p { margin: 2px 0 0; }
.bg-mine-one .go { margin-top: 8px; height: 28px; padding: 0 12px; border: 1px solid #e93323; border-radius: 14px; background: #fff; color: #e93323; font-size: 12px; }
.bg-share-sheet, .bg-poster-sheet { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 24px; }
.bg-share-sheet h3, .bg-poster-sheet h3 { margin: 0 0 4px; font-size: 16px; }
.bg-share-sheet p, .bg-poster-sheet p { margin: 0; color: #8c8c8c; font-size: 12px; line-height: 1.5; }
.bg-share-sheet button, .bg-poster-sheet button { height: 40px; border: 0; border-radius: 20px; background: #f5f5f5; font-size: 14px; }
.bg-share-sheet .dt-buy, .bg-poster-sheet .dt-buy { background: linear-gradient(90deg, #ff6a3d, #ee0a24); color: #fff; }
.bg-share-sheet .dt-add { background: #fff; color: #e93323; border: 1px solid #e93323; }
.bg-poster { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: 12px; background: linear-gradient(160deg, #ff8a4c, #ee0a24); color: #fff; }
.bg-poster strong { font-size: 22px; }
.bg-poster .qr { width: 96px; height: 96px; border-radius: 8px; background: repeating-linear-gradient(90deg, #fff 0 4px, #1c1916 4px 8px), repeating-linear-gradient(#fff 0 4px, #1c1916 4px 8px); background-blend-mode: difference; }
.bg-poster span { font-size: 11px; opacity: .9; }
.bg-hang {
  position: relative;
  margin: 0 12px 12px;
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: #fff;
}
.bg-pins {
  position: absolute;
  left: 28px;
  right: 28px;
  top: -18px;
  height: 18px;
}
.bg-pins i {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff8a3d;
  box-shadow: 0 8px 0 #ff8a3d;
}
.bg-pins i:first-child { left: 0; }
.bg-pins i:last-child { right: 0; }
.bg-hang-goods { display: flex; gap: 10px; align-items: center; }
.bg-hang-goods .bg-pic { width: 84px; height: 84px; }
.bg-hang-goods b { display: block; font-size: 15px; line-height: 1.4; color: #262626; }
.bg-hang-goods small, .bg-hang-goods .shop { display: block; margin-top: 4px; font-size: 12px; color: #8c8c8c; }
.bg-now { margin-top: 14px; text-align: center; }
.bg-now span { font-size: 13px; color: #8c8c8c; }
.bg-now em {
  display: block;
  font-style: normal;
  font-size: 28px;
  font-weight: 800;
  color: #ff4d00;
  font-variant-numeric: tabular-nums;
}
.bg-now small { display: block; margin-top: 2px; font-size: 13px; color: #8c8c8c; }
.bg-bar {
  height: 8px;
  margin-top: 12px;
  border-radius: 99px;
  background: #ffe1d6;
  overflow: hidden;
}
.bg-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffb020, #ff4d00);
}
.bg-money {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: #8c8c8c;
}
.bg-invite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  margin-top: 14px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(90deg, #ff6a00, #ff4d00);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.bg-invite svg { width: 16px; height: 16px; }
.bg-invite:disabled { background: #f0f0f0; color: #bfbfbf; cursor: default; }
.bg-invite-n { margin: 8px 0 0; text-align: center; font-size: 13px; color: #8c8c8c; }
.bg-invite-n b { color: #ff4d00; font-size: 18px; font-weight: 700; }
.bg-rule p { white-space: pre-wrap; }
.bg-done {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  background: #fff4f0;
  color: #ff4d00;
}
.bg-done.fail { background: #f7f7f7; color: #8c8c8c; }
.bg-order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border: 1px solid #ff4d00;
  border-radius: 20px;
  background: #fff;
  color: #ff4d00;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.bg-hang h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 16px;
  color: #ff4d00;
}
.bg-hang h3 i {
  width: 28px;
  height: 0;
  border-top: 1px dotted #ffb3a8;
}
.bg-intro h3 { color: #ff4d00; }
.bg-intro b { display: block; font-size: 15px; color: #262626; }
.bg-intro p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #595959; }
.bg-help { list-style: none; margin: 0; padding: 0; }
.bg-help li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 0.5px dashed #f0f0f0;
}
.bg-help i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bg-help li > div { flex: 1; min-width: 0; }
.bg-help b { display: block; font-size: 14px; color: #262626; }
.bg-help small { font-size: 12px; color: #bfbfbf; }
.bg-help em {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: #ff4d00;
}
.bg-help em svg { width: 14px; height: 14px; }
.bg-anon { margin: 8px 0 0; font-size: 12px; color: #8c8c8c; text-align: center; }
.bg-mask {
  position: absolute;
  inset: 0;
  z-index: 8;
}
.bg-mask-bg {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
}
.bg-share {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  padding: 16px 12px 22px;
  border-radius: 16px 16px 0 0;
  background: #fff;
}
.bg-share button {
  border: 0;
  background: transparent;
  color: #262626;
  font-size: 13px;
  cursor: pointer;
}
.bg-share i {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  border-radius: 50%;
}
.bg-share i.wx { background: #07c160; }
.bg-share i.pic { background: #3d8bfd; }
.bg-poster {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 50%;
  z-index: 1;
  transform: translateY(-54%);
  padding: 18px 16px 14px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.bg-poster b { display: block; font-size: 15px; color: #262626; }
.bg-poster small { display: block; margin-top: 4px; color: #8c8c8c; }
.bg-poster p { margin: 8px 0 0; font-size: 13px; color: #8c8c8c; }
.bg-poster p em { font-style: normal; font-size: 22px; font-weight: 800; color: #ff4d00; }
.bg-qr {
  width: 92px;
  height: 92px;
  margin: 12px auto 8px;
  background:
    linear-gradient(#fff, #fff) center/28px 28px no-repeat,
    repeating-linear-gradient(90deg, #222 0 3px, transparent 3px 7px),
    repeating-linear-gradient(#222 0 3px, #fff 3px 7px);
}
.bg-poster > span { display: block; font-size: 12px; color: #8c8c8c; }
.bg-poster > button {
  margin-top: 12px;
  height: 32px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: #f5f5f5;
  color: #595959;
  cursor: pointer;
}
.bg-empty { margin: 28px 16px; text-align: center; }
.bg-empty b { display: block; font-size: 15px; color: #595959; }
.bg-empty p { margin: 6px 0 0; font-size: 12px; color: #bfbfbf; }

#page-group .gp-page {
  min-height: 100%;
  background: #f5f5f5;
  padding-bottom: 24px;
}
.gp-tabs {
  display: flex;
  gap: 8px;
  padding: 12px;
}
.gp-tabs button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #595959;
  font-size: 13px;
}
.gp-tabs button.on { background: #fa541c; color: #fff; }
.gp-card {
  margin: 0 12px 10px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}
.gp-card-row, .gp-team, .gp-member {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gp-card .pic, .gp-hero .pic {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  flex: 0 0 72px;
}
.gp-card .txt, .gp-team .txt { flex: 1; min-width: 0; }
.gp-card .name, .gp-team .name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.gp-card .spec, .gp-meta { margin-top: 4px; font-size: 12px; color: #8c8c8c; }
.gp-price { margin-top: 6px; color: #fa541c; font-size: 18px; font-weight: 700; }
.gp-price small { font-size: 12px; font-weight: 600; }
.gp-price s { margin-left: 6px; color: #bfbfbf; font-size: 12px; font-weight: 400; }
.gp-go, .gp-share, .gp-quit-ok {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: #fa541c;
  color: #fff;
  font-size: 13px;
}
.gp-team {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border: 0;
  border-top: 0.5px solid #f0f0f0;
  background: transparent;
  text-align: left;
  align-items: center;
}
.gp-team .txt { display: flex; flex-direction: column; justify-content: center; }
.gp-team .name { font-size: 14px; }
.gp-team .name.is-mine { color: #fa541c; }
.gp-cars.is-page .gp-team {
  height: 52px;
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
}
.gp-cars.is-page .gp-cars-roll { overflow: hidden; }
.gp-cars-track { will-change: transform; }
.gp-cars.is-page .gp-cars-sheet { box-sizing: border-box; overflow: hidden; }
.dt-act-panel .gp-cars-pin .gp-team:first-child,
.dt-act-panel .gp-cars > .gp-cars-roll .gp-team:first-child,
.dt-act-panel .gp-cars > .gp-team:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.gp-team .gp-go {
  flex: 0 0 auto;
  align-self: center;
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  white-space: nowrap;
}
.gp-team .gp-go.is-off,
.gp-team .gp-go:disabled {
  background: #f5f5f5;
  color: #bfbfbf;
  cursor: not-allowed;
}
.gp-avatars { display: flex; flex: 0 0 auto; align-items: center; }
.gp-avatars .gp-av {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  font-style: normal;
  font-size: 13px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
}
.gp-avatars .gp-av:first-child { margin-left: 0; }
.gp-lack { color: #fa541c; font-size: 12px; }
.gp-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
}
.gp-bar button { flex: 1; height: 40px; border: 0; border-radius: 20px; font-size: 15px; }
.gp-bar .ghost { background: #fff; color: #fa541c; box-shadow: inset 0 0 0 1px #fa541c; }
.gp-bar .solid { background: #fa541c; color: #fff; }
.gp-member { padding: 8px 0; border-bottom: 0.5px solid #f5f5f5; }
.gp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff2e8;
  color: #fa541c;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  flex: 0 0 36px;
}
.gp-note { margin: 8px 0 0; font-size: 12px; color: #8c8c8c; line-height: 1.5; }
.gp-quit {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #fff7e6;
}
.gp-quit p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.gp-quit button { height: 32px; margin-right: 8px; padding: 0 12px; border-radius: 16px; border: 0; }
.gp-quit .no { background: #f5f5f5; color: #595959; }
.gp-hero {
  margin: 12px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
}
.gp-hero h2 { margin: 0; font-size: 18px; }
.gp-hero .sub { margin-top: 6px; color: #8c8c8c; font-size: 12px; }
.gp-detail { padding: 12px; color: #595959; font-size: 13px; line-height: 1.6; }

/* 小程序转发示意：底栏横排图标 + 选好友 + 居中海报（对齐详情分享圆标风格） */
.wx-share-sheet {
  display: flex;
  flex-direction: column;
  padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
  background: #fff;
}
.wx-share-acts {
  display: flex;
  justify-content: center;
  gap: 36px;
  padding: 4px 12px 8px;
}
.wx-share-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: #333;
  font-size: 12px;
  line-height: 1.3;
}
.wx-share-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.wx-share-ico-fw { background: #07c160; }
.wx-share-ico-pic { background: linear-gradient(135deg, #ff8a3d, #ee0a24); }
.wx-share-ico-help { background: #fa8c16; }
.wx-share-act:active .wx-share-ico { transform: scale(0.96); opacity: 0.92; }
.wx-share-tip {
  margin: 14px 16px 4px;
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  color: #999;
}
.wx-friend-mask {
  z-index: 32;
  align-items: flex-end;
}
.wx-friend-panel {
  width: 100%;
  max-height: 78%;
  display: flex;
  flex-direction: column;
  border-radius: 12px 12px 0 0;
  background: #ededed;
  overflow: hidden;
  animation: up 0.22s ease;
}
.wx-friend-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #f7f7f7;
}
.wx-friend-hd b { font-size: 16px; }
.wx-friend-hd button {
  border: 0;
  background: none;
  color: #576b95;
  font-size: 15px;
}
.wx-friend-search {
  margin: 0 12px 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff;
  color: #b2b2b2;
  font-size: 14px;
}
.wx-friend-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  background: #fff;
}
.wx-friend-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid #f0f0f0;
  cursor: pointer;
}
.wx-friend-list li:active { background: #f5f5f5; }
.wx-friend-list i {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #07c160;
  color: #fff;
  font-style: normal;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  flex: 0 0 40px;
}
.wx-friend-list span { font-size: 15px; color: #1c1916; }
.wx-friend-tip {
  margin: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: #f7f7f7;
  color: #8c8c8c;
  font-size: 11px;
  text-align: center;
}
#wxShareMask,
.wx-friend-mask {
  position: absolute !important;
  inset: 0 !important;
  z-index: 120 !important;
}
.wx-friend-mask { z-index: 121 !important; }
/* 遮罩只负责点空白关闭；底栏/海报必须叠在遮罩之上，否则点不到按钮 */
#wxShareMask > .dt-mask-bg,
.wx-friend-mask > .dt-mask-bg {
  z-index: 0;
}
#wxShareMask > .wx-share-sheet,
#wxShareMask > .wx-poster-wrap,
.wx-friend-mask > .wx-friend-panel {
  position: relative;
  z-index: 2;
}
#wxShareMask.is-poster {
  align-items: center !important;
  justify-content: center !important;
}
#wxShareMask.is-poster .wx-share-sheet { display: none !important; }
#wxShareMask .wx-poster-wrap { display: none !important; }
#wxShareMask.is-poster .wx-poster-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 84%;
  max-width: 320px;
  pointer-events: auto;
}
.wx-poster-card {
  width: 100%;
  padding: 14px 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.wx-poster-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 16px 12px;
  box-sizing: border-box;
  border-radius: 10px;
  background: linear-gradient(160deg, #ffe7ba, #ff9c6e 55%, #ee0a24);
  color: #fff;
  text-align: center;
}
.wx-poster-ph span { font-size: 16px; font-weight: 700; letter-spacing: 0.5px; }
.wx-poster-ph small { font-size: 12px; opacity: 0.95; max-width: 88%; line-height: 1.4; }
.wx-poster-ph em {
  font-style: normal;
  font-size: 20px;
  font-weight: 800;
}
.wx-poster-qr {
  display: block;
  width: 88px;
  height: 88px;
  margin-top: 8px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, #fff 0 4px, #1c1916 4px 8px),
    repeating-linear-gradient(#fff 0 4px, #1c1916 4px 8px);
  background-blend-mode: difference;
  box-shadow: 0 0 0 4px #fff;
}
.wx-poster-qr-tip {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.92;
}
.wx-poster-save {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(90deg, #ff6034, #ee0a24);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.wx-poster-save:active { opacity: 0.92; }

/* ===== �̼���פ�������̻��������ϣ� ===== */
#page-shopApply { background: #f5f5f5; padding-bottom: 0; }
#page-shopApply.active { display: flex; flex-direction: column; overflow: hidden; }
.sa-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
.sa-tabs {
  flex-shrink: 0;
  display: flex;
  background: #fff;
  border-bottom: 0.5px solid #f0f0f0;
}
.sa-tabs button {
  flex: 1;
  height: 44px;
  border: 0;
  background: none;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
  font-family: inherit;
}
.sa-tabs button.on { color: #1c1916; font-weight: 700; }
.sa-tabs button.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  border-radius: 2px;
  background: #ee0a24;
}
.sa-tabs button i {
  display: inline-block;
  margin-left: 4px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ee0a24;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 16px;
}
.sa-form {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 8px;
}
.sa-tip {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7f0;
  color: #8c6a2f;
  font-size: 12px;
  line-height: 1.6;
}
.sa-sec {
  margin-bottom: 12px;
  padding: 12px 12px 4px;
  border-radius: 10px;
  background: #fff;
}
.sa-sec-t {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 650;
  color: #1c1916;
}
.sa-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 12px;
}
.sa-lab {
  display: flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  color: #595959;
  line-height: 1.3;
}
.sa-lab.req::before {
  content: "*";
  margin-right: 2px;
  color: #ee0a24;
}
.sa-val {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sa-in {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0.5px solid #e8e8e8;
  border-radius: 6px;
  background: #fafafa;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
.sa-up-wrap {
  display: flex;
  align-items: center;
  min-height: 32px;
}
.sa-up-box {
  width: 88px;
  height: 88px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  background: #fafafa;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  font: inherit;
  color: inherit;
}
.sa-up-box:hover { border-color: #ee0a24; }
.sa-up-box em {
  font-size: 11px;
  color: #8c8c8c;
  font-style: normal;
  line-height: 1.2;
}
.sa-up-box.has { border-style: solid; border-color: #e8e8e8; }
.sa-up-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sa-up-ico {
  width: 28px;
  height: 24px;
  position: relative;
  opacity: 0.55;
  border: 2px solid #c0c4cc;
  border-radius: 3px;
  box-sizing: border-box;
}
.sa-up-ico::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #c0c4cc;
  top: 2px;
  left: 2px;
  box-sizing: border-box;
}
.sa-check {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 32px;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}
.sa-check input { margin-top: 2px; accent-color: #ee0a24; }
.sa-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: #8c8c8c;
  line-height: 1.5;
}
.sa-up-box.sa-up-static {
  cursor: default;
  pointer-events: none;
}
.sa-ubo-card {
  margin: 0 0 10px;
  padding: 10px;
  border: 0.5px solid #eee;
  border-radius: 8px;
  background: #fafafa;
}
.sa-ubo-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  min-height: 28px;
}
.sa-ubo-hd b { font-size: 13px; color: #1c1916; }
.sa-ubo-hd .btn.link { font-size: 12px; color: #ee0a24; background: none; border: 0; padding: 0; }
.sa-foot {
  flex-shrink: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  box-shadow: 0 -1px 0 #f0f0f0;
}
.sa-empty {
  margin: 40px 16px;
  text-align: center;
  color: #999;
}
.sa-empty b { display: block; margin-bottom: 6px; color: #666; font-size: 15px; }
.sa-empty p { margin: 0; font-size: 13px; }
.sa-mine-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; flex: 1; min-height: 0; }
.sa-mine-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
}
.sa-mine-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-mine-hd b { font-size: 15px; color: #1c1916; }
.sa-mine-card p { margin: 6px 0 0; font-size: 12px; color: #8c8c8c; }
.sa-mine-card .sa-rej { color: #cf1322; }
.sa-mine-card .sa-ok { color: #389e0d; }
.sa-st-pending { color: #d48806; font-size: 12px; font-style: normal; }
.sa-st-passed { color: #389e0d; font-size: 12px; font-style: normal; }
.sa-st-rejected { color: #cf1322; font-size: 12px; font-style: normal; }