/* ==========================================================================
   移动端（App / 微信小程序 / H5 同源）— Material Design 3
   单位铁律：1dp = 1px（375 视口）= 2rpx（750 设计稿）｜触摸目标 ≥ 48dp
   说明：原型以 375×812 手机框示意；开发侧 uni-app 中所有数值 ×2 写作 rpx
   ========================================================================== */

/* ==========================================================================
   预览舞台（科技风）
   · 顶部信息栏已移除，舞台只保留手机演示区
   · html/body 锁死高度与溢出 → 页面永不出现纵向滚动条
   · shell-mobile.js 的 fitStage() 给 .m-phone-row 打 scale()，
     手机框等比缩放到可视区内并居中，外框与屏内排版保持 375×812 原比例
   ========================================================================== */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #050a16;
}

.m-stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 68% at 50% 116%, rgba(24, 92, 216, 0.42) 0%, rgba(24, 92, 216, 0) 62%),
    radial-gradient(94% 58% at 50% -12%, rgba(34, 104, 232, 0.46) 0%, rgba(34, 104, 232, 0) 60%),
    linear-gradient(180deg, #050a16 0%, #08162b 46%, #050a16 100%);
}

/* 技术底纹：中心清晰、四周淡出 */
.m-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(76% 76% at 50% 50%, #000 0%, rgba(0, 0, 0, 0) 78%);
  mask-image: radial-gradient(76% 76% at 50% 50%, #000 0%, rgba(0, 0, 0, 0) 78%);
}

/* 手机演示区必须压在底纹之上 */
.m-stage > .m-phone-row,
.m-stage > .m-fit {
  position: relative;
  z-index: 1;
}

/* 旧版顶部信息栏：节点保留但不再渲染 */
.m-stage__bar {
  display: none;
}

/* ---------- 舞台浮动控件（设备切换 / 返回总览） ---------- */
.m-float {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(9, 20, 42, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.44);
  opacity: 0.62;
  transition: opacity 0.2s;
}

.m-float:hover {
  opacity: 1;
}

.m-device-tabs {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.m-device-tabs button {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.66);
  transition: background 0.18s, color 0.18s;
}

.m-device-tabs button:hover {
  color: #fff;
}

.m-device-tabs button.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: #0b1c40;
  font-weight: 500;
}

.m-float__back {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 13px;
  border-radius: 999px;
  background: linear-gradient(120deg, #2f6dff, #0b327e);
  color: #fff;
  font-size: 11.5px;
  white-space: nowrap;
}

.m-float__back:hover {
  color: #fff;
}

/* ---------- 宽屏品牌侧栏（shell-mobile.js 注入，≥1200px 显示） ---------- */
.m-brandstage {
  display: none;
}

@media (min-width: 1200px) {
  .m-brandstage {
    position: absolute;
    left: max(36px, calc(50% - 566px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: block;
    width: 252px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
  }
}

.m-brandstage__mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 600;
  background: linear-gradient(135deg, #2f6dff, #0b327e);
  box-shadow: 0 10px 24px rgba(20, 80, 220, 0.42);
}

.m-brandstage__name {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: 0.5px;
}

.m-brandstage__en {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.m-brandstage__line {
  height: 1px;
  margin: 20px 0 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.m-brandstage__page {
  font-family: var(--bf-font-number);
  font-size: 13px;
  color: #8fb6ff;
}

.m-brandstage__spec {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.5);
}

.m-brandstage__caps {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-brandstage__caps span {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.m-phone-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex: none;
  flex-wrap: nowrap;
}

/* ---------- 手机外框：金属中框 + 科技辉光 ---------- */
.m-phone {
  position: relative;
  width: 375px;
  height: 812px;
  flex: none;
  background: #fff;
  border: 10px solid #0a1223;
  border-radius: 46px;
  box-shadow:
    0 0 0 1px rgba(125, 170, 255, 0.3),
    0 30px 70px rgba(0, 0, 0, 0.62),
    0 0 96px rgba(40, 110, 230, 0.26);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 品牌顶栏页：状态栏区并入深色顶栏，消除顶部白色断层 */
.m-phone--brandtop {
  background: #0c2050;
}

.m-phone--brandtop .m-status {
  color: #fff;
}

.m-phone--brandtop .m-status__right svg {
  fill: #fff;
}

.m-phone--brandtop .m-status__right i {
  border-color: rgba(255, 255, 255, 0.72);
}

.m-phone--brandtop .m-status__right i::after {
  background: rgba(255, 255, 255, 0.72);
}

.m-phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 24px;
  border-radius: 999px;
  background: #0a1223;
  z-index: 30;
}

.m-phone__home {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 132px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 30;
}

.m-phone--mp .m-phone__notch { display: none; }

/* 胶囊按钮仅在小程序壳显示 */
.m-phone:not(.m-phone--mp) .m-capsule { display: none; }

/* H5 壳：顶部补一条浏览器地址栏示意 */
.m-phone--h5 .m-status { padding-top: 6px; }

/* ---------- 手机演示区容器 ----------
   舞台本身就是自适应的（见文件顶部 .m-stage），这里只服务额外包了
   一层 .m-fit 的页面：让手机行区域撑满舞台剩余空间。 */
.m-fit {
  flex: 1;
  min-height: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 缩放后手机行的布局盒仍是原始 375×812，余量必须裁掉，避免撑出滚动条 */
  overflow: hidden;
}

/* 注：不给 .m-phone-row 加 transform 过渡——首帧从 none 缓动到目标比例
   会让手机框在入场瞬间超出可视区，缩放必须即时生效。 */

/* 小程序胶囊按钮 */
.m-capsule {
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 40;
  width: 84px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.m-capsule span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}

.m-capsule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* ---------- 状态栏 ---------- */
.m-status {
  height: 44px;
  flex: none;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  background: transparent;
  z-index: 20;
}

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

.m-status__right i {
  display: inline-block;
  width: 15px;
  height: 9px;
  border: 1.4px solid rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  position: relative;
}

.m-status__right i::after {
  content: "";
  position: absolute;
  inset: 1.6px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 1px;
}

/* ---------- Top App Bar（64dp） ---------- */
.m-appbar {
  flex: none;
  min-height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid rgba(15, 32, 64, 0.07);
}

/* 品牌顶栏：深蓝到品牌蓝的横向渐变，配一条内高光，和顶部状态栏区无缝衔接 */
.m-appbar--brand {
  background: linear-gradient(120deg, #0c2050 0%, #16408f 58%, #1d5bd6 100%);
  color: #fff;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.m-appbar--flat {
  border-bottom: none;
}

.m-appbar__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.m-appbar__sub {
  font-size: 12px;
  opacity: 0.7;
}

.m-appbar__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: inherit;
}

.m-appbar__icon:hover {
  background: rgba(0, 0, 0, 0.05);
}

.m-appbar--brand .m-appbar__icon:hover {
  background: rgba(255, 255, 255, 0.14);
}

.m-appbar__spacer {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------- 内容区 ---------- */
.m-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f1f4f9;
  padding: 12px 0 16px;
  scrollbar-width: none;
  position: relative;
}

.m-body::-webkit-scrollbar { width: 0; }

.m-body--flush { padding-top: 0; }

.m-sec {
  padding: 0 16px;
  margin-bottom: 16px;
}

.m-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.m-sec__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.m-sec__more {
  font-size: 13px;
  color: #0052d9;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ---------- 卡片（贴边发丝线 + 分层阴影，商业质感） ---------- */
.m-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(15, 32, 64, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 32, 64, 0.05),
    0 10px 24px -14px rgba(15, 32, 64, 0.24);
}

.m-card + .m-card {
  margin-top: 12px;
}

/* 两卡并排时（栅格一行多列 / 单行 flex）不该再补竖向间距：
   否则后一张被下推 12px，拉伸后比同排另一张矮 12px，左右栏高度不齐 */
.m-grid2 > .m-card + .m-card,
.m-grid3 > .m-card + .m-card,
.m-grid4 > .m-card + .m-card,
.m-grid6 > .m-card + .m-card,
.m-row > .m-card + .m-card,
.m-between > .m-card + .m-card {
  margin-top: 0;
}

.m-card--flat {
  box-shadow: none;
  border: 1px solid rgba(15, 32, 64, 0.08);
}

.m-card--fill {
  background: linear-gradient(150deg, #eef4ff, #e2ebff);
  border-color: rgba(0, 82, 217, 0.1);
}

.m-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
}

/* ---------- 列表项（≥56dp） ---------- */
.m-list {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15, 32, 64, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 32, 64, 0.05),
    0 10px 24px -14px rgba(15, 32, 64, 0.24);
  overflow: hidden;
}

.m-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15, 32, 64, 0.05);
}

.m-item:last-child {
  border-bottom: none;
}

.m-item__icon {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8f0ff, #d3e2ff);
  color: #0052d9;
  box-shadow: inset 0 0 0 1px rgba(0, 82, 217, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-item__label {
  font-size: 15px;
  line-height: 21px;
}

.m-item__value {
  margin-left: auto;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- 按钮（≥48dp 触摸目标） ---------- */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  background: linear-gradient(120deg, #0d47c8, #1c6bf0);
  color: #fff;
  box-shadow: 0 8px 18px -7px rgba(13, 60, 180, 0.62);
  white-space: nowrap;
}

.m-btn--tonal {
  background: linear-gradient(135deg, #e4ecff, #d2e0ff);
  color: #003cab;
  box-shadow: none;
}

.m-btn--outline {
  background: transparent;
  border: 1px solid rgba(15, 32, 64, 0.22);
  color: rgba(0, 0, 0, 0.9);
  box-shadow: none;
}

.m-btn--text {
  background: transparent;
  color: #0052d9;
  padding: 0 12px;
  box-shadow: none;
}

.m-btn--danger {
  background: linear-gradient(120deg, #e05b52, #c7352c);
  box-shadow: 0 8px 18px -7px rgba(190, 50, 45, 0.58);
}

.m-btn--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.m-btn--block {
  width: 100%;
}

.m-btn--grow {
  flex: 1;
}

/* ---------- 底部操作栏（≥56dp + 安全区） ---------- */
.m-actionbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 16px calc(8px + 12px);
  background: #fff;
  border-top: 1px solid rgba(15, 32, 64, 0.07);
  box-shadow: 0 -8px 22px -16px rgba(15, 32, 64, 0.34);
}

/* ---------- 底部导航（80dp + 安全区） ---------- */
.m-nav {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 80px;
  padding-bottom: 12px;
  background: #fff;
  border-top: 1px solid rgba(15, 32, 64, 0.07);
  box-shadow: 0 -8px 22px -16px rgba(15, 32, 64, 0.34);
}

.m-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 11px;
  position: relative;
}

.m-nav__item.is-active {
  color: #0052d9;
  font-weight: 600;
}

.m-nav__pill {
  width: 56px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}

.m-nav__item.is-active .m-nav__pill {
  background: linear-gradient(135deg, #e2ebff, #c9daff);
  box-shadow: inset 0 0 0 1px rgba(0, 82, 217, 0.08);
}

.m-nav__mark {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0d47c8, #3d8bff);
}

.m-nav__badge {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d54941;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* ---------- 搜索框 ---------- */
.m-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

.m-search--fill {
  background: #eef1f7;
  box-shadow: inset 0 0 0 1px rgba(15, 32, 64, 0.05);
}

/* ---------- 分段 / 标签栏 ---------- */
.m-tabs {
  display: flex;
  gap: 20px;
  padding: 0 16px;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}

.m-tabs::-webkit-scrollbar { width: 0; }

.m-tab {
  position: relative;
  padding: 12px 0;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.m-tab.is-active {
  color: #0052d9;
  font-weight: 600;
}

.m-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #0d47c8, #3d8bff);
}

.m-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}

.m-chips::-webkit-scrollbar { width: 0; }

.m-chip {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: rgba(0, 0, 0, 0.7);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.m-chip.is-active {
  background: linear-gradient(135deg, #e4ecff, #cfdfff);
  border-color: transparent;
  color: #003cab;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(0, 82, 217, 0.12);
}

/* ---------- 行情数字 ---------- */
.m-price {
  font-family: var(--bf-font-number);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 28px;
}

.m-price--up { color: #ad352f; }
.m-price--down { color: #008858; }

.m-chg {
  font-family: var(--bf-font-number);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ---------- 悬浮按钮 FAB ---------- */
.m-fab {
  position: absolute;
  right: 16px;
  bottom: 96px;
  z-index: 25;
  height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a63ee, #0b327e);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 12px 26px -8px rgba(13, 70, 200, 0.62);
}

/* ---------- 底部弹出（Bottom Sheet） ---------- */
.m-sheet-mask {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: flex-end;
}

.m-sheet {
  width: 100%;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 12px 16px calc(16px + 12px);
  box-shadow: 0 -12px 40px rgba(6, 18, 42, 0.24);
}

.m-sheet__handle {
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  margin: 0 auto 14px;
}

.m-sheet__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ---------- 空状态 / 加载 ---------- */
.m-empty {
  padding: 48px 24px;
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

.m-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, #eef0f3 25%, #e3e6ea 37%, #eef0f3 63%);
  background-size: 400% 100%;
  animation: m-skel 1.4s ease infinite;
}

@keyframes m-skel {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- 工具类 ---------- */
.m-row { display: flex; align-items: center; gap: 8px; }
.m-between { display: flex; align-items: center; justify-content: space-between; }
.m-col { display: flex; flex-direction: column; }
.m-grow { flex: 1; min-width: 0; }
.m-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-line2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-block { display: block; }
.m-ml-8 { margin-left: 8px; }
.m-mt-4 { margin-top: 4px; }
.m-mt-8 { margin-top: 8px; }
.m-mt-12 { margin-top: 12px; }
.m-mt-16 { margin-top: 16px; }
.m-mb-8 { margin-bottom: 8px; }
.m-mb-12 { margin-bottom: 12px; }
.m-t12 { font-size: 12px; }
.m-t13 { font-size: 13px; }
.m-t14 { font-size: 14px; }
.m-t15 { font-size: 15px; }
.m-t16 { font-size: 16px; }
.m-t18 { font-size: 18px; }
.m-c6 { color: rgba(0, 0, 0, 0.6); }
.m-c4 { color: rgba(0, 0, 0, 0.4); }
.m-brand { color: #0052d9; }
.m-up { color: #ad352f; }
.m-down { color: #008858; }
.m-bold { font-weight: 600; }
.m-num { font-family: var(--bf-font-number); font-variant-numeric: tabular-nums; }
.m-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  /* 原 7px 偏窄，文字几乎顶到圆角边；加到 10px 让徽标盒子更宽松 */
  padding: 0 10px;
  border-radius: 6px;
  background: #f0f1f3;
  color: rgba(0, 0, 0, 0.6);
  font-size: 11px;
  /* 三重保证徽标不被压窄、文字不换行：
     flex:none 拒绝收缩；white-space:nowrap 禁止文字折行；
     min-width:max-content 让盒宽永远不小于整段文字（容器再窄也压不动） */
  flex: none;
  white-space: nowrap;
  min-width: max-content;
}
.m-tag--brand { background: linear-gradient(135deg, #e6eeff, #d3e2ff); color: #003cab; }
.m-tag--up { background: #ffd8d2; color: #ad352f; }
.m-tag--down { background: #c6f3d7; color: #008858; }
.m-tag--warn { background: #ffefdb; color: #a34d09; }
.m-tag--ok { background: #dff7e8; color: #1a7a54; }

/* ---------- 数量增减器 ---------- */
.m-stepper { display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; overflow: hidden; flex: none; }
.m-stepper button { width: 32px; height: 30px; background: #f7f8fa; font-size: 16px; color: rgba(0, 0, 0, 0.7); }
.m-stepper span { width: 58px; text-align: center; font-family: var(--bf-font-number); font-size: 14px; }
.m-thumb {
  border-radius: 10px;
  background: linear-gradient(135deg, #eef1f7, #dfe5f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa7bd;
  font-size: 11px;
  flex: none;
}

/* ==========================================================================
   模块级组件（移动端原型共用）
   ========================================================================== */

/* ---------- 栅格 ---------- */
.m-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------- 快捷入口 ---------- */
.m-qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 2px;
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.72);
  text-align: center;
}
.m-qa__ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #e8f0ff, #d3e2ff);
  color: #0052d9;
  box-shadow: inset 0 0 0 1px rgba(0, 82, 217, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-qa__ic--plain { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.7); }

/* ---------- 数据条 ---------- */
.m-stats { display: flex; }
.m-stats > * { flex: 1; text-align: center; min-width: 0; }
.m-stats__v {
  font-family: var(--bf-font-number);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 24px;
}
.m-stats__l { font-size: 11.5px; color: rgba(0, 0, 0, 0.55); margin-top: 2px; }

/* ---------- 图片占位 ---------- */
.m-img {
  border-radius: 10px;
  background: linear-gradient(135deg, #eef1f7, #dfe5f0);
  color: #8e9cb2;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: none;
  overflow: hidden;
}
.m-img--72 { width: 72px; height: 72px; }
.m-img--88 { width: 88px; height: 88px; }
.m-img--wide { width: 100%; height: 132px; }
.m-img--sq { width: 100%; aspect-ratio: 1 / 1; }

/* ---------- 商品 / 卡片行 ---------- */
.m-prod { display: flex; gap: 12px; }
.m-prod__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-prod__t { font-size: 14.5px; line-height: 20px; font-weight: 500; }
.m-prod__m { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.m-prod__p { font-family: var(--bf-font-number); font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: #d54941; line-height: 22px; }
.m-prod__p small { font-size: 11px; font-weight: 400; }

/* ---------- 表单 ---------- */
.m-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(15, 32, 64, 0.06);
}
.m-field:last-child { border-bottom: none; }
.m-field--col { flex-direction: column; align-items: stretch; gap: 8px; }
.m-field__label { width: 82px; flex: none; font-size: 14px; color: rgba(0, 0, 0, 0.65); }
.m-field__label--req::after { content: "*"; color: #d54941; margin-left: 2px; }
.m-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font-size: 15px;
}
.m-input::placeholder { color: rgba(0, 0, 0, 0.32); }
.m-textarea {
  width: 100%;
  min-height: 84px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 22px;
}
.m-textarea::placeholder { color: rgba(0, 0, 0, 0.32); }
.m-select {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.9);
}
.m-select--ph { color: rgba(0, 0, 0, 0.32); }

/* ---------- 开关 / 勾选 / 单选 ---------- */
.m-switch {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d5d8dd;
  position: relative;
  flex: none;
  transition: background 0.18s;
}
.m-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s;
}
.m-switch.is-on { background: linear-gradient(120deg, #0d47c8, #2f86ff); }
.m-switch.is-on::after { transform: translateX(18px); }
.m-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.m-check.is-on { background: linear-gradient(135deg, #0d47c8, #2f86ff); border-color: #1a5ae0; color: #fff; }
.m-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.m-radio.is-on { border-color: #0052d9; }
.m-radio.is-on::after { background: #0052d9; }

/* ---------- 进度 ---------- */
.m-progress { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.07); overflow: hidden; }
.m-progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0d47c8, #3d8bff); }

/* ---------- 时间轴 ---------- */
.m-tl { position: relative; padding-left: 20px; }
.m-tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgba(0, 0, 0, 0.1); }
.m-tl__i { position: relative; padding-bottom: 16px; }
.m-tl__i:last-child { padding-bottom: 0; }
.m-tl__i::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.18);
}
.m-tl__i.is-done::before { border-color: #1a5ae0; background: linear-gradient(135deg, #0d47c8, #2f86ff); }
.m-tl__i.is-cur::before { border-color: #0052d9; box-shadow: 0 0 0 3px #dbe4ff; }

/* ---------- 分段步骤条（合同 / 订单流转） ---------- */
.m-steps { display: flex; align-items: flex-start; }
.m-step { flex: 1; text-align: center; position: relative; font-size: 11px; color: rgba(0, 0, 0, 0.45); }
.m-step__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 auto 6px;
  background: #e9ecf1;
  color: rgba(0, 0, 0, 0.35);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.m-step::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #e9ecf1;
}
.m-step:first-child::before { display: none; }
.m-step.is-done .m-step__dot { background: linear-gradient(135deg, #0d47c8, #2f86ff); color: #fff; }
.m-step.is-done::before { background: #1a5ae0; }
.m-step.is-cur .m-step__dot { background: #fff; border: 2px solid #0052d9; color: #0052d9; }
.m-step.is-cur { color: #0052d9; font-weight: 500; }

/* ---------- 横向卡片滑轨（比价 / 推荐） ---------- */
.m-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 16px 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.m-rail::-webkit-scrollbar { height: 0; }
.m-rail > * { scroll-snap-align: start; flex: none; }
.m-rail--card > .m-card { width: 250px; }

/* ---------- 底部固定区（无 tab 时的操作条） ---------- */
.m-fixed { position: absolute; left: 0; right: 0; bottom: 0; z-index: 26; }

/* ---------- 顶栏内嵌搜索 ---------- */
.m-appbar__search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.5px;
}
.m-appbar--light .m-appbar__search { background: #f0f1f3; color: rgba(0, 0, 0, 0.4); }

/* ---------- 金额条 ---------- */
.m-amount {
  font-family: var(--bf-font-number);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 34px;
}

/* ==========================================================================
   角色主题层 · 采购商版（买家视角）
   品牌亮蓝主色 + 安全橙行动色；取向：行情、选品、询价比价、担保下单
   ========================================================================== */
:root {
  --m-deep: #0a2a63;
  --m-deep-2: #1547a8;
  --m-deep-3: #2e7bf0;
  --m-primary: #0052d9;
  --m-primary-ink: #003cab;
  --m-primary-deep: #0b47c0;
  --m-primary-bright: #3d8bff;
  --m-primary-rgb: 0, 82, 217;
  --m-accent: #e8590c;
  --m-accent-ink: #9a3412;
  --m-accent-rgb: 232, 89, 12;
  --m-soft: #eaf1ff;
  --m-soft-2: #d6e3ff;
  --m-glow: 40, 110, 230;
}

/* ---------- 舞台与手机外框：品牌蓝辉光 ---------- */
.m-stage {
  background:
    radial-gradient(120% 68% at 50% 116%, rgba(var(--m-glow), 0.42) 0%, rgba(var(--m-glow), 0) 62%),
    radial-gradient(94% 58% at 50% -12%, rgba(var(--m-glow), 0.46) 0%, rgba(var(--m-glow), 0) 60%),
    linear-gradient(180deg, #050a16 0%, #08162b 46%, #050a16 100%);
}

.m-phone {
  box-shadow:
    0 0 0 1px rgba(125, 170, 255, 0.3),
    0 30px 70px rgba(0, 0, 0, 0.62),
    0 0 96px rgba(var(--m-glow), 0.26);
}

/* ---------- 角色身份标 ---------- */
.m-rolechip {
  height: 20px;
  padding: 0 8px;
  margin-right: 4px;
  border-radius: 6px;
  flex: none;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--m-primary-ink);
  background: var(--m-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--m-primary-rgb), 0.16);
}

.m-rolechip--onbrand {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.m-float__role {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  color: #d8e6ff;
  background: rgba(var(--m-glow), 0.3);
  box-shadow: inset 0 0 0 1px rgba(150, 195, 255, 0.3);
}

.m-brandstage__book {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-top: 10px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(120deg, var(--m-deep-2), var(--m-accent));
  box-shadow: 0 6px 16px -8px rgba(var(--m-glow), 0.8);
}

.m-brandstage__mark,
.m-float__back {
  background: linear-gradient(135deg, var(--m-deep-3), var(--m-deep));
}

/* ---------- 品牌顶栏 / 主操作色 ---------- */
.m-appbar--brand {
  background: linear-gradient(120deg, var(--m-deep) 0%, var(--m-deep-2) 58%, var(--m-deep-3) 100%);
}

.m-phone--brandtop {
  background: var(--m-deep);
}

.m-sec__more,
.m-btn--text,
.m-brand,
.m-tab.is-active,
.m-nav__item.is-active,
.m-radio.is-on {
  color: var(--m-primary);
}

.m-radio.is-on {
  border-color: var(--m-primary);
}

.m-radio.is-on::after {
  background: var(--m-primary);
}

.m-btn {
  background: linear-gradient(120deg, var(--m-primary-deep), var(--m-primary-bright));
  box-shadow: 0 8px 18px -7px rgba(var(--m-primary-rgb), 0.62);
}

/* 变体重申：本块 .m-btn 的主色声明晚于上方各变体且权重相同，
   不重申会让 outline / text 变体丢掉透明底、danger 变体丢掉红色，
   最终渲染成「深蓝底 + 黑字」的不可读配色 */
.m-btn--tonal {
  background: linear-gradient(135deg, var(--m-soft), var(--m-soft-2));
  color: var(--m-primary-ink);
  box-shadow: none;
}

.m-btn--outline {
  background: transparent;
  box-shadow: none;
}

.m-btn--text {
  background: transparent;
  box-shadow: none;
}

.m-btn--danger {
  background: linear-gradient(120deg, #e05b52, #c7352c);
  box-shadow: 0 8px 18px -7px rgba(190, 50, 45, 0.58);
}

/* 买家端主行动按钮走安全橙：与「询价 / 下单」这类成交动作绑定 */
.m-fab {
  background: linear-gradient(135deg, #f5772e, var(--m-accent));
  box-shadow: 0 12px 26px -8px rgba(var(--m-accent-rgb), 0.62);
}

.m-item__icon,
.m-qa__ic {
  background: linear-gradient(135deg, var(--m-soft), var(--m-soft-2));
  color: var(--m-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--m-primary-rgb), 0.1);
}

.m-nav__item.is-active .m-nav__pill {
  background: linear-gradient(135deg, var(--m-soft), var(--m-soft-2));
  box-shadow: inset 0 0 0 1px rgba(var(--m-primary-rgb), 0.1);
}

.m-nav__mark,
.m-tab.is-active::after,
.m-progress > i,
.m-step.is-done::before {
  background: linear-gradient(90deg, var(--m-primary-deep), var(--m-primary-bright));
}

.m-step.is-done .m-step__dot,
.m-tl__i.is-done::before,
.m-check.is-on,
.m-switch.is-on {
  background: linear-gradient(135deg, var(--m-primary-deep), var(--m-primary-bright));
}

.m-check.is-on,
.m-switch.is-on {
  border-color: var(--m-primary);
}

.m-step.is-cur .m-step__dot {
  border-color: var(--m-primary);
  color: var(--m-primary);
}

.m-step.is-cur {
  color: var(--m-primary);
}

.m-tl__i.is-cur::before {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 3px var(--m-soft-2);
}

.m-tag--brand {
  background: linear-gradient(135deg, var(--m-soft), var(--m-soft-2));
  color: var(--m-primary-ink);
}

.m-chip.is-active {
  background: linear-gradient(135deg, var(--m-soft), var(--m-soft-2));
  color: var(--m-primary-ink);
  box-shadow: inset 0 0 0 1px rgba(var(--m-primary-rgb), 0.12);
}

.m-card--fill {
  background: linear-gradient(150deg, var(--m-soft), var(--m-soft-2));
  border-color: rgba(var(--m-primary-rgb), 0.1);
}

/* ==========================================================================
   采购商向布局原语（行情台账 / 选品卡 / 询价进度）
   ========================================================================== */

/* 区块标题：左侧竖条 + 标题 + 右侧动作 */
.m-h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.m-h2::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--m-primary-bright), var(--m-primary-deep));
}

.m-h2__t {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.m-h2__more {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--m-primary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* 指标格：白底分格，用于「我的采购」概览 */
.m-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 32, 64, 0.07);
}

.m-kpi__i {
  background: #fff;
  padding: 12px 6px;
  text-align: center;
}

.m-kpi__v {
  font-family: var(--bf-font-number);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.4px;
}

.m-kpi__l {
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.55);
}

/* 行情台账：横向滑轨的价格卡（品类 + 指数 + 涨跌 + 迷你柱） */
.m-quote {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.m-quote::-webkit-scrollbar {
  display: none;
}

.m-quote__i {
  flex: none;
  width: 132px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 32, 64, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 32, 64, 0.05),
    0 10px 22px -16px rgba(15, 32, 64, 0.3);
}

.m-quote__t {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-quote__v {
  margin-top: 4px;
  font-family: var(--bf-font-number);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 27px;
}

.m-quote__v small {
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 2px;
}

/* 选品双列卡 */
.m-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.m-pick__i {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 32, 64, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 32, 64, 0.05),
    0 12px 24px -18px rgba(15, 32, 64, 0.3);
}

.m-pick__ph {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--m-deep-2), var(--m-deep-3));
}

.m-pick__b {
  padding: 9px 10px 11px;
}

.m-pick__n {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.m-pick__p {
  margin-top: 6px;
  font-family: var(--bf-font-number);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--m-accent);
}

.m-pick__p small {
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 2px;
}

/* 询价进度卡：品类 + 报价家数 + 剩余时间 */
.m-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 32, 64, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 32, 64, 0.05),
    0 10px 22px -16px rgba(15, 32, 64, 0.28);
}

.m-prog__n {
  flex: none;
  width: 40px;
  text-align: center;
  font-family: var(--bf-font-number);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--m-accent);
}

.m-prog__n small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}

/* 强调徽标（橙）：比价中 / 待付款 */
.m-tag--accent {
  background: rgba(var(--m-accent-rgb), 0.12);
  color: var(--m-accent-ink);
}

/* ==========================================================================
   真实配图（复用门户端 AI 生图，随本端 image/ 目录离线分发）
   占位容器（.m-img / .m-thumb / LOGO / 头像 / 头图 等）内直接放 <img>，
   由容器负责尺寸与圆角裁切，图片铺满并居中裁切，无需给 <img> 加类名。
   ========================================================================== */
.m-img,
.m-thumb,
.sp-ph,
.sp__logo,
.lg-logo,
.mn-av,
.wk-id__logo,
.sh-logo,
.sh-hero,
.cp-head__l,
.m-pick__ph,
.tc-qr,
.ab-logo,
.ch-av,
.ad-msg__av,
.fv-thumb,
.hs-thumb {
  position: relative;
  overflow: hidden;
}

.m-img > img,
.m-thumb > img,
.sp-ph > img,
.sp__logo > img,
.lg-logo > img,
.mn-av > img,
.wk-id__logo > img,
.sh-logo > img,
.cp-head__l > img,
.m-pick__ph > img,
.tc-qr > img,
.ab-logo > img,
.ch-av > img,
.ad-msg__av > img,
.fv-thumb > img,
.hs-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 店铺头图为通栏背景位：图片绝对铺满，原有装饰光斑仍在其上 */
.sh-hero > img {
  position: absolute;
  inset: 0;
}