:root {
  --primary: #f2545b;
  --primary-dark: #e23a44;
  --primary-light: #ff8087;
  --bg-gray: #f5f5f5;
  --text-dark: #222;
  --text-gray: #999;
  --white: #fff;
  --app-max-width: 480px; /* H5设计稿定宽,真机(屏宽<480px)会自动铺满,桌面预览时居中显示成"手机屏幕"效果 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  /* 禁止桌面端出现横向滚动条把H5容器挤歪 */
  overflow-x: hidden;
  background: #e5e5e5; /* 桌面预览时容器外的背景,真机上不可见 */
  -webkit-text-size-adjust: 100%; /* 禁止iOS横屏时自动放大字号 */
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

body {
  margin: 0 auto;
  max-width: var(--app-max-width);
  min-height: 100vh;
  min-height: 100dvh; /* 移动端浏览器地址栏收起/展开时高度更准确 */
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-gray);
  color: var(--text-dark);
  padding-bottom: calc(64px + var(--safe-bottom)); /* 留出底部导航 + 安全区空间 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; /* 防止iOS下拉页面出现回弹露白 */
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.12); /* 桌面预览时的"手机边框"阴影,真机上几乎不可见 */
}
a { text-decoration: none; color: inherit; -webkit-touch-callout: none; }
button {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
input, textarea, select {
  font-size: 16px; /* 小于16px会触发iOS Safari自动放大输入框,统一16px规避 */
}
img { -webkit-user-drag: none; user-select: none; }

/* 顶部标题栏 */
.topbar {
  background: var(--white);
  padding: 14px 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #eee;
}
.topbar .back {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 20px;
  color: var(--text-dark);
}

/* ============================================
   首页专属: 整体红底 + 居中品牌徽标(只在 body.home-fixed 下生效,不影响登录页等其他用 .hero-header 的页面)
   ============================================ */
body.home-fixed {
  background: #d4303d; /* 首页整体红底 */
}
body.home-fixed .hero-header {
  background: transparent;
  padding: 12px 16px 10px;
  text-align: center;
}
.shop-logo {
  max-height: 40px;
  max-width: 80%;
  display: inline-block;
}

/* 筛选栏在红底上改成白色浮起的卡片 */
body.home-fixed .filter-bar {
  background: rgba(255,255,255,0.95);
  margin: 0 12px 12px;
  padding: 6px 10px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
body.home-fixed .filter-bar select,
body.home-fixed .filter-bar input {
  background-color: #fff;
  border-color: #f0f0f0;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 15px;
}

/* banner在红底上加一圈白边,避免和背景颜色糊在一起 */
body.home-fixed .banner {
  border: 3px solid rgba(255,255,255,0.5);
}

/* 顶部固定区域本身透明,让红色背景透出来 */
body.home-fixed .home-top-fixed {
  background: transparent;
  padding-top: env(safe-area-inset-top, 0px);
}

/* 红色渐变头部 */
.hero-header {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
  padding: 20px 16px 28px;
  color: #fff;
}
.hero-header h1 {
  margin: 0 0 4px;
  font-size: 20px;
}

/* 搜索/筛选条: 白色浮起圆角容器,内部精致的圆角控件 */
.filter-bar {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--white);
}
.filter-bar select,
.filter-bar input {
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fafafa;
  font-size: 16px; /* >=16px避免iOS Safari输入框聚焦时自动放大整页 */
  min-width: 0; /* 关键: flex子元素默认不会缩小到低于内容宽度,不加这个搜索框会把屏幕撑爆 */
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-bar select {
  flex: 1 1 0;
  max-width: 124px;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2390979f%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><path d=%27M6 9l6 6 6-6%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 26px;
}
.filter-bar input {
  flex: 2 1 0;
  background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2390979f%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><circle cx=%2711%27 cy=%2711%27 r=%276%27/><path d=%27M20 20l-4-4%27/></svg>");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 15px;
  padding-left: 32px;
}
.filter-bar select:focus,
.filter-bar input:focus {
  outline: none;
  border-color: var(--primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(242,84,91,0.12);
}

/* 商品卡片: 单列布局,无图,价格做成右上角角标 */
.product-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 首页广告横幅: 展示在商品列表上方,后台"页面设置"可配图片和跳转链接 */
.home-ad {
  display: block;
  margin: 12px 12px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.home-ad img {
  display: block;
  width: 100%;
  height: auto;
}
.product-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: block;
}
.product-card .info {
  padding: 14px 16px;
}
.product-card .title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.product-card .title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.product-card .price-badge {
  flex-shrink: 0;
  border: 1px solid #ffd9db;
  background: #fff6f6;
  border-radius: 8px;
  padding: 4px 10px;
  text-align: center;
}
.product-card .subtitle {
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.publish-time {
  font-size: 11px;
  color: #bbb;
}
.price {
  color: var(--primary);
  font-weight: 700;
  font-size: 20px;
}
.price::before { content: "¥"; font-size: 13px; margin-right: 1px; }
.original-price {
  display: block;
  color: var(--text-gray);
  font-size: 11px;
  text-decoration: line-through;
  margin-top: 1px;
}
.sales-count {
  font-size: 11px;
  color: var(--text-gray);
  flex-shrink: 0;
}

/* 通用卡片容器 */
.card {
  background: var(--white);
  border-radius: 12px;
  margin: 12px;
  overflow: hidden;
}
.card-pad { padding: 16px; }

/* 列表行(设置项 / 菜单项) */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  background: var(--white);
  font-size: 15px;
}
.list-row:last-child { border-bottom: none; }
.list-row .left { display: flex; align-items: center; gap: 10px; }
.pay-icon { display: inline-flex; width: 26px; height: 26px; flex: none; }
.pay-icon svg { width: 26px; height: 26px; display: block; }
.list-row .arrow { color: #ccc; }
.list-row .value { color: var(--text-gray); font-size: 13px; }

/* 我的页面菜单图标(圆底渐变 + 白色线性图标) */
.menu-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.menu-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-coupon { background: linear-gradient(135deg, #ff9a6c, #f76b76); }
.ic-distributor { background: linear-gradient(135deg, #f6d365, #f5a623); }
.ic-merchant { background: linear-gradient(135deg, #43c6ac, #1f9d8a); }
.ic-shop { background: linear-gradient(135deg, #7ec4cf, #3f9fb0); }
.ic-complaint { background: linear-gradient(135deg, #a18cd1, #7b5cb8); }
.ic-settings { background: linear-gradient(135deg, #66b6f8, #2b6fb3); }
.ic-doc { background: linear-gradient(135deg, #7ec4cf, #3f9fb0); }
.ic-shield { background: linear-gradient(135deg, #43c6ac, #1f9d8a); }
.ic-lock { background: linear-gradient(135deg, #f6d365, #f5a623); }
.ic-user { background: linear-gradient(135deg, #9aa7b8, #64748b); }

/* 支付轮询加载图标 */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(26,156,77,0.25);
  border-top-color: #1a9c4d;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 表单 */
.form-group {
  background: var(--white);
  border-radius: 12px;
  margin: 12px;
  overflow: hidden;
}
.form-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.form-item:last-child { border-bottom: none; }
.form-item label {
  width: 78px;
  flex-shrink: 0;
  font-size: 15px;
  color: var(--text-dark);
}
.form-item input,
.form-item textarea,
.form-item select {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px; /* >=16px避免iOS Safari聚焦时自动放大整页 */
  background: transparent;
}
textarea.full {
  width: 100%;
  min-height: 120px;
  border: none;
  border-radius: 12px;
  padding: 16px;
  margin: 12px;
  width: calc(100% - 24px);
  font-size: 16px;
  resize: vertical;
}

.btn-primary {
  display: block;
  width: calc(100% - 24px);
  margin: 12px;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.btn-primary:disabled { opacity: 0.6; }
.btn-outline {
  display: block;
  width: calc(100% - 24px);
  margin: 12px;
  padding: 14px;
  border: 1px solid var(--primary);
  border-radius: 10px;
  background: #fff;
  color: var(--primary);
  font-size: 16px;
  text-align: center;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width); /* 和body容器同宽,桌面预览时不会铺满整个窗口 */
  height: 58px;
  padding-bottom: var(--safe-bottom); /* iPhone底部小白条安全区 */
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  z-index: 100;
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-gray);
  gap: 2px;
  transition: color .2s;
}
.bottom-nav a.active { color: var(--primary); }
.bottom-nav .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  transition: transform .2s;
}
.bottom-nav .icon svg { width: 27px; height: 27px; filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s, transform .2s; }
.bottom-nav a.active .icon svg { filter: grayscale(0); opacity: 1; transform: scale(1.08); }

/* 我的页面头部 */
.profile-header {
  background: linear-gradient(180deg, var(--primary) 0%, #fff 100%);
  padding: 20px 16px 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.profile-header .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ddd;
  object-fit: cover;
}
.profile-header .name { font-size: 17px; font-weight: 600; }
.profile-header .sub { font-size: 12px; opacity: 0.85; }

.wallet-card {
  margin: -44px 12px 0;
  background: linear-gradient(135deg, #2b2b45 0%, #3d3560 50%, #4f3b78 100%);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(40,30,80,0.35);
  position: relative;
  z-index: 2;
  color: #fff;
  overflow: hidden;
}
.wallet-card::before {
  content: "";
  position: absolute;
  top: -60px; right: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.wallet-card::after {
  content: "";
  position: absolute;
  bottom: -70px; left: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.wallet-card > * { position: relative; z-index: 1; }
.wallet-card .balance { font-size: 26px; font-weight: 700; margin: 8px 0; }

/* tabs */
.tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.tabs .tab {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  font-size: 15px;
  color: var(--text-gray);
  position: relative;
}
.tabs .tab.active {
  color: var(--primary);
  font-weight: 600;
}
.tabs .tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

.empty-tip {
  text-align: center;
  color: var(--text-gray);
  font-size: 13px;
  padding: 40px 0;
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999;
  display: none;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-gray);
}
.checkbox-row a { color: var(--primary); }

.cart-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
  transition: background .18s;
}
.cart-item:active { background: #fafafa; }
.cart-item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.cart-item:last-child { border-bottom: none; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.cart-item img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #f0f0f0; box-shadow: var(--shadow-sm); }
.cart-item .body { flex: 1; }
.cart-item .qty-control { display: flex; align-items: center; gap: 8px; }
.cart-item .qty-control button {
  width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 50%; background: #fff;
}
.cart-item .remove { color: var(--text-gray); font-size: 13px; }
.cart-sheet { margin: 12px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.cart-sheet .empty-tip { margin: 0; }

.checkout-bar {
  position: fixed;
  bottom: calc(58px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  z-index: 90;
}
.checkout-bar .total { flex: 1; font-size: 14px; }
.checkout-bar button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
}

.order-card {
  background: #fff;
  border-radius: var(--radius);
  margin: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.order-card .order-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-gray);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
}
.order-card .order-item { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.status-tag { color: var(--primary); font-weight: 600; }

/* 订单状态彩色标签 */
.order-card .status-tag { white-space: nowrap; }
.order-card .status-tag[data-status="pending"] { color: #d48806; }
.order-card .status-tag[data-status="pending_payment"] { color: #e23a44; }
.order-card .status-tag[data-status="paid"] { color: #1a9c4d; }
.order-card .status-tag[data-status="shipped"] { color: #1677ff; }
.order-card .status-tag[data-status="completed"] { color: #52c41a; }
.order-card .status-tag[data-status="cancelled"] { color: #bbb; }

/* 虚拟卡密展示(打码/查看切换) */
.card-code-box {
  margin-top: 8px;
  background: #fafafa;
  border-radius: 8px;
  padding: 10px 12px;
}
.card-code-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.card-code-line .code-text {
  flex: 1;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--text-dark);
  word-break: break-all;
}
.card-code-line .reveal-btn {
  color: var(--primary);
  font-size: 12px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 2px 10px;
  flex-shrink: 0;
}

/* 首页图片banner框(后台自己换图: 替换 public/img/banner-1.svg,或改成任意图片URL) */
.banner {
  margin: 12px 12px 12px; /* 正常间距,不再往上叠压顶部红色区域 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 5;
}
.banner img {
  width: 100%;
  display: block;
  height: auto; /* 不裁剪,按图片原始比例完整显示整张图 */
}
.banner-text {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  text-align: left;
  max-width: 70%;
}
.banner-title {
  font-size: 19px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  margin-bottom: 6px;
}
.banner-subtitle {
  font-size: 13px;
  opacity: 0.95;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 首页专用: 顶部(banner+筛选栏)固定不滚动,商品列表单独滚动 */
body.home-fixed {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0; /* 覆盖掉body默认给底部导航留的padding,这里改由.home-scroll自己处理 */
  display: flex;
  flex-direction: column;
}
.home-top-fixed {
  flex-shrink: 0; /* 顶部区域高度固定,不参与压缩 */
}
.home-scroll {
  flex: 1;
  min-height: 0; /* flex子元素要能正常出现内部滚动条,必须显式清零这个默认值 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none; /* Firefox: 隐藏滚动条外观,不影响滚动功能 */
  -ms-overflow-style: none; /* 旧版Edge/IE */
}
.home-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari: 隐藏滚动条外观,不影响滚动功能 */
}
.home-scroll .product-list {
  padding-bottom: calc(64px + var(--safe-bottom) + 12px); /* 留出底部导航高度,最后一条商品不被遮住 */
}

/* 通用弹窗(商品详情页扫码支付等场景用) */
.modal-mask {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-box {
  background: #fff;
  border-radius: 12px;
  width: 280px;
  max-height: 86vh;
  overflow-y: auto;
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-body { padding: 20px; }
.modal-foot {
  padding: 12px 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 卡密预览行(未支付时打码展示,纯样式提示,不关联具体某张真实卡密) */
.card-code-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fafafa;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #666;
}
.masked-preview {
  font-family: "SFMono-Regular", Consolas, monospace;
  letter-spacing: 2px;
  color: #bbb;
}

/* ============================================
   全局视觉美化增强(仅覆盖外观,不改任何功能)
   ============================================ */

/* 页背景: 更柔和的浅色 */
body { background: #f7f7f9; }

/* 顶部标题栏: 毛玻璃 + 红底白字渐变,更有品牌感 */
.topbar {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(232,58,68,0.25);
}
.topbar .back { color: #fff; font-size: 22px; top: 11px; }

/* 首页红色头部再加一点柔和光晕 */
.hero-header {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 4px 18px rgba(242,84,91,0.28);
}

/* 卡片: 更圆润、阴影更柔和 */
.card, .order-card, .form-group, .product-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card, .form-group { box-shadow: var(--shadow-sm); }

/* 列表行: 轻触反馈 */
.list-row { transition: background .18s; }
.list-row:active { background: #fafafa; }

/* 主按钮: 渐变 + 投影 + 按压缩放,更有"可点感" */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(242,84,91,0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:active { transform: translateY(1px) scale(0.99); box-shadow: 0 3px 8px rgba(242,84,91,0.3); }
.btn-outline { border-radius: 12px; transition: transform .12s ease, box-shadow .12s ease; }
.btn-outline:active { transform: translateY(1px) scale(0.99); }

/* 表单输入: 聚焦时左侧红条提示 + 底色微变 */
.form-item { position: relative; }
.form-item:focus-within { background: #fffafa; }
.form-item:focus-within::after {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
}

/* tabs: active 标签文字加粗 + 更明显的品牌色下滑线 */
.tabs .tab { transition: color .18s; }
.tabs .tab.active::after { background: var(--primary); box-shadow: 0 2px 6px rgba(242,84,91,0.4); }

/* 空状态: 稍微大一点的留白,配上浅色图标圆 */
.empty-tip { padding: 44px 16px; font-size: 13px; }

/* 图文空状态(用于信息页等) */
.empty-state { text-align: center; padding: 60px 24px; color: var(--text-gray); }
.empty-state .empty-icon {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  color: #ddd;
}
.empty-state .empty-icon svg { width: 36px; height: 36px; }
.empty-state .empty-title { font-size: 15px; color: var(--text-dark); font-weight: 600; margin-bottom: 6px; }
.empty-state .empty-sub { font-size: 12px; }

/* 商品角标价格: 更精致的红色胶囊 */
.price-badge {
  background: linear-gradient(135deg, #fff6f6 0%, #ffe9eb 100%);
  border-color: #ffc9cc;
  box-shadow: 0 1px 3px rgba(242,84,91,0.08);
}

/* 底部导航: 白色浮升 + 更细微的上层阴影 */
.bottom-nav {
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

/* 弹窗: 更顺滑 */
.modal-box { box-shadow: 0 12px 40px rgba(0,0,0,0.18); border-radius: 16px; }

/* ============================================
   首页商品卡片: 图文并列布局 (配合 home.html 渲染微调)
   ============================================ */
.product-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:active { transform: scale(0.985); box-shadow: var(--shadow-md); }
.product-card .cover-wrap {
  width: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fff6f6 0%, #ffefef 100%);
  padding: 10px;
}
.product-card .cover-wrap img { width: 100%; height: auto; border-radius: 10px; }
.product-card .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px 14px 4px; }
.product-card .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.product-card .title { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; min-width: 0; }
.product-card .price-badge { padding: 3px 9px; border-radius: 9px; }
.product-card .price { font-size: 18px; }
.product-card .subtitle { font-size: 12px; color: var(--primary); margin-bottom: 6px; }
.product-card .meta-row { margin-top: 6px; }

/* 商家中心: 统计卡更精致 */
.mc-stat-box { box-shadow: var(--shadow-sm); transition: transform .15s ease; }
.mc-stat-box:active { transform: scale(0.98); }

/* 分销中心/商家中心: 顶部渐变头加柔和投影 */
.dc-hero { box-shadow: 0 4px 18px rgba(242,84,91,0.28); }

/* 提现方式按钮 */
.wd-method-btn { transition: all .15s ease; }
.wd-method-btn.active { box-shadow: 0 3px 10px rgba(242,84,91,0.2); }

/* 全站焦点轮廓统一为品牌色 */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }