/*
 * VShop Mobile Design System v2.0
 * 参考 Vant 4 设计语言 (github.com/vant-ui/vant, 25k+ stars)
 * 适配电商 H5 全场景：商品/订单/用户中心/卖家后台/认证/财务
 *
 * 架构：视口驱动 @media(max-width:768px) 为主，.is-mobile 前缀为辅
 * 设计令牌：复用 common.css :root，本文件补充移动端专属变量
 */

/* ════════════════════════════════════════════════════════
   1. 移动端设计令牌（补充）
   ════════════════════════════════════════════════════════ */
:root {
  /* 移动端间距（8px 网格，参考 Vant） */
  --m-space-xs: 4px;
  --m-space-sm: 8px;
  --m-space-md: 12px;
  --m-space-lg: 16px;
  --m-space-xl: 20px;
  --m-space-2xl: 24px;

  /* 移动端圆角（Vant 风格） */
  --m-radius-sm: 4px;
  --m-radius-md: 8px;
  --m-radius-lg: 12px;
  --m-radius-xl: 16px;
  --m-radius-pill: 999px;

  /* 移动端字号 */
  --m-font-xs: 10px;
  --m-font-sm: 12px;
  --m-font-base: 14px;
  --m-font-md: 15px;
  --m-font-lg: 17px;
  --m-font-xl: 20px;
  --m-font-2xl: 24px;

  /* 移动端层级 */
  --m-z-header: 1000;
  --m-z-tabbar: 1001;
  --m-z-overlay: 1002;
  --m-z-drawer: 1003;
  --m-z-modal: 1004;
  --m-z-toast: 1100;

  /* 移动端阴影（Vant 轻量阴影） */
  --m-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --m-shadow-float: 0 -2px 12px rgba(0,0,0,.06);
  --m-shadow-pop: 0 4px 24px rgba(0,0,0,.12);

  /* 品牌色（复用 common.css） */
  --m-primary: var(--v-primary);
  --m-primary-light: var(--v-primary-light);
  --m-danger: var(--v-danger);
  --m-success: var(--v-success);
  --m-warning: #ff976a;

  /* 中性色（Vant 灰阶） */
  --m-gray-1: #f7f8fa;
  --m-gray-2: #f2f3f5;
  --m-gray-3: #ebedf0;
  --m-gray-4: #dcdee0;
  --m-gray-5: #c8c9cc;
  --m-gray-6: #969799;
  --m-gray-7: #646566;
  --m-gray-8: #323233;
  --m-text: #323233;
  --m-text-2: #646566;
  --m-text-3: #969799;
  --m-bg: #f7f8fa;
  --m-card-bg: #ffffff;
  --m-border: #ebedf0;

  /* 安全区 */
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-header-h: 48px;
  --m-tabbar-h: 52px;

  /* 动效 */
  --m-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --m-duration: 0.25s;
}

/* ════════════════════════════════════════════════════════
   2. 全局基础
   ════════════════════════════════════════════════════════ */
body.is-mobile {
  background: var(--m-bg);
  color: var(--m-text);
  font-size: var(--m-font-base);
  line-height: 1.5;
  font-family: -apple-system, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom));
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile.is-seller { padding-bottom: var(--m-safe-bottom); }

/* 去除点击高亮、统一触摸滚动 */
body.is-mobile * {
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile button,
body.is-mobile a,
body.is-mobile input,
body.is-mobile select,
body.is-mobile textarea { font-family: inherit; }

/* 桌面窄视口也走移动布局（视口驱动，不依赖 UA） */
@media (max-width: 768px) {
  html { font-size: 14px; }
  body { background: var(--m-bg); overflow-x: hidden; }
  .main-content { padding: 0 !important; min-height: auto; }
  .v-container { padding: 0; max-width: none; }
  .gm-footer { display: none; }
  .vshop-cursor-dot, .vshop-cursor-ring { display: none !important; }
  img, video, iframe, table { max-width: 100%; }
  pre { white-space: pre-wrap; word-break: break-all; overflow-x: auto; max-width: 100%; }
  .form-control, input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"], textarea, select {
    font-size: 16px !important; /* 防 iOS 自动放大 */
  }
}

/* ════════════════════════════════════════════════════════
   3. 移动端通用组件（Vant 风格）
   ════════════════════════════════════════════════════════ */

/* ── 3.1 页面容器 ── */
.m-page {
  min-height: 100vh;
  background: var(--m-bg);
}
.m-page-pad { padding: var(--m-space-md); }

/* ── 3.2 卡片 Card ── */
.m-card {
  background: var(--m-card-bg);
  border-radius: var(--m-radius-lg);
  overflow: hidden;
}
.m-card-pad { padding: var(--m-space-lg); }
.m-card + .m-card { margin-top: var(--m-space-sm); }
.m-card-title {
  display: flex; align-items: center; gap: var(--m-space-sm);
  font-size: var(--m-font-md); font-weight: 600; color: var(--m-text);
  padding: var(--m-space-lg) var(--m-space-lg) var(--m-space-sm);
}
.m-card-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--m-primary);
}

/* ── 3.3 按钮 Button ── */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 20px;
  font-size: var(--m-font-md); font-weight: 500; line-height: 1;
  border: none; border-radius: var(--m-radius-pill);
  cursor: pointer; transition: opacity var(--m-duration) var(--m-ease);
  white-space: nowrap; user-select: none;
}
.m-btn:active { opacity: 0.7; }
.m-btn-primary { background: var(--m-primary); color: #fff; }
.m-btn-danger { background: var(--m-danger); color: #fff; }
.m-btn-success { background: var(--m-success); color: #fff; }
.m-btn-warning { background: var(--m-warning); color: #fff; }
.m-btn-default { background: var(--m-gray-2); color: var(--m-text); }
.m-btn-outline { background: transparent; border: 1px solid var(--m-gray-4); color: var(--m-text); }
.m-btn-outline.m-btn-primary { border-color: var(--m-primary); color: var(--m-primary); }
.m-btn-block { display: flex; width: 100%; }
.m-btn-sm { height: 32px; padding: 0 12px; font-size: var(--m-font-sm); border-radius: var(--m-radius-md); }
.m-btn-lg { height: 50px; font-size: var(--m-font-lg); }

/* ── 3.4 单元格 Cell（Vant 核心组件） ── */
.m-cell-group {
  background: var(--m-card-bg);
  border-radius: var(--m-radius-lg);
  overflow: hidden;
}
.m-cell {
  display: flex; align-items: center; gap: var(--m-space-md);
  padding: var(--m-space-lg);
  min-height: 52px;
  transition: background var(--m-duration) var(--m-ease);
}
.m-cell:active { background: var(--m-gray-2); }
.m-cell + .m-cell { border-top: 1px solid var(--m-border); }
.m-cell__icon {
  flex-shrink: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--m-text-2);
}
.m-cell__icon svg { width: 20px; height: 20px; }
.m-cell__title {
  flex: 1; min-width: 0; font-size: var(--m-font-md); color: var(--m-text);
}
.m-cell__label { font-size: var(--m-font-sm); color: var(--m-text-3); margin-top: 2px; }
.m-cell__value {
  flex-shrink: 0; font-size: var(--m-font-base); color: var(--m-text-3);
  max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-cell__arrow { flex-shrink: 0; color: var(--m-gray-5); }
.m-cell__arrow svg { width: 16px; height: 16px; }

/* ── 3.5 表单 Field ── */
.m-field {
  display: flex; align-items: center; gap: var(--m-space-md);
  padding: var(--m-space-lg);
  min-height: 52px;
  background: var(--m-card-bg);
}
.m-field + .m-field { border-top: 1px solid var(--m-border); }
.m-field__label {
  flex-shrink: 0; width: 80px; font-size: var(--m-font-md); color: var(--m-text);
}
.m-field__control {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: var(--m-font-md); color: var(--m-text);
  padding: 0; outline: none;
}
.m-field__control::placeholder { color: var(--m-gray-5); }
.m-field__control:disabled { color: var(--m-gray-6); -webkit-text-fill-color: var(--m-gray-6); opacity: 1; }
.m-field__extra { flex-shrink: 0; font-size: var(--m-font-sm); color: var(--m-text-3); }
.m-field--vertical { flex-direction: column; align-items: stretch; gap: var(--m-space-sm); }
.m-field--vertical .m-field__label { width: auto; }

/* ── 3.6 标签 Tag ── */
.m-tag {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 8px; font-size: var(--m-font-sm); line-height: 1.4;
  border-radius: var(--m-radius-sm); white-space: nowrap;
}
.m-tag-primary { background: rgba(83,58,253,.1); color: var(--m-primary); }
.m-tag-danger { background: rgba(234,34,97,.1); color: var(--m-danger); }
.m-tag-success { background: rgba(21,190,83,.1); color: var(--m-success); }
.m-tag-warning { background: rgba(255,151,106,.12); color: var(--m-warning); }
.m-tag-default { background: var(--m-gray-2); color: var(--m-text-2); }
.m-tag-plain { background: transparent; border: 1px solid currentColor; }

/* ── 3.7 徽标 Badge ── */
.m-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: var(--m-font-xs); font-weight: 600; line-height: 16px;
  color: #fff; background: var(--m-danger);
  border-radius: var(--m-radius-pill); text-align: center;
  border: 1.5px solid #fff;
}

/* ── 3.8 空状态 Empty ── */
.m-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px var(--m-space-xl); gap: var(--m-space-md);
}
.m-empty__icon {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  color: var(--m-gray-4);
}
.m-empty__icon svg { width: 64px; height: 64px; }
.m-empty__text { font-size: var(--m-font-base); color: var(--m-text-3); }
.m-empty__action { margin-top: var(--m-space-sm); }

/* ── 3.9 骨架屏 Skeleton ── */
.m-skeleton {
  background: linear-gradient(90deg, var(--m-gray-2) 25%, var(--m-gray-3) 37%, var(--m-gray-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--m-radius-sm);
  animation: m-skeleton 1.4s ease infinite;
}
@keyframes m-skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── 3.10 标签页 Tabs ── */
.m-tabs {
  display: flex; gap: var(--m-space-lg);
  padding: 0 var(--m-space-lg);
  background: var(--m-card-bg);
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--m-border);
}
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab {
  flex-shrink: 0; position: relative;
  padding: 12px 0; font-size: var(--m-font-md); color: var(--m-text-2);
  transition: color var(--m-duration) var(--m-ease);
}
.m-tab.active { color: var(--m-primary); font-weight: 600; }
.m-tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: 2px; background: var(--m-primary);
}

/* ── 3.11 操作栏 ActionBar（底部固定） ── */
.m-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: var(--m-space-md);
  padding: var(--m-space-sm) var(--m-space-lg);
  padding-bottom: calc(var(--m-space-sm) + var(--m-safe-bottom));
  background: var(--m-card-bg);
  box-shadow: var(--m-shadow-float);
  z-index: var(--m-z-tabbar);
}
.m-action-bar__icon {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--m-font-xs); color: var(--m-text-2);
  position: relative; padding: 4px var(--m-space-sm);
}
.m-action-bar__icon svg { width: 22px; height: 22px; }
.m-action-bar__btn { flex: 1; }

/* ── 3.12 节标题 SectionTitle ── */
.m-section-title {
  display: flex; align-items: center; gap: var(--m-space-sm);
  padding: var(--m-space-lg) var(--m-space-lg) var(--m-space-sm);
  font-size: var(--m-font-md); font-weight: 600; color: var(--m-text);
}
.m-section-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--m-primary);
}

/* ── 3.13 状态条 StatusBar ── */
.m-status-bar {
  display: flex; align-items: center; gap: var(--m-space-sm);
  padding: var(--m-space-md) var(--m-space-lg);
  font-size: var(--m-font-sm);
}
.m-status-bar--success { background: rgba(21,190,83,.06); color: var(--m-success); }
.m-status-bar--warning { background: rgba(255,151,106,.08); color: var(--m-warning); }
.m-status-bar--danger { background: rgba(234,34,97,.06); color: var(--m-danger); }
.m-status-bar--info { background: rgba(83,58,253,.06); color: var(--m-primary); }

/* ── 3.14 分隔块（卡片间灰底间隔） ── */
.m-gap { height: var(--m-space-sm); background: var(--m-bg); }

/* ── 3.15 价格 Price ── */
.m-price { color: var(--m-danger); font-weight: 600; }
.m-price__symbol { font-size: var(--m-font-sm); }
.m-price__integer { font-size: var(--m-font-xl); }
.m-price__decimal { font-size: var(--m-font-md); }
.m-price__original {
  font-size: var(--m-font-sm); color: var(--m-text-3);
  text-decoration: line-through; margin-left: var(--m-space-xs);
}

/* ── 3.16 步骤器 Stepper / 数量选择 ── */
.m-stepper { display: inline-flex; align-items: center; gap: var(--m-space-sm); }
.m-stepper__btn {
  width: 28px; height: 28px; border: 1px solid var(--m-border);
  background: var(--m-card-bg); border-radius: var(--m-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--m-font-md); color: var(--m-text-2); cursor: pointer;
}
.m-stepper__btn:active { background: var(--m-gray-2); }
.m-stepper__input {
  width: 36px; height: 28px; text-align: center; border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm); font-size: var(--m-font-base); background: var(--m-card-bg);
}

/* ── 3.17 提示 NoticeBar ── */
.m-notice {
  display: flex; align-items: center; gap: var(--m-space-sm);
  padding: var(--m-space-sm) var(--m-space-lg);
  font-size: var(--m-font-sm); color: var(--m-warning);
  background: #fff7e8;
}

/* ════════════════════════════════════════════════════════
   4. 顶部导航 Header（移动端）— UA 驱动
   ════════════════════════════════════════════════════════ */
body.is-mobile .gm-header {
  position: sticky; top: 0; z-index: var(--m-z-header);
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
  box-shadow: 0 1px 8px rgba(83,58,253,.18);
  border-bottom: none;
}
body.is-mobile .gm-header.scrolled {
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
}
body.is-mobile .gm-header-inner {
  height: var(--m-header-h); padding: 0 var(--m-space-md);
  display: flex; align-items: center; gap: var(--m-space-sm);
}
/* 隐藏桌面元素 */
body.is-mobile .gm-logo,
body.is-mobile .gm-nav,
body.is-mobile .gm-auth-btns,
body.is-mobile .gm-notif-btn,
body.is-mobile .gm-user-menu,
body.is-mobile .gm-mobile-toggle { display: none !important; }
/* 搜索框 */
body.is-mobile .gm-search-wrap { display: flex !important; flex: 1; margin: 0 var(--m-space-sm); }
body.is-mobile .gm-search-form {
  width: 100% !important; height: 34px; border: none;
  background: rgba(255,255,255,.2); border-radius: var(--m-radius-pill);
}
body.is-mobile .gm-search-form:focus-within { background: rgba(255,255,255,.32); box-shadow: none; width: 100% !important; }
body.is-mobile .gm-search-icon { color: rgba(255,255,255,.7); width: 14px; }
body.is-mobile .gm-search-input { color: #fff; font-size: var(--m-font-sm); padding: 6px 8px 6px 0; }
body.is-mobile .gm-search-input::placeholder { color: rgba(255,255,255,.55); }
/* 购物车图标 */
body.is-mobile .gm-header-right { gap: 2px; margin-left: 0; }
body.is-mobile .gm-cart-btn {
  width: 34px; height: 34px; border: none; color: #fff; background: transparent;
  display: flex; align-items: center; justify-content: center; position: relative;
}
body.is-mobile .gm-cart-btn:active { background: rgba(255,255,255,.15); border-radius: 50%; }
body.is-mobile .gm-cart-badge {
  background: var(--m-danger); top: 0; right: 0; min-width: 16px; height: 16px;
  font-size: var(--m-font-xs); padding: 0 4px; line-height: 16px; border-radius: var(--m-radius-pill);
  border: 1.5px solid #fff;
}
/* 手机端个人中心图标 */
body.is-mobile .gm-mobile-user {
  width: 34px; height: 34px; border: none; color: #fff; background: transparent;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
body.is-mobile .gm-mobile-user:active { background: rgba(255,255,255,.15); }
body.is-mobile .gm-mobile-user svg { width: 22px; height: 22px; }
/* 手机端返回首页图标 */
body.is-mobile .gm-mobile-home {
  width: 34px; height: 34px; border: none; color: #fff; background: transparent;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0; text-decoration: none;
}
body.is-mobile .gm-mobile-home:active { background: rgba(255,255,255,.15); }
body.is-mobile .gm-mobile-home svg { width: 22px; height: 22px; }
body.is-mobile .gm-auth-btns { display: none !important; }
body.is-mobile .gm-mobile-toggle { display: none !important; }

/* ── 视口驱动镜像（桌面窄视口也生效） ── */
@media (max-width: 768px) {
  .gm-header {
    position: sticky; top: 0; z-index: var(--m-z-header);
    background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
    box-shadow: 0 1px 8px rgba(83,58,253,.18); border-bottom: none;
  }
  .gm-header-inner { height: var(--m-header-h); padding: 0 var(--m-space-md); display: flex; align-items: center; gap: var(--m-space-sm); }
  .gm-logo, .gm-nav, .gm-auth-btns, .gm-notif-btn, .gm-user-menu, .gm-mobile-toggle { display: none !important; }
  .gm-search-wrap { display: flex !important; flex: 1; margin: 0 var(--m-space-sm); }
  .gm-search-form { width: 100% !important; height: 34px; border: none; background: rgba(255,255,255,.2); border-radius: var(--m-radius-pill); }
  .gm-search-form:focus-within { background: rgba(255,255,255,.32); box-shadow: none; width: 100% !important; }
  .gm-search-icon { color: rgba(255,255,255,.7); width: 14px; }
  .gm-search-input { color: #fff; font-size: var(--m-font-sm); padding: 6px 8px 6px 0; }
  .gm-search-input::placeholder { color: rgba(255,255,255,.55); }
  .gm-header-right { gap: 2px; margin-left: 0; }
  .gm-cart-btn {
    width: 34px; height: 34px; border: none; color: #fff; background: transparent;
    display: flex; align-items: center; justify-content: center; position: relative;
  }
  .gm-cart-btn:active { background: rgba(255,255,255,.15); border-radius: 50%; }
  .gm-cart-badge {
    background: var(--m-danger); top: 0; right: 0; min-width: 16px; height: 16px;
    font-size: var(--m-font-xs); padding: 0 4px; line-height: 16px; border-radius: var(--m-radius-pill);
    border: 1.5px solid #fff;
  }
  .gm-mobile-user {
    width: 34px; height: 34px; border: none; color: #fff; background: transparent;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
  }
  .gm-mobile-user:active { background: rgba(255,255,255,.15); }
  .gm-mobile-user svg { width: 22px; height: 22px; }
  .gm-mobile-home {
    width: 34px; height: 34px; border: none; color: #fff; background: transparent;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0; text-decoration: none;
  }
  .gm-mobile-home:active { background: rgba(255,255,255,.15); }
  .gm-mobile-home svg { width: 22px; height: 22px; }
  .gm-auth-btns { display: none !important; }
  .gm-mobile-toggle { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   5. 底部 Tab 导航栏
   ════════════════════════════════════════════════════════ */
.m-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: stretch;
  height: calc(var(--m-tabbar-h) + var(--m-safe-bottom));
  padding-bottom: var(--m-safe-bottom);
  background: var(--m-card-bg);
  box-shadow: 0 -1px 8px rgba(0,0,0,.06);
  z-index: var(--m-z-tabbar);
}
.m-tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: var(--m-font-xs); color: var(--m-text-3);
  position: relative; transition: color var(--m-duration) var(--m-ease);
  text-decoration: none;
}
.m-tabbar-item svg { width: 22px; height: 22px; }
.m-tabbar-item.active { color: var(--m-primary); }
.m-tabbar-item:active { background: var(--m-gray-1); }
.m-badge { position: absolute; top: 4px; left: 50%; margin-left: 8px; }

/* 商品详情页隐藏 tabbar（用购买栏替代） */
body.is-mobile:has(.m-pd-wrap) .m-tabbar { display: none !important; }
body.is-mobile:has(.m-pd-wrap) { padding-bottom: 0; }
@media (max-width:768px) {
  body:has(.m-pd-wrap) .m-tabbar { display: none !important; }
  body:has(.m-pd-wrap) { padding-bottom: 0; }
}

/* ════════════════════════════════════════════════════════
   6. 用户中心布局（移动端抽屉）— UA 驱动 + 视口镜像
   ════════════════════════════════════════════════════════ */
body.is-mobile.uc-body { padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom)); background: var(--m-bg); }
body.is-mobile .uc-hero { display: none; }
body.is-mobile .uc-layout__inner { padding: 0 !important; }
body.is-mobile .uc-main { grid-template-columns: 1fr !important; margin-top: 0; gap: 0 !important; }
body.is-mobile .uc-sidebar {
  position: fixed; top: 0; left: -280px; width: 280px; height: 100vh;
  z-index: var(--m-z-drawer); transition: left var(--m-duration) var(--m-ease);
  background: var(--m-card-bg); overflow-y: auto;
}
body.is-mobile .uc-sidebar.open { left: 0; box-shadow: var(--m-shadow-pop); }
body.is-mobile .uc-breadcrumb {
  display: flex; align-items: center; gap: var(--m-space-xs);
  padding: var(--m-space-sm) var(--m-space-md);
  font-size: var(--m-font-sm); color: var(--m-text-3);
  background: var(--m-card-bg);
  border-bottom: 1px solid var(--m-border);
}
body.is-mobile .uc-breadcrumb a { color: var(--m-primary); text-decoration: none; }
body.is-mobile .uc-breadcrumb a:active { opacity: .7; }
body.is-mobile .uc-breadcrumb svg { flex-shrink: 0; color: var(--m-text-3); }
body.is-mobile .uc-breadcrumb span { color: var(--m-text); font-weight: 500; }
body.is-mobile .uc-menu-toggle { display: none; }
body.is-mobile .uc-overlay { z-index: var(--m-z-overlay); }
body.is-mobile .uc-content {
  margin-top: 0; padding: 0; gap: var(--m-space-sm);
  border-radius: 0; box-shadow: none; background: var(--m-bg);
}
body.is-mobile .uc-card-body { padding: var(--m-space-md); }
body.is-mobile .uc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--m-space-sm); }
body.is-mobile .uc-stat-card { padding: var(--m-space-md); border-radius: var(--m-radius-lg); }
body.is-mobile .uc-stat-card__value { font-size: var(--m-font-xl); }
body.is-mobile .uc-form-row { grid-template-columns: 1fr; }
body.is-mobile .uc-page-header { flex-wrap: wrap; gap: var(--m-space-sm); }
body.is-mobile .uc-page-title { font-size: var(--m-font-lg); }
body.is-mobile .uc-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.is-mobile .uc-tabs::-webkit-scrollbar { display: none; }
body.is-mobile .uc-tab { flex-shrink: 0; }
body.is-mobile .uc-order-header { flex-wrap: wrap; gap: var(--m-space-sm); padding: var(--m-space-sm) var(--m-space-md); }
body.is-mobile .uc-order-body { flex-wrap: wrap; padding: var(--m-space-md); gap: var(--m-space-sm); }
body.is-mobile .uc-order-no { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.is-mobile .uc-order-price { font-size: var(--m-font-lg); }
body.is-mobile .uc-order-footer { flex-wrap: wrap; gap: var(--m-space-sm); padding: var(--m-space-sm) var(--m-space-md); }
body.is-mobile .uc-table-wrap { border-radius: var(--m-radius-lg); }
body.is-mobile .uc-table { font-size: var(--m-font-sm); }
body.is-mobile .uc-table th, body.is-mobile .uc-table td { padding: var(--m-space-sm) var(--m-space-md); }
body.is-mobile .uc-btn { padding: var(--m-space-sm) 14px; font-size: var(--m-font-base); }
body.is-mobile .uc-btn--sm { padding: 6px 10px; font-size: var(--m-font-sm); }
body.is-mobile .uc-empty { padding: 40px var(--m-space-xl); }
body.is-mobile .uc-profile-info-item { flex-direction: column; gap: var(--m-space-xs); align-items: flex-start; }
body.is-mobile .uc-profile-info-label { font-size: var(--m-font-sm); }
body.is-mobile .uc-pagination { gap: var(--m-space-xs); }
body.is-mobile .uc-page-btn { width: 32px; height: 32px; font-size: var(--m-font-sm); border-radius: var(--m-radius-sm); }

@media (max-width:768px) {
  .uc-body { padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom)); background: var(--m-bg); }
  /* hero 隐藏（顶部搜索栏已有用户入口） */
  .uc-hero { display: none; }
  /* 内层容器去 padding，让 m-page 满宽 */
  .uc-layout__inner { padding: 0 !important; }
  /* 单列布局 */
  .uc-main { grid-template-columns: 1fr !important; margin-top: 0; gap: 0 !important; }
  /* 侧栏变抽屉 */
  .uc-sidebar {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100vh;
    z-index: var(--m-z-drawer); transition: left var(--m-duration) var(--m-ease);
    background: var(--m-card-bg); overflow-y: auto;
  }
  .uc-sidebar.open { left: 0; box-shadow: var(--m-shadow-pop); }
  .uc-breadcrumb {
    display: flex; align-items: center; gap: var(--m-space-xs);
    padding: var(--m-space-sm) var(--m-space-md);
    font-size: var(--m-font-sm); color: var(--m-text-3);
    background: var(--m-card-bg);
    border-bottom: 1px solid var(--m-border);
  }
  .uc-breadcrumb a { color: var(--m-primary); text-decoration: none; }
  .uc-breadcrumb a:active { opacity: .7; }
  .uc-breadcrumb svg { flex-shrink: 0; color: var(--m-text-3); }
  .uc-breadcrumb span { color: var(--m-text); font-weight: 500; }
  .uc-menu-toggle { display: none; }
  .uc-overlay { z-index: var(--m-z-overlay); }
  /* 内容区紧凑（去 padding，m-page 自带卡片间距） */
  .uc-content {
    margin-top: 0; padding: 0; gap: var(--m-space-sm);
    border-radius: 0; box-shadow: none;
    background: var(--m-bg);
  }
  .uc-card-body { padding: var(--m-space-md); }
  /* 统计卡片 2 列 */
  .uc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--m-space-sm); }
  .uc-stat-card { padding: var(--m-space-md); border-radius: var(--m-radius-lg); }
  .uc-stat-card__value { font-size: var(--m-font-xl); }
  /* 表单单列 */
  .uc-form-row { grid-template-columns: 1fr; }
  /* 页面标题 */
  .uc-page-header { flex-wrap: wrap; gap: var(--m-space-sm); }
  .uc-page-title { font-size: var(--m-font-lg); }
  /* 标签栏横滑 */
  .uc-tabs {
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-tab { flex-shrink: 0; }
  /* 订单项 */
  .uc-order-header { flex-wrap: wrap; gap: var(--m-space-sm); padding: var(--m-space-sm) var(--m-space-md); }
  .uc-order-body { flex-wrap: wrap; padding: var(--m-space-md); gap: var(--m-space-sm); }
  .uc-order-no { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .uc-order-price { font-size: var(--m-font-lg); }
  .uc-order-footer { flex-wrap: wrap; gap: var(--m-space-sm); padding: var(--m-space-sm) var(--m-space-md); }
  /* 表格 */
  .uc-table-wrap { border-radius: var(--m-radius-lg); }
  .uc-table { font-size: var(--m-font-sm); }
  .uc-table th, .uc-table td { padding: var(--m-space-sm) var(--m-space-md); }
  /* 按钮 */
  .uc-btn { padding: var(--m-space-sm) 14px; font-size: var(--m-font-base); }
  .uc-btn--sm { padding: 6px 10px; font-size: var(--m-font-sm); }
  .uc-empty { padding: 40px var(--m-space-xl); }
  /* 资料项 */
  .uc-profile-info-item { flex-direction: column; gap: var(--m-space-xs); align-items: flex-start; }
  .uc-profile-info-label { font-size: var(--m-font-sm); }
  /* 分页 */
  .uc-pagination { gap: var(--m-space-xs); }
  .uc-page-btn { width: 32px; height: 32px; font-size: var(--m-font-sm); border-radius: var(--m-radius-sm); }
  /* 兜底 */
  .uc-content, .uc-main, .uc-page-header, .uc-tabs, .uc-order-header,
  .uc-order-body, .uc-order-footer, .uc-card-body, .uc-stats-grid { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════
   7. 卖家中心（移动端）
   ════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  /* 卖家页面无底部 tabbar */
  body:has(.seller-wrap) { padding-bottom: var(--m-safe-bottom); }
  /* 卖家侧栏隐藏，用顶部返回 */
  .seller-sidebar { display: none; }
  .seller-wrap { grid-template-columns: 1fr !important; }
  .seller-content { padding: var(--m-space-md) !important; }
  /* 数据卡片网格 */
  .stat-grid, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--m-space-sm); }
  .stat-card { padding: var(--m-space-md); border-radius: var(--m-radius-lg); }
  /* 表格横向滚动 */
  .section-card { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--m-radius-lg); }
  .cards-table-scroll { overflow-x: auto; }
  .data-table { min-width: 500px; }
  .data-table th, .data-table td { padding: var(--m-space-sm) var(--m-space-md); font-size: var(--m-font-sm); }
  /* 表单 */
  .uc-shop-form .form-group { margin-bottom: var(--m-space-md); }
}

/* ════════════════════════════════════════════════════════
   8. 通用响应式适配（视口驱动，确保桌面窄视口也生效）
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 卡片/按钮基础 */
  .v-card { padding: var(--m-space-md); margin-bottom: var(--m-space-sm); border-radius: var(--m-radius-lg); }
  .btn { padding: 10px 18px; border-radius: var(--m-radius-pill); }
  .btn-primary { border-radius: var(--m-radius-pill); }
  /* 弹窗/Toast */
  .alert { top: calc(var(--m-header-h) + 8px); left: var(--m-space-sm); right: var(--m-space-sm); max-width: none; }
  .gm-toast { top: calc(var(--m-header-h) + 8px); left: var(--m-space-sm); right: var(--m-space-sm); transform: none; }
  /* 表单 */
  .form-group { margin-bottom: var(--m-space-md); }
  /* 商品分类页 */
  .gp-breadcrumb { flex-wrap: wrap; font-size: var(--m-font-xs); }
  .gp-container { padding: 0; }
  .gp-prodlist-layout { display: block; }
  .gp-prodlist-side {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100vh;
    z-index: var(--m-z-drawer); transition: left var(--m-duration) var(--m-ease);
  }
  .gp-prodlist-side.open { left: 0; }
  .gp-prodlist-toolbar { display: none; }
  .gp-prod-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--m-space-sm); }
  .gp-prod-card { flex-direction: column; }
  .gp-prod-badge-rec, .gp-prod-seller, .gp-prod-desc { display: none; }
  /* 订单详情 */
  .order-layout { grid-template-columns: 1fr; }
  .order-summary .card { position: static; }
  .status-actions { flex-wrap: wrap; }
  .order-main .card { padding: var(--m-space-md) !important; }
}

/* ════════════════════════════════════════════════════════
   9. is-mobile 前缀镜像层（UA 驱动，补充视口查询未覆盖的场景）
   ════════════════════════════════════════════════════════ */
.is-mobile .pd-wrap { display: none !important; }
.is-mobile .m-pd-wrap { display: block !important; }
.is-mobile .main-content { padding: 0; }

/* ════════════════════════════════════════════════════════
   10. 商品详情移动端（Vant 风格）
   ════════════════════════════════════════════════════════ */

/* 详情页隐藏 tabbar（用购买栏替代） */
body.is-mobile:has(.m-pd-page) .m-tabbar,
body:has(.m-pd-page) .m-tabbar { display: none !important; }
body.is-mobile:has(.m-pd-page),
body:has(.m-pd-page) { padding-bottom: 0; }

.m-pd-page {
  background: var(--m-bg);
  min-height: 100vh;
  padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom));
}
.m-pd-page .m-card,
.m-pd-page .m-cell-group {
  margin: 0 var(--m-space-md) var(--m-space-sm);
}

/* 显示/隐藏控制 */
body.is-mobile .pd-wrap.hide-mobile { display: none; }
body.is-mobile .m-pd-page.hide-desktop { display: block; }
@media (max-width: 768px) {
  .pd-wrap.hide-mobile { display: none; }
  .m-pd-page.hide-desktop { display: block; }
  /* 旧的悬浮购买条与桌面端 tabbar 一并隐藏 */
  .pd-mobile-buy-bar { display: none !important; }
}

/* ── 10.1 图片轮播 Swipe ── */
.m-pd-swipe {
  position: relative;
  width: 100%;
  height: 375px;
  background: var(--m-gray-2);
  overflow: hidden;
}
.m-pd-swipe-track {
  display: flex;
  height: 100%;
  transition: transform 0.3s var(--m-ease);
  will-change: transform;
}
.m-pd-swipe-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-pd-swipe-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-pd-swipe-ph {
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
  color: #fff;
  font-size: 48px;
  font-weight: 700;
}
.m-pd-swipe-indicator {
  position: absolute;
  right: var(--m-space-md);
  bottom: var(--m-space-md);
  padding: 3px 10px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: var(--m-font-sm);
  border-radius: var(--m-radius-pill);
}
.m-pd-back, .m-pd-topcart {
  position: absolute;
  top: var(--m-space-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  color: var(--m-text);
  backdrop-filter: blur(4px);
}
.m-pd-back { left: var(--m-space-md); }
.m-pd-topcart { right: var(--m-space-md); }
.m-pd-swipe-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.85);
  color: var(--m-text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 6;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.m-pd-swipe-prev { left: var(--m-space-md); }
.m-pd-swipe-next { right: var(--m-space-md); }
.m-pd-topcart-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--m-danger);
  color: #fff;
  font-size: var(--m-font-xs);
  font-weight: 600;
  line-height: 16px;
  border-radius: var(--m-radius-pill);
  text-align: center;
  border: 1.5px solid #fff;
}

/* ── 10.2 价格卡片 ── */
.m-pd-price-card { padding: var(--m-space-lg); }
.m-pd-price-line {
  display: flex;
  align-items: baseline;
  gap: var(--m-space-sm);
  margin-bottom: var(--m-space-sm);
}
.m-pd-price-line .m-price__integer { font-size: 28px; }
.m-pd-price-old {
  font-size: var(--m-font-sm);
  color: var(--m-text-3);
  text-decoration: line-through;
}
.m-pd-title {
  font-size: var(--m-font-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--m-text);
  margin: 0 0 var(--m-space-sm);
}
.m-pd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--m-font-sm);
  color: var(--m-text-3);
}
.m-pd-meta-item { color: var(--m-text-3); }
.m-pd-meta-sep { color: var(--m-gray-5); }

/* ── 10.3 服务保障 ── */
.m-pd-service .m-cell { min-height: 44px; }
.m-pd-service .m-cell__title { font-size: var(--m-font-base); }

/* ── 10.4 商品参数 ── */
.m-pd-attrs .m-section-title { padding-bottom: 0; }
.m-pd-attrs .m-cell { min-height: 44px; }
.m-pd-attrs .m-cell__title { flex: 0 0 90px; }

/* ── 10.5 规格入口 ── */
.m-pd-spec-cell { cursor: pointer; }

/* ── 10.6 卖家卡片 ── */
.m-pd-seller-card { padding: var(--m-space-lg); }
.m-pd-seller-row {
  display: flex;
  align-items: center;
  gap: var(--m-space-md);
}
.m-pd-seller-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--m-font-lg);
  font-weight: 600;
}
.m-pd-seller-info { flex: 1; min-width: 0; }
.m-pd-seller-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--m-font-md);
  font-weight: 600;
  color: var(--m-text);
}
.m-pd-seller-stats {
  font-size: var(--m-font-sm);
  color: var(--m-text-3);
  margin-top: 2px;
}
.m-pd-seller-actions {
  display: flex;
  gap: var(--m-space-sm);
  margin-top: var(--m-space-md);
  padding-top: var(--m-space-md);
  border-top: 1px solid var(--m-border);
}

/* ── 10.7 评价预览 ── */
.m-pd-review-card { padding: var(--m-space-lg); }
.m-pd-review-head {
  display: flex;
  align-items: center;
  gap: var(--m-space-sm);
  padding-bottom: var(--m-space-md);
  cursor: pointer;
}
.m-pd-review-title {
  flex: 1;
  font-size: var(--m-font-md);
  font-weight: 600;
  color: var(--m-text);
}
.m-pd-review-rate {
  font-size: var(--m-font-base);
  color: var(--m-warning);
  font-weight: 600;
}
.m-pd-review-preview { padding-top: var(--m-space-sm); }
.m-pd-review-user {
  display: flex;
  align-items: center;
  gap: var(--m-space-sm);
  margin-bottom: var(--m-space-sm);
}
.m-pd-review-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--m-gray-3);
  color: var(--m-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--m-font-sm);
  font-weight: 600;
}
.m-pd-review-user strong { font-size: var(--m-font-base); color: var(--m-text); }
.m-pd-review-stars { color: var(--m-warning); font-size: var(--m-font-sm); }
.m-pd-review-time { margin-left: auto; font-size: var(--m-font-xs); color: var(--m-text-3); }
.m-pd-review-body {
  font-size: var(--m-font-base);
  color: var(--m-text-2);
  line-height: 1.6;
  margin: 0;
}

/* ── 10.8 推荐商品横滚 ── */
.m-pd-recommend { padding-bottom: var(--m-space-md); }
.m-pd-recommend-scroll {
  display: flex;
  gap: var(--m-space-md);
  overflow-x: auto;
  padding: 0 var(--m-space-lg);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-pd-recommend-scroll::-webkit-scrollbar { display: none; }
.m-pd-recommend-item {
  flex-shrink: 0;
  width: 96px;
}
.m-pd-recommend-img {
  width: 96px; height: 96px;
  border-radius: var(--m-radius-md);
  background: var(--m-gray-2);
  overflow: hidden;
  margin-bottom: 6px;
}
.m-pd-recommend-img img { width: 100%; height: 100%; object-fit: cover; }
.m-pd-recommend-ph {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--m-primary-light), var(--m-primary));
  color: #fff;
  font-size: var(--m-font-lg);
  font-weight: 600;
}
.m-pd-recommend-title {
  font-size: var(--m-font-xs);
  color: var(--m-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.m-pd-recommend-price {
  font-size: var(--m-font-sm);
  color: var(--m-danger);
  font-weight: 600;
  margin-top: 2px;
}

/* ── 10.9 商品详情内容 ── */
.m-pd-detail-card { padding-bottom: var(--m-space-lg); }
.m-pd-detail-content {
  padding: 0 var(--m-space-lg);
  font-size: var(--m-font-base);
  color: var(--m-text-2);
  line-height: 1.7;
}
.m-pd-detail-content img { max-width: 100%; height: auto; border-radius: var(--m-radius-md); }

/* ── 10.10 全部评价 ── */
.m-pd-review-target { padding-bottom: var(--m-space-lg); }
.m-pd-all-reviews { padding: 0 var(--m-space-lg); }
.m-pd-all-review-item {
  padding: var(--m-space-md) 0;
  border-top: 1px solid var(--m-border);
}
.m-pd-all-review-item:first-child { border-top: none; }

/* ── 10.11 底部购买栏 ActionBar ── */
.m-pd-action-bar { gap: var(--m-space-sm); }
.m-pd-action-bar .m-action-bar__icon { padding: 4px 10px; }
.m-pd-action-bar .m-pd-fav-btn.active { color: var(--m-danger); }
.m-pd-buy-cart { flex: 1; }
.m-pd-buy-now { flex: 1; }

/* ── 10.12 规格抽屉 Popup ── */
.m-pd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: var(--m-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--m-duration) var(--m-ease), visibility var(--m-duration);
}
.m-pd-overlay.open { opacity: 1; visibility: visible; }
.m-pd-popup {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--m-card-bg);
  border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0;
  z-index: var(--m-z-drawer);
  transform: translateY(100%);
  transition: transform var(--m-duration) var(--m-ease);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--m-safe-bottom);
  overscroll-behavior: contain;
}
.m-pd-popup.open { transform: translateY(0); }
.m-pd-popup-head {
  display: flex;
  gap: var(--m-space-md);
  padding: var(--m-space-lg);
  border-bottom: 1px solid var(--m-border);
}
.m-pd-popup-img {
  flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: var(--m-radius-md);
  background: var(--m-gray-2);
  overflow: hidden;
  margin-top: -24px;
  border: 2px solid #fff;
  box-shadow: var(--m-shadow-card);
}
.m-pd-popup-img img { width: 100%; height: 100%; object-fit: cover; }
.m-pd-popup-info { flex: 1; min-width: 0; }
.m-pd-popup-stock {
  font-size: var(--m-font-sm);
  color: var(--m-text-3);
  margin-top: 4px;
}
.m-pd-popup-selected {
  font-size: var(--m-font-sm);
  color: var(--m-text-3);
  margin-top: 2px;
}
.m-pd-popup-close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: none;
  border: none;
  color: var(--m-text-3);
  cursor: pointer;
  align-self: flex-start;
}
.m-pd-popup-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--m-space-lg);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.m-pd-popup-section { margin-bottom: var(--m-space-lg); }
.m-pd-popup-label {
  font-size: var(--m-font-base);
  color: var(--m-text-2);
  margin-bottom: var(--m-space-sm);
}
.m-pd-popup-tags { display: flex; flex-wrap: wrap; gap: var(--m-space-sm); }
.m-pd-popup-tag { padding: 6px 14px; font-size: var(--m-font-base); }
.m-pd-popup-tag.active { box-shadow: 0 0 0 1px var(--m-primary) inset; }
.m-pd-popup-foot {
  display: flex;
  gap: var(--m-space-sm);
  padding: var(--m-space-md) var(--m-space-lg);
  border-top: 1px solid var(--m-border);
}

/* ── 10.13 Toast ── */
.m-pd-toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--m-radius-md);
  font-size: var(--m-font-base);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: var(--m-z-toast);
  transition: opacity 0.3s;
}
.m-pd-toast-hide { opacity: 0; }

/* ════════════════════════════════════════════════════════
   11. 移动端版权条（VShop 版权保护）
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .m-cpr-bar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px calc(12px + var(--m-safe-bottom));
    background: var(--m-card-bg);
    color: var(--m-text-3);
    font-size: 12px;
    border-top: 1px solid var(--m-border);
  }
  .m-cpr-bar strong { color: var(--m-primary); font-weight: 600; }
  .m-cpr-sep { color: var(--m-gray-4); }
}