* { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #f5f5f5;
      max-width: 720px;
      margin: 0 auto;
    }

    /* 轮播图 */
    .carousel {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: #1a1a2e;
      cursor: pointer;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    .carousel-slide {
      min-width: 100%;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
.nav-path {
    line-height: 3.5rem;
    padding: 0 1%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: linear-gradient(#2B7ACD, #87CEFA);
    font-weight: 600;
    text-shadow: 1px 1px 2px #fff;
    color: #000000;
    position: fixed;
    width: 100%;
    max-width: 720px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 1px 4px #4d4d4d;
}
    .slide-bg {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #fff;
    }

    .slide-icon { font-size: 48px; margin-bottom: 10px; }
    .slide-title { font-size: 20px; font-weight: 700; }
    .slide-desc { font-size: 14px; opacity: 0.8; margin-top: 6px; }

    .bg-1 { background: linear-gradient(135deg, #667eea, #764ba2); }
    .bg-2 { background: linear-gradient(135deg, #f093fb, #f5576c); }
    .bg-3 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
    .bg-4 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
    .bg-5 { background: linear-gradient(135deg, #fa709a, #fee140); }

    .slide-overlay {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 20px 16px 16px;
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
      color: #fff;
      pointer-events: none;
    }

    .slide-title-text { font-size: 17px; font-weight: 700; }
    .slide-desc-text { font-size: 13px; opacity: 0.9; margin-top: 4px; }

    .zoom-hint {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0,0,0,0.4);
      color: #fff;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 4px;
      pointer-events: none;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      background: rgba(0,0,0,0.35);
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      line-height: 1;
    }

    .carousel-btn:hover { background: rgba(0,0,0,0.55); }
    .carousel-btn.prev { left: 10px; }
    .carousel-btn.next { right: 10px; }

    .carousel-dots {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.4);
      cursor: pointer;
      transition: all 0.3s;
    }

    .dot.active {
      background: #fff;
      transform: scale(1.3);
      box-shadow: 0 0 8px rgba(255,255,255,0.7);
    }

    .carousel-counter {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.4);
      color: #fff;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      z-index: 10;
    }

    .progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #ff6b6b, #ff8e53);
      width: 0%;
      z-index: 11;
    }

    /* ========== 灯箱 ========== */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.95);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .lightbox.active { display: flex; animation: fadeIn 0.25s ease; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .lightbox-img-wrap {
      max-width: 95%;
      max-height: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lightbox-img {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      animation: zoomIn 0.25s ease;
    }

    .lightbox-bg {
      width: 100%;
      height: 70vh;
      max-width: 95%;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #fff;
    }

    .lightbox-bg .slide-icon { font-size: 72px; margin-bottom: 16px; }
    .lightbox-bg .slide-title { font-size: 28px; font-weight: 700; }
    .lightbox-bg .slide-desc { font-size: 16px; opacity: 0.8; margin-top: 8px; }

    @keyframes zoomIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      background: rgba(255,255,255,0.15);
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .lightbox-close:hover { background: rgba(255,255,255,0.3); }

    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background: rgba(255,255,255,0.15);
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .lightbox-nav:hover { background: rgba(255,255,255,0.3); }
    .lightbox-prev { left: 16px; }
    .lightbox-next { right: 16px; }

    .lightbox-info {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
    }

    .lightbox-tip {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.5);
      font-size: 13px;
    }
    /* ========== 灯箱 end ========== */

    .product-main { background: #fff; padding: 16px; margin: 10px 5px;
    box-shadow: rgb(76, 175, 80) 0px 0px 4px 2px;
    line-height: 40px;}
    .product-title { font-size: 16px; font-weight: 600; line-height: 1.5; color: #333; margin-bottom: 12px; }
    .shop-badge {
      display: inline-block; background: linear-gradient(135deg, #ff6b6b, #ff8e53);
      color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-right: 8px;
    }

    .shop-section { background: #fff; }
    .shop-header { display: flex; align-items: center; margin-bottom: 16px; }
    .shop-logo {
      width: 64px; height: 64px; background: linear-gradient(135deg, #ff6b6b, #ff8e53);
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 20px; margin-right: 12px;
    }
    .shop-info { flex: 1; }
    .shop-name { font-size: 15px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 4px; }
    .hearts { color: #ff6b6b; }
    .shop-rating-stars { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
    .stars { color: #ff9500; }
    .rating-score { font-size: 13px; color: #ff9500; font-weight: 600; }
    .fans-count { font-size: 12px; color: #999; }
    .follow-btn { background: #fff; color: blue; border: none; padding: 6px 16px; border-radius: 16px; font-size: 20px; }

    .shop-stats {
      display: flex; justify-content: space-around; padding: 12px 0;
      border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5;
    }
    .stat-item { text-align: center; }
    .stat-label { font-size: 13px; color: #666; }
    .stat-value { font-size: 15px; font-weight: 600; color: #ff6b35; margin-top: 4px; }
    .stat-sub { font-size: 11px; color: #999; margin-top: 2px; }

    .shop-actions { display: flex; gap: 12px; margin-top: 16px; }
    .shop-action-btn {
      flex: 1; display: flex; align-items: center; justify-content: center;
      gap: 6px; padding: 10px; border: 1px solid #eee;
      border-radius: 20px; font-size: 13px; color: #333; background: #fff;
    }

    .bottom-bar {
      position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 720px; background: #fff;
      border-top: 1px solid #eee; display: flex;
      padding: 8px 12px;
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .bottom-actions { display: flex; flex: 1; }
    .bottom-action { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
    .bottom-action-icon { font-size: 20px; color: #666; }
    .bottom-action-text { font-size: 14px; color: #666; }
    .bottom-btns { display: flex; gap: 8px; }
    .bottom-btn { padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; }
    .btn-cart { background:linear-gradient(220.55deg, #00B960 0%, #00552C 100%); color: #fff; }
    .btn-buy { background: linear-gradient(135deg, #ff6b6b, #ff8e53); color: #fff; }
    .btn-cart a, .btn-buy a { text-decoration: none; color: #fff; }

    .placeholder { height: 60px; }
/* 分页容器：对齐+间距 */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px; /* 按钮/下拉框之间的间距 */
  margin: 10px 0;
}

/* 分页按钮样式：橙色背景+白色文字 */
.page-btn {
  padding: 6px 14px;
  background-color: #f97316; /* 示例钟的橙色 */
  border: none;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.page-btn:hover {
  background-color: #ea580c; /*  hover 加深橙色 */
}
.page-btn:disabled {
  background-color: #fca5a5; /* 禁用状态颜色 */
  cursor: not-allowed;
}

/* 页蚂下拉框样式：匹配按钮高度 */
.page-select {
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background-color: #fff;
  height: 30px; /* 和按钮高度一致 */
  box-sizing: border-box;
}
/* 下级用户列表容器 */
.sub-user-list {
  margin: 15px 0;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

/* 列表表头 */
.sub-user-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: bold;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

/* 列表项 */
.sub-user-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}
.sub-user-item:last-child {
  border-bottom: none;
}

/* 列表列（均分宽度） */
.sub-user-col {
  flex: 1;
  text-align: center;
  padding: 0 5px;
}
/* 账号状态标签（调整高度和内边距） */
.status-normal {
  display: inline-block;
  padding: 2px 8px; /* 减小上下内边距（原可能是6px+） */
  background-color: #52c41a;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  height: 22px; /* 固定高度，和行内元素对齐 */
  line-height: 22px; /* 行高和高度一致，文字垂直居钟 */
  box-sizing: border-box; /* 避免内边距撑高元素 */
}
/* 列表项（限制行高） */
.sub-user-item {
  display: flex;
  padding: 8px 0; /* 减小上下内边距 */
  border-bottom: 1px solid #eee;
  align-items: center; /* 确保行内元素垂直居钟 */
  height: 40px; /* 固定行高，让整行更紧凑 */
}