/* ════════════════════════════════════════════════════════════════
   star-refine.css — C 端暗色主题视觉精炼层 v1.0
   种星星的人 H5 · 对标 Apple iPhone H5 视觉逻辑
   ────────────────────────────────────────────────────────────────
   加载顺序：style.css → starTheme(inline) → star-refine.css(本文件)
   原则：不改动交互逻辑，只做视觉 Token 收敛 + 组件精修
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. Token 精炼 — 收敛碎片化色值，建立 Apple 级克制体系
   ──────────────────────────────────────────────────────────────── */
:root {
  /* ── 文字色：16 种暖灰碎片 → 6 级清晰层级 ── */
  --star-text-1: rgba(255,255,255,0.88);   /* 主文字：标题/名称 */
  --star-text-2: rgba(255,255,255,0.65);   /* 次文字：描述/正文 */
  --star-text-3: rgba(255,255,255,0.42);   /* 辅文字：提示/时间 */
  --star-text-4: rgba(255,255,255,0.26);   /* 禁用/占位 */

  /* ── 金色系：4 种金色碎片 → 3 级 + 2 渐变 ── */
  --star-gold:       #D4A853;   /* 主金：品牌色/CTA/强调 */
  --star-gold-bright:#F0D68A;   /* 亮金：高亮文字/选中态 */
  --star-gold-deep:  #C5A040;   /* 深金：渐变终点/按下态 */
  --star-gold-grad:     linear-gradient(135deg, #F0D68A 0%, #E8CC7A 50%, #D4A853 100%);
  --star-gold-grad-deep:linear-gradient(135deg, #E8CC7A 0%, #D4A853 40%, #C5A040 100%);

  /* ── 金色背景层级 ── */
  --star-gold-bg-1: rgba(212,168,83,0.04);  /* 极淡：大面积底纹 */
  --star-gold-bg-2: rgba(212,168,83,0.08);  /* 淡：卡片/标签 */
  --star-gold-bg-3: rgba(212,168,83,0.14);  /* 中：选中/悬停 */
  --star-gold-bg-4: rgba(212,168,83,0.22);  /* 深：按下 */

  /* ── 金色边框 ── */
  --star-gold-border: rgba(212,168,83,0.25);
  --star-gold-border-strong: rgba(212,168,83,0.45);

  /* ── 卡片层次（3 级，Apple 式极浅）── */
  --star-card-1: rgba(255,255,255,0.06);   /* L1 主卡片 */
  --star-card-2: rgba(255,255,255,0.035);  /* L2 次卡片 */
  --star-card-3: rgba(255,255,255,0.02);   /* L3 背景层 */

  /* ── 阴影：Apple 式极柔极浅 ── */
  --star-shadow-1: 0 1px 3px rgba(0,0,0,0.12);     /* 微浮 */
  --star-shadow-2: 0 2px 12px rgba(0,0,0,0.18);    /* 卡片 */
  --star-shadow-3: 0 8px 32px rgba(0,0,0,0.32);    /* 弹窗 */
  --star-gold-glow: 0 0 20px rgba(212,168,83,0.12);/* 金色微光 */

  /* ── 字号：13 种碎片 → 8 级 ── */
  --star-fs-caption:  10px;   /* 角标/微标 */
  --star-fs-tiny:     12px;   /* 时间戳/次要 */
  --star-fs-small:    13px;   /* 描述/标签 */
  --star-fs-body:     14px;   /* 正文/按钮 */
  --star-fs-subtitle: 16px;   /* 副标题/导航 */
  --star-fs-title:    20px;   /* 卡片标题 */
  --star-fs-headline: 26px;   /* 页面标题 */
  --star-fs-hero:     36px;   /* Hero 品牌 */

  /* ── 字重：5 级 → 3 级（Apple 式极简）── */
  --star-fw-light:   300;   /* Hero/大标题 */
  --star-fw-regular: 400;   /* 正文 */
  --star-fw-medium:  500;   /* 标题/按钮 */

  /* ── 行高 ── */
  --star-lh-tight:   1.2;   /* 标题 */
  --star-lh-normal:  1.5;   /* 正文 */
  --star-lh-relaxed: 1.7;   /* 长文 */

  /* ── 圆角（保持与 starTheme 一致，确保贯彻）── */
  --star-radius-sm:  8px;    /* 标签/小元素 */
  --star-radius-md:  12px;   /* 按钮/输入框 */
  --star-radius-lg:  16px;   /* 卡片 */
  --star-radius-xl:  20px;   /* 大卡片/Hero */
  --star-radius-full: 999px; /* 圆形 */

  /* ── 按钮统一（3 尺寸）── */
  --star-btn-fs-sm: 13px;  --star-btn-py-sm: 8px;   --star-btn-radius-sm: var(--star-radius-md);
  --star-btn-fs-md: 14px;  --star-btn-py-md: 11px;  --star-btn-radius-md: var(--star-radius-md);
  --star-btn-fs-lg: 15px;  --star-btn-py-lg: 13px;  --star-btn-radius-lg: var(--star-radius-md);
}

/* ────────────────────────────────────────────────────────────────
   2. Hero 区精修 — 对标 Apple 首屏的克制与呼吸感
   ──────────────────────────────────────────────────────────────── */

/* Hero 容器：增加呼吸感，Apple 式上下留白 */
.home-hero {
  padding: 40px 20px 32px !important;
  min-height: 52svh !important;
}

/* 星标：更大、更柔的光晕 */
.home-hero__star {
  font-size: 52px !important;
  margin-bottom: 20px !important;
  filter: drop-shadow(0 0 32px rgba(240,214,138,0.35)) !important;
}

/* 品牌标题：更克制的渐变，Apple 式 light 字重 */
.home-hero__title {
  font-weight: var(--star-fw-light) !important;
  letter-spacing: var(--ls-hero) !important;
  line-height: var(--star-lh-tight) !important;
  margin-bottom: 14px !important;
  background: linear-gradient(180deg, #F0D68A 0%, #E8CC7A 35%, #D4A853 70%, #C5A040 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 标题装饰线：更细更柔 */
.home-hero__title::after {
  width: 36px !important;
  height: 1px !important;
  margin: 10px auto 0 !important;
  background: linear-gradient(90deg, transparent, rgba(212,168,83,0.5), transparent) !important;
  opacity: 0.5 !important;
}

/* 金句：Apple 式呼吸感，减少装饰边框 */
.home-hero__slogan {
  font-size: clamp(20px, 5vw, 24px) !important;
  font-weight: var(--star-fw-light) !important;
  color: #F3E6D2 !important;
  letter-spacing: var(--ls-wide) !important;
  line-height: 1.55 !important;
  margin: 0 0 20px !important;
  padding: 4px 0 !important;
  background: none !important;
  border: none !important;
  text-shadow: 0 0 8px rgba(240,214,138,0.06) !important;
}

/* 副标题：统一到 Token 色系 */
.home-hero__sub {
  font-size: clamp(15px, 3.5vw, 17px) !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-text-2) !important;
  letter-spacing: var(--ls-wide) !important;
  line-height: var(--star-lh-relaxed) !important;
  margin-bottom: 28px !important;
}

/* 服务卡片组：增加间距，Apple 式留白 */
.home-hero__badges {
  gap: 10px !important;
  margin-bottom: 28px !important;
}

/* 单张服务卡片：Apple 式圆角 + 更柔的层次 */
.home-hero__badge--rich {
  padding: 14px 14px !important;
  border-radius: var(--star-radius-lg) !important;
  border: 1px solid var(--star-gold-border) !important;
  background: var(--star-gold-bg-1) !important;
  backdrop-filter: var(--blur-input) !important;
  -webkit-backdrop-filter: var(--blur-input) !important;
  box-shadow: var(--star-shadow-1) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 卡片按下态 */
.home-hero__badge--rich:active {
  background: var(--star-gold-bg-3) !important;
  border-color: var(--star-gold-border-strong) !important;
  transform: scale(0.97) !important;
  box-shadow: var(--star-shadow-1) !important;
}

/* 当前选中卡片：更精致的高亮 */
.home-hero__badge--current {
  border-color: var(--star-gold-border-strong) !important;
  background: var(--star-gold-bg-2) !important;
  box-shadow: 0 0 0 1px var(--star-gold-border), var(--star-gold-glow) !important;
}

.home-hero__badge--current .home-hero__badge-title {
  color: var(--star-gold-bright) !important;
}

/* 当前卡片指示点：更精致 */
.home-hero__badge--current::before {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--star-gold) !important;
  box-shadow: 0 0 6px rgba(212,168,83,0.6) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 卡片标题：统一字号字重 */
.home-hero__badge-title {
  font-size: clamp(14px, 3vw, 15px) !important;
  font-weight: var(--star-fw-medium) !important;
  letter-spacing: 0.3px !important;
  color: var(--star-gold-bright) !important;
  line-height: var(--star-lh-tight) !important;
}

/* 卡片描述：统一到 Token 色系 */
.home-hero__badge-desc {
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-text-2) !important;
  letter-spacing: 0.2px !important;
  line-height: 1.45 !important;
}

/* 信任锚：弱化为背景信息 */
.home-hero__values {
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-text-3) !important;
  letter-spacing: var(--ls-wide) !important;
  margin-bottom: 20px !important;
}

.home-hero__dot {
  width: 3px !important;
  height: 3px !important;
  background: var(--star-gold-border) !important;
}

/* 地域定位：Apple 式 pill 设计 */
.home-hero__area {
  font-size: clamp(17px, 4vw, 20px) !important;
  font-weight: var(--star-fw-regular) !important;
  color: var(--star-gold) !important;
  letter-spacing: var(--ls-wide) !important;
  padding: 6px 18px !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  border: 1px solid var(--star-gold-border) !important;
  border-radius: var(--star-radius-full) !important;
  background: var(--star-gold-bg-1) !important;
}

/* ────────────────────────────────────────────────────────────────
   3. 区块标题精修 — Apple 式分隔线
   ──────────────────────────────────────────────────────────────── */
.section-header {
  margin-top: var(--sp-xl) !important;
  margin-bottom: var(--sp-md) !important;
  gap: 12px !important;
}

.section-title {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  letter-spacing: var(--ls-tight) !important;
}

/* 分割线：更柔的渐变 */
.section-line:first-child {
  background: linear-gradient(to right, transparent, rgba(212,168,83,0.2)) !important;
  height: 1px !important;
}

.section-line:last-child {
  background: linear-gradient(to left, transparent, rgba(212,168,83,0.2)) !important;
  height: 1px !important;
}

/* ────────────────────────────────────────────────────────────────
   4. 流程卡片精修 — 统一圆角/间距/字号
   ──────────────────────────────────────────────────────────────── */
.process-item {
  padding: var(--sp-md) !important;
  margin-bottom: var(--sp-xs) !important;
  border-radius: var(--star-radius-lg) !important;
  background: var(--star-card-1) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  backdrop-filter: var(--blur-card) !important;
  -webkit-backdrop-filter: var(--blur-card) !important;
  transition: all 0.25s ease !important;
}

/* 流程卡片按下态 */
.process-item:active {
  background: var(--star-card-2) !important;
  transform: scale(0.99) !important;
}

/* 流程卡片悬停态 */
.process-item:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--star-gold-border) !important;
}

/* 序号圆圈：Apple 式精致 */
.process-num-area {
  width: 36px !important;
  height: 36px !important;
  font-size: var(--star-fs-tiny) !important;
  font-weight: var(--star-fw-medium) !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid var(--star-gold) !important;
  color: var(--star-gold) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* 流程名称：统一字号 */
.process-name {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  line-height: var(--star-lh-tight) !important;
}

.process-name-sub {
  font-size: var(--star-fs-caption) !important;
  font-weight: var(--star-fw-regular) !important;
  color: var(--star-text-3) !important;
}

/* 流程描述：统一字号 */
.process-desc {
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-regular) !important;
  color: var(--star-text-2) !important;
  line-height: var(--star-lh-normal) !important;
  margin-top: 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 流程箭头 */
.process-arrow {
  color: var(--star-text-4) !important;
  font-size: var(--star-fs-body) !important;
}

/* ────────────────────────────────────────────────────────────────
   5. 按钮系统统一 — 3 种变体 × 统一规范
   ──────────────────────────────────────────────────────────────── */

/* 主按钮（金色实底）：统一渐变/圆角/阴影 */
.detail-addbar-btn,
.wl-bar-btn--submit,
.wl-submit-btn--confirm,
.wl-history-contact-btn--phone,
.detail-nav-edit,
.pe-nav-btn-save,
.pe-confirm-ok,
.pm-btn-add,
.btn-primary,
button[type="submit"],
.submit-btn {
  background: var(--star-gold-grad-deep) !important;
  color: #0D0D1A !important;
  font-weight: var(--star-fw-medium) !important;
  border-radius: var(--star-radius-md) !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

/* 次按钮（金色描边）：统一透明底+金边 */
.action-btn-nav,
.action-btn-wechat,
.action-btn-call,
.detail-contact-btn,
.pm-btn-consult,
.wl-empty-btn,
.wl-history-urge-btn,
.wl-qr-copy-btn,
.card-share-btn {
  background: var(--star-gold-bg-1) !important;
  color: var(--star-gold) !important;
  border: 1px solid var(--star-gold-border) !important;
  border-radius: var(--star-radius-md) !important;
  font-weight: var(--star-fw-medium) !important;
  box-shadow: none !important;
  backdrop-filter: var(--blur-input) !important;
  -webkit-backdrop-filter: var(--blur-input) !important;
  transition: all 0.25s ease !important;
}

/* 次按钮按下态 */
.action-btn-nav:active,
.action-btn-wechat:active,
.action-btn-call:active,
.detail-contact-btn:active,
.pm-btn-consult:active,
.wl-empty-btn:active {
  background: var(--star-gold-bg-3) !important;
  border-color: var(--star-gold-border-strong) !important;
  color: var(--star-gold-bright) !important;
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

/* 浮动三按钮：统一视觉 */
.triple-action-bar--float .action-btn-nav,
.triple-action-bar--float .action-btn-wechat,
.triple-action-bar--float .action-btn-call {
  background: var(--star-gold-bg-1) !important;
  color: var(--star-gold) !important;
  border: 1px solid var(--star-gold-border) !important;
  border-radius: var(--star-radius-md) !important;
  font-weight: var(--star-fw-medium) !important;
  box-shadow: var(--star-shadow-1) !important;
  backdrop-filter: var(--blur-input) !important;
  -webkit-backdrop-filter: var(--blur-input) !important;
}

.triple-action-bar--float .action-btn-nav:active,
.triple-action-bar--float .action-btn-wechat:active,
.triple-action-bar--float .action-btn-call:active {
  background: var(--star-gold-bg-3) !important;
  border-color: var(--star-gold-border-strong) !important;
  color: var(--star-gold-bright) !important;
  transform: scale(0.96) !important;
  box-shadow: var(--star-shadow-1) !important;
}

/* ────────────────────────────────────────────────────────────────
   6. 门店名片精修 — 品牌头部统一
   ──────────────────────────────────────────────────────────────── */

/* 品牌名渐变：保持金色渐变，统一字重 */
.brand-name, .brand-name-large {
  background: var(--star-gold-grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: var(--star-fw-medium) !important;
}

/* 品牌大标题 */
.brand-bigtitle {
  color: var(--star-text-1) !important;
  font-weight: var(--star-fw-light) !important;
  letter-spacing: var(--ls-hero) !important;
}

/* 品牌副标语 */
.brand-tagline {
  color: var(--star-text-3) !important;
  font-weight: var(--star-fw-regular) !important;
}

/* 浮动门店名：统一字号 */
.contact-row--float .contact-text--shop-name {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold-bright) !important;
  letter-spacing: 3px !important;
}

/* ────────────────────────────────────────────────────────────────
   7. 通用文字色统一 — 收敛 16 种碎片到 6 级 Token
   ──────────────────────────────────────────────────────────────── */

/* 主文字：标题/名称 → star-text-1 */
.detail-core-title,
.detail-step-title,
.collapsible-title,
.guide-step-title,
.wl-name,
.wl-select-label,
.pm-name,
.ot-section-title,
.detail-product-name,
.product-item-name,
.sub-cat-section-title,
.wl-history-prod-name,
.wl-history-status,
.value-badge,
.contact-item-label,
.contact-modal-title,
.wl-submit-title {
  color: var(--star-text-1) !important;
}

/* 次文字：描述/正文 → star-text-2 */
.detail-core-text,
.detail-step-content,
.detail-info-box-item,
.collapsible-sub-title,
.process-desc,
.guide-step-desc,
.assurance-item,
.service-item,
.service-body,
.story-body,
.pm-cat,
.pm-desc,
.pm-price-note,
.ot-value,
.ot-item-meta,
.wl-desc,
.wl-meta,
.contact-text,
.contact-item-val,
.wl-history-prod-qty {
  color: var(--star-text-2) !important;
}

/* 辅文字：提示/时间 → star-text-3 */
.process-name-sub,
.process-arrow,
.guide-step-arrow,
.compliance-line,
.ot-create-time,
.ot-label,
.wl-del,
.wl-history-label,
.contact-arrow,
.contact-modal-footer,
.no-results-text,
.no-results-sub,
.banner-empty {
  color: var(--star-text-3) !important;
}

/* 金色强调：品牌色/CTA/选中 → star-gold */
.nav-title,
.tab-item.active,
.detail-back,
.uni-back-btn-icon,
.uni-back-btn-label,
.detail-core-sub,
.detail-step-num,
.guide-step-num,
.story-author,
.story-tag,
.pm-step-btn,
.pm-faq-q,
.pm-subtotal,
.wl-unit-price,
.wl-sub,
.wl-chk--on,
.ot-order-no,
.ot-section-title,
.ot-item-price,
.ot-item-sub,
.ot-total-value,
.ot-total-label,
.ot-store-name,
.ot-slogan,
.contact-text-link,
.contact-item-val,
.wl-history-order-no,
.wl-history-urge-btn,
.value-sep,
.value-badge-star,
.brand-name,
.brand-name-large {
  color: var(--star-gold) !important;
}

/* 亮金高亮 → star-gold-bright */
.home-hero__badge--current .home-hero__badge-title,
.contact-row--float .contact-text--shop-name {
  color: var(--star-gold-bright) !important;
}

/* ────────────────────────────────────────────────────────────────
   8. 卡片背景统一 — 3 级层次贯彻
   ──────────────────────────────────────────────────────────────── */

/* L1 主卡片 */
.shop-card,
.section-card,
.info-card,
.process-item,
.story-card,
.detail-step-card,
.wl-card,
.banner-wrap {
  background: var(--star-card-1) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: var(--star-radius-lg) !important;
  backdrop-filter: var(--blur-card) !important;
  -webkit-backdrop-filter: var(--blur-card) !important;
}

/* L2 次卡片 */
.product-item,
.detail-product-card,
.guide-step,
.wl-history-card,
.contact-item,
.assurance-bar {
  background: var(--star-card-2) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: var(--star-radius-md) !important;
}

/* L3 背景层（几乎透明） */
.value-banner,
.promoter-hint,
.story-tag,
.wl-topbar {
  background: var(--star-card-3) !important;
}

/* ────────────────────────────────────────────────────────────────
   9. 安心承诺条 & 服务清单
   ──────────────────────────────────────────────────────────────── */
.assurance-bar {
  background: var(--star-card-2) !important;
  border-radius: var(--star-radius-md) !important;
}

.assurance-item {
  color: var(--star-text-2) !important;
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-regular) !important;
}

.assurance-check {
  color: var(--star-gold) !important;
}

.service-item, .service-body {
  color: var(--star-text-2) !important;
  font-size: var(--star-fs-small) !important;
}

.service-body strong {
  color: var(--star-gold) !important;
  font-weight: var(--star-fw-medium) !important;
}

/* ────────────────────────────────────────────────────────────────
   10. 引导步骤精修
   ──────────────────────────────────────────────────────────────── */
.guide-step {
  background: var(--star-card-2) !important;
  border-radius: var(--star-radius-md) !important;
}

.guide-step-num {
  color: var(--star-gold) !important;
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
}

.guide-step-title {
  color: var(--star-text-1) !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
}

.guide-step-desc {
  color: var(--star-text-2) !important;
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-regular) !important;
  line-height: var(--star-lh-normal) !important;
}

.guide-step-arrow {
  color: var(--star-text-4) !important;
}

/* ────────────────────────────────────────────────────────────────
   11. 星星故事精修
   ──────────────────────────────────────────────────────────────── */
.story-card {
  background: var(--star-card-1) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: var(--star-radius-lg) !important;
}

.story-body {
  color: var(--star-text-2) !important;
  font-size: var(--star-fs-body) !important;
  line-height: var(--star-lh-relaxed) !important;
}

.story-author {
  color: var(--star-gold) !important;
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-medium) !important;
}

.story-tag {
  background: var(--star-gold-bg-2) !important;
  color: var(--star-gold) !important;
  font-size: var(--star-fs-caption) !important;
  font-weight: var(--star-fw-medium) !important;
  padding: 3px 10px !important;
  border-radius: var(--star-radius-full) !important;
}

.story-quote {
  color: rgba(212,168,83,0.1) !important;
}

/* ────────────────────────────────────────────────────────────────
   12. 合规声明精修
   ──────────────────────────────────────────────────────────────── */
.compliance-area {
  padding: 32px 18px 28px !important;
  margin-top: 24px !important;
}

.compliance-line {
  color: var(--star-text-4) !important;
  font-size: var(--star-fs-tiny) !important;
  line-height: var(--star-lh-relaxed) !important;
  letter-spacing: var(--ls-normal) !important;
  font-weight: var(--star-fw-light) !important;
}

/* ────────────────────────────────────────────────────────────────
   13. 输入框统一
   ──────────────────────────────────────────────────────────────── */
input, textarea, select, .form-input, .form-field input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--star-text-1) !important;
  border-radius: var(--star-radius-md) !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-regular) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--star-gold) !important;
  box-shadow: 0 0 0 2px rgba(212,168,83,0.15) !important;
  background: rgba(255,255,255,0.07) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--star-text-4) !important;
}

/* ────────────────────────────────────────────────────────────────
   14. 导航栏 & TabBar 精修
   ──────────────────────────────────────────────────────────────── */
.nav-bar, .tab-bar {
  background: rgba(13,13,26,0.82) !important;
  backdrop-filter: var(--blur-nav) !important;
  -webkit-backdrop-filter: var(--blur-nav) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
}

.nav-title {
  color: var(--star-gold) !important;
  font-weight: var(--star-fw-medium) !important;
  letter-spacing: var(--ls-tight) !important;
}

.tab-item {
  color: var(--star-text-3) !important;
  font-weight: var(--star-fw-regular) !important;
}

.tab-item.active {
  color: var(--star-gold) !important;
  font-weight: var(--star-fw-medium) !important;
}

.tab-item.active .tab-icon svg {
  stroke: var(--star-gold) !important;
  filter: drop-shadow(0 0 4px rgba(212,168,83,0.3)) !important;
}

.tab-text {
  color: var(--star-text-3) !important;
  font-size: var(--star-fs-caption) !important;
}

/* ────────────────────────────────────────────────────────────────
   15. 页面容器呼吸感
   ──────────────────────────────────────────────────────────────── */
.page-container, #pageContainer {
  padding: var(--sp-md) var(--sp-md) 48px !important;
}

/* ────────────────────────────────────────────────────────────────
   16. 分享按钮精修
   ──────────────────────────────────────────────────────────────── */
.card-share-bar {
  border-color: rgba(255,255,255,0.05) !important;
}

.card-share-btn {
  background: var(--star-gold-bg-1) !important;
  color: var(--star-gold) !important;
  border: 1px solid var(--star-gold-border) !important;
  border-radius: var(--star-radius-md) !important;
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-medium) !important;
  padding: 8px 16px !important;
  transition: all 0.25s ease !important;
}

.card-share-btn:active {
  background: var(--star-gold-bg-3) !important;
  transform: scale(0.97) !important;
}

/* ────────────────────────────────────────────────────────────────
   17. 轮播指示点精修
   ──────────────────────────────────────────────────────────────── */
.banner-dot {
  background: rgba(255,255,255,0.15) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.banner-dot.active {
  background: var(--star-gold) !important;
  width: 18px !important;
  border-radius: 3px !important;
}

/* ────────────────────────────────────────────────────────────────
   18. 滚动条精修
   ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 2px !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(212,168,83,0.12) !important;
  border-radius: var(--star-radius-full) !important;
}

/* ════════════════════════════════════════════════════════════════
   19. 咨询清单页（Wishlist）精修
   ════════════════════════════════════════════════════════════════ */

/* Tab 切换栏 */
.wl-tabs {
  display: flex !important;
  gap: 0 !important;
  padding: var(--sp-xs) var(--sp-md) !important;
  background: var(--star-card-1) !important;
  border-radius: var(--star-radius-md) !important;
  margin-bottom: var(--sp-sm) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

.wl-tab-btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 10px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-regular) !important;
  color: var(--star-text-3) !important;
  border-radius: var(--star-radius-sm) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.wl-tab-btn--active {
  color: var(--star-gold-bright) !important;
  font-weight: var(--star-fw-medium) !important;
  background: var(--star-gold-bg-2) !important;
}

/* 空状态 */
.wl-empty {
  text-align: center !important;
  padding: 60px 24px !important;
}

.wl-empty-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  opacity: 0.35 !important;
}

.wl-empty-title {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 8px !important;
}

.wl-empty-sub {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-3) !important;
  margin-bottom: 20px !important;
}

.wl-empty-btn {
  display: inline-block !important;
  padding: 10px 28px !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: #0D0D1A !important;
  background: var(--star-gold-grad-deep) !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
  transition: all 0.2s ease !important;
}

.wl-empty-btn:active {
  transform: scale(0.97) !important;
  box-shadow: 0 1px 4px rgba(212,168,83,0.15) !important;
}

/* 顶栏操作区 */
.wl-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px var(--sp-sm) !important;
  background: var(--star-card-2) !important;
  border-radius: var(--star-radius-md) !important;
  margin-bottom: var(--sp-xs) !important;
}

.wl-select-all {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.wl-select-label {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-1) !important;
}

.wl-select-sub {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-4) !important;
}

.wl-meta {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-3) !important;
}

.wl-meta b {
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
}

/* 勾选圆圈 */
.wl-chk {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--star-text-4) !important;
  font-size: 11px !important;
  color: transparent !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.wl-chk--on {
  border-color: var(--star-gold) !important;
  background: var(--star-gold) !important;
  color: #0D0D1A !important;
}

/* 商品卡片 */
.wl-card {
  display: grid !important;
  grid-template-columns: 20px 56px 1fr auto !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  gap: 6px 10px !important;
  padding: var(--sp-sm) !important;
  background: var(--star-card-1) !important;
  border-radius: var(--star-radius-lg) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  margin-bottom: var(--sp-xs) !important;
  backdrop-filter: var(--blur-card) !important;
  -webkit-backdrop-filter: var(--blur-card) !important;
  transition: all 0.25s ease !important;
}

.wl-card--active {
  background: var(--star-gold-bg-1) !important;
  border-color: var(--star-gold-border) !important;
}

.wl-card .wl-chk {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

.wl-img {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--star-radius-sm) !important;
  object-fit: cover !important;
  background: rgba(255,255,255,0.03) !important;
}

.wl-name {
  grid-column: 3 !important;
  grid-row: 1 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  line-height: var(--star-lh-tight) !important;
}

.wl-del {
  grid-column: 4 !important;
  grid-row: 1 !important;
  font-size: var(--star-fs-tiny) !important;
  font-weight: var(--star-fw-regular) !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: var(--star-radius-sm) !important;
  transition: all 0.2s ease !important;
}

.wl-del:active {
  color: #E07070 !important;
  background: rgba(224,112,112,0.1) !important;
}

.wl-desc {
  grid-column: 3 / 5 !important;
  grid-row: 2 !important;
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-3) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.wl-unit-price {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold) !important;
}

.wl-price-inquiry {
  color: var(--star-text-3) !important;
  font-weight: var(--star-fw-regular) !important;
}

/* 步进器 */
.wl-stepper {
  grid-column: 3 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.wl-step-btn {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-text-2) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.wl-step-btn:first-child { border-radius: var(--star-radius-sm) 0 0 var(--star-radius-sm) !important; }
.wl-step-btn:last-child { border-radius: 0 var(--star-radius-sm) var(--star-radius-sm) 0 !important; }

.wl-step-btn:active {
  background: var(--star-gold-bg-3) !important;
  color: var(--star-gold) !important;
}

.wl-step-val {
  width: 36px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  background: rgba(255,255,255,0.04) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.wl-sub {
  grid-column: 4 !important;
  grid-row: 3 !important;
  text-align: right !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold) !important;
}

/* 底部提交栏 */
.wl-bottom-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: rgba(13,13,26,0.92) !important;
  backdrop-filter: var(--blur-nav) !important;
  -webkit-backdrop-filter: var(--blur-nav) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px var(--sp-md) calc(10px + env(safe-area-inset-bottom)) !important;
}

.wl-cart-bar-row--total {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.wl-cart-total-label {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-2) !important;
}

.wl-cart-total-price {
  font-size: var(--star-fs-headline) !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-gold-bright) !important;
}

.wl-cart-bar-row--action {
  display: flex !important;
  gap: 8px !important;
}

.wl-cart-btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 11px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.wl-cart-btn--contact {
  background: var(--star-gold-bg-1) !important;
  color: var(--star-gold) !important;
  border: 1px solid var(--star-gold-border) !important;
}

.wl-cart-btn--contact:active {
  background: var(--star-gold-bg-3) !important;
  transform: scale(0.97) !important;
}

.wl-cart-btn--checkout {
  background: var(--star-gold-grad-deep) !important;
  color: #0D0D1A !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
}

.wl-cart-btn--checkout:active {
  transform: scale(0.97) !important;
  box-shadow: 0 1px 4px rgba(212,168,83,0.15) !important;
}

.wl-cart-btn--disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* 历史咨询卡片 */
.wl-history-card {
  padding: var(--sp-sm) !important;
  background: var(--star-card-1) !important;
  border-radius: var(--star-radius-lg) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  margin-bottom: var(--sp-xs) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.wl-history-card:active {
  background: var(--star-card-2) !important;
  transform: scale(0.99) !important;
}

.wl-history-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.wl-history-order-no {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 2px !important;
}

.wl-history-order-time {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-3) !important;
}

.wl-history-card-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wl-history-prod-count {
  font-size: var(--star-fs-small) !important;
  color: var(--star-gold) !important;
  font-weight: var(--star-fw-medium) !important;
}

.wl-status-badge {
  padding: 2px 8px !important;
  border-radius: var(--star-radius-full) !important;
  font-size: var(--star-fs-caption) !important;
  font-weight: var(--star-fw-medium) !important;
}

.wl-status--pending { background: rgba(212,107,8,0.15) !important; color: #D46B08 !important; }
.wl-status--accepted { background: rgba(9,109,217,0.12) !important; color: #40A9FF !important; }
.wl-status--completed { background: rgba(56,158,13,0.12) !important; color: #73D13D !important; }
.wl-status--paused { background: rgba(140,140,140,0.12) !important; color: #999 !important; }
.wl-status--cancelled { background: rgba(207,19,34,0.12) !important; color: #CF1322 !important; }

.wl-history-arrow {
  font-size: 18px !important;
  color: var(--star-text-4) !important;
}

/* 历史咨询空状态 */
.wl-history-empty {
  text-align: center !important;
  padding: 60px 24px !important;
}

.wl-history-empty-icon { font-size: 40px !important; margin-bottom: 12px !important; opacity: 0.3 !important; }
.wl-history-empty-title { font-size: var(--star-fs-subtitle) !important; color: var(--star-text-1) !important; margin-bottom: 6px !important; }
.wl-history-empty-sub { font-size: var(--star-fs-small) !important; color: var(--star-text-3) !important; }

/* 咨询详情弹窗 */
.wl-order-detail-mask {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px) !important;
}

.wl-order-detail-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1001 !important;
  background: var(--bg-dark) !important;
  display: flex !important;
  flex-direction: column !important;
}

.wl-order-detail-header {
  display: flex !important;
  align-items: center !important;
  padding: 12px var(--sp-md) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(13,13,26,0.92) !important;
  backdrop-filter: var(--blur-nav) !important;
  -webkit-backdrop-filter: var(--blur-nav) !important;
}

.wl-order-detail-back {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: var(--star-fs-body) !important;
  color: var(--star-gold) !important;
  cursor: pointer !important;
}

.wl-order-detail-title {
  flex: 1 !important;
  text-align: center !important;
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
}

.wl-order-detail-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: var(--sp-md) !important;
}

.wl-order-detail-footer {
  display: flex !important;
  gap: 8px !important;
  padding: 10px var(--sp-md) calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(13,13,26,0.92) !important;
  backdrop-filter: var(--blur-nav) !important;
  -webkit-backdrop-filter: var(--blur-nav) !important;
}

.wl-order-detail-footer-btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 11px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
  background: var(--star-gold-bg-1) !important;
  color: var(--star-gold) !important;
  border: 1px solid var(--star-gold-border) !important;
  transition: all 0.2s ease !important;
}

/* 咨询详情-成功横幅 */
.wl-history-banner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--star-gold-bg-1) !important;
  border: 1px solid var(--star-gold-border) !important;
  border-radius: var(--star-radius-lg) !important;
  margin-bottom: 12px !important;
}

.wl-history-banner-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--star-gold) !important;
  color: #0D0D1A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: var(--star-fw-medium) !important;
  flex-shrink: 0 !important;
}

.wl-history-banner-title {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold-bright) !important;
}

.wl-history-banner-sub {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-2) !important;
}

/* 咨询详情-信息区 */
.wl-history-order-meta {
  background: var(--star-card-1) !important;
  border-radius: var(--star-radius-lg) !important;
  padding: var(--sp-sm) !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

.wl-history-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
  padding: 4px 0 !important;
  font-size: var(--star-fs-small) !important;
}

.wl-history-meta-label {
  color: var(--star-text-3) !important;
  min-width: 48px !important;
}

.wl-history-meta-value {
  color: var(--star-text-1) !important;
  font-weight: var(--star-fw-medium) !important;
}

/* 咨询详情-分区标题 */
.wl-history-section-title {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 8px !important;
  padding-left: 8px !important;
  border-left: 2px solid var(--star-gold) !important;
}

/* 咨询清单项 */
.wl-co-items { margin-bottom: 8px !important; }

.wl-co-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px var(--sp-sm) !important;
  background: var(--star-card-2) !important;
  border-radius: var(--star-radius-md) !important;
  margin-bottom: 6px !important;
}

.wl-co-item-img {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--star-radius-sm) !important;
  object-fit: cover !important;
  background: rgba(255,255,255,0.03) !important;
  flex-shrink: 0 !important;
}

.wl-co-item-info { flex: 1 !important; min-width: 0 !important; }

.wl-co-item-name {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  line-height: var(--star-lh-tight) !important;
}

.wl-co-item-meta {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-2) !important;
  margin-top: 2px !important;
}

.wl-co-item-sub {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-gold) !important;
  margin-top: 2px !important;
}

/* 合计行 */
.wl-history-total {
  padding: 12px 0 !important;
  text-align: right !important;
  font-size: var(--star-fs-subtitle) !important;
  color: var(--star-text-1) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.wl-history-total b {
  color: var(--star-gold-bright) !important;
  font-weight: var(--star-fw-light) !important;
  font-size: var(--star-fs-headline) !important;
}

.wl-history-total-hint {
  font-size: var(--star-fs-caption) !important;
  color: var(--star-text-4) !important;
  font-weight: var(--star-fw-regular) !important;
  display: block !important;
  margin-top: 2px !important;
}

/* 温馨提示 */
.wl-history-warm-tip {
  display: flex !important;
  gap: 10px !important;
  padding: 12px !important;
  background: var(--star-card-2) !important;
  border-radius: var(--star-radius-md) !important;
}

.wl-history-warm-tip-icon { font-size: 20px !important; flex-shrink: 0 !important; }
.wl-history-warm-tip-title { font-size: var(--star-fs-small) !important; font-weight: var(--star-fw-medium) !important; color: var(--star-text-1) !important; }
.wl-history-warm-tip-desc { font-size: var(--star-fs-tiny) !important; color: var(--star-text-2) !important; margin-top: 2px !important; }

/* 提交表单 */
.wl-submit-mask {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.wl-submit-panel {
  width: 100% !important;
  max-height: 85vh !important;
  background: var(--bg-dark) !important;
  border-radius: var(--star-radius-xl) var(--star-radius-xl) 0 0 !important;
  overflow-y: auto !important;
  box-shadow: var(--star-shadow-3) !important;
}

.wl-submit-body { padding: var(--sp-md) !important; }

.wl-co-section { margin-bottom: 16px !important; }

.wl-co-section-title {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 10px !important;
}

.wl-co-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  font-size: var(--star-fs-subtitle) !important;
  color: var(--star-text-1) !important;
}

.wl-co-total-price {
  font-size: var(--star-fs-headline) !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-gold-bright) !important;
}

/* 表单 */
.wl-form-group {
  margin-bottom: 12px !important;
}

.wl-form-label {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-2) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.wl-form-label--req::after {
  content: ' *' !important;
  color: #E07070 !important;
}

.wl-form-input, .wl-form-textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-regular) !important;
  color: var(--star-text-1) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--star-radius-md) !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.wl-form-input:focus, .wl-form-textarea:focus {
  border-color: var(--star-gold) !important;
  box-shadow: 0 0 0 2px rgba(212,168,83,0.12) !important;
}

.wl-form-input::placeholder, .wl-form-textarea::placeholder {
  color: var(--star-text-4) !important;
}

.wl-form-err {
  font-size: var(--star-fs-tiny) !important;
  color: #E07070 !important;
  margin-top: 4px !important;
}

/* 提交按钮行 */
.wl-submit-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 12px var(--sp-md) calc(12px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  position: sticky !important;
  bottom: 0 !important;
  background: var(--bg-dark) !important;
}

.wl-submit-btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 11px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.wl-submit-btn--cancel {
  background: var(--star-card-2) !important;
  color: var(--star-text-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.wl-submit-btn--confirm {
  background: var(--star-gold-grad-deep) !important;
  color: #0D0D1A !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
}

/* ════════════════════════════════════════════════════════════════
   20. 用品精选页（Category）精修
   ════════════════════════════════════════════════════════════════ */

.category-layout {
  display: flex !important;
  gap: 0 !important;
  height: calc(100vh - 100px) !important;
}

.category-sidebar {
  width: 90px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  background: var(--star-card-2) !important;
  border-radius: var(--star-radius-lg) 0 0 var(--star-radius-lg) !important;
  padding: var(--sp-xs) 0 !important;
}

.cat-sidebar-item {
  padding: 12px 8px !important;
  text-align: center !important;
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-regular) !important;
  color: var(--star-text-2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-left: 2px solid transparent !important;
  position: relative !important;
}

.cat-sidebar-item.active {
  color: var(--star-gold) !important;
  font-weight: var(--star-fw-medium) !important;
  border-left-color: var(--star-gold) !important;
  background: var(--star-gold-bg-1) !important;
}

.cat-sidebar-item:active {
  background: var(--star-gold-bg-2) !important;
}

.cat-sidebar-name {
  display: block !important;
  line-height: var(--star-lh-tight) !important;
  word-break: break-all !important;
}

.category-content-area {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 var(--sp-sm) !important;
}

.sub-cat-section { margin-bottom: 16px !important; }

.sub-cat-section-title {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 8px !important;
  padding-left: 8px !important;
  border-left: 2px solid var(--star-gold) !important;
  line-height: var(--star-lh-tight) !important;
}

/* 商品网格 */
.product-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.product-item {
  background: var(--star-card-1) !important;
  border-radius: var(--star-radius-lg) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.product-item:active {
  transform: scale(0.98) !important;
  background: var(--star-card-2) !important;
}

.product-item-img-wrap {
  position: relative !important;
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.02) !important;
}

.product-item-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.product-wish-badge {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  padding: 2px 6px !important;
  font-size: var(--star-fs-caption) !important;
  font-weight: var(--star-fw-medium) !important;
  color: #0D0D1A !important;
  background: var(--star-gold) !important;
  border-radius: var(--star-radius-sm) !important;
}

.product-item-info { padding: 8px !important; }

.product-item-name {
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  line-height: var(--star-lh-tight) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
}

.product-item-price {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold) !important;
}

.price-inquiry {
  color: var(--star-text-3) !important;
  font-weight: var(--star-fw-regular) !important;
  font-size: var(--star-fs-tiny) !important;
}

.price-free {
  color: var(--star-text-3) !important;
  font-size: var(--star-fs-tiny) !important;
}

.category-empty {
  text-align: center !important;
  padding: 60px 24px !important;
}

.category-empty-icon { font-size: 40px !important; margin-bottom: 12px !important; opacity: 0.3 !important; }
.category-empty-text { font-size: var(--star-fs-subtitle) !important; color: var(--star-text-1) !important; margin-bottom: 6px !important; }
.category-empty-sub { font-size: var(--star-fs-small) !important; color: var(--star-text-3) !important; }

/* ════════════════════════════════════════════════════════════════
   21. 商品弹窗（ProductModal）精修
   ════════════════════════════════════════════════════════════════ */

.product-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: flex-end !important;
}

.product-modal-content {
  width: 100% !important;
  max-height: 90vh !important;
  background: var(--bg-dark) !important;
  border-radius: var(--star-radius-xl) var(--star-radius-xl) 0 0 !important;
  overflow-y: auto !important;
  box-shadow: var(--star-shadow-3) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 顶部栏 */
.pm-top-bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px var(--sp-md) !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%) !important;
}

.pm-edit-btn {
  font-size: var(--star-fs-small) !important;
  color: var(--star-gold) !important;
  cursor: pointer !important;
  padding: 4px 12px !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: var(--star-radius-full) !important;
  border: 1px solid var(--star-gold-border) !important;
}

/* 图片区 */
.pm-img-wrap {
  position: relative !important;
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.02) !important;
}

.pm-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.pm-gallery-dots {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 6px !important;
}

.pm-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.25) !important;
  transition: all 0.3s ease !important;
}

.pm-dot.active {
  background: var(--star-gold) !important;
  width: 18px !important;
  border-radius: 3px !important;
}

/* 信息区 */
.pm-info { padding: var(--sp-md) !important; }

.pm-name {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.pm-name-text {
  font-size: var(--star-fs-title) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  line-height: var(--star-lh-tight) !important;
}

.pm-cat-suffix {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-4) !important;
  white-space: nowrap !important;
}

.pm-price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.pm-price {
  font-size: 32px !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-gold-bright) !important;
  letter-spacing: -0.5px !important;
}

.pm-price-inquiry {
  font-size: var(--star-fs-subtitle) !important;
  color: var(--star-text-3) !important;
}

.pm-prepare-tag {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: var(--star-radius-sm) !important;
  font-size: var(--star-fs-tiny) !important;
  font-weight: var(--star-fw-medium) !important;
  margin-top: 4px !important;
}

.pm-prepare-tag--rent { background: rgba(64,169,255,0.12) !important; color: #40A9FF !important; }
.pm-prepare-tag--self { background: rgba(115,209,61,0.12) !important; color: #73D13D !important; }

/* 步进器 */
.pm-stepper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.pm-step-btn {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: var(--star-text-2) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.pm-step-btn:first-child { border-radius: var(--star-radius-sm) 0 0 var(--star-radius-sm) !important; }
.pm-step-btn:last-child { border-radius: 0 var(--star-radius-sm) var(--star-radius-sm) 0 !important; }

.pm-step-val {
  width: 40px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  background: rgba(255,255,255,0.04) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.pm-subtotal {
  font-size: var(--star-fs-small) !important;
  color: var(--star-gold) !important;
  margin-top: 6px !important;
}

.pm-desc {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-2) !important;
  line-height: var(--star-lh-normal) !important;
  margin-bottom: 16px !important;
}

/* FAQ区 */
.pm-faq-section {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 0 var(--sp-md) !important;
  overflow: hidden !important;
}

.pm-faq-body {
  padding: var(--sp-sm) 0 !important;
}

.pm-faq-item {
  margin-bottom: 10px !important;
  padding-left: 10px !important;
  border-left: 2px solid rgba(212,168,83,0.2) !important;
}

.pm-faq-q {
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold) !important;
  margin-bottom: 4px !important;
}

.pm-faq-a {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-2) !important;
  line-height: var(--star-lh-normal) !important;
}

/* 底部操作栏 */
.pm-actions {
  position: sticky !important;
  bottom: 0 !important;
  background: var(--bg-dark) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px var(--sp-md) calc(10px + env(safe-area-inset-bottom)) !important;
}

.pm-actions-primary-row {
  display: flex !important;
  gap: 8px !important;
}

.pm-actions-row { margin-top: 8px !important; }

.pm-consult-group {
  display: flex !important;
  gap: 8px !important;
}

.pm-btn {
  text-align: center !important;
  padding: 11px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.pm-btn-faq {
  flex: 1 !important;
  background: var(--star-card-2) !important;
  color: var(--star-text-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.pm-btn-add {
  flex: 2 !important;
  background: var(--star-gold-grad-deep) !important;
  color: #0D0D1A !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
}

.pm-btn-add:active { transform: scale(0.97) !important; }

.pm-btn-consult {
  flex: 1 !important;
  background: var(--star-gold-bg-1) !important;
  color: var(--star-gold) !important;
  border: 1px solid var(--star-gold-border) !important;
}

.pm-btn--back {
  flex: 1 !important;
  background: var(--star-card-2) !important;
  color: var(--star-text-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ════════════════════════════════════════════════════════════════
   22. 联系弹窗（ContactModal）精修
   ════════════════════════════════════════════════════════════════ */

.contact-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.contact-modal-content {
  width: 90% !important;
  max-width: 340px !important;
  background: var(--bg-dark) !important;
  border-radius: var(--star-radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--star-shadow-3) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.contact-modal-hdr {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px var(--sp-md) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.contact-modal-title {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
}

.contact-modal-body { padding: var(--sp-md) !important; }

.contact-item {
  padding: 12px !important;
  background: var(--star-card-1) !important;
  border-radius: var(--star-radius-md) !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

.contact-item-label {
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 6px !important;
}

.contact-item-val {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold) !important;
}

/* ════════════════════════════════════════════════════════════════
   23. 咨询确认页（OrderConfirm）精修
   ════════════════════════════════════════════════════════════════ */

.oc-page { padding: var(--sp-md) !important; }

/* 成功横幅 */
.oc-hero {
  text-align: center !important;
  padding: 32px 16px 24px !important;
}

.oc-hero-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 16px !important;
  border-radius: 50% !important;
  background: var(--star-gold) !important;
  color: #0D0D1A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: var(--star-fw-medium) !important;
  box-shadow: 0 0 32px rgba(212,168,83,0.3) !important;
}

.oc-hero-title {
  font-size: var(--star-fs-headline) !important;
  font-weight: var(--star-fw-light) !important;
  color: var(--star-gold-bright) !important;
  margin-bottom: 6px !important;
}

.oc-hero-sub {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-2) !important;
}

/* 卡片 */
.oc-card {
  background: var(--star-card-1) !important;
  border-radius: var(--star-radius-lg) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  padding: var(--sp-sm) !important;
  margin-bottom: 12px !important;
}

.oc-card-header {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 8px !important;
}

.oc-card-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  font-size: var(--star-fs-small) !important;
}

.oc-label {
  color: var(--star-text-3) !important;
  min-width: 56px !important;
}

.oc-value {
  color: var(--star-text-1) !important;
  font-weight: var(--star-fw-medium) !important;
}

.oc-value--order-no {
  font-size: var(--star-fs-body) !important;
  color: var(--star-gold) !important;
  letter-spacing: 0.5px !important;
}

.oc-copy-btn {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-gold) !important;
  padding: 2px 10px !important;
  border: 1px solid var(--star-gold-border) !important;
  border-radius: var(--star-radius-full) !important;
  cursor: pointer !important;
}

.oc-status-badge {
  padding: 2px 10px !important;
  border-radius: var(--star-radius-full) !important;
  font-size: var(--star-fs-caption) !important;
  font-weight: var(--star-fw-medium) !important;
}

.oc-status--pending { background: rgba(212,107,8,0.15) !important; color: #D46B08 !important; }

/* 商品列表 */
.oc-items { margin-bottom: 4px !important; }

.oc-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.oc-item:last-child { border-bottom: none !important; }

.oc-item-img {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--star-radius-sm) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,0.02) !important;
}

.oc-item-info { flex: 1 !important; min-width: 0 !important; }

.oc-item-name {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
}

.oc-item-meta {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-2) !important;
  margin-top: 2px !important;
}

.oc-item-price {
  font-size: var(--star-fs-small) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold) !important;
  white-space: nowrap !important;
}

/* 价格汇总 */
.oc-price-summary { padding-top: 8px !important; }

.oc-price-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 4px 0 !important;
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-2) !important;
}

.oc-price-row--total {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding-top: 8px !important;
  margin-top: 4px !important;
}

.oc-price-total {
  color: var(--star-gold-bright) !important;
  font-size: var(--star-fs-headline) !important;
  font-weight: var(--star-fw-light) !important;
}

.oc-price-hint {
  font-size: var(--star-fs-caption) !important;
  color: var(--star-text-4) !important;
  margin-top: 4px !important;
}

/* 信息网格 */
.oc-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 16px !important;
}

.oc-info-item {
  display: flex !important;
  gap: 6px !important;
  font-size: var(--star-fs-small) !important;
}

.oc-info-item--full { grid-column: 1 / -1 !important; }

/* 操作按钮 */
.oc-actions { margin-top: 8px !important; }

.oc-actions-row {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.oc-btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 11px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.oc-btn--contact {
  background: var(--star-gold-bg-1) !important;
  color: var(--star-gold) !important;
  border: 1px solid var(--star-gold-border) !important;
}

.oc-btn--primary {
  background: var(--star-gold-grad-deep) !important;
  color: #0D0D1A !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
}

.oc-btn--secondary {
  background: var(--star-card-2) !important;
  color: var(--star-text-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.oc-btn--back {
  background: var(--star-card-2) !important;
  color: var(--star-text-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* 温馨提示卡片 */
.oc-card--tips {
  display: flex !important;
  gap: 10px !important;
  background: var(--star-card-2) !important;
  border-radius: var(--star-radius-md) !important;
  padding: 12px !important;
  border: none !important;
}

.oc-tips-icon { font-size: 20px !important; flex-shrink: 0 !important; }
.oc-tips-title { font-size: var(--star-fs-small) !important; font-weight: var(--star-fw-medium) !important; color: var(--star-text-1) !important; }
.oc-tips-desc { font-size: var(--star-fs-tiny) !important; color: var(--star-text-2) !important; margin-top: 2px !important; }

/* ════════════════════════════════════════════════════════════════
   24. 导航确认面板 & Toast 精修
   ════════════════════════════════════════════════════════════════ */

.nav-confirm-mask {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1300 !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nav-confirm-card {
  width: 85% !important;
  max-width: 320px !important;
  background: var(--bg-dark) !important;
  border-radius: var(--star-radius-xl) !important;
  padding: 24px 20px !important;
  text-align: center !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: var(--star-shadow-3) !important;
}

.nav-confirm-title {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 8px !important;
}

.nav-confirm-shop {
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-gold) !important;
  margin-bottom: 6px !important;
}

.nav-confirm-addr {
  font-size: var(--star-fs-small) !important;
  color: var(--star-text-2) !important;
  margin-bottom: 16px !important;
}

.nav-confirm-btns {
  display: flex !important;
  gap: 8px !important;
}

.nav-confirm-go {
  flex: 2 !important;
  padding: 11px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: #0D0D1A !important;
  background: var(--star-gold-grad-deep) !important;
  border: none !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
}

.nav-confirm-back {
  flex: 1 !important;
  padding: 11px 0 !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-2) !important;
  background: var(--star-card-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--star-radius-md) !important;
  cursor: pointer !important;
}

.nav-confirm-tip {
  font-size: var(--star-fs-tiny) !important;
  color: var(--star-text-4) !important;
  margin-top: 12px !important;
}

/* Toast 提示 */
.toast {
  position: fixed !important;
  bottom: 100px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
  padding: 10px 24px !important;
  background: rgba(30,30,50,0.92) !important;
  color: var(--star-text-1) !important;
  font-size: var(--star-fs-body) !important;
  border-radius: var(--star-radius-full) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: var(--star-shadow-2) !important;
  pointer-events: none !important;
  animation: toastIn 0.3s ease !important;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   25. 返回到顶 & 底部间距
   ════════════════════════════════════════════════════════════════ */

.wl-bottom-spacer { height: 120px !important; }

/* 页面底部安全区统一处理 */
.page-container {
  padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
}

/* ════════════════════════════════════════════════════════════════
   26. B端确认弹窗（ProcessEdit Confirm）暗色适配
   ════════════════════════════════════════════════════════════════ */

.pe-confirm-mask {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pe-confirm-box {
  width: 85% !important;
  max-width: 320px !important;
  background: var(--bg-dark) !important;
  border-radius: var(--star-radius-xl) !important;
  padding: 24px 20px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: var(--star-shadow-3) !important;
}

.pe-confirm-title {
  font-size: var(--star-fs-subtitle) !important;
  font-weight: var(--star-fw-medium) !important;
  color: var(--star-text-1) !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

.pe-confirm-msg {
  font-size: var(--star-fs-body) !important;
  color: var(--star-text-2) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
  line-height: var(--star-lh-normal) !important;
}

.pe-confirm-actions {
  display: flex !important;
  gap: 10px !important;
}

.pe-confirm-btn {
  flex: 1 !important;
  padding: 11px 0 !important;
  border-radius: var(--star-radius-md) !important;
  font-size: var(--star-fs-body) !important;
  font-weight: var(--star-fw-medium) !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.pe-confirm-cancel {
  background: var(--star-card-2) !important;
  color: var(--star-text-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.pe-confirm-ok {
  background: var(--star-gold-grad-deep) !important;
  color: #0D0D1A !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
}