编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>优品商城</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #6366F1;
  --primary-light: #818CF8;
  --primary-dark: #4F46E5;
  --accent: #F59E0B;
  --accent-light: #FBBF24;
  --success: #10B981;
  --danger: #EF4444;
  --bg: #F8FAFC;
  --bg-card: #FFFFFF;
  --text: #1E293B;
  --text-secondary: #64748B;
  --text-light: #94A3B8;
  --border: #E2E8F0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}
.phone-frame {
  width: 390px;
  height: 844px;
  background: var(--bg);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 50px 100px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
}
.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 34px;
  background: #000;
  border-radius: 0 0 24px 24px;
  z-index: 100;
}
.page { display: none; height: 100%; overflow-y: auto; padding-bottom: 85px; }
.page.active { display: block; }
.page::-webkit-scrollbar { display: none; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeIn 0.3s ease forwards; }
.animate-card { animation: fadeIn 0.4s ease forwards; }

/* Header */
.header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 55px 20px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-title { font-size: 20px; font-weight: 700; text-align: center; letter-spacing: 1px; }
.header-back {
  position: absolute;
  left: 20px;
  top: 52px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transition: all 0.2s;
}
.header-back:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); }
.search-bar {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 12px 20px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s;
}
.search-bar:focus-within {
  background: rgba(255,255,255,0.95);
  box-shadow: var(--shadow-lg);
}
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
  color: white;
}
.search-bar input::placeholder { color: rgba(255,255,255,0.7); }
.search-bar:focus-within input { color: var(--text); }
.search-icon { font-size: 16px; opacity: 0.8; }

/* TabBar */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  height: 80px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.05);
  z-index: 100;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 5px 20px;
  color: var(--text-light);
  transition: all 0.3s;
}
.tab-item.active { color: var(--primary); }
.tab-item svg { width: 26px; height: 26px; transition: transform 0.2s; }
.tab-item.active svg { transform: scale(1.1); }
.tab-item span { font-size: 11px; font-weight: 500; }
.tab-badge {
  position: absolute;
  top: 2px;
  right: 8px;
  background: linear-gradient(135deg, var(--danger), #F87171);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(239,68,68,0.4);
}

/* Banner */
.banner {
  height: 160px;
  overflow: hidden;
  position: relative;
  margin: 15px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.banner-slider {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-slide {
  min-width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: left;
  padding: 20px 25px;
}
.banner-1 { 
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
}
.banner-2 { 
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 50%, #FB923C 100%);
}
.banner-3 { 
  background: linear-gradient(135deg, #10B981 0%, #14B8A6 50%, #2DD4BF 100%);
}
.banner-content { max-width: 200px; }
.banner-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.banner-sub { font-size: 13px; opacity: 0.9; }
.banner-tag {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  margin-top: 10px;
  backdrop-filter: blur(5px);
}
.banner-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s;
}
.banner-dot.active { 
  background: white; 
  width: 24px;
  border-radius: 4px;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 15px;
  margin-bottom: 20px;
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.quick-item:hover { transform: translateY(-3px); }
.quick-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: var(--shadow);
  transition: all 0.3s;
}
.quick-item:hover .quick-icon { box-shadow: var(--shadow-lg); transform: scale(1.05); }
.quick-name { font-size: 12px; font-weight: 500; color: var(--text); }
.quick-hot {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: white;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 8px;
  font-weight: 600;
}

/* Section */
.section {
  padding: 0 15px 20px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-icon { font-size: 20px; }
.section-more {
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.section-more:hover { color: var(--primary); }

/* Flash Sale */
.flash-header {
  background: linear-gradient(135deg, var(--danger) 0%, #F87171 100%);
  color: white;
  padding: 12px 15px;
  margin: 15px 15px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flash-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flash-title h3 { font-size: 16px; font-weight: 700; }
.flash-time {
  display: flex;
  gap: 4px;
}
.flash-time span {
  background: white;
  color: var(--danger);
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
}
.flash-time em { color: white; font-style: normal; padding: 0 2px; }
.flash-body {
  background: white;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 15px;
  margin: 0 15px;
  box-shadow: var(--shadow);
}
.flash-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.flash-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.flash-item:hover { transform: scale(1.02); }
.flash-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.flash-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(transparent, rgba(0,0,0,0.1));
}
.flash-price {
  color: var(--danger);
  font-size: 16px;
  font-weight: 700;
}
.flash-original {
  color: var(--text-light);
  font-size: 11px;
  text-decoration: line-through;
}
.flash-progress {
  height: 4px;
  background: #FEE2E2;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.flash-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--danger), #F87171);
  border-radius: 2px;
}
.flash-sold { font-size: 10px; color: var(--text-light); margin-top: 4px; }

/* Group Buy */
.group-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin: 0 -15px;
  padding: 0 15px;
}
.group-scroll::-webkit-scrollbar { display: none; }
.group-card {
  min-width: 150px;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s;
}
.group-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.group-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  position: relative;
}
.group-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent);
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}
.group-info { padding: 12px; }
.group-price { 
  color: var(--primary); 
  font-size: 16px; 
  font-weight: 700; 
}
.group-original { 
  color: var(--text-light); 
  font-size: 11px; 
  text-decoration: line-through; 
  margin-left: 4px;
}
.group-users {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.avatar-stack { display: flex; }
.avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  font-weight: 600;
}
.avatar-mini:first-child { margin-left: 0; }
.group-tip { font-size: 11px; color: var(--text-light); }

/* Bargain */
.bargain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.bargain-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s;
}
.bargain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bargain-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.bargain-content { padding: 12px; }
.bargain-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bargain-prices {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.bargain-original-price {
  color: var(--text-light);
  font-size: 11px;
  text-decoration: line-through;
}
.bargain-current-price {
  color: var(--success);
  font-size: 14px;
  font-weight: 700;
}
.bargain-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--success) 0%, #34D399 100%);
  color: white;
  border: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.bargain-btn:hover { transform: scale(1.02); }

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.product-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-img {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.product-info { padding: 12px; }
.product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: 2.8em;
}
.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-price {
  color: var(--danger);
  font-size: 18px;
  font-weight: 700;
}
.product-price small {
  font-size: 12px;
  font-weight: 400;
}
.product-sales {
  font-size: 11px;
  color: var(--text-light);
}
.btn-add-cart {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(99,102,241,0.4);
}
.btn-add-cart:hover { transform: scale(1.1); }

/* Category Page */
.category-layout {
  display: flex;
  height: calc(100% - 70px);
}
.category-left {
  width: 85px;
  background: #F1F5F9;
}
.category-tab {
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.category-tab.active {
  background: white;
  color: var(--primary);
  font-weight: 600;
}
.category-tab.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--primary);
  border-radius: 0 4px 4px 0;
}
.category-right {
  flex: 1;
  padding: 15px;
  background: white;
}
.sub-category { display: none; }
.sub-category.active { display: block; }
.sub-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}
.sub-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
.sub-item { cursor: pointer; transition: transform 0.2s; }
.sub-item:hover { transform: scale(1.05); }
.sub-item-img {
  width: 65px;
  height: 65px;
  border-radius: var(--radius);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: var(--shadow-sm);
}
.sub-item-name { font-size: 12px; color: var(--text); font-weight: 500; }

/* Product Detail */
.detail-header { background: white; }
.detail-swipe {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%);
}
.detail-price-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 20px;
}
.detail-price {
  font-size: 32px;
  font-weight: 800;
}
.detail-price small { font-size: 16px; font-weight: 400; opacity: 0.9; }
.detail-origin {
  font-size: 14px;
  opacity: 0.7;
  text-decoration: line-through;
  margin-left: 10px;
}
.detail-name {
  padding: 18px 20px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--text);
  background: white;
}
.detail-tags {
  padding: 0 20px 15px;
  background: white;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.tag-group { background: linear-gradient(135deg, var(--accent), #FBBF24); color: white; }
.tag-seckill { background: linear-gradient(135deg, var(--danger), #F87171); color: white; }
.tag-bargain { background: linear-gradient(135deg, var(--success), #34D399); color: white; }
.detail-section {
  background: white;
  margin-top: 10px;
  padding: 18px 20px;
}
.detail-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sku-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}
.sku-row:hover { background: #F8FAFC; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.sku-row:last-child { border-bottom: none; }
.sku-label { color: var(--text-secondary); font-size: 14px; width: 70px; }
.sku-value { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }
.sku-arrow { color: var(--text-light); font-size: 14px; }

.detail-action {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  background: white;
  padding: 12px 20px;
  padding-bottom: 90px;
  display: flex;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  z-index: 50;
}
.action-icons {
  display: flex;
  gap: 8px;
}
.action-icon-btn {
  width: 44px;
  height: 44px;
  background: #F1F5F9;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.action-icon-btn span { font-size: 16px; }
.action-icon-btn small { font-size: 9px; color: var(--text-light); }
.action-btns { flex: 1; display: flex; gap: 10px; }
.btn-cart {
  flex: 1;
  background: linear-gradient(135deg, #FF9500, #FF7F00);
  color: white;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,149,0,0.4);
}
.btn-buy-now {
  flex: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
.btn-join-group {
  flex: 1;
  background: linear-gradient(135deg, var(--accent), #FBBF24);
  color: white;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245,158,11,0.4);
}

/* Activity Pages */
.activity-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 60px 20px 30px;
  text-align: center;
}
.activity-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
}
.activity-desc {
  font-size: 14px;
  opacity: 0.9;
}
.activity-section { padding: 20px 15px; }
.activity-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  display: flex;
  gap: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s;
}
.activity-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.activity-img {
  width: 110px;
  height: 110px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  flex-shrink: 0;
}
.activity-info { flex: 1; display: flex; flex-direction: column; }
.activity-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.activity-price { color: var(--danger); font-size: 18px; font-weight: 700; }
.activity-original { color: var(--text-light); font-size: 12px; text-decoration: line-through; margin-left: 6px; }
.activity-meta { font-size: 12px; color: var(--text-light); margin-top: 6px; }
.activity-progress { margin-top: 10px; }
.progress-text { font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
.progress-bar {
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 3px;
}
.activity-join {
  margin-top: auto;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

/* Time Selector */
.time-tabs {
  display: flex;
  background: linear-gradient(135deg, var(--danger) 0%, #F87171 100%);
  padding: 12px 15px;
  gap: 10px;
}
.time-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.3s;
}
.time-tab.active {
  background: white;
  color: var(--danger);
  font-weight: 700;
  box-shadow: var(--shadow);
}
.time-status { font-size: 10px; margin-top: 2px; }

/* Bargain Detail */
.bargain-detail-header {
  background: linear-gradient(135deg, var(--success) 0%, #34D399 100%);
  color: white;
  padding: 25px;
  text-align: center;
}
.bargain-detail-img {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  background: rgba(255,255,255,0.2);
}
.bargain-current {
  font-size: 36px;
  font-weight: 800;
}
.bargain-original { font-size: 14px; opacity: 0.8; text-decoration: line-through; margin-top: 4px; }
.bargain-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}
.stat-box { text-align: center; }
.stat-num { font-size: 22px; font-weight: 700; }
.stat-label { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.btn-bargain-share {
  display: block;
  width: 85%;
  margin: 20px auto;
  background: white;
  color: var(--success);
  border: none;
  padding: 14px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Group Detail */
.group-detail-header {
  background: linear-gradient(135deg, var(--accent) 0%, #FBBF24 100%);
  color: white;
  padding: 25px;
  text-align: center;
}
.group-detail-price { font-size: 36px; font-weight: 800; }
.group-detail-original { font-size: 14px; opacity: 0.8; text-decoration: line-through; }
.group-members {
  background: white;
  padding: 20px;
  text-align: center;
}
.group-leader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.leader-badge {
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.group-joined {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.joined-user { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.joined-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  font-weight: 600;
}
.joined-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-light);
}
.btn-join-group-buy {
  display: block;
  width: 85%;
  margin: 20px auto;
  background: linear-gradient(135deg, var(--accent), #FBBF24);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(245,158,11,0.4);
}

/* Referral Page */
.referral-header {
  background: linear-gradient(135deg, var(--accent) 0%, #FBBF24 100%);
  color: white;
  padding: 30px 20px;
  text-align: center;
}
.referral-main {
  background: white;
  margin: -20px 15px 0;
  border-radius: var(--radius-lg);
  padding: 25px;
  position: relative;
  z-index: 10;
  box-shadow: var(--shadow-lg);
}
.referral-stat {
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
}
.referral-label { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.referral-data {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.data-item { text-align: center; }
.data-num { font-size: 22px; font-weight: 700; color: var(--text); }
.data-label { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.referral-code-box {
  background: linear-gradient(135deg, #F8FAFC, #E2E8F0);
  padding: 16px;
  border-radius: var(--radius);
  margin-top: 20px;
  text-align: center;
}
.code-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.code-value { 
  font-size: 24px; 
  font-weight: 800; 
  letter-spacing: 4px;
  color: var(--primary); 
}
.btn-invite-share {
  width: 100%;
  margin-top: 16px;
  background: linear-gradient(135deg, var(--accent), #FBBF24);
  color: white;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(245,158,11,0.4);
}

/* Cart */
.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
}
.cart-edit { color: var(--primary); font-size: 14px; font-weight: 500; cursor: pointer; }
.cart-list { padding: 15px; }
.cart-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}
.cart-item:hover { box-shadow: var(--shadow); }
.cart-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transition: all 0.2s;
}
.cart-check.checked { 
  background: var(--primary); 
  border-color: var(--primary); 
  color: white;
}
.cart-img {
  width: 85px;
  height: 85px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}
.cart-info { flex: 1; display: flex; flex-direction: column; }
.cart-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.cart-spec { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
.cart-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.cart-price { color: var(--danger); font-size: 16px; font-weight: 700; }
.cart-count {
  display: flex;
  align-items: center;
  gap: 12px;
}
.count-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  transition: all 0.2s;
}
.count-btn:hover { border-color: var(--primary); color: var(--primary); }
.count-num { font-size: 14px; min-width: 24px; text-align: center; font-weight: 600; }

.cart-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  background: white;
  padding: 14px 20px;
  padding-bottom: 90px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  z-index: 50;
}
.cart-all {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cart-total { flex: 1; text-align: right; }
.cart-total-label { font-size: 12px; color: var(--text-light); }
.cart-total-price { color: var(--danger); font-size: 20px; font-weight: 700; }
.btn-checkout {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

/* Profile */
.profile-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 50px 20px 30px;
  color: white;
}
.profile-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  border: 3px solid rgba(255,255,255,0.3);
}
.profile-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.profile-level {
  display: inline-block;
  background: var(--accent);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.profile-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 24px;
  text-align: center;
}
.stat-item { cursor: pointer; }
.stat-num { font-size: 20px; font-weight: 700; }
.stat-label { font-size: 12px; opacity: 0.8; margin-top: 2px; }

.profile-orders {
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 20px 15px;
  margin: -15px 15px 0;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 10;
  box-shadow: var(--shadow);
}
.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}
.order-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.order-badge {
  position: absolute;
  top: -4px;
  right: 0;
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.order-name { font-size: 12px; color: var(--text); font-weight: 500; }

.profile-menu {
  background: white;
  margin: 15px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.menu-item:hover { background: #F8FAFC; }
.menu-item:last-child { border-bottom: none; }
.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 14px;
}
.menu-name { flex: 1; font-size: 15px; font-weight: 500; color: var(--text); }
.menu-arrow { color: var(--text-light); font-size: 14px; }

/* Checkout */
.checkout-section {
  background: white;
  margin-bottom: 12px;
}
.address-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
.address-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.address-info { flex: 1; }
.address-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.address-detail { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.checkout-item {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.checkout-item:last-child { border-bottom: none; }
.checkout-item-img {
  width: 75px;
  height: 75px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.checkout-item-info { flex: 1; }
.checkout-item-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.checkout-item-spec { font-size: 12px; color: var(--text-light); }
.checkout-item-bottom { display: flex; justify-content: space-between; margin-top: 8px; }
.checkout-item-price { color: var(--danger); font-weight: 600; }
.checkout-item-count { color: var(--text-light); font-size: 12px; }
.checkout-row {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}
.checkout-row:hover { background: #F8FAFC; }
.checkout-row:last-child { border-bottom: none; }
.checkout-label { font-size: 14px; color: var(--text-secondary); width: 80px; }
.checkout-value { flex: 1; font-size: 14px; color: var(--text); font-weight: 500; }
.checkout-value.highlight { color: var(--accent); }
.checkout-arrow { color: var(--text-light); font-size: 14px; }
.pay-methods {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.pay-methods:hover { background: #F8FAFC; }
.pay-icon { display: flex; align-items: center; gap: 12px; }
.pay-icon-img { font-size: 26px; }
.pay-name { font-size: 14px; font-weight: 500; color: var(--text); }
.pay-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s;
}
.pay-check.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.checkout-summary {
  padding: 18px 20px;
  background: white;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}
.summary-row:last-child { margin-bottom: 0; }
.summary-total {
  font-size: 18px;
  color: var(--danger);
  font-weight: 700;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.checkout-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  background: white;
  padding: 14px 20px;
  padding-bottom: 90px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  z-index: 50;
}
.checkout-total { flex: 1; }
.checkout-total-label { font-size: 12px; color: var(--text-light); }
.checkout-total-price { font-size: 22px; color: var(--danger); font-weight: 700; }
.btn-submit {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(99,102,241,0.4);
}

/* Success Page */
.success-page {
  text-align: center;
  padding: 80px 30px 30px;
}
.success-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success), #34D399);
  color: white;
  font-size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 25px rgba(16,185,129,0.4);
  animation: pulse 1.5s infinite;
}
.success-title { font-size: 24px; font-weight: 700; margin-top: 24px; color: var(--text); }
.success-desc { font-size: 14px; color: var(--text-secondary); margin-top: 10px; }
.success-btns {
  display: flex;
  gap: 14px;
  margin-top: 35px;
}
.btn-view-order {
  flex: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
.btn-back-home {
  flex: 1;
  background: white;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 14px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Orders */
.order-tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.order-tab {
  flex: 1;
  text-align: center;
  padding: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
.order-tab.active {
  color: var(--primary);
  font-weight: 700;
}
.order-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px 3px 0 0;
}
.order-list { padding: 15px; }
.order-card {
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.order-shop { font-weight: 600; font-size: 14px; color: var(--text); }
.order-status { color: var(--primary); font-size: 13px; font-weight: 600; }
.order-card-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.order-item-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.order-item-info { flex: 1; }
.order-item-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.order-item-spec { font-size: 12px; color: var(--text-light); }
.order-item-bottom { display: flex; justify-content: space-between; margin-top: 8px; }
.order-item-price { color: var(--danger); font-weight: 600; }
.order-item-count { color: var(--text-light); font-size: 12px; }
.order-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 16px;
}
.btn-order {
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-order-gray {
  background: #F1F5F9;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-order-gray:hover { background: #E2E8F0; }
.btn-order-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.btn-order-primary:hover { transform: scale(1.02); }

/* SKU Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.modal-overlay.show { display: block; opacity: 1; }
.sku-modal {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 390px;
  background: white;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 201;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 75vh;
  overflow-y: auto;
}
.sku-modal.show { transform: translateX(-50%) translateY(0); }
.sku-header {
  display: flex;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sku-product-img {
  width: 90px;
  height: 90px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}
.sku-product-info { flex: 1; padding-top: 5px; }
.sku-product-price { color: var(--danger); font-size: 22px; font-weight: 700; }
.sku-product-stock { font-size: 12px; color: var(--text-light); margin-top: 6px; }
.sku-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-light);
  font-size: 20px;
  transition: color 0.2s;
}
.sku-close:hover { color: var(--text); }
.sku-section { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.sku-section-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.sku-options { display: flex; flex-wrap: wrap; gap: 10px; }
.sku-option {
  padding: 10px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}
.sku-option:hover { border-color: var(--primary); }
.sku-option.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99,102,241,0.05);
}
.sku-footer {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  padding-bottom: 100px;
}
.sku-count {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F8FAFC;
  padding: 8px 12px;
  border-radius: var(--radius);
}
.sku-count-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  transition: all 0.2s;
}
.sku-count-btn:hover { color: var(--primary); }
.sku-count-num { font-size: 15px; min-width: 30px; text-align: center; font-weight: 600; }

/* Toast */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.toast.show { opacity: 1; }
</style>
</head>
<body>
<div class="phone-frame">
  <div class="phone-notch"></div>

  <!-- Toast -->
  <div class="toast" id="toast"></div>

  <!-- Page: Home -->
  <div class="page active" id="page-home">
    <div class="header">
      <div class="header-title">优品商城</div>
      <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" placeholder="搜索酒茶/点卡/电子产品...">
      </div>
    </div>
    
    <!-- Banner -->
    <div class="banner" onclick="goPage('seckill')">
      <div class="banner-slider" id="banner-slider">
        <div class="banner-slide banner-1">
          <div class="banner-content">
            <div class="banner-title">限时秒杀</div>
            <div class="banner-sub">每日三场 抢到就是赚到</div>
            <div class="banner-tag">点击查看</div>
          </div>
        </div>
        <div class="banner-slide banner-2">
          <div class="banner-content">
            <div class="banner-title">拼团特惠</div>
            <div class="banner-sub">2人成团 最低5折起</div>
            <div class="banner-tag">限时活动</div>
          </div>
        </div>
        <div class="banner-slide banner-3">
          <div class="banner-content">
            <div class="banner-title">好友帮砍</div>
            <div class="banner-sub">0元拿好物 邀请好友砍</div>
            <div class="banner-tag">免费拿</div>
          </div>
        </div>
      </div>
      <div class="banner-dots">
        <div class="banner-dot active" onclick="showSlide(0,event)"></div>
        <div class="banner-dot" onclick="showSlide(1,event)"></div>
        <div class="banner-dot" onclick="showSlide(2,event)"></div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
      <div class="quick-item" onclick="goPage('category');selectCategory(0)">
        <div class="quick-icon" style="background:linear-gradient(135deg,#6366F1,#818CF8);">🍷</div>
        <span class="quick-name">酒茶</span>
      </div>
      <div class="quick-item" onclick="goPage('category');selectCategory(1)">
        <div class="quick-icon" style="background:linear-gradient(135deg,#F59E0B,#FBBF24);position:relative;">🎮
          <span class="quick-hot">HOT</span>
        </div>
        <span class="quick-name">游戏点卡</span>
      </div>
      <div class="quick-item" onclick="goPage('category');selectCategory(2)">
        <div class="quick-icon" style="background:linear-gradient(135deg,#10B981,#34D399);">📱</div>
        <span class="quick-name">电子产品</span>
      </div>
      <div class="quick-item" onclick="goPage('referral')">
        <div class="quick-icon" style="background:linear-gradient(135deg,#EC4899,#F472B6);">🎁</div>
        <span class="quick-name">邀请有礼</span>
      </div>
    </div>

    <!-- Flash Sale -->
    <div class="flash-header">
      <div class="flash-title">
        <span style="font-size:20px;">⚡</span>
        <h3>限时秒杀</h3>
      </div>
      <div class="flash-time">
        <span id="seckill-h">02</span><em>:</em><span id="seckill-m">35</span><em>:</em><span id="seckill-s">21</span>
      </div>
    </div>
    <div class="flash-body">
      <div class="flash-list">
        <div class="flash-item" onclick="goProduct(1,'seckill')">
          <div class="flash-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
          <div class="flash-price">¥99</div>
          <div class="flash-original">¥299</div>
          <div class="flash-progress"><div class="flash-progress-bar" style="width:75%"></div></div>
          <div class="flash-sold">已抢75%</div>
        </div>
        <div class="flash-item" onclick="goProduct(2,'seckill')">
          <div class="flash-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
          <div class="flash-price">¥49</div>
          <div class="flash-original">¥168</div>
          <div class="flash-progress"><div class="flash-progress-bar" style="width:45%"></div></div>
          <div class="flash-sold">已抢45%</div>
        </div>
        <div class="flash-item" onclick="goProduct(3,'seckill')">
          <div class="flash-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">📱</div>
          <div class="flash-price">¥169</div>
          <div class="flash-original">¥299</div>
          <div class="flash-progress"><div class="flash-progress-bar" style="width:30%"></div></div>
          <div class="flash-sold">已抢30%</div>
        </div>
      </div>
    </div>

    <!-- Group Buy -->
    <div class="section" style="margin-top:10px;">
      <div class="section-header">
        <div class="section-title"><span class="section-icon">👥</span> 热门拼团</div>
        <div class="section-more" onclick="goPage('group')">查看更多 →</div>
      </div>
    </div>
    <div class="group-scroll" style="margin-top:-5px;">
      <div class="group-card" onclick="goGroupDetail(1)">
        <div class="group-img" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">
          🍷
          <div class="group-tag">2人团</div>
        </div>
        <div class="group-info">
          <div class="group-price">¥159 <span class="group-original">¥398</span></div>
          <div class="group-users">
            <div class="avatar-stack">
              <div class="avatar-mini" style="background:#6366F1;">李</div>
              <div class="avatar-mini" style="background:#10B981;">王</div>
              <div class="avatar-mini" style="background:#F59E0B;">张</div>
            </div>
            <span class="group-tip">还差1人</span>
          </div>
        </div>
      </div>
      <div class="group-card" onclick="goGroupDetail(2)">
        <div class="group-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">
          🎧
          <div class="group-tag">3人团</div>
        </div>
        <div class="group-info">
          <div class="group-price">¥89 <span class="group-original">¥299</span></div>
          <div class="group-users">
            <div class="avatar-stack">
              <div class="avatar-mini" style="background:#EC4899;">陈</div>
              <div class="avatar-mini" style="background:#8B5CF6;">刘</div>
            </div>
            <span class="group-tip">还差2人</span>
          </div>
        </div>
      </div>
      <div class="group-card" onclick="goGroupDetail(3)">
        <div class="group-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">
          🍃
          <div class="group-tag">2人团</div>
        </div>
        <div class="group-info">
          <div class="group-price">¥69 <span class="group-original">¥199</span></div>
          <div class="group-users">
            <div class="avatar-stack">
              <div class="avatar-mini" style="background:#F59E0B;">赵</div>
            </div>
            <span class="group-tip">还差1人</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Bargain -->
    <div class="section" style="margin-top:20px;">
      <div class="section-header">
        <div class="section-title"><span class="section-icon">🔪</span> 砍价专区</div>
        <div class="section-more" onclick="goPage('bargain')">查看更多 →</div>
      </div>
      <div class="bargain-grid">
        <div class="bargain-card" onclick="goBargainDetail(1)">
          <div class="bargain-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">📱</div>
          <div class="bargain-content">
            <div class="bargain-name">iPhone 14 128G</div>
            <div class="bargain-prices">
              <div class="bargain-current-price">¥0</div>
              <div class="bargain-original-price">¥5999</div>
            </div>
            <button class="bargain-btn">邀请砍价</button>
          </div>
        </div>
        <div class="bargain-card" onclick="goBargainDetail(2)">
          <div class="bargain-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">🎮</div>
          <div class="bargain-content">
            <div class="bargain-name">Switch 游戏机</div>
            <div class="bargain-prices">
              <div class="bargain-current-price">¥0</div>
              <div class="bargain-original-price">¥2099</div>
            </div>
            <button class="bargain-btn">邀请砍价</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Recommend -->
    <div class="section" style="margin-top:5px;">
      <div class="section-header">
        <div class="section-title"><span class="section-icon">🔥</span> 为你推荐</div>
      </div>
      <div class="product-grid">
        <div class="product-card" onclick="goProduct(5)">
          <div class="product-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
          <div class="product-info">
            <div class="product-name">五粮液52度500ml 浓香型白酒</div>
            <div class="product-bottom">
              <div class="product-price"><small>¥</small>899</div>
              <div class="product-sales">销量 2.3万</div>
            </div>
          </div>
        </div>
        <div class="product-card" onclick="goProduct(6)">
          <div class="product-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
          <div class="product-info">
            <div class="product-name">西湖龙井 特级250g 2024新茶</div>
            <div class="product-bottom">
              <div class="product-price"><small>¥</small>168</div>
              <div class="product-sales">销量 1.8万</div>
            </div>
          </div>
        </div>
        <div class="product-card" onclick="goProduct(7)">
          <div class="product-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">🔋</div>
          <div class="product-info">
            <div class="product-name">小米充电宝20000mAh大容量</div>
            <div class="product-bottom">
              <div class="product-price"><small>¥</small>129</div>
              <div class="product-sales">销量 5.6万</div>
            </div>
          </div>
        </div>
        <div class="product-card" onclick="goProduct(8)">
          <div class="product-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">🎮</div>
          <div class="product-info">
            <div class="product-name">Steam $50礼品卡 官方充值</div>
            <div class="product-bottom">
              <div class="product-price"><small>¥</small>339</div>
              <div class="product-sales">销量 3.2万</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height:20px;"></div>
  </div>

  <!-- Page: Category -->
  <div class="page" id="page-category">
    <div class="header">
      <div class="header-title">全部分类</div>
    </div>
    <div class="category-layout">
      <div class="category-left">
        <div class="category-tab active" onclick="selectCategory(0)">酒茶</div>
        <div class="category-tab" onclick="selectCategory(1)">游戏点卡</div>
        <div class="category-tab" onclick="selectCategory(2)">电子产品</div>
      </div>
      <div class="category-right">
        <div class="sub-category active" id="sub-0">
          <div class="sub-title">酒茶</div>
          <div class="sub-items">
            <div class="sub-item" onclick="goProduct(10)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍶</div>
              <div class="sub-item-name">白酒</div>
            </div>
            <div class="sub-item" onclick="goProduct(11)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FCE7F3,#FBCFE8);">🍷</div>
              <div class="sub-item-name">红酒</div>
            </div>
            <div class="sub-item" onclick="goProduct(12)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
              <div class="sub-item-name">茶叶</div>
            </div>
            <div class="sub-item" onclick="goProduct(13)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">🍺</div>
              <div class="sub-item-name">啤酒</div>
            </div>
            <div class="sub-item" onclick="goProduct(14)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">🥃</div>
              <div class="sub-item-name">洋酒</div>
            </div>
            <div class="sub-item" onclick="goProduct(15)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#CFFAFE,#A5F3FC);">🧃</div>
              <div class="sub-item-name">黄酒</div>
            </div>
          </div>
        </div>
        <div class="sub-category" id="sub-1">
          <div class="sub-title">游戏点卡</div>
          <div class="sub-items">
            <div class="sub-item" onclick="goProduct(20)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">📱</div>
              <div class="sub-item-name">手游充值</div>
            </div>
            <div class="sub-item" onclick="goProduct(21)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">💻</div>
              <div class="sub-item-name">网游充值</div>
            </div>
            <div class="sub-item" onclick="goProduct(22)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FED7AA,#FDBA74);">🎮</div>
              <div class="sub-item-name">Steam</div>
            </div>
            <div class="sub-item" onclick="goProduct(23)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">🎯</div>
              <div class="sub-item-name">PlayStation</div>
            </div>
            <div class="sub-item" onclick="goProduct(24)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#A7F3D0,#6EE7B7);">🏆</div>
              <div class="sub-item-name">Xbox</div>
            </div>
            <div class="sub-item" onclick="goProduct(25)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FBCFE8,#F9A8D4);">🃏</div>
              <div class="sub-item-name">Switch</div>
            </div>
          </div>
        </div>
        <div class="sub-category" id="sub-2">
          <div class="sub-title">电子产品</div>
          <div class="sub-items">
            <div class="sub-item" onclick="goProduct(30)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">📱</div>
              <div class="sub-item-name">手机</div>
            </div>
            <div class="sub-item" onclick="goProduct(31)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#A7F3D0,#6EE7B7);">🎧</div>
              <div class="sub-item-name">耳机</div>
            </div>
            <div class="sub-item" onclick="goProduct(32)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🔋</div>
              <div class="sub-item-name">充电宝</div>
            </div>
            <div class="sub-item" onclick="goProduct(33)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#E2E8F0,#CBD5E1);">⌚</div>
              <div class="sub-item-name">智能手表</div>
            </div>
            <div class="sub-item" onclick="goProduct(34)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">📺</div>
              <div class="sub-item-name">平板</div>
            </div>
            <div class="sub-item" onclick="goProduct(35)">
              <div class="sub-item-img" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">💻</div>
              <div class="sub-item-name">笔记本</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Page: Cart -->
  <div class="page" id="page-cart">
    <div class="header">
      <div class="header-title">购物车</div>
      <div class="cart-edit" onclick="toggleCartEdit()">编辑</div>
    </div>
    <div class="cart-list">
      <div class="cart-item" data-id="1">
        <div class="cart-check checked" onclick="toggleCartItem(this)">✓</div>
        <div class="cart-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
        <div class="cart-info">
          <div class="cart-name">五粮液52度500ml</div>
          <div class="cart-spec">规格：500ml</div>
          <div class="cart-bottom">
            <div class="cart-price">¥899</div>
            <div class="cart-count">
              <div class="count-btn" onclick="changeCount(this,-1)">−</div>
              <div class="count-num">1</div>
              <div class="count-btn" onclick="changeCount(this,1)">+</div>
            </div>
          </div>
        </div>
      </div>
      <div class="cart-item" data-id="2">
        <div class="cart-check checked" onclick="toggleCartItem(this)">✓</div>
        <div class="cart-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
        <div class="cart-info">
          <div class="cart-name">西湖龙井 特级250g</div>
          <div class="cart-spec">规格：250g</div>
          <div class="cart-bottom">
            <div class="cart-price">¥168</div>
            <div class="cart-count">
              <div class="count-btn" onclick="changeCount(this,-1)">−</div>
              <div class="count-num">2</div>
              <div class="count-btn" onclick="changeCount(this,1)">+</div>
            </div>
          </div>
        </div>
      </div>
      <div class="cart-item" data-id="3">
        <div class="cart-check" onclick="toggleCartItem(this)"></div>
        <div class="cart-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">🔋</div>
        <div class="cart-info">
          <div class="cart-name">小米充电宝20000mAh</div>
          <div class="cart-spec">规格：黑色</div>
          <div class="cart-bottom">
            <div class="cart-price">¥129</div>
            <div class="cart-count">
              <div class="count-btn" onclick="changeCount(this,-1)">−</div>
              <div class="count-num">1</div>
              <div class="count-btn" onclick="changeCount(this,1)">+</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height:150px;"></div>
    <div class="cart-footer">
      <div class="cart-all" onclick="toggleAllCart(this)">
        <div class="cart-check checked" id="cart-all-check">✓</div>
        <span>全选</span>
      </div>
      <div class="cart-total">
        <div class="cart-total-label">合计</div>
        <div class="cart-total-price" id="cart-total-price">¥1067</div>
      </div>
      <button class="btn-checkout" onclick="goCheckout()">结算(2)</button>
    </div>
  </div>

  <!-- Page: Profile -->
  <div class="page" id="page-profile">
    <div class="profile-header">
      <div class="profile-info">
        <div class="profile-avatar">用</div>
        <div>
          <div class="profile-name">用户小明</div>
          <div class="profile-level">VIP会员</div>
        </div>
      </div>
      <div class="profile-stats">
        <div class="stat-item" onclick="goPage('orders')">
          <div class="stat-num">12</div>
          <div class="stat-label">全部订单</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">58</div>
          <div class="stat-label">收藏</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">256</div>
          <div class="stat-label">积分</div>
        </div>
      </div>
    </div>
    <div class="profile-orders">
      <div class="order-item" onclick="goPage('orders')">
        <div class="order-icon" style="background:#FEF3C7;">
          <span style="color:#F59E0B;">⏳</span>
          <span class="order-badge">1</span>
        </div>
        <div class="order-name">待付款</div>
      </div>
      <div class="order-item" onclick="goPage('orders')">
        <div class="order-icon" style="background:#DBEAFE;">
          <span style="color:#3B82F6;">📦</span>
          <span class="order-badge">2</span>
        </div>
        <div class="order-name">待发货</div>
      </div>
      <div class="order-item" onclick="goPage('orders')">
        <div class="order-icon" style="background:#D1FAE5;">
          <span style="color:#10B981;">🚚</span>
          <span class="order-badge">3</span>
        </div>
        <div class="order-name">待收货</div>
      </div>
      <div class="order-item" onclick="goPage('orders')">
        <div class="order-icon" style="background:#FCE7F3;">
          <span style="color:#EC4899;">⭐</span>
        </div>
        <div class="order-name">待评价</div>
      </div>
    </div>

    <div class="profile-menu">
      <div class="menu-item" onclick="goPage('referral')">
        <div class="menu-icon" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">🎁</div>
        <div class="menu-name">邀请有礼</div>
        <div class="menu-arrow">›</div>
      </div>
      <div class="menu-item" onclick="goCoupon()">
        <div class="menu-icon" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">🎟️</div>
        <div class="menu-name">我的优惠券</div>
        <div class="menu-arrow">›</div>
      </div>
      <div class="menu-item" onclick="goFavorite()">
        <div class="menu-icon" style="background:linear-gradient(135deg,#FCE7F3,#FBCFE8);">❤️</div>
        <div class="menu-name">我的收藏</div>
        <div class="menu-arrow">›</div>
      </div>
      <div class="menu-item" onclick="goAddress()">
        <div class="menu-icon" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">📍</div>
        <div class="menu-name">收货地址</div>
        <div class="menu-arrow">›</div>
      </div>
    </div>
    <div class="profile-menu">
      <div class="menu-item" onclick="goSettings()">
        <div class="menu-icon" style="background:#F1F5F9;">⚙️</div>
        <div class="menu-name">设置</div>
        <div class="menu-arrow">›</div>
      </div>
    </div>
    <div style="height:30px;"></div>
  </div>

  <!-- Page: Product Detail -->
  <div class="page" id="page-detail">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">商品详情</div>
    </div>
    <div class="detail-header">
      <div class="detail-swipe" id="detail-img">🍷</div>
    </div>
    <div class="detail-price-section">
      <span class="detail-price" id="detail-price">¥899</span>
      <span class="detail-origin" id="detail-origin">¥1299</span>
    </div>
    <div class="detail-name" id="detail-name">五粮液52度500ml 浓香型白酒 送礼佳品</div>
    <div class="detail-tags">
      <span class="tag tag-group" id="tag-group" style="display:none;">拼团价</span>
      <span class="tag tag-seckill" id="tag-seckill" style="display:none;">秒杀价</span>
      <span class="tag tag-bargain" id="tag-bargain" style="display:none;">0元砍</span>
    </div>

    <div class="detail-section">
      <div class="detail-section-title">📦 规格选择</div>
      <div class="sku-row" onclick="showSkuModal()">
        <span class="sku-label">规格</span>
        <span class="sku-value" id="sku-selected">请选择</span>
        <span class="sku-arrow">›</span>
      </div>
      <div class="sku-row" onclick="showSkuModal()">
        <span class="sku-label">数量</span>
        <span class="sku-value" id="detail-count">1</span>
        <span class="sku-arrow">›</span>
      </div>
    </div>

    <div class="detail-section">
      <div class="detail-section-title">⭐ 商品评价 (128)</div>
      <div style="padding:12px 0;">
        <div style="display:flex;gap:12px;align-items:center;">
          <div style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#818CF8);display:flex;align-items:center;justify-content:center;color:white;font-weight:600;">张</div>
          <div>
            <div style="font-size:14px;font-weight:600;">张先生</div>
            <div style="font-size:12px;color:var(--text-light);">2024-03-15</div>
          </div>
        </div>
        <div style="font-size:14px;margin-top:12px;color:var(--text-secondary);line-height:1.6;">酒香浓郁，口感绵柔，送礼很有面子！包装精美，发货很快，满意！</div>
      </div>
    </div>

    <div style="height:90px;"></div>
    <div class="detail-action" id="detail-action">
      <div class="action-icons">
        <div class="action-icon-btn"><span>🏠</span><small>首页</small></div>
        <div class="action-icon-btn"><span>❤️</span><small>收藏</small></div>
      </div>
      <div class="action-btns">
        <button class="btn-cart" onclick="addToCart()">加入购物车</button>
        <button class="btn-buy-now" onclick="buyNow()">立即购买</button>
      </div>
    </div>
    <div class="detail-action" id="group-action" style="display:none;">
      <div class="action-icons">
        <div class="action-icon-btn"><span>🏠</span><small>首页</small></div>
        <div class="action-icon-btn"><span>❤️</span><small>收藏</small></div>
      </div>
      <div class="action-btns">
        <button class="btn-cart" onclick="addToCart()">加入购物车</button>
        <button class="btn-join-group" onclick="joinGroup()">参与拼团</button>
      </div>
    </div>
  </div>

  <!-- Page: Group Buy -->
  <div class="page" id="page-group">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">拼团活动</div>
    </div>
    <div class="activity-header">
      <div class="activity-title">👥 拼团特惠 低价来袭</div>
      <div class="activity-desc">2人成团，享受超值折扣价</div>
    </div>
    <div class="activity-section">
      <div class="activity-card" onclick="goGroupProduct(1)">
        <div class="activity-img" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">🍷</div>
        <div class="activity-info">
          <div class="activity-name">五粮液52度500ml</div>
          <div class="activity-price">¥159 <span class="activity-original">¥398</span></div>
          <div class="activity-meta">3人正在拼团 | 还差2人</div>
          <div class="activity-progress">
            <div class="progress-text">已拼60%</div>
            <div class="progress-bar"><div class="progress-fill" style="width:60%"></div></div>
          </div>
        </div>
        <button class="activity-join" onclick="event.stopPropagation();goPage('group-detail')">去参团</button>
      </div>
      <div class="activity-card" onclick="goGroupProduct(2)">
        <div class="activity-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">🎧</div>
        <div class="activity-info">
          <div class="activity-name">AirPods Pro 2代</div>
          <div class="activity-price">¥89 <span class="activity-original">¥299</span></div>
          <div class="activity-meta">5人正在拼团 | 还差3人</div>
          <div class="activity-progress">
            <div class="progress-text">已拼40%</div>
            <div class="progress-bar"><div class="progress-fill" style="width:40%"></div></div>
          </div>
        </div>
        <button class="activity-join" onclick="event.stopPropagation();goPage('group-detail')">去参团</button>
      </div>
      <div class="activity-card" onclick="goGroupProduct(3)">
        <div class="activity-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍃</div>
        <div class="activity-info">
          <div class="activity-name">西湖龙井 特级500g</div>
          <div class="activity-price">¥69 <span class="activity-original">¥199</span></div>
          <div class="activity-meta">2人正在拼团 | 还差1人</div>
          <div class="activity-progress">
            <div class="progress-text">已拼50%</div>
            <div class="progress-bar"><div class="progress-fill" style="width:50%"></div></div>
          </div>
        </div>
        <button class="activity-join" onclick="event.stopPropagation();goPage('group-detail')">去参团</button>
      </div>
    </div>
  </div>

  <!-- Page: Group Detail -->
  <div class="page" id="page-group-detail">
    <div class="header">
      <div class="header-back" onclick="goPage('group')">‹</div>
      <div class="header-title">拼团详情</div>
    </div>
    <div class="group-detail-header">
      <div class="group-detail-price">¥159</div>
      <div class="group-detail-original">原价 ¥398</div>
    </div>
    <div class="group-members">
      <div class="group-leader">
        <div class="joined-avatar" style="background:linear-gradient(135deg,#6366F1,#818CF8);">李</div>
        <span style="font-weight:600;">李团长</span>
        <span class="leader-badge">团长</span>
      </div>
      <div style="font-size:14px;color:var(--text-secondary);margin-bottom:16px;">拼团时间：2024-03-20 14:30</div>
      <div style="font-size:14px;color:var(--text-secondary);">已有1人参团，还差1人成团</div>
      <div class="group-joined">
        <div class="joined-user">
          <div class="joined-avatar" style="background:linear-gradient(135deg,#6366F1,#818CF8);">李</div>
          <span style="font-size:12px;">李团长</span>
        </div>
        <div class="joined-user">
          <div class="joined-placeholder">?</div>
          <span style="font-size:12px;color:var(--text-light);">待加入</span>
        </div>
      </div>
      <div style="font-size:14px;color:var(--text-secondary);margin-top:16px;">距结束：<span id="group-countdown" style="color:var(--accent);font-weight:700;">23:45:12</span></div>
      <button class="btn-join-group-buy" onclick="goCheckout()">立即参团 ¥159</button>
    </div>
    <div class="detail-section" style="margin-top:15px;">
      <div class="detail-section-title">📋 拼团规则</div>
      <div style="font-size:14px;color:var(--text-secondary);line-height:2;">
        1. 拼团有效期24小时，超时自动退款<br>
        2. 拼团成功后1-3个工作日发货<br>
        3. 拼团失败全额退款<br>
        4. 可直接购买，不参与拼团
      </div>
    </div>
  </div>

  <!-- Page: Flash Sale -->
  <div class="page" id="page-seckill">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">限时秒杀</div>
    </div>
    <div class="time-tabs">
      <div class="time-tab">
        <div>10:00</div>
        <div class="time-status">已结束</div>
      </div>
      <div class="time-tab active">
        <div>12:00</div>
        <div class="time-status">抢购中</div>
      </div>
      <div class="time-tab">
        <div>20:00</div>
        <div class="time-status">即将开始</div>
      </div>
    </div>
    <div class="activity-section">
      <div style="text-align:center;padding:20px;background:linear-gradient(135deg,#FEE2E2,#FECACA);border-radius:var(--radius-lg);margin-bottom:15px;">
        <div style="font-size:13px;color:var(--danger);font-weight:600;">🔥 本场抢购中</div>
        <div style="font-size:22px;color:var(--danger);font-weight:800;margin-top:8px;" id="seckill-timer">02:35:21</div>
      </div>
      <div class="activity-card" onclick="goSeckillDetail(1)">
        <div class="activity-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
        <div class="activity-info">
          <div class="activity-name">五粮液52度500ml</div>
          <div class="activity-price">¥99 <span class="activity-original">¥299</span></div>
          <div class="activity-progress">
            <div class="progress-text">已抢75%</div>
            <div class="progress-bar"><div class="progress-fill" style="width:75%;background:linear-gradient(90deg,#EF4444,#F87171);"></div></div>
          </div>
        </div>
        <button class="activity-join" style="background:linear-gradient(135deg,#EF4444,#F87171);" onclick="event.stopPropagation();goPage('checkout')">立即抢</button>
      </div>
      <div class="activity-card" onclick="goSeckillDetail(2)">
        <div class="activity-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
        <div class="activity-info">
          <div class="activity-name">西湖龙井 特级250g</div>
          <div class="activity-price">¥49 <span class="activity-original">¥168</span></div>
          <div class="activity-progress">
            <div class="progress-text">已抢45%</div>
            <div class="progress-bar"><div class="progress-fill" style="width:45%;background:linear-gradient(90deg,#EF4444,#F87171);"></div></div>
          </div>
        </div>
        <button class="activity-join" style="background:linear-gradient(135deg,#EF4444,#F87171);" onclick="event.stopPropagation();goPage('checkout')">立即抢</button>
      </div>
      <div class="activity-card" onclick="goSeckillDetail(3)">
        <div class="activity-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">📱</div>
        <div class="activity-info">
          <div class="activity-name">小米手环8</div>
          <div class="activity-price">¥169 <span class="activity-original">¥299</span></div>
          <div class="activity-progress">
            <div class="progress-text">已抢30%</div>
            <div class="progress-bar"><div class="progress-fill" style="width:30%;background:linear-gradient(90deg,#EF4444,#F87171);"></div></div>
          </div>
        </div>
        <button class="activity-join" style="background:linear-gradient(135deg,#EF4444,#F87171);" onclick="event.stopPropagation();goPage('checkout')">立即抢</button>
      </div>
    </div>
  </div>

  <!-- Page: Bargain -->
  <div class="page" id="page-bargain">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">砍价活动</div>
    </div>
    <div class="activity-header" style="background:linear-gradient(135deg,#10B981 0%,#34D399 100%);">
      <div class="activity-title">🔪 0元砍价 免费拿</div>
      <div class="activity-desc">邀请好友帮忙砍价，砍到0元免费拿</div>
    </div>
    <div class="activity-section">
      <div class="section-header">
        <div class="section-title"><span class="section-icon">📋</span> 我的砍价</div>
        <div class="section-more">进行中(2)</div>
      </div>
      <div class="activity-card" onclick="goBargainDetail(1)">
        <div class="activity-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">📱</div>
        <div class="activity-info">
          <div class="activity-name">iPhone 14 128G</div>
          <div style="font-size:13px;color:var(--text-secondary);">已砍¥2400，还剩¥3599</div>
          <div class="activity-progress">
            <div class="progress-text">已砍40%</div>
            <div class="progress-bar"><div class="progress-fill" style="width:40%;background:linear-gradient(90deg,#10B981,#34D399);"></div></div>
          </div>
        </div>
        <button class="activity-join" style="background:linear-gradient(135deg,#10B981,#34D399);" onclick="event.stopPropagation();goBargainProduct(1)">继续砍</button>
      </div>
      <div style="margin-top:20px;">
        <div class="section-header">
          <div class="section-title"><span class="section-icon">🔥</span> 热门砍价商品</div>
        </div>
        <div class="bargain-grid">
          <div class="bargain-card" onclick="goBargainProduct(2)">
            <div class="bargain-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">🎮</div>
            <div class="bargain-content">
              <div class="bargain-name">Switch 游戏机</div>
              <div class="bargain-prices">
                <div class="bargain-current-price">¥0</div>
                <div class="bargain-original-price">¥2099</div>
              </div>
              <button class="bargain-btn" onclick="event.stopPropagation();goBargainProduct(2)">邀请砍价</button>
            </div>
          </div>
          <div class="bargain-card" onclick="goBargainProduct(3)">
            <div class="bargain-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
            <div class="bargain-content">
              <div class="bargain-name">茅台53度500ml</div>
              <div class="bargain-prices">
                <div class="bargain-current-price">¥0</div>
                <div class="bargain-original-price">¥1499</div>
              </div>
              <button class="bargain-btn" onclick="event.stopPropagation();goBargainProduct(3)">邀请砍价</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Page: Bargain Detail -->
  <div class="page" id="page-bargain-detail">
    <div class="header">
      <div class="header-back" onclick="goPage('bargain')">‹</div>
      <div class="header-title">砍价详情</div>
    </div>
    <div class="bargain-detail-header">
      <div class="bargain-detail-img" id="bargain-img">📱</div>
      <div class="bargain-current">¥3599</div>
      <div class="bargain-original">原价 ¥5999</div>
      <div class="bargain-stats">
        <div class="stat-box">
          <div class="stat-num" id="cut-count">8</div>
          <div class="stat-label">已砍次数</div>
        </div>
        <div class="stat-box">
          <div class="stat-num" id="cut-money">¥2400</div>
          <div class="stat-label">已砍金额</div>
        </div>
        <div class="stat-box">
          <div class="stat-num" id="cut-help">5</div>
          <div class="stat-label">帮忙人数</div>
        </div>
      </div>
      <button class="btn-bargain-share" onclick="showToast('已复制邀请链接，请分享给好友！')">🎉 邀请好友帮忙砍价</button>
    </div>
    <div class="detail-section">
      <div class="detail-section-title">👥 砍价记录</div>
      <div style="padding:12px 0;border-bottom:1px solid var(--border);">
        <div style="display:flex;align-items:center;gap:12px;">
          <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3B82F6,#60A5FA);display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:13px;">王</div>
          <div style="flex:1;">
            <div style="font-size:14px;font-weight:600;">王五</div>
            <div style="font-size:12px;color:var(--text-light);">砍掉 ¥320</div>
          </div>
          <div style="font-size:12px;color:var(--text-light);">2分钟前</div>
        </div>
      </div>
      <div style="padding:12px 0;border-bottom:1px solid var(--border);">
        <div style="display:flex;align-items:center;gap:12px;">
          <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#10B981,#34D399);display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:13px;">刘</div>
          <div style="flex:1;">
            <div style="font-size:14px;font-weight:600;">刘六</div>
            <div style="font-size:12px;color:var(--text-light);">砍掉 ¥280</div>
          </div>
          <div style="font-size:12px;color:var(--text-light);">15分钟前</div>
        </div>
      </div>
      <div style="padding:12px 0;">
        <div style="display:flex;align-items:center;gap:12px;">
          <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#8B5CF6,#A78BFA);display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:13px;">陈</div>
          <div style="flex:1;">
            <div style="font-size:14px;font-weight:600;">陈七</div>
            <div style="font-size:12px;color:var(--text-light);">砍掉 ¥300</div>
          </div>
          <div style="font-size:12px;color:var(--text-light);">1小时前</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Page: Referral -->
  <div class="page" id="page-referral">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">邀请有礼</div>
    </div>
    <div class="referral-header">
      <div class="referral-main">
        <div class="referral-stat" id="referral-count">25</div>
        <div class="referral-label">已邀请好友人数</div>
        <div class="referral-data">
          <div class="data-item">
            <div class="data-num" style="color:var(--accent);" id="referral-reward">¥1250</div>
            <div class="data-label">获得奖励</div>
          </div>
          <div class="data-item">
            <div class="data-num">¥500</div>
            <div class="data-label">待生效</div>
          </div>
        </div>
        <div class="referral-code-box">
          <div class="code-label">我的邀请码</div>
          <div class="code-value" id="my-code">VIP888</div>
          <button class="btn-invite-share" onclick="showToast('邀请链接已复制，请分享给好友！')">📤 邀请好友</button>
        </div>
      </div>
    </div>
    <div class="detail-section">
      <div class="detail-section-title">📋 邀请规则</div>
      <div style="font-size:14px;color:var(--text-secondary);line-height:2;">
        1. 每邀请1位好友注册，双方各获得¥50奖励<br>
        2. 好友首单完成，再奖励¥30<br>
        3. 邀请排行榜前3名额外奖励¥500<br>
        4. 奖励可提现到微信/支付宝
      </div>
    </div>
    <div class="detail-section">
      <div class="detail-section-title">💰 奖励明细</div>
      <div style="padding:12px 0;border-bottom:1px solid var(--border);">
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div style="font-size:14px;">邀请 小李 注册</div>
          <div style="color:var(--success);font-size:14px;font-weight:600;">+¥50</div>
        </div>
        <div style="font-size:12px;color:var(--text-light);margin-top:4px;">2024-03-18</div>
      </div>
      <div style="padding:12px 0;border-bottom:1px solid var(--border);">
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div style="font-size:14px;">好友 小王 首单奖励</div>
          <div style="color:var(--success);font-size:14px;font-weight:600;">+¥30</div>
        </div>
        <div style="font-size:12px;color:var(--text-light);margin-top:4px;">2024-03-17</div>
      </div>
      <div style="padding:12px 0;">
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div style="font-size:14px;">邀请 小张 注册</div>
          <div style="color:var(--success);font-size:14px;font-weight:600;">+¥50</div>
        </div>
        <div style="font-size:12px;color:var(--text-light);margin-top:4px;">2024-03-15</div>
      </div>
    </div>
    <div style="height:30px;"></div>
  </div>

  <!-- Page: Checkout -->
  <div class="page" id="page-checkout">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">确认订单</div>
    </div>
    <div class="checkout-section">
      <div class="address-card" onclick="goAddress()">
        <div class="address-icon">📍</div>
        <div class="address-info">
          <div class="address-name">张三 138****8888</div>
          <div class="address-detail">北京市朝阳区建国路88号SOHO现代城1号楼101室</div>
        </div>
        <div style="color:var(--text-light);font-size:18px;">›</div>
      </div>
    </div>
    <div class="checkout-section">
      <div class="checkout-item">
        <div class="checkout-item-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
        <div class="checkout-item-info">
          <div class="checkout-item-name">五粮液52度500ml</div>
          <div class="checkout-item-spec">x1</div>
          <div class="checkout-item-bottom">
            <div class="checkout-item-price">¥899</div>
          </div>
        </div>
      </div>
      <div class="checkout-item">
        <div class="checkout-item-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
        <div class="checkout-item-info">
          <div class="checkout-item-name">西湖龙井 特级250g</div>
          <div class="checkout-item-spec">x2</div>
          <div class="checkout-item-bottom">
            <div class="checkout-item-price">¥336</div>
          </div>
        </div>
      </div>
    </div>
    <div class="checkout-section">
      <div class="checkout-row">
        <span class="checkout-label">优惠券</span>
        <span class="checkout-value highlight">有可用优惠券</span>
        <span class="checkout-arrow">›</span>
      </div>
      <div class="checkout-row">
        <span class="checkout-label">积分抵扣</span>
        <span class="checkout-value">可用100积分抵¥1</span>
        <span class="checkout-arrow">›</span>
      </div>
    </div>
    <div class="checkout-section">
      <div class="pay-methods">
        <div class="pay-icon">
          <span class="pay-icon-img">💚</span>
          <span class="pay-name">微信支付</span>
        </div>
        <div class="pay-check active">✓</div>
      </div>
      <div class="pay-methods">
        <div class="pay-icon">
          <span class="pay-icon-img">💙</span>
          <span class="pay-name">支付宝</span>
        </div>
        <div class="pay-check"></div>
      </div>
    </div>
    <div class="checkout-summary">
      <div class="summary-row">
        <span>商品金额</span>
        <span>¥1235</span>
      </div>
      <div class="summary-row">
        <span>运费</span>
        <span>免运费</span>
      </div>
      <div class="summary-row">
        <span>优惠券</span>
        <span style="color:var(--success);">-¥50</span>
      </div>
      <div class="summary-row">
        <span>积分抵扣</span>
        <span>-¥1</span>
      </div>
      <div class="summary-row summary-total">
        <span>合计</span>
        <span>¥1184</span>
      </div>
    </div>
    <div style="height:100px;"></div>
    <div class="checkout-footer">
      <div class="checkout-total">
        <div class="checkout-total-label">实付金额</div>
        <div class="checkout-total-price">¥1184</div>
      </div>
      <button class="btn-submit" onclick="submitOrder()">提交订单</button>
    </div>
  </div>

  <!-- Page: Success -->
  <div class="page" id="page-success">
    <div class="success-page">
      <div class="success-icon">✓</div>
      <div class="success-title">下单成功</div>
      <div class="success-desc">感谢您的购买，商品将尽快发货</div>
      <div class="success-btns">
        <button class="btn-view-order" onclick="goPage('orders')">查看订单</button>
        <button class="btn-back-home" onclick="goPage('home')">返回首页</button>
      </div>
    </div>
  </div>

  <!-- Page: Orders -->
  <div class="page" id="page-orders">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">我的订单</div>
    </div>
    <div class="order-tabs">
      <div class="order-tab active">全部</div>
      <div class="order-tab">待付款</div>
      <div class="order-tab">待发货</div>
      <div class="order-tab">待收货</div>
      <div class="order-tab">待评价</div>
    </div>
    <div class="order-list">
      <div class="order-card">
        <div class="order-card-header">
          <div class="order-shop">优品酒茶旗舰店</div>
          <div class="order-status">待付款</div>
        </div>
        <div class="order-card-item">
          <div class="order-item-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
          <div class="order-item-info">
            <div class="order-item-name">五粮液52度500ml x1</div>
            <div class="order-item-spec">2024-03-20 14:30</div>
            <div class="order-item-bottom">
              <div class="order-item-price">¥899</div>
              <div class="order-item-count">共1件</div>
            </div>
          </div>
        </div>
        <div class="order-card-footer">
          <button class="btn-order btn-order-gray" onclick="showToast('已取消订单')">取消</button>
          <button class="btn-order btn-order-primary" onclick="goPage('checkout')">去支付</button>
        </div>
      </div>
      <div class="order-card">
        <div class="order-card-header">
          <div class="order-shop">数码优品馆</div>
          <div class="order-status" style="color:#3B82F6;">待发货</div>
        </div>
        <div class="order-card-item">
          <div class="order-item-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">🔋</div>
          <div class="order-item-info">
            <div class="order-item-name">小米充电宝20000mAh x2</div>
            <div class="order-item-spec">2024-03-19 10:20</div>
            <div class="order-item-bottom">
              <div class="order-item-price">¥258</div>
              <div class="order-item-count">共2件</div>
            </div>
          </div>
        </div>
        <div class="order-card-footer">
          <button class="btn-order btn-order-primary" onclick="showToast('提醒成功')">提醒发货</button>
        </div>
      </div>
      <div class="order-card">
        <div class="order-card-header">
          <div class="order-shop">游戏点卡专营店</div>
          <div class="order-status" style="color:#10B981;">待收货</div>
        </div>
        <div class="order-card-item">
          <div class="order-item-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">🎮</div>
          <div class="order-item-info">
            <div class="order-item-name">Steam $50礼品卡 x3</div>
            <div class="order-item-spec">2024-03-18 16:45</div>
            <div class="order-item-bottom">
              <div class="order-item-price">¥1017</div>
              <div class="order-item-count">共3件</div>
            </div>
          </div>
        </div>
        <div class="order-card-footer">
          <button class="btn-order btn-order-gray">查看物流</button>
          <button class="btn-order btn-order-primary" onclick="showToast('确认收货成功')">确认收货</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Page: Category List -->
  <div class="page" id="page-category-list">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title" id="category-list-title">白酒</div>
    </div>
    <div style="padding:12px 15px;background:white;border-bottom:1px solid var(--border);">
      <div style="display:flex;gap:10px;">
        <div style="flex:1;padding:8px 12px;background:#F1F5F9;border-radius:20px;font-size:13px;display:flex;align-items:center;gap:6px;">
          <span>🔍</span>
          <span>搜索商品...</span>
        </div>
        <div style="padding:8px 14px;background:#F1F5F9;border-radius:20px;font-size:14px;">筛选</div>
      </div>
    </div>
    <div style="padding:12px 15px;background:white;display:flex;gap:16px;font-size:13px;border-bottom:1px solid var(--border);">
      <div style="color:var(--primary);font-weight:600;">综合</div>
      <div style="color:var(--text-secondary);">销量</div>
      <div style="color:var(--text-secondary);display:flex;align-items:center;gap:2px;">价格 <span>↓</span></div>
      <div style="color:var(--text-secondary);">新品</div>
    </div>
    <div class="product-grid" style="padding:15px;">
      <div class="product-card" onclick="goProduct(101)">
        <div class="product-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍶</div>
        <div class="product-info">
          <div class="product-name">茅台飞天53度500ml酱香型白酒</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>1499</div>
            <div class="product-sales">销量 5.2万</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(102)">
        <div class="product-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍶</div>
        <div class="product-info">
          <div class="product-name">五粮液普五52度500ml浓香型</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>899</div>
            <div class="product-sales">销量 3.8万</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(103)">
        <div class="product-img" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">🍺</div>
        <div class="product-info">
          <div class="product-name">青岛啤酒经典1903 24罐装</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>89</div>
            <div class="product-sales">销量 2.1万</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(104)">
        <div class="product-img" style="background:linear-gradient(135deg,#FCE7F3,#FBCFE8);">🍷</div>
        <div class="product-info">
          <div class="product-name">拉菲传奇波尔多干红葡萄酒750ml</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>168</div>
            <div class="product-sales">销量 1.5万</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(105)">
        <div class="product-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍶</div>
        <div class="product-info">
          <div class="product-name">泸州老窖特曲52度500ml</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>388</div>
            <div class="product-sales">销量 1.2万</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(106)">
        <div class="product-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
        <div class="product-info">
          <div class="product-name">竹叶青汾酒45度475ml清香型</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>128</div>
            <div class="product-sales">销量 9800</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Page: Seckill Detail -->
  <div class="page" id="page-seckill-detail">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">秒杀商品</div>
    </div>
    <div class="detail-header">
      <div class="detail-swipe" id="seckill-detail-img">🍷</div>
    </div>
    <div style="background:linear-gradient(135deg,#EF4444,#F87171);color:white;padding:20px;">
      <div style="display:flex;align-items:baseline;gap:8px;">
        <span style="font-size:28px;font-weight:800;" id="seckill-detail-price">¥99</span>
        <span style="font-size:14px;opacity:0.8;text-decoration:line-through;" id="seckill-detail-origin">¥299</span>
      </div>
      <div style="display:flex;align-items:center;gap:10px;margin-top:10px;">
        <span style="background:rgba(255,255,255,0.2);padding:4px 10px;border-radius:4px;font-size:12px;">限时特惠</span>
        <span style="font-size:13px;opacity:0.9;">限购1件</span>
      </div>
    </div>
    <div style="background:white;padding:15px 20px;margin-bottom:10px;">
      <div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px;" id="seckill-detail-name">五粮液52度500ml</div>
      <div style="font-size:13px;color:var(--text-secondary);">正宗浓香型白酒，品质保证，假一赔十</div>
    </div>
    <div class="detail-section">
      <div class="detail-section-title">⏰ 秒杀时间</div>
      <div style="display:flex;align-items:center;gap:10px;padding:10px 0;">
        <span style="background:var(--danger);color:white;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;">12:00场</span>
        <span style="font-size:14px;color:var(--text-secondary);">进行中</span>
      </div>
      <div style="text-align:center;padding:15px;background:#FEF2F2;border-radius:var(--radius);margin-top:10px;">
        <div style="font-size:13px;color:var(--danger);">距离结束</div>
        <div style="font-size:24px;font-weight:800;color:var(--danger);margin-top:5px;" id="seckill-detail-timer">02:35:21</div>
      </div>
    </div>
    <div class="detail-section">
      <div class="detail-section-title">📦 规格选择</div>
      <div class="sku-row" onclick="showSkuModal()">
        <span class="sku-label">规格</span>
        <span class="sku-value">请选择</span>
        <span class="sku-arrow">›</span>
      </div>
    </div>
    <div style="height:90px;"></div>
    <div class="detail-action">
      <div class="action-icons">
        <div class="action-icon-btn"><span>🏠</span><small>首页</small></div>
        <div class="action-icon-btn"><span>❤️</span><small>收藏</small></div>
      </div>
      <div class="action-btns">
        <button class="btn-buy-now" style="flex:1;background:linear-gradient(135deg,#EF4444,#F87171);" onclick="goPage('checkout')">立即秒杀</button>
      </div>
    </div>
  </div>

  <!-- Page: Order Detail -->
  <div class="page" id="page-order-detail">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">订单详情</div>
    </div>
    <div style="background:linear-gradient(135deg,#10B981,#34D399);color:white;padding:25px 20px;">
      <div style="font-size:18px;font-weight:700;margin-bottom:5px;">待收货</div>
      <div style="font-size:13px;opacity:0.9;">预计3天内送达</div>
    </div>
    <div class="checkout-section">
      <div class="address-card">
        <div class="address-icon">📍</div>
        <div class="address-info">
          <div class="address-name">张三 138****8888</div>
          <div class="address-detail">北京市朝阳区建国路88号SOHO现代城1号楼101室</div>
        </div>
      </div>
    </div>
    <div class="checkout-section">
      <div style="padding:12px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;">
        <span style="font-size:16px;">🏪</span>
        <span style="font-size:14px;font-weight:600;">优品酒茶旗舰店</span>
      </div>
      <div class="checkout-item" style="padding:16px 0;">
        <div class="checkout-item-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
        <div class="checkout-item-info">
          <div class="checkout-item-name">五粮液52度500ml x1</div>
          <div class="checkout-item-spec">浓香型白酒</div>
          <div class="checkout-item-bottom">
            <div class="checkout-item-price">¥899</div>
          </div>
        </div>
      </div>
    </div>
    <div class="checkout-section">
      <div class="checkout-row">
        <span class="checkout-label">订单编号</span>
        <span class="checkout-value" style="font-size:12px;">20240320143028998876</span>
      </div>
      <div class="checkout-row">
        <span class="checkout-label">下单时间</span>
        <span class="checkout-value">2024-03-20 14:30:25</span>
      </div>
      <div class="checkout-row">
        <span class="checkout-label">支付方式</span>
        <span class="checkout-value">微信支付</span>
      </div>
      <div class="checkout-row">
        <span class="checkout-label">配送方式</span>
        <span class="checkout-value">顺丰快递</span>
      </div>
    </div>
    <div class="checkout-summary">
      <div class="summary-row">
        <span>商品金额</span>
        <span>¥899</span>
      </div>
      <div class="summary-row">
        <span>运费</span>
        <span>免运费</span>
      </div>
      <div class="summary-row">
        <span>优惠券</span>
        <span style="color:var(--success);">-¥50</span>
      </div>
      <div class="summary-row summary-total">
        <span>实付金额</span>
        <span>¥849</span>
      </div>
    </div>
    <div style="padding:20px;background:white;margin-top:10px;">
      <div style="display:flex;gap:12px;justify-content:flex-end;">
        <button class="btn-order btn-order-gray" onclick="showToast('客服热线：400-888-9999')">联系客服</button>
        <button class="btn-order btn-order-gray">查看物流</button>
        <button class="btn-order btn-order-primary" onclick="showToast('确认收货成功')">确认收货</button>
      </div>
    </div>
  </div>

  <!-- Page: Coupon -->
  <div class="page" id="page-coupon">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">我的优惠券</div>
    </div>
    <div style="display:flex;padding:0 15px;background:white;border-bottom:1px solid var(--border);">
      <div style="flex:1;text-align:center;padding:14px;color:var(--primary);font-weight:600;border-bottom:2px solid var(--primary);">未使用(3)</div>
      <div style="flex:1;text-align:center;padding:14px;color:var(--text-secondary);">已使用(5)</div>
      <div style="flex:1;text-align:center;padding:14px;color:var(--text-secondary);">已过期(2)</div>
    </div>
    <div style="padding:15px;">
      <div style="background:white;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px;display:flex;">
        <div style="width:100px;background:linear-gradient(135deg,#EF4444,#F87171);color:white;padding:20px 15px;text-align:center;display:flex;flex-direction:column;justify-content:center;">
          <div style="font-size:28px;font-weight:800;">¥50</div>
          <div style="font-size:12px;opacity:0.9;margin-top:5px;">满200可用</div>
        </div>
        <div style="flex:1;padding:15px;">
          <div style="font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px;">店铺优惠券</div>
          <div style="font-size:12px;color:var(--text-light);">优品酒茶旗舰店</div>
          <div style="font-size:11px;color:var(--text-light);margin-top:8px;">有效期至 2024-04-30</div>
          <div style="margin-top:10px;">
            <span style="background:#FEF2F2;color:#EF4444;padding:3px 8px;border-radius:4px;font-size:11px;">限白酒类商品</span>
          </div>
        </div>
        <div style="display:flex;align-items:center;padding:0 15px;">
          <button style="background:var(--primary);color:white;border:none;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:500;" onclick="showToast('优惠券已领取')">立即使用</button>
        </div>
      </div>
      <div style="background:white;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px;display:flex;">
        <div style="width:100px;background:linear-gradient(135deg,#F59E0B,#FBBF24);color:white;padding:20px 15px;text-align:center;display:flex;flex-direction:column;justify-content:center;">
          <div style="font-size:28px;font-weight:800;">¥20</div>
          <div style="font-size:12px;opacity:0.9;margin-top:5px;">满100可用</div>
        </div>
        <div style="flex:1;padding:15px;">
          <div style="font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px;">平台优惠券</div>
          <div style="font-size:12px;color:var(--text-light);">全平台通用</div>
          <div style="font-size:11px;color:var(--text-light);margin-top:8px;">有效期至 2024-04-25</div>
          <div style="margin-top:10px;">
            <span style="background:#FEF3C7;color:#F59E0B;padding:3px 8px;border-radius:4px;font-size:11px;">全场通用</span>
          </div>
        </div>
        <div style="display:flex;align-items:center;padding:0 15px;">
          <button style="background:var(--primary);color:white;border:none;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:500;" onclick="showToast('优惠券已领取')">立即使用</button>
        </div>
      </div>
      <div style="background:white;border-radius:var(--radius-lg);overflow:hidden;display:flex;opacity:0.6;">
        <div style="width:100px;background:#CBD5E1;color:white;padding:20px 15px;text-align:center;display:flex;flex-direction:column;justify-content:center;">
          <div style="font-size:28px;font-weight:800;">¥100</div>
          <div style="font-size:12px;opacity:0.9;margin-top:5px;">满500可用</div>
        </div>
        <div style="flex:1;padding:15px;">
          <div style="font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px;">店铺优惠券</div>
          <div style="font-size:12px;color:var(--text-light);">数码优品馆</div>
          <div style="font-size:11px;color:var(--text-light);margin-top:8px;">有效期至 2024-03-15</div>
          <div style="margin-top:10px;">
            <span style="background:#F1F5F9;color:#64748B;padding:3px 8px;border-radius:4px;font-size:11px;">已过期</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Page: Favorite -->
  <div class="page" id="page-favorite">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">我的收藏</div>
    </div>
    <div class="product-grid" style="padding:15px;">
      <div class="product-card" onclick="goProduct(201)">
        <div style="position:relative;">
          <div class="product-img" style="background:linear-gradient(135deg,#FEE2E2,#FECACA);">🍷</div>
          <div onclick="event.stopPropagation();showToast('已取消收藏')" style="position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(0,0,0,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">♥</div>
        </div>
        <div class="product-info">
          <div class="product-name">茅台飞天53度500ml酱香型白酒</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>1499</div>
            <div style="width:28px;height:28px;background:linear-gradient(135deg,#FF9500,#FF7F00);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">+</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(202)">
        <div style="position:relative;">
          <div class="product-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">📱</div>
          <div onclick="event.stopPropagation();showToast('已取消收藏')" style="position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(0,0,0,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">♥</div>
        </div>
        <div class="product-info">
          <div class="product-name">iPhone 15 Pro 256GB 深空灰</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>8999</div>
            <div style="width:28px;height:28px;background:linear-gradient(135deg,#FF9500,#FF7F00);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">+</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(203)">
        <div style="position:relative;">
          <div class="product-img" style="background:linear-gradient(135deg,#E9D5FF,#DDD6FE);">🎮</div>
          <div onclick="event.stopPropagation();showToast('已取消收藏')" style="position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(0,0,0,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">♥</div>
        </div>
        <div class="product-info">
          <div class="product-name">PlayStation 5 光驱版 国行</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>3599</div>
            <div style="width:28px;height:28px;background:linear-gradient(135deg,#FF9500,#FF7F00);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">+</div>
          </div>
        </div>
      </div>
      <div class="product-card" onclick="goProduct(204)">
        <div style="position:relative;">
          <div class="product-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🍵</div>
          <div onclick="event.stopPropagation();showToast('已取消收藏')" style="position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(0,0,0,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">♥</div>
        </div>
        <div class="product-info">
          <div class="product-name">武夷山金骏眉红茶礼盒200g</div>
          <div class="product-bottom">
            <div class="product-price"><small>¥</small>298</div>
            <div style="width:28px;height:28px;background:linear-gradient(135deg,#FF9500,#FF7F00);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;">+</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Page: Address -->
  <div class="page" id="page-address">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">收货地址</div>
    </div>
    <div style="padding:15px;">
      <div style="background:white;border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">
          <div>
            <div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;">张三 <span style="background:var(--primary);color:white;padding:2px 8px;border-radius:4px;font-size:11px;margin-left:8px;">默认</span></div>
            <div style="font-size:14px;color:var(--text-secondary);">138****8888</div>
          </div>
          <div style="display:flex;gap:12px;">
            <span onclick="goPage('address-edit')" style="color:var(--primary);font-size:13px;cursor:pointer;">编辑</span>
            <span style="color:var(--text-light);font-size:13px;">删除</span>
          </div>
        </div>
        <div style="font-size:13px;color:var(--text-secondary);line-height:1.6;">北京市朝阳区建国路88号SOHO现代城1号楼101室</div>
      </div>
      <div style="background:white;border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;">
          <div>
            <div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;">李四</div>
            <div style="font-size:14px;color:var(--text-secondary);">139****6666</div>
          </div>
          <div style="display:flex;gap:12px;">
            <span onclick="goPage('address-edit')" style="color:var(--primary);font-size:13px;cursor:pointer;">编辑</span>
            <span style="color:var(--text-light);font-size:13px;">删除</span>
          </div>
        </div>
        <div style="font-size:13px;color:var(--text-secondary);line-height:1.6;margin-top:10px;">上海市浦东新区世纪大道100号环球金融中心88层</div>
      </div>
      <div style="background:white;border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;">
          <div>
            <div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;">王五</div>
            <div style="font-size:14px;color:var(--text-secondary);">186****3333</div>
          </div>
          <div style="display:flex;gap:12px;">
            <span onclick="goPage('address-edit')" style="color:var(--primary);font-size:13px;cursor:pointer;">编辑</span>
            <span style="color:var(--text-light);font-size:13px;">删除</span>
          </div>
        </div>
        <div style="font-size:13px;color:var(--text-secondary);line-height:1.6;margin-top:10px;">广州市天河区珠江新城花城大道88号</div>
      </div>
    </div>
    <div style="position:fixed;bottom:100px;left:50%;transform:translateX(-50%);width:350px;">
      <button onclick="goPage('address-edit')" style="width:100%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:14px;border-radius:var(--radius);font-size:15px;font-weight:600;box-shadow:0 4px 15px rgba(99,102,241,0.4);">+ 添加新地址</button>
    </div>
  </div>

  <!-- Page: Address Edit -->
  <div class="page" id="page-address-edit">
    <div class="header">
      <div class="header-back" onclick="goBack()">‹</div>
      <div class="header-title">编辑地址</div>
    </div>
    <div style="background:white;padding:0 15px;">
      <div style="padding:14px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;">
        <span style="width:70px;font-size:14px;color:var(--text-secondary);">收货人</span>
        <input type="text" value="张三" style="flex:1;border:none;outline:none;font-size:14px;">
      </div>
      <div style="padding:14px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;">
        <span style="width:70px;font-size:14px;color:var(--text-secondary);">手机号</span>
        <input type="text" value="138****8888" style="flex:1;border:none;outline:none;font-size:14px;">
      </div>
      <div style="padding:14px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;">
        <span style="width:70px;font-size:14px;color:var(--text-secondary);">所在地区</span>
        <span style="flex:1;font-size:14px;color:var(--text);">北京市 朝阳区</span>
        <span style="color:var(--text-light);">›</span>
      </div>
      <div style="padding:14px 0;">
        <span style="width:70px;font-size:14px;color:var(--text-secondary);display:block;margin-bottom:8px;">详细地址</span>
        <textarea style="width:100%;border:none;outline:none;font-size:14px;resize:none;line-height:1.6;" rows="3">北京市朝阳区建国路88号SOHO现代城1号楼101室