:root {
  --brand: #d3232f;
  --brand-2: #8f0f18;
  --brand-soft: #fff0ee;
  --ink: #201a17;
  --muted: #8d817a;
  --bg: #f7f2ec;
  --card: #ffffff;
  --line: #efe2d8;
  --ok: #12855f;
  --ok-bg: #e7f6ef;
  --warn: #b26a00;
  --warn-bg: #fff3dd;
  --danger: #c8323d;
  --gold: #f2cf94;
  --radius: 18px;
  --shadow: 0 10px 28px -18px rgba(58, 38, 28, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.phone {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 16px 96px;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.2px;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 14px -8px rgba(255, 70, 70, 0.9);
}

.topbar-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
}

.nick {
  font-size: 12px;
  color: var(--muted);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 22px 20px;
  color: #fff;
  background: linear-gradient(140deg, #a3121c 0%, #d3232f 48%, #7d0a12 100%);
  box-shadow: 0 22px 36px -24px rgba(143, 15, 24, 0.9);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 208, 140, 0.18);
  filter: blur(2px);
}
.hero::before { width: 150px; height: 150px; right: -46px; top: -60px; }
.hero::after { width: 90px; height: 90px; right: 52px; bottom: -58px; }

.hero-kicker {
  position: relative;
  font-size: 12px;
  opacity: 0.9;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero h1 {
  position: relative;
  margin: 8px 0 6px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.hero p {
  position: relative;
  margin: 0 0 16px;
  font-size: 13px;
  opacity: 0.92;
  line-height: 1.6;
  max-width: 92%;
}

.hero-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }

.hero-side { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: var(--brand);
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 22px -12px rgba(255, 70, 70, 0.8);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-light { background: #fff; color: var(--brand); border: 1px solid #f1c8c3; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-danger { background: #fdecec; color: var(--danger); }

.ref-banner {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--brand-soft);
  border: 1px solid #ffd9cd;
  font-size: 12.5px;
  color: #8c3a22;
  line-height: 1.5;
}
.ref-banner .avatar-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 15px;
  flex: none;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 24px 2px 12px;
}
.section-head h2 { margin: 0; font-size: 17px; letter-spacing: -0.2px; }
.section-head span { font-size: 12px; color: var(--muted); }

.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.product-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(239, 229, 221, 0.8);
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-width: 0;
  transition: transform 0.14s ease;
}
.product-card:active { transform: translateY(1px) scale(0.995); }

.product-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 54px;
  background: linear-gradient(150deg, #fff6ee, #ffe3d2 65%, #ffd3c2);
  overflow: hidden;
  flex: none;
}
.product-cover .cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 无封面统一占位：浅底 + 品类图标 */
.cover-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(155deg, #fdf8f1, #f7ecdd 55%, #f0dfca);
}
.cover-ph .ph-icon { font-size: 42px; line-height: 1; filter: saturate(0.9); }
.cover-ph .ph-cat { font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: #a58a6a; }

/* 角标：统一在封面左上角，永不压标题 */
.card-badge {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(32, 26, 23, 0.72);
  backdrop-filter: blur(4px);
}
.card-badge.rec { background: var(--brand); }
.card-badge.limit { background: #1f7a55; }

.product-card.soldout .product-cover { filter: grayscale(1); opacity: 0.62; }
.product-card.soldout .product-meta { color: #a12626; font-weight: 700; }

/* 更多选项折叠区：默认收起，展开后同一套 .product-card */
.more-options {
  margin-top: 14px;
  border: 0;
  border-radius: 16px;
  background: #fffdf9;
  box-shadow: inset 0 0 0 1px #e6d6c3;
  padding: 0;
  overflow: hidden;
}
.more-options > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5c3b13;
}
.more-options > summary::-webkit-details-marker { display: none; }
.more-options > summary b { font-size: 13.5px; letter-spacing: -0.2px; }
.more-options .more-count { margin-left: auto; font-size: 11px; color: #a18461; }
.more-options .more-plus { font-style: normal; font-size: 17px; line-height: 1; color: #a18461; transition: transform 0.2s; }
.more-options[open] > summary { border-bottom: 1px dashed #efe0cc; }
.more-options[open] > .grid-products { padding-top: 10px; padding-bottom: 10px; }
.more-options[open] .more-plus { transform: rotate(45deg); }
.product-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.75), transparent 55%);
}

.tag {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(32, 26, 23, 0.72);
  backdrop-filter: blur(4px);
}

.product-title {
  margin-top: 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 18.5px;
  height: 37px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-sub {
  margin-top: 2px;
  height: 15px;
  line-height: 15px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TOOL_MEMBER_OK 每档都含完整工具会员：一行浅绿说明，390px 两列也放得下 */
.product-tool {
  margin-top: 5px;
  padding: 3px 6px;
  border-radius: 7px;
  background: #eef8f1;
  color: #1f7a55;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-tool {
  margin: 6px 0 0;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  background: #eef8f1;
  color: #1f7a55;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}

.price-row { display: flex; align-items: baseline; gap: 6px; height: 24px; margin-top: 5px; }
.price { font-size: 17px; font-weight: 800; color: var(--brand); letter-spacing: -0.3px; white-space: nowrap; }
.price-old { margin-left: auto; font-size: 11px; color: #b7aaa2; text-decoration: line-through; white-space: nowrap; }

.earn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  color: #b4401f;
  background: #fff0e9;
  border-radius: 8px;
  padding: 3px 7px;
}

/* ---------------------------- 商品详情 ---------------------------- */

.detail-hero {
  border-radius: 24px;
  background: linear-gradient(150deg, #fff8f1, #ffe4d3 60%, #ffd3c2);
  aspect-ratio: 1.18 / 1;
  display: grid;
  place-items: center;
  font-size: 108px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.detail-hero .tag { top: 14px; left: 14px; font-size: 11px; }

.detail-card {
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  margin-top: 14px;
  box-shadow: var(--shadow);
}
.detail-title { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.4px; }
.detail-sub { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.detail-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.detail-price .price { font-size: 28px; }
.detail-desc {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: #5e544e;
  font-size: 13px;
  line-height: 1.75;
}

.commission-card {
  margin-top: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #201a17, #3a2a22);
  color: #ffe9dc;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.commission-card strong { color: #ffb08a; font-size: 20px; }
.commission-card p { margin: 4px 0 0; font-size: 11.5px; opacity: 0.72; }

.buybar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 520px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 30;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.stepper button {
  width: 34px;
  height: 38px;
  border: 0;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
}
.stepper span { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; }

/* ---------------------------- 订单 ---------------------------- */

.order-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.order-top { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); }
.order-body { display: flex; gap: 12px; margin-top: 12px; align-items: center; }
.order-thumb {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(150deg, #fff4ea, #ffe0cf);
  flex: none;
}
.order-info { flex: 1; min-width: 0; }
.order-info h3 { margin: 0 0 4px; font-size: 14px; }
.order-info p { margin: 0; font-size: 11.5px; color: var(--muted); }
.order-right { text-align: right; font-weight: 800; font-size: 15px; white-space: nowrap; }
.order-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.order-foot .actions { display: flex; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #f3eee9;
  color: #7d7169;
  white-space: nowrap;
}
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-danger { background: #fdecec; color: var(--danger); }
.chip-muted { background: #f1ece7; color: #9c9087; }

/* ---------------------------- 推广中心 ---------------------------- */

.promo-head {
  background: linear-gradient(140deg, #2a211c, #4a3128 70%, #6b3a2a);
  color: #fff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.promo-head::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -60px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 90, 0.55), transparent 68%);
}
.promo-head h1 { margin: 0; font-size: 21px; position: relative; }
.promo-head p { margin: 6px 0 0; font-size: 12px; opacity: 0.7; position: relative; }

.qr-card {
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  margin-top: 14px;
  text-align: center;
  box-shadow: var(--shadow);
}
.qr-frame {
  width: 208px;
  height: 208px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 10px;
  border: 1px dashed #f0c9b6;
  background: #fffaf6;
}
.qr-frame img { width: 100%; height: 100%; border-radius: 10px; }
.qr-code-text { margin-top: 12px; font-size: 12px; color: var(--muted); letter-spacing: 2px; }
.qr-code-text b { color: var(--ink); letter-spacing: 3px; }

.copy-row { display: flex; gap: 8px; margin-top: 14px; }
.copy-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: #faf7f4;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11.5px;
  color: #6a5f58;
}

.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.stat {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.stat span { font-size: 11px; color: var(--muted); }
.stat strong { display: block; margin-top: 6px; font-size: 20px; letter-spacing: -0.4px; }
.stat strong.money { color: var(--brand); }

.list-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 6px 14px;
  box-shadow: var(--shadow);
  margin-top: 12px;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f6efe9;
}
.list-row:last-child { border-bottom: 0; }
.list-emoji {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff4ec;
  font-size: 20px;
  flex: none;
}
.list-main { flex: 1; min-width: 0; }
.list-main h4 { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-main p { margin: 3px 0 0; font-size: 11px; color: var(--muted); }
.list-amount { text-align: right; font-weight: 800; color: var(--brand); font-size: 14px; white-space: nowrap; }
.list-amount small { display: block; font-weight: 500; color: var(--muted); font-size: 10px; margin-top: 2px; }

.empty {
  text-align: center;
  padding: 34px 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.empty .big { font-size: 34px; display: block; margin-bottom: 8px; }

.apply-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: var(--shadow);
  margin-top: 14px;
}
.apply-card h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.4px; }
.apply-card p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.steps { display: grid; gap: 10px; margin: 16px 0 20px; }
.step { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; }
.step b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 11px; }

/* ---------------------------- 表单/弹层 ---------------------------- */

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  background: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus { border-color: #ffb08f; box-shadow: 0 0 0 3px #ffe8dd; }
.hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: rgba(32, 26, 23, 0.92);
  color: #fff;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 12px;
  z-index: 80;
  max-width: 86vw;
  text-align: center;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 18, 14, 0.5);
  backdrop-filter: blur(3px);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  animation: sheet-up 0.22s ease;
}
@media (min-width: 700px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 24px; width: 420px; }
}
@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal h3 { margin: 0 0 6px; font-size: 18px; }
.modal .modal-sub { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
/* MODAL_EQUAL_BTN_OK 两个按钮等宽：flex-basis 归零 + min-width:0，
 * 否则带 1px 描边的那个会比实心按钮窄 2px（确认订单弹层的「取消 / 确认」）。 */
.modal-actions .btn { flex: 1 1 0; min-width: 0; }

.pay-summary {
  background: #faf6f2;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 8px;
  font-size: 12.5px;
  color: #6b6058;
}
.pay-summary div { display: flex; justify-content: space-between; gap: 10px; }
.pay-summary b { color: var(--ink); }

/* ---------- 确认订单弹层（CONFIRM_SHEET_OK 2026-11-02） ----------
 * 两个按钮：左「取消」白底/朱红字/1px 描边，右「确认」实心朱红；
 * 等宽（flex:1 1 0 + min-width:0）、同高 46、间距 10、同一行。
 * 价格区三行：原价 / 优惠 / 实付。 */
.co-inline { display: flex; align-items: center; gap: 8px; }
.co-inline .input { flex: 1 1 auto; min-width: 0; }
.co-inline .btn { flex: none; white-space: nowrap; }
.modal .modal-actions .co-act { flex: 1 1 0; min-width: 0; min-height: 46px; }
/* 等宽修正：flex-basis:0 时 1px 描边不参与基准，带描边的按钮会比实心按钮宽 2px。
 * 给实心按钮补一层透明描边，两边边框宽度一致，才是真的等宽。 */
.modal-actions .btn-primary { border: 1px solid transparent; }
.co-price {
  margin-top: 14px;
  background: #faf6f2;
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  gap: 7px;
  font-size: 12.5px;
  color: #6b6058;
}
.co-price > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.co-price b { color: var(--ink); font-variant-numeric: tabular-nums; }
.co-price .co-off b { color: var(--brand); }
.co-price .co-pay {
  border-top: 1px dashed #e9dccd;
  margin-top: 1px;
  padding-top: 8px;
  font-size: 13px;
}
.co-price .co-pay b { color: var(--brand); font-size: 18px; }
.co-hint-ok { color: #1f7a55; }
.co-hint-bad { color: #c2232f; }
/* .modal .modal-sub 把 hint 统一压成灰色，校验态要能盖过它 */
.modal p.modal-sub.co-hint-ok { color: #1f7a55; }
.modal p.modal-sub.co-hint-bad { color: #c2232f; }
.pay-summary .pay-copy {
  justify-self: start;
  margin-top: 2px;
  min-height: 36px;
  padding: 7px 14px;
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand-soft);
  font-size: 12.5px;
}

/* QR_SAVE_OK 2026-11-02 订单提交页/客服二维码：真实 <img> + 微信可长按保存
   （禁止 background-image / pointer-events:none / user-select:none / draggable="false"） */
.qr-tip {
  margin: -2px 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff8ec;
  border: 1px solid #f2dcb0;
  color: #8a5a1a;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
.qr-block { text-align: center; margin: 12px 0 2px; }
.qr-img {
  display: block;
  width: 210px;
  max-width: 72%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
  pointer-events: auto;
  -webkit-user-drag: auto;
}
.qr-img.qr-img-wx { width: 180px; max-width: 62%; }
.qr-ops { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.qr-ops .btn {
  flex: 1 1 128px;
  max-width: 180px;
  min-height: 38px;
  padding: 9px 12px;
  font-size: 13px;
  text-decoration: none;
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand-soft);
}
/* guofeng.css 的 .btn 会把浅色按钮刷成红底，这里把弹层浅色按钮改回白底红字 */
.modal .btn-light { background: #fff; color: var(--brand); border: 1px solid #f1c8c3; }
.modal-actions .btn-light { min-height: 44px; }

/* ---------------------------- 底部导航 ---------------------------- */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 8px 0 calc(6px + env(safe-area-inset-bottom));
  z-index: 40;
}
.tabbar a {
  text-align: center;
  font-size: 11px;
  color: #a89b92;
  padding: 4px 0;
  display: grid;
  gap: 2px;
}
.tabbar a i { font-style: normal; font-size: 19px; }
.tabbar a.active { color: var(--brand); font-weight: 700; }

/* ---------------------------- 运营后台 ---------------------------- */

.admin-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-top h1 { margin: 0; font-size: 22px; letter-spacing: -0.4px; }
.admin-top p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 16px; }
.admin-tabs button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  color: #6f635b;
}
.admin-tabs button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 700;
}

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.admin-stat { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.admin-stat span { font-size: 11.5px; color: var(--muted); }
.admin-stat strong { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -0.4px; }
.admin-stat strong.accent { color: var(--brand); }

.table-wrap {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: auto;
  margin-top: 14px;
}
table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #f5eee8; vertical-align: middle; white-space: nowrap; }
th { background: #faf6f2; color: #857870; font-weight: 600; font-size: 11.5px; position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; min-width: 180px; }
td .sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.actions-cell { display: flex; gap: 6px; }
.linklike { color: var(--brand); font-weight: 700; }

.admin-login {
  max-width: 380px;
  margin: 10vh auto;
  background: #fff;
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: var(--shadow);
}
.admin-login h1 { margin: 0 0 6px; font-size: 21px; }
.admin-login p { margin: 0 0 20px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

.admin-note {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  background: #fbf7f3;
  border: 1px dashed var(--line);
  padding: 10px 12px;
  border-radius: 12px;
}

@media (max-width: 420px) {
  .hero h1 { font-size: 23px; }
  .detail-hero { font-size: 88px; }
}

/* --------------------------- 考研主题组件 --------------------------- */

.product-cover.has-img { background: #f1e3d8; }
.product-cover.has-img::after { display: none; }
.cover-img { width: 100%; height: 100%; object-fit: cover; }

.detail-hero.has-img { padding: 0; overflow: hidden; background: #f1e3d8; }
.detail-hero.has-img .cover-img { width: 100%; height: 100%; object-fit: cover; }

.detail-desc { white-space: pre-line; }

.highlights { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.highlights li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.6; color: #4f463f; }
.highlights li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 800;
}

.plan-card {
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(242, 207, 148, 0.55);
}

.plan-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #8a1a22;
  background: #fdecec;
  padding: 4px 11px;
  border-radius: 999px;
}

.reward-list { margin-top: 12px; display: grid; gap: 10px; }

.reward-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  background: #fdf8f3;
  border-radius: 12px;
  border: 1px solid #f5e8dc;
}
.reward-item b { flex: none; width: 56px; font-size: 11px; color: #b26a00; }
.reward-item strong { display: block; font-size: 13px; }
.reward-item span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.reward-item.done { background: #f3fbf7; border-color: #cfece0; }
.reward-item.done b { color: var(--ok); }

.plan-divider { height: 1px; background: var(--line); margin: 16px 0; }
.plan-text { font-size: 12.5px; line-height: 1.7; color: #5e544e; margin: 10px 0 0; }
.plan-text b { color: var(--brand); }
.plan-note { margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.6; }

.progress { height: 8px; background: #f3e7dd; border-radius: 999px; overflow: hidden; }
.progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #e8a23c);
}
.progress-text { font-size: 12px; color: #6f635b; margin-top: 8px; }

.advantage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.adv {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 4px;
}
.adv b { font-size: 13px; }
.adv span { font-size: 11px; color: var(--muted); line-height: 1.5; }

.contact-card {
  margin-top: 14px;
  background: linear-gradient(135deg, #2a1714, #4a231d);
  color: #fff;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.contact-card b { display: block; font-size: 12px; opacity: 0.7; font-weight: 500; }
.contact-card strong { font-size: 20px; letter-spacing: 1px; color: #ffd9a0; }
.contact-copy {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.charity {
  margin: 12px 2px 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}

.poster-img {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.material-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.material-row { flex-wrap: wrap; }
.material-row .list-main { width: calc(100% - 52px); }
.material-row .material-actions { width: 100%; margin-top: 2px; }
.material-row .list-emoji img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.promo-tools {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 14px;
  font-size: 12px;
  color: #6f635b;
}
.promo-tools .actions { display: flex; gap: 8px; }
.promo-tools button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.mini-contact {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 14px;
  font-size: 12px;
  color: #6f635b;
}
.mini-contact b { color: var(--brand); font-size: 14px; }
.mini-contact button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------- 商品管理 ---------------------------- */

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.admin-toolbar .muted { font-size: 11.5px; }

.admin-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: #faf0e7;
  display: inline-grid;
  place-items: center;
  font-size: 24px;
}

.modal.modal-wide { width: 760px; max-width: calc(100vw - 40px); }
@media (max-width: 700px) {
  .modal.modal-wide { width: 100%; max-width: 100%; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.modal-head h3 { margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid textarea.input { min-height: 84px; resize: vertical; }
.form-grid .input { padding: 9px 12px; font-size: 13px; }
.form-grid .field { margin-bottom: 10px; }
.form-grid label { font-size: 11px; }

.cover-row { display: flex; gap: 12px; align-items: flex-start; }
.cover-row .grow { flex: 1; min-width: 0; }
.cover-preview {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #faf6f1;
  display: none;
}
.cover-preview.show { display: block; }
.file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 11.5px;
  color: #6f635b;
  cursor: pointer;
}
.file-label input { display: none; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .advantage-grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------- 桌面端 / 响应式 -------------------------- */

.topnav {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.topnav a {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #6f635b;
  transition: background 0.15s ease, color 0.15s ease;
}
.topnav a:hover { background: #fff; color: var(--brand); }
.topnav a.active { background: var(--ink); color: #fff; }

.buy-inline {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.buy-inline .btn { flex: 1; }

.product-info .detail-card:first-child { margin-top: 14px; }

@media (min-width: 900px) {
  .phone {
    max-width: 1180px;
    padding: 0 28px 64px;
  }

  .tabbar { display: none; }
  .buybar { display: none; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 16px 0;
    background: rgba(247, 242, 236, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(239, 226, 216, 0.6);
    margin-bottom: 18px;
  }

  .topnav { display: flex; }
  .brand { font-size: 19px; }
  .nick { max-width: 180px; font-size: 13px; }

  .hero {
    padding: 40px 38px;
    border-radius: 28px;
    min-height: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .hero-main { max-width: 640px; }
  .hero-side { display: flex; gap: 14px; flex: none; }
  .hero-stat {
    min-width: 104px;
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
  }
  .hero-stat b { display: block; font-size: 26px; color: #ffd9a0; letter-spacing: -0.5px; }
  .hero-stat span { display: block; margin-top: 4px; font-size: 11px; opacity: 0.8; }
  .hero h1 { font-size: 40px; letter-spacing: -1px; margin: 10px 0 10px; }
  .hero p { font-size: 15px; max-width: 520px; margin-bottom: 22px; }
  .hero .hero-kicker { font-size: 13px; }
  .hero .btn { padding: 12px 24px; font-size: 14px; }

  .section-head { margin: 32px 2px 16px; }
  .section-head h2 { font-size: 20px; }

  .grid-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .product-card { padding: 12px; border-radius: 20px; }
  .product-title { font-size: 14px; height: 38px; }

  .plan-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
    align-items: start;
  }
  .plan-layout .plan-card { padding: 22px; }
  .plan-side { display: flex; flex-direction: column; gap: 12px; }
  .plan-side .advantage-grid { margin-top: 0; }
  .plan-side .contact-card { margin-top: 0; }
  .plan-side .charity { margin-top: 0; }

  .product-layout {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 26px;
    align-items: start;
  }
  .product-media { position: sticky; top: 100px; }
  .detail-hero { aspect-ratio: 1 / 1; font-size: 140px; }
  .product-info { min-width: 0; }
  .product-info .detail-card:first-child { margin-top: 0; }
  .buy-inline { display: flex; }
  .promo-tools { margin-top: 14px; }
  .commission-card { padding: 20px; }

  .promoter-columns {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 20px;
    align-items: start;
  }
  .promoter-col { min-width: 0; }
  .promoter-col .qr-card { margin-top: 0; width: 100%; }

  .materials-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    padding: 8px 20px;
  }
  .materials-card .material-row { flex-wrap: nowrap; }
  .materials-card .material-row .list-main { width: auto; }
  .materials-card .material-row .material-actions { width: auto; margin-top: 0; }
  .materials-card .material-row:nth-last-child(-n + 2) { border-bottom: 0; }
  .promoter-col .promo-head { margin-top: 0; }
  .promoter-columns .stats-grid { margin-top: 0; }
  .promoter-columns .stats-grid .stat { background: #fff; }
  .promoter-columns .withdraw { margin-top: 12px; }
  .promoter-columns .section-head { margin-top: 24px; }

  .orders-wrap { max-width: 880px; margin: 0 auto; }

  .list-card { padding: 8px 18px; }
  .list-row { padding: 14px 0; }

  .apply-card { max-width: 720px; margin: 20px auto 0; }
  .qr-card { padding: 24px; }

  .admin-wrap { padding: 28px 28px 60px; }
  .admin-login { margin: 12vh auto; }
}

@media (min-width: 1300px) {
  .phone { max-width: 1240px; }
  .hero h1 { font-size: 44px; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-side { display: none; }
  .materials-card { display: block; padding: 6px 14px; }
  .materials-card .material-row { flex-wrap: wrap; }
  .materials-card .material-row .list-main { width: calc(100% - 52px); }
  .materials-card .material-row .material-actions { width: 100%; margin-top: 2px; }
}


/* ---------- 商品卡补充信息 / 详情流程与 FAQ ---------- */
.product-meta {
  height: 16px;
  line-height: 16px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.flow {
  margin: 0;
  padding-left: 18px;
  color: #4a4034;
  font-size: 13px;
  line-height: 1.75;
}
.flow li { margin-bottom: 6px; }
.flow b { color: var(--ink); margin-right: 2px; }
.faq-q {
  margin: 10px 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 个人 IP 区块 ---------- */
.about {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #efe2d6;
  border-radius: 16px;
  padding: 14px;
  margin-top: 16px;
  box-shadow: 0 10px 26px -22px rgba(58, 38, 28, .5);
}
.about-ava {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #c2232f, #8f0f18);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(194, 35, 47, .8);
}
.about-text b { font-size: 15px; }
.about-text p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.7; color: #6b6058; }

.about{display:flex;gap:12px;background:#fff;border-radius:16px;padding:14px;margin-top:14px;box-shadow:0 8px 24px -20px rgba(0,0,0,.45);border:1px solid #f0e5da}
.about-ava{width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,#d3232f,#8f0f18);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.about-text{flex:1;min-width:0}
.about-text b{font-size:15px}
.about-text p{margin:4px 0 0;font-size:13px;line-height:1.65;color:#5a5048}
.about-ava{background-image:url('/avatar.png');background-size:cover;background-position:center;color:transparent}

/* ---------- 学员反馈 ---------- */
.fb-strip{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.fb-strip::-webkit-scrollbar{height:0}
.fb-item{flex:0 0 78%;background:#fff;border-radius:18px;padding:16px 16px 14px;border:1px solid #f0e5da;box-shadow:0 10px 26px -24px rgba(58,38,28,.55);scroll-snap-align:start;position:relative}
.fb-item p{margin:0;font-size:13.5px;line-height:1.75;color:#3a332b;padding-right:14px}
.fb-item span{display:block;margin-top:10px;font-size:11.5px;color:#9a8d7c}
.fb-item::after{content:"”";position:absolute;right:12px;top:0;font-size:44px;line-height:1;color:#f4dbd2;font-family:Georgia,serif}
.fb-note{margin-top:4px;font-size:11.5px;color:#9a8d7c}
.fb-item{display:flex;gap:10px;align-items:flex-start}
.fb-ava{flex:none;width:36px;height:36px;border-radius:50%;background:#e9dccd;color:#8a6d55;display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:2px}
.fb-body{flex:1;min-width:0;position:relative}
.fb-shots{display:flex;gap:10px;overflow-x:auto;margin-top:10px;padding-bottom:6px}
.fb-shots::-webkit-scrollbar{height:0}
.fb-shots img{flex:0 0 62%;border-radius:14px;border:1px solid #eee5da;box-shadow:0 12px 28px -24px rgba(0,0,0,.5)}
.fb-swipe{font-size:11.5px;color:#b5202c;margin:10px 2px 2px;letter-spacing:.5px}
.fb-shot{flex:0 0 62%;margin:0;display:flex;flex-direction:column}
.fb-shot figcaption{font-size:12px;color:#b5202c;font-weight:700;margin-bottom:6px;line-height:1.4}
.fb-shot img{width:100%;flex:none;border-radius:14px;border:1px solid #eee5da;box-shadow:0 12px 28px -24px rgba(0,0,0,.5)}
.fb-result{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#fff6ee,#ffe9dc);border:1px solid #f3d6c6;border-radius:18px;padding:16px 18px;margin-top:18px}
.fb-result>b{font-size:52px;font-weight:800;color:#c2232f;line-height:1}
.fb-result div:first-child{display:flex;align-items:baseline;gap:4px}
.fb-result div:first-child span{font-size:15px;color:#8f3a22;font-weight:700}
.fb-result-line{width:1px;height:44px;background:#eecab6}
.fb-result p{margin:0;font-size:12.5px;line-height:1.6;color:#7a4a33}
.cmp{margin-top:6px;border-top:1px solid #efe2d6}
.cmp-row{display:flex;gap:10px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid #f2ebe3}
.cmp-name{flex:0 0 34%;font-size:13px;font-weight:700;color:#2a241e}
.cmp-price{flex:0 0 20%;font-size:13px;font-weight:800;color:#c2232f}
.cmp-meta{flex:1;font-size:12px;color:#5c5348;line-height:1.5}
.cmp-meta span{display:block;color:#9a8d7c;font-size:11.5px;margin-top:2px}
.faq details{border-bottom:1px solid #f2ebe3;padding:10px 2px}
.faq summary{font-size:13.5px;font-weight:700;color:#2a241e;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'＋';float:right;color:#c2232f;font-weight:700}
.faq details[open] summary::after{content:'－'}
.faq p{margin:8px 0 0;font-size:12.5px;line-height:1.75;color:#6b6058}
.pay-warn{margin-top:8px;background:#fff1ec;border:1px solid #f5cfc2;color:#b5202c;font-size:12.5px;padding:8px 10px;border-radius:10px;line-height:1.6}

.fb-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fb-mini .fb-shot{flex:none;margin:0}
.fb-mini img{width:100%;border-radius:8px;display:block;border:1px solid #eee5da}
.fb-mini figcaption{font-size:10.5px;margin-bottom:3px;line-height:1.3}

.shot-box{position:fixed;inset:0;background:rgba(0,0,0,.82);display:grid;place-items:center;z-index:99;padding:16px}
.shot-box img{max-width:100%;max-height:100%;border-radius:10px}

/* ---------- 商城「学员成果」（SHOWCASE_OK 2026-11-02，/shop 并到 /#/shop 后同一套样式） ---------- */
.showcase{margin:16px 0 4px}
.sc-hd{display:flex;align-items:center;gap:8px}
.sc-hd b{font-size:17px;letter-spacing:-.2px}
.sc-badge{background:#eaf7ef;color:#1f7a55;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.sc-sub{font-size:11.5px;color:#9a8d7c;margin:3px 0 8px}
.sc-strip{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sc-strip::-webkit-scrollbar{height:0}
.sc-card{flex:0 0 64%;scroll-snap-align:start;display:block;background:#fff;border:1.5px solid #f0e5da;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit}
.sc-card:active{border-color:#e2cdb4}
.sc-img{height:154px;background:#f6efe6;overflow:hidden}
.sc-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.sc-cap{padding:8px 11px 0}
.sc-cap b{font-size:13px;display:block;letter-spacing:-.1px}
.sc-cap span{display:block;margin-top:2px;font-size:10.5px;color:#9a8d7c}
.sc-go{padding:6px 11px 10px;font-size:11.5px;font-weight:700;color:#c2232f}
.sc-tip{font-size:10.5px;color:#a99a86;text-align:center;margin-top:3px}

/* ---------- 填推广码送择校大礼包（GIFT_BENEFITS_OK 2026-11-02） ---------- */
.gift-banner{display:flex;align-items:center;gap:9px;background:linear-gradient(125deg,#fff8e9,#ffeacb);border:1px solid #f0d5a6;border-radius:14px;padding:11px 13px;margin:12px 0 2px;color:#7a5318;font-size:12.5px;line-height:1.55}
.gift-banner>div{flex:1;min-width:0}
.gift-banner .g-ico{flex:none;width:30px;height:30px;border-radius:10px;background:#fff4de;display:grid;place-items:center;font-size:16px}
.gift-banner b{display:block;color:#8a530f;font-size:13.5px}
.gift-banner span{display:block;font-size:11px;color:#96703a;margin-top:1px}
.gift-banner .g-tag{margin-left:auto;flex:none;background:#fff;border:1px solid #eed6a8;border-radius:999px;padding:3px 8px;font-size:10.5px;font-weight:700;color:#9a5f12}
.gift-banner.detail{margin:10px 0 0}
.gift-banner .g-sub{display:block;font-size:10.5px;color:#a9864f;margin-top:2px}
/* ---------- QR_SAVE_OK: all QR / share images stay long-press saveable in WeChat ----------
   Safety net: even if a parent sets user-select / pointer-events, QR images still win.
   Never add draggable="false" or pointer-events:none to these images. */
img.qr-img,
img.poster-img,
.qr-frame img,
.qr img,
.pc-qr img,
img[src*="/pay-card.png"],
img[src*="/pay-wechat.png"],
img[src*="/wechat-card.png"],
img[src*="/wechat-contact.png"],
img[src*="/brand/wx.png"]{
  -webkit-touch-callout:default;
  -webkit-user-select:auto;
  user-select:auto;
  pointer-events:auto;
  -webkit-user-drag:auto;
}