编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云顶咖啡 · 小程序原型 v2.5</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html, body { font-family: 'Outfit', 'Noto Sans SC', sans-serif; background: #ECE6DD; color: #2D2520; }
  body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }

  /* 设备外壳 */
  .phone {
    width: 390px; height: 820px; background: #FAF6F0; border-radius: 44px;
    box-shadow: 0 30px 80px -20px rgba(70, 40, 10, 0.35), 0 0 0 12px #1A1208, 0 0 0 13px #3a2a1a;
    position: relative; overflow: hidden;
  }
  .notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 130px; height: 30px; background: #1A1208; border-radius: 0 0 18px 18px; z-index: 200;
  }
  .status-bar {
    height: 44px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px 0 32px; font-size: 14px; font-weight: 600; color: #2D2520;
    position: relative; z-index: 5;
  }
  .status-bar .right { display: flex; align-items: center; gap: 6px; }
  .status-bar svg { width: 16px; height: 16px; }

  .screen {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none;
    flex-direction: column; padding-top: 44px; background: #FAF6F0;
  }
  .screen.active { display: flex; }
  .screen-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 90px; }
  .screen-body::-webkit-scrollbar { display: none; }

  /* 顶部导航 */
  .topbar {
    display: flex; align-items: center; padding: 8px 16px 12px; gap: 12px; background: #FAF6F0;
    position: sticky; top: 0; z-index: 10;
  }
  .topbar.with-banner { background: transparent; position: relative; }
  .topbar .title { font-size: 18px; font-weight: 700; flex: 1; }
  .topbar .back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .topbar .back svg { width: 22px; height: 22px; }
  .topbar .icon-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .topbar .icon-btn svg { width: 22px; height: 22px; }

  /* 底部 TabBar */
  .tabbar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
    background: #FFFFFF; border-top: 1px solid #EFE6D9; display: flex; align-items: stretch;
    padding-bottom: 10px; z-index: 50;
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: #9A8B7E; font-size: 11px; font-weight: 500; cursor: pointer; position: relative;
  }
  .tab svg { width: 22px; height: 22px; }
  .tab.active { color: #8B5A2B; }
  .tab .badge {
    position: absolute; top: 4px; right: 30%; background: #D94B3F; color: white;
    font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; font-weight: 600;
  }

  /* 通用样式 */
  .card { background: #FFFFFF; border-radius: 16px; margin: 0 16px 12px; }
  .btn { background: #8B5A2B; color: #FFFFFF; border: 0; padding: 14px 20px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .btn:active { transform: scale(0.97); }
  .btn-ghost { background: #F0E6D7; color: #8B5A2B; }
  .btn-block { width: 100%; }
  .row { display: flex; align-items: center; }
  .grow { flex: 1; }
  .muted { color: #9A8B7E; }
  .price { color: #D94B3F; font-weight: 700; }
  .price .yuan { font-size: 12px; }
  .price .num { font-size: 18px; }

  /* === 首页 === */
  .home-banner {
    margin: 0 16px 16px; height: 140px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(135deg, #8B5A2B 0%, #C99066 100%); position: relative;
    padding: 18px 20px; color: white; display: flex; flex-direction: column; justify-content: space-between;
  }
  .home-banner::after {
    content: ''; position: absolute; right: -20px; bottom: -30px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); border-radius: 50%;
  }
  .home-banner .tag { display: inline-block; padding: 3px 8px; background: rgba(255,255,255,0.25); border-radius: 6px; font-size: 11px; font-weight: 500; align-self: flex-start; backdrop-filter: blur(4px); }
  .home-banner h2 { font-size: 22px; font-weight: 700; line-height: 1.3; }
  .home-banner .meta { font-size: 12px; opacity: 0.9; }

  /* 搜索栏 */
  .search-bar {
    margin: 0 16px 14px; background: #FFFFFF; border-radius: 24px; padding: 10px 16px;
    display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .search-bar svg { width: 18px; height: 18px; color: #9A8B7E; }
  .search-bar input { border: 0; outline: 0; flex: 1; font-size: 14px; background: transparent; font-family: inherit; }

  /* 优惠券入口 */
  .quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 16px 16px; }
  .quick-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
  .quick-icon {
    width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: #F0E6D7; color: #8B5A2B;
  }
  .quick-icon svg { width: 22px; height: 22px; }
  .quick-icon.orange { background: #FCE3D0; color: #D97B3F; }
  .quick-icon.green { background: #D8E8D5; color: #5A8A4E; }
  .quick-icon.red { background: #FAD8D5; color: #D94B3F; }
  .quick-item .label { font-size: 12px; color: #2D2520; }

  /* 限时秒杀 */
  .seckill {
    margin: 0 16px 16px; background: linear-gradient(135deg, #2D2520 0%, #4A3825 100%);
    border-radius: 16px; padding: 14px 16px; color: white;
  }
  .seckill-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .seckill-head .title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
  .seckill-head .title .badge { background: #D97B3F; padding: 2px 6px; border-radius: 4px; font-size: 10px; }
  .seckill-head .more { font-size: 12px; opacity: 0.7; display: flex; align-items: center; gap: 2px; cursor: pointer; }
  .seckill-list { display: flex; gap: 10px; overflow-x: auto; }
  .seckill-list::-webkit-scrollbar { display: none; }
  .seckill-item { flex: 0 0 96px; background: rgba(255,255,255,0.08); border-radius: 10px; padding: 8px; cursor: pointer; }
  .seckill-item .img { width: 100%; height: 60px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 6px; }
  .seckill-item .name { font-size: 12px; line-height: 1.2; margin-bottom: 4px; height: 28px; overflow: hidden; }
  .seckill-item .price-row { display: flex; align-items: baseline; gap: 4px; }
  .seckill-item .price-row .now { color: #FF9D5C; font-size: 14px; font-weight: 700; }
  .seckill-item .price-row .old { font-size: 10px; text-decoration: line-through; opacity: 0.5; }

  /* 分类 */
  .cat-bar { display: flex; gap: 18px; padding: 4px 16px 12px; overflow-x: auto; }
  .cat-bar::-webkit-scrollbar { display: none; }
  .cat-item { font-size: 14px; color: #6B5B4A; cursor: pointer; padding: 6px 4px; white-space: nowrap; position: relative; }
  .cat-item.active { color: #2D2520; font-weight: 700; }
  .cat-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 3px; background: #8B5A2B; border-radius: 2px; }

  /* 商品列表 */
  .section-title { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; font-size: 16px; font-weight: 700; }
  .section-title .sub { font-size: 12px; color: #9A8B7E; font-weight: 400; }
  .product-grid { padding: 0 16px; }
  .product-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F2EBE0; cursor: pointer; }
  .product-row:last-child { border-bottom: 0; }
  .product-thumb {
    width: 92px; height: 92px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 50px;
    background: #F0E6D7;
  }
  .product-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
  .product-info .name { font-size: 15px; font-weight: 600; line-height: 1.3; }
  .product-info .desc { font-size: 12px; color: #9A8B7E; line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .product-info .tags { display: flex; gap: 4px; margin-top: 4px; }
  .product-info .tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; background: #FAEDDB; color: #B07A2F; }
  .product-info .tag.red { background: #FAD8D5; color: #D94B3F; }
  .product-info .tag.green { background: #D8E8D5; color: #5A8A4E; }
  .product-info .bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
  .product-info .sales { font-size: 11px; color: #B5A797; }
  .add-btn { width: 26px; height: 26px; border-radius: 13px; background: #8B5A2B; color: white; border: 0; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; }
  .add-btn:active { transform: scale(0.9); }
  .qty-stepper { display: flex; align-items: center; gap: 6px; }
  .qty-stepper button { width: 24px; height: 24px; border-radius: 12px; background: transparent; border: 1.5px solid #8B5A2B; color: #8B5A2B; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; padding: 0; line-height: 1; }
  .qty-stepper button:active { transform: scale(0.9); }
  .qty-stepper .num { font-size: 15px; font-weight: 600; color: #2D2520; min-width: 18px; text-align: center; }

  /* === 商品详情 === */
  .detail-hero {
    height: 280px; background: linear-gradient(180deg, #E8D5B7 0%, #F0E6D7 100%);
    display: flex; align-items: center; justify-content: center; font-size: 140px; position: relative;
  }
  .detail-hero::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.4) 0%, transparent 50%);
  }
  .detail-tag-bar { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
  .detail-tag-bar .dot { width: 6px; height: 6px; background: white; opacity: 0.6; border-radius: 50%; }
  .detail-tag-bar .dot.active { opacity: 1; background: #8B5A2B; width: 18px; border-radius: 4px; }

  .detail-price-bar { background: white; padding: 16px 16px 12px; }
  .detail-price-bar .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .detail-price-bar .price { font-size: 28px; color: #D94B3F; font-weight: 700; }
  .detail-price-bar .price .yuan { font-size: 16px; }
  .detail-price-bar .old { font-size: 13px; color: #9A8B7E; text-decoration: line-through; }
  .detail-price-bar .name { font-size: 18px; font-weight: 700; margin-top: 4px; }
  .detail-price-bar .desc { font-size: 12px; color: #9A8B7E; margin-top: 4px; }
  .detail-price-bar .meta { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: #9A8B7E; }

  .spec-card { background: white; margin: 8px 16px; border-radius: 12px; padding: 12px 14px; }
  .spec-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px dashed #F0E6D7; cursor: pointer; }
  .spec-row:last-child { border-bottom: 0; }
  .spec-row .label { color: #6B5B4A; font-size: 13px; width: 60px; }
  .spec-row .value { flex: 1; font-size: 13px; color: #2D2520; font-weight: 500; }
  .spec-row .value.placeholder { color: #C5B5A2; font-weight: 400; }
  .spec-row svg { width: 16px; height: 16px; color: #9A8B7E; }

  .detail-section { background: white; margin: 8px 16px; border-radius: 12px; padding: 14px; }
  .detail-section h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  .detail-section p { font-size: 13px; color: #6B5B4A; line-height: 1.7; }

  .detail-bottom {
    position: absolute; bottom: 0; left: 0; right: 0; background: white;
    border-top: 1px solid #F2EBE0; padding: 10px 16px 20px; display: flex; gap: 10px; align-items: center; z-index: 20;
  }
  .detail-bottom .icon-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; cursor: pointer; }
  .detail-bottom .icon-btn svg { width: 20px; height: 20px; color: #6B5B4A; }
  .detail-bottom .icon-btn .label { font-size: 10px; color: #6B5B4A; }
  .detail-bottom .btn { flex: 1; padding: 12px; }
  .detail-bottom .cart-count {
    position: absolute; top: 2px; right: 70px; background: #D94B3F; color: white;
    font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
    display: none; align-items: center; justify-content: center; font-weight: 600;
  }
  .detail-bottom .cart-count.show { display: flex; }

  /* === 购物车 === */
  .cart-store { background: white; margin: 12px 16px 8px; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
  .cart-store .name { font-size: 14px; font-weight: 600; flex: 1; }
  .cart-store .arrow { color: #9A8B7E; }

  .cart-list { background: white; margin: 0 16px 12px; border-radius: 12px; padding: 0 14px; }
  .cart-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #F2EBE0; gap: 10px; }
  .cart-item:last-child { border-bottom: 0; }
  .cart-check {
    width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #C5B5A2; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .cart-check.checked { background: #8B5A2B; border-color: #8B5A2B; }
  .cart-check.checked svg { color: white; }
  .cart-check svg { width: 12px; height: 12px; display: none; }
  .cart-check.checked svg { display: block; }
  .cart-item .thumb { width: 60px; height: 60px; border-radius: 8px; background: #F0E6D7; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
  .cart-item .info { flex: 1; min-width: 0; }
  .cart-item .info .name { font-size: 14px; font-weight: 600; }
  .cart-item .info .spec { font-size: 11px; color: #9A8B7E; margin-top: 2px; }
  .cart-item .info .price { margin-top: 4px; }
  .cart-item .qty { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
  .cart-item .qty button { width: 22px; height: 22px; border-radius: 11px; border: 1px solid #E0D5C5; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #6B5B4A; font-family: inherit; }
  .cart-item .qty button:disabled { opacity: 0.4; }
  .cart-item .qty .num { font-size: 14px; min-width: 16px; text-align: center; }

  .cart-bottom {
    position: absolute; bottom: 70px; left: 0; right: 0; background: white;
    border-top: 1px solid #F2EBE0; padding: 12px 16px; display: flex; align-items: center; gap: 10px; z-index: 20;
  }
  .cart-bottom .total { flex: 1; }
  .cart-bottom .total .label { font-size: 12px; color: #6B5B4A; }
  .cart-bottom .total .price { font-size: 20px; }
  .cart-bottom .btn { padding: 10px 22px; }

  .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; gap: 16px; }
  .cart-empty .icon { width: 100px; height: 100px; border-radius: 50%; background: #F0E6D7; display: flex; align-items: center; justify-content: center; }
  .cart-empty .icon svg { width: 50px; height: 50px; color: #C5B5A2; }
  .cart-empty .text { color: #9A8B7E; font-size: 14px; }
  .cart-empty .btn { padding: 10px 30px; }

  /* === 确认订单 === */
  .order-section { background: white; margin: 0 16px 8px; border-radius: 12px; padding: 14px; }
  .order-section h5 { font-size: 13px; color: #9A8B7E; margin-bottom: 12px; font-weight: 500; }
  .order-section .row { display: flex; align-items: center; padding: 10px 0; gap: 12px; }
  .order-section .row .label { color: #2D2520; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .order-section .row .label svg { width: 16px; height: 16px; color: #8B5A2B; flex-shrink: 0; }
  .order-section .row .value { color: #2D2520; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-end; min-width: 0; }
  .order-section .row .value .muted { color: #9A8B7E; font-weight: 400; font-size: 12px; }
  .order-section .row .value .value-text { text-align: right; line-height: 1.4; }
  .order-section .row .value svg { width: 14px; height: 14px; color: #9A8B7E; flex-shrink: 0; }
  .order-section .row > svg { width: 14px; height: 14px; color: #9A8B7E; flex-shrink: 0; }

  /* 时间行可点击态 */
  .row-time-clickable { cursor: pointer; transition: background 0.15s; }
  .row-time-clickable:active { background: #FAF6F0; }
  .row-time-clickable.disabled { cursor: default; opacity: 0.95; }

  .pickup-tabs { display: flex; background: #F2EBE0; border-radius: 10px; padding: 3px; margin-bottom: 12px; }
  .pickup-tab { flex: 1; text-align: center; padding: 8px; font-size: 13px; color: #6B5B4A; border-radius: 8px; cursor: pointer; }
  .pickup-tab.active { background: white; color: #2D2520; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

  .order-item-row { display: flex; align-items: center; padding: 8px 0; gap: 10px; }
  .order-item-row .thumb { width: 44px; height: 44px; border-radius: 8px; background: #F0E6D7; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
  .order-item-row .info { flex: 1; min-width: 0; }
  .order-item-row .info .name { font-size: 13px; font-weight: 600; }
  .order-item-row .info .spec { font-size: 11px; color: #9A8B7E; margin-top: 1px; }
  .order-item-row .info .price { font-size: 12px; margin-top: 2px; }
  .order-item-row .qty { font-size: 12px; color: #6B5B4A; }

  .order-summary { background: white; margin: 0 16px 8px; border-radius: 12px; padding: 14px; }
  .order-summary .row { padding: 5px 0; font-size: 13px; }
  .order-summary .row .label { color: #6B5B4A; flex: 1; }
  .order-summary .row .value { color: #2D2520; font-weight: 500; }
  .order-summary .row .value .muted { color: #9A8B7E; font-weight: 400; }
  .order-summary .row .value.discount { color: #D94B3F; }
  .order-summary .total-row { border-top: 1px solid #F2EBE0; padding-top: 10px; margin-top: 6px; }
  .order-summary .total-row .label { font-weight: 600; color: #2D2520; }
  .order-summary .total-row .value { font-size: 18px; font-weight: 700; color: #D94B3F; }

  .order-bottom {
    position: absolute; bottom: 0; left: 0; right: 0; background: white;
    border-top: 1px solid #F2EBE0; padding: 10px 16px 20px; display: flex; align-items: center; gap: 10px; z-index: 20;
  }
  .order-bottom .total-info { flex: 1; }
  .order-bottom .total-info .label { font-size: 12px; color: #6B5B4A; }
  .order-bottom .total-info .price { font-size: 22px; }

  /* === 订单详情 === */
  .order-status-card {
    margin: 0 16px 12px; border-radius: 16px; padding: 20px 18px; color: white;
    background: linear-gradient(135deg, #8B5A2B 0%, #C99066 100%); position: relative; overflow: hidden;
  }
  .order-status-card::after {
    content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%); border-radius: 50%;
  }
  .order-status-card .status { font-size: 18px; font-weight: 700; }
  .order-status-card .tip { font-size: 12px; opacity: 0.9; margin-top: 4px; }
  .order-status-card .progress { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; position: relative; z-index: 2; }
  .order-status-card .step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
  .order-status-card .step .dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 11px; }
  .order-status-card .step.done .dot { background: white; color: #8B5A2B; }
  .order-status-card .step.active .dot { background: white; color: #8B5A2B; box-shadow: 0 0 0 4px rgba(255,255,255,0.3); }
  .order-status-card .step .label { font-size: 11px; opacity: 0.95; }
  .order-status-card .step .line { position: absolute; top: 11px; height: 2px; background: rgba(255,255,255,0.3); }
  .order-status-card .step.done + .step .line,
  .order-status-card .progress .step:first-child .line { display: none; }

  .order-info { background: white; margin: 0 16px 12px; border-radius: 12px; padding: 14px; }
  .order-info .row { padding: 6px 0; font-size: 13px; }
  .order-info .row .label { color: #9A8B7E; width: 80px; }
  .order-info .row .value { color: #2D2520; flex: 1; }

  .order-items { background: white; margin: 0 16px 12px; border-radius: 12px; padding: 14px; }
  .order-items h5 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
  .order-amount { background: white; margin: 0 16px 80px; border-radius: 12px; padding: 14px; }
  .order-amount .row { padding: 4px 0; font-size: 13px; }
  .order-amount .row .label { color: #6B5B4A; flex: 1; }
  .order-amount .row .value { color: #2D2520; font-weight: 500; }
  .order-amount .row.total .value { color: #D94B3F; font-size: 18px; font-weight: 700; }
  .order-amount .row.total { border-top: 1px solid #F2EBE0; padding-top: 10px; margin-top: 6px; }

  .order-detail-bottom {
    position: absolute; bottom: 0; left: 0; right: 0; background: white;
    border-top: 1px solid #F2EBE0; padding: 10px 16px 20px; display: flex; gap: 8px; z-index: 20;
  }
  .order-detail-bottom .btn { flex: 1; padding: 10px; }
  .order-detail-bottom .btn.primary { background: #8B5A2B; }
  .order-detail-bottom .btn.ghost { background: #F0E6D7; color: #8B5A2B; }

  /* === 优惠券 === */
  .coupon-card { margin: 0 16px 10px; border-radius: 12px; background: white; padding: 0; display: flex; overflow: hidden; cursor: pointer; }
  .coupon-card .left { width: 90px; background: linear-gradient(135deg, #D97B3F 0%, #E89B5F 100%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 0; position: relative; }
  .coupon-card .left::after { content: ''; position: absolute; right: -6px; top: 0; bottom: 0; width: 12px; background: radial-gradient(circle at 0 50%, transparent 6px, #D97B3F 6px); }
  .coupon-card .left .amount { font-size: 24px; font-weight: 700; }
  .coupon-card .left .amount .yuan { font-size: 14px; }
  .coupon-card .left .condition { font-size: 10px; opacity: 0.9; }
  .coupon-card .right { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; }
  .coupon-card .right .name { font-size: 14px; font-weight: 600; }
  .coupon-card .right .range { font-size: 11px; color: #9A8B7E; margin-top: 2px; }
  .coupon-card .right .bottom { display: flex; align-items: center; justify-content: space-between; }
  .coupon-card .right .bottom .expire { font-size: 11px; color: #B5A797; }
  .coupon-card .right .bottom .use-btn { padding: 4px 12px; background: #8B5A2B; color: white; border: 0; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .coupon-card.disabled { opacity: 0.5; }
  .coupon-card.disabled .use-btn { background: #C5B5A2; }

  /* === 个人中心 === */
  .user-card { margin: 0 16px 12px; padding: 18px 16px; background: linear-gradient(135deg, #8B5A2B 0%, #C99066 100%); color: white; border-radius: 16px; }
  .user-card .top { display: flex; align-items: center; gap: 12px; }
  .user-card .avatar { width: 56px; height: 56px; border-radius: 50%; background: white; color: #8B5A2B; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
  .user-card .info { flex: 1; }
  .user-card .info .name { font-size: 17px; font-weight: 700; }
  .user-card .info .level { font-size: 12px; opacity: 0.9; margin-top: 2px; }
  .user-card .vip { background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 12px; font-size: 11px; backdrop-filter: blur(4px); cursor: pointer; }

  .user-stats { display: flex; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.2); }
  .user-stats .item { flex: 1; text-align: center; }
  .user-stats .item .num { font-size: 18px; font-weight: 700; }
  .user-stats .item .label { font-size: 11px; opacity: 0.9; margin-top: 2px; }

  .order-tabs { display: flex; background: white; margin: 0 16px 12px; border-radius: 12px; padding: 4px; }
  .order-tab { flex: 1; text-align: center; padding: 8px; font-size: 13px; color: #6B5B4A; border-radius: 8px; cursor: pointer; }
  .order-tab.active { background: #F2EBE0; color: #2D2520; font-weight: 600; }

  .menu-list { background: white; margin: 0 16px 12px; border-radius: 12px; padding: 0 14px; }
  .grid-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 16px 12px; background: white; border-radius: 12px; padding: 16px 8px; }
  .grid-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding: 8px 4px; border-radius: 8px; }
  .grid-item:active { background: #FAF6F0; }
  .grid-item .grid-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
  .grid-item .grid-icon svg { width: 22px !important; height: 22px !important; }
  .grid-item span { font-size: 12px; color: #2D2520; }

  /* 全局 SVG 兜底：避免子页面 SVG 没设尺寸把布局撑爆 */
  .menu-item svg, .settings-item svg, .profile-item svg, .address-card svg { width: 14px; height: 14px; flex-shrink: 0; }
  .menu-item .arrow, .settings-item .value svg, .profile-item .value svg { width: 14px; height: 14px; flex-shrink: 0; }
  .menu-item .icon svg, .settings-item .label svg { width: 16px; height: 16px; flex-shrink: 0; }
  .faq-item svg { width: 16px; height: 16px; flex-shrink: 0; }
  .list-card h5 .sub svg { width: 14px; height: 14px; }
  .address-card .actions span svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* 我的页面新增样式 */
  .profile-row { background: white; margin: 0 16px 8px; border-radius: 12px; padding: 0 14px; }
  .profile-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #F2EBE0; cursor: pointer; }
  .profile-item:last-child { border-bottom: 0; }
  .profile-item .label { color: #2D2520; font-size: 14px; flex: 1; }
  .profile-item .value { color: #6B5B4A; font-size: 14px; display: flex; align-items: center; gap: 4px; }
  .profile-item .value svg { width: 14px; height: 14px; color: #9A8B7E; }
  .profile-item .avatar-mini { width: 40px; height: 40px; border-radius: 50%; background: #F0E6D7; color: #8B5A2B; display: flex; align-items: center; justify-content: center; font-weight: 700; }

  /* VIP 等级卡 */
  .vip-card { margin: 0 16px 12px; border-radius: 16px; padding: 20px 18px; color: white; background: linear-gradient(135deg, #2D2520 0%, #6B4A2F 50%, #C99066 100%); position: relative; overflow: hidden; }
  .vip-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); border-radius: 50%; }
  .vip-card .vip-level { font-size: 18px; font-weight: 700; }
  .vip-card .vip-progress { background: rgba(255,255,255,0.2); height: 6px; border-radius: 3px; margin: 12px 0 6px; overflow: hidden; }
  .vip-card .vip-progress-fill { background: linear-gradient(90deg, #FFC56B, #FF9D5C); height: 100%; border-radius: 3px; }
  .vip-card .vip-meta { font-size: 12px; opacity: 0.9; }
  .vip-card .vip-rights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2); }
  .vip-card .vip-rights .right-item { text-align: center; }
  .vip-card .vip-rights .right-item .icon { font-size: 22px; margin-bottom: 4px; }
  .vip-card .vip-rights .right-item .name { font-size: 11px; opacity: 0.95; }

  /* 钱包 */
  .wallet-balance { margin: 0 16px 12px; border-radius: 16px; padding: 20px 18px; color: white; background: linear-gradient(135deg, #8B5A2B 0%, #C99066 100%); position: relative; overflow: hidden; }
  .wallet-balance::after { content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); border-radius: 50%; }
  .wallet-balance .label { font-size: 12px; opacity: 0.9; }
  .wallet-balance .amount { font-size: 36px; font-weight: 700; margin: 6px 0 12px; }
  .wallet-balance .amount .yuan { font-size: 18px; }
  .wallet-balance .actions { display: flex; gap: 8px; position: relative; z-index: 2; }
  .wallet-balance .actions button { flex: 1; padding: 8px; background: rgba(255,255,255,0.2); color: white; border: 0; border-radius: 18px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; backdrop-filter: blur(4px); }
  .recharge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px 12px; }
  .recharge-item { background: white; border-radius: 10px; padding: 14px 8px; text-align: center; cursor: pointer; border: 1.5px solid transparent; }
  .recharge-item.active { border-color: #8B5A2B; background: #FAF0E2; }
  .recharge-item .amount { font-size: 18px; font-weight: 700; color: #2D2520; }
  .recharge-item .amount .yuan { font-size: 12px; }
  .recharge-item .bonus { font-size: 11px; color: #D94B3F; margin-top: 2px; }

  /* 列表卡片 */
  .list-card { background: white; margin: 0 16px 12px; border-radius: 12px; padding: 14px; }
  .list-card h5 { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
  .list-card h5 .sub { font-size: 12px; color: #9A8B7E; font-weight: 400; }

  /* 地址项 */
  .address-card { background: white; margin: 0 16px 10px; border-radius: 12px; padding: 14px; cursor: pointer; position: relative; }
  .address-card .tag-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
  .address-card .name { font-size: 15px; font-weight: 600; flex-shrink: 0; }
  .address-card .phone-num { font-size: 13px; color: #6B5B4A; flex-shrink: 0; }
  .address-card .addr { font-size: 13px; color: #2D2520; margin-top: 4px; line-height: 1.5; }
  .address-card .default-tag { display: inline-block; padding: 1px 6px; background: #FCE3D0; color: #D97B3F; border-radius: 4px; font-size: 10px; font-weight: 600; flex-shrink: 0; }
  .address-card .actions { display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #F0E6D7; font-size: 13px; color: #6B5B4A; flex-wrap: wrap; }
  .address-card .actions span { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .address-card .actions svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }

  /* 浮动按钮 */
  .fab { position: absolute; bottom: 100px; right: 16px; width: 52px; height: 52px; border-radius: 26px; background: #8B5A2B; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(139,90,43,0.35); cursor: pointer; z-index: 30; }
  .fab svg { width: 24px; height: 24px; }
  .fab:active { transform: scale(0.95); }

  /* 设置分组 */
  .settings-section { background: white; margin: 0 16px 12px; border-radius: 12px; padding: 0 14px; }
  .settings-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #F2EBE0; cursor: pointer; }
  .settings-item:last-child { border-bottom: 0; }
  .settings-item .label { flex: 1; font-size: 14px; }
  .settings-item .value { font-size: 13px; color: #9A8B7E; display: flex; align-items: center; gap: 4px; }
  .settings-item .value svg { width: 14px; height: 14px; }
  .switch { width: 40px; height: 24px; border-radius: 12px; background: #E0D5C5; position: relative; cursor: pointer; transition: background 0.2s; }
  .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 10px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .switch.on { background: #8B5A2B; }
  .switch.on::after { left: 18px; }

  /* 客服 */
  .service-hero { margin: 0 16px 12px; padding: 18px; background: linear-gradient(135deg, #8B5A2B 0%, #C99066 100%); border-radius: 16px; color: white; }
  .service-hero h3 { font-size: 18px; font-weight: 700; }
  .service-hero p { font-size: 12px; opacity: 0.9; margin-top: 4px; }
  .service-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
  .service-action { background: rgba(255,255,255,0.18); border-radius: 10px; padding: 10px 4px; text-align: center; cursor: pointer; backdrop-filter: blur(4px); }
  .service-action .icon { font-size: 20px; }
  .service-action .name { font-size: 11px; margin-top: 2px; opacity: 0.95; }
  .faq-item { background: white; margin: 0 16px 8px; border-radius: 12px; padding: 14px; cursor: pointer; }
  .faq-item .q { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
  .faq-item .q svg { width: 16px; height: 16px; color: #9A8B7E; transition: transform 0.2s; }
  .faq-item .a { font-size: 13px; color: #6B5B4A; line-height: 1.6; margin-top: 8px; display: none; }
  .faq-item.open .a { display: block; }
  .faq-item.open .q svg { transform: rotate(180deg); }

  /* 订单卡片 */
  .order-card { background: white; margin: 0 16px 12px; border-radius: 12px; padding: 14px; cursor: pointer; transition: transform 0.15s; }
  .order-card:active { transform: scale(0.99); }
  .order-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .order-card-head .store-name { font-size: 14px; font-weight: 600; color: #2D2520; }
  .status-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .order-items-mini { display: flex; gap: 8px; padding: 10px 0; overflow-x: auto; }
  .order-items-mini::-webkit-scrollbar { display: none; }
  .order-item-mini { display: flex; align-items: center; gap: 8px; background: #FAF6F0; border-radius: 8px; padding: 6px 10px 6px 6px; flex-shrink: 0; max-width: 180px; }
  .order-item-mini .thumb-mini { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  .order-item-mini .info-mini { min-width: 0; }
  .order-item-mini .name-mini { font-size: 12px; font-weight: 600; color: #2D2520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
  .order-item-mini .qty-mini { font-size: 11px; color: #9A8B7E; margin-top: 1px; }
  .order-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed #F0E6D7; }
  .order-meta { display: flex; align-items: center; gap: 8px; }
  .pickup-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
  .order-time { font-size: 11px; color: #9A8B7E; }
  .order-total { font-size: 12px; color: #6B5B4A; }
  .order-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid #F2EBE0; }
  .order-btn { padding: 6px 14px; border: 0; border-radius: 14px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
  .order-btn.ghost { background: #F0E6D7; color: #6B5B4A; }
  .order-btn.primary { background: #8B5A2B; color: white; }
  .order-btn:active { transform: scale(0.95); }

  /* 电子卡样式 */
  .ec-card { position: relative; border-radius: 14px; padding: 16px; color: white; margin-bottom: 12px; overflow: hidden; cursor: pointer; }
  .ec-card::before { content: ''; position: absolute; right: -20px; bottom: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); border-radius: 50%; }
  .ec-action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: rgba(255,255,255,0.2); color: white; border: 0; border-radius: 14px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; }
  .ec-action-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.3); }
  .ec-action-btn.primary { background: rgba(255,255,255,0.95); color: #8B5A2B; font-weight: 600; }
  .ec-action-btn.primary:active { background: white; }
  .ec-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* 时间段选择 */
  .time-slot { padding: 10px 0; text-align: center; background: #FAF6F0; border-radius: 8px; font-size: 13px; cursor: pointer; color: #2D2520; transition: all 0.15s; }
  .time-slot:active { transform: scale(0.95); }
  .time-slot.selected { background: #8B5A2B; color: white; font-weight: 600; }
  .time-slot.disabled { background: #F2EBE0; color: #C5B5A2; cursor: not-allowed; opacity: 0.55; text-decoration: line-through; }
  .time-slot.disabled:active { transform: none; }
  .date-tab { transition: all 0.15s; }
  .date-tab:active { transform: scale(0.97); }
  .time-mode-tab { transition: all 0.15s; }
  .time-mode-tab:active { transform: scale(0.98); }
  .ec-card .ec-amount { font-size: 32px; font-weight: 700; }
  .ec-card .ec-amount .yuan { font-size: 16px; }
  .ec-card .ec-label { font-size: 11px; opacity: 0.9; margin-top: 2px; }
  .ec-card .ec-no { font-size: 11px; opacity: 0.9; font-family: 'JetBrains Mono', monospace; }
  .ec-card .ec-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.25); backdrop-filter: blur(4px); }
  .ec-card .ec-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); }
  .ec-card .ec-foot .left { font-size: 11px; opacity: 0.9; }
  .ec-card .ec-foot .right { display: flex; gap: 12px; }
  .ec-card .ec-foot .right span { font-size: 12px; display: flex; align-items: center; gap: 3px; cursor: pointer; }
  .ec-card .ec-foot .right svg { width: 12px; height: 12px; }
  .ec-card.theme-brown { background: linear-gradient(135deg, #8B5A2B 0%, #C99066 100%); }
  .ec-card.theme-dark { background: linear-gradient(135deg, #2D2520 0%, #6B4A2F 100%); }
  .ec-card.theme-orange { background: linear-gradient(135deg, #D97B3F 0%, #E89B5F 100%); }
  .ec-card.theme-gray { background: linear-gradient(135deg, #6B5B4A 0%, #9A8B7E 100%); opacity: 0.65; }
  .ec-card.theme-pink { background: linear-gradient(135deg, #D94B3F 0%, #E89B5F 100%); }
  .ec-card .ec-row { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; }
  .ec-card .ec-row .ec-emoji { font-size: 36px; line-height: 1; }

  /* 转赠单选 */
  .friend-radio { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C5B5A2; position: relative; transition: all 0.15s; }
  .friend-radio.active { border-color: #8B5A2B; }
  .friend-radio.active::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #8B5A2B; }

  /* 交易记录 */
  .tx-item { background: white; margin: 0 0 8px; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
  .tx-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .tx-icon.buy { background: #FAEDDB; color: #B07A2F; }
  .tx-icon.gift-out { background: #FAD8D5; color: #D94B3F; }
  .tx-icon.gift-in { background: #D8E8D5; color: #5A8A4E; }
  .tx-icon.use { background: #F0E6D7; color: #8B5A2B; }
  .tx-info { flex: 1; min-width: 0; }
  .tx-info .tx-title { font-size: 14px; font-weight: 600; }
  .tx-info .tx-sub { font-size: 11px; color: #9A8B7E; margin-top: 2px; }
  .tx-amount { font-size: 15px; font-weight: 700; }
  .tx-amount.plus { color: #5A8A4E; }
  .tx-amount.minus { color: #D94B3F; }
  .menu-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #F2EBE0; cursor: pointer; }
  .menu-item:last-child { border-bottom: 0; }
  .menu-item .icon { width: 28px; height: 28px; border-radius: 8px; background: #F0E6D7; color: #8B5A2B; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
  .menu-item .icon svg { width: 16px; height: 16px; }
  .menu-item .name { flex: 1; font-size: 14px; }
  .menu-item .value { font-size: 12px; color: #9A8B7E; }
  .menu-item svg.arrow { width: 14px; height: 14px; color: #9A8B7E; }

  /* === 规格弹窗 === */
  .modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; display: none; align-items: flex-end; }
  .modal-mask.show { display: flex; }
  .modal {
    width: 100%; background: white; border-radius: 20px 20px 0 0; padding: 20px 16px 24px; max-height: 80%; overflow-y: auto;
    animation: slideUp 0.25s ease-out;
  }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .modal-head .thumb { width: 64px; height: 64px; border-radius: 10px; background: #F0E6D7; display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; }
  .modal-head .info { flex: 1; }
  .modal-head .info .name { font-size: 15px; font-weight: 600; }
  .modal-head .info .price { font-size: 18px; font-weight: 700; color: #D94B3F; }
  .modal-head .info .desc { font-size: 11px; color: #9A8B7E; margin-top: 2px; }
  .modal-close { width: 28px; height: 28px; border-radius: 14px; background: #F0E6D7; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .modal-close svg { width: 16px; height: 16px; }
  .spec-group { margin-bottom: 16px; }
  .spec-group .label { font-size: 13px; color: #6B5B4A; margin-bottom: 8px; }
  .spec-options { display: flex; flex-wrap: wrap; gap: 8px; }
  .spec-option { padding: 6px 14px; border: 1px solid #E0D5C5; border-radius: 16px; font-size: 13px; cursor: pointer; background: white; color: #2D2520; }
  .spec-option.active { background: #FCE3D0; border-color: #D97B3F; color: #8B5A2B; }
  .modal-qty { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
  .modal-qty .label { font-size: 13px; color: #6B5B4A; }
  .modal-qty .qty { display: flex; align-items: center; gap: 14px; }
  .modal-qty .qty button { width: 28px; height: 28px; border-radius: 14px; border: 1px solid #E0D5C5; background: white; cursor: pointer; font-size: 16px; color: #6B5B4A; font-family: inherit; }
  .modal-qty .qty .num { font-size: 16px; min-width: 18px; text-align: center; }
  .modal-btn { width: 100%; padding: 14px; }

  /* 地址选择项 */
  .addr-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #F2EBE0; cursor: pointer; gap: 10px; }
  .addr-item:last-child { border-bottom: 0; }
  .addr-item:active { background: #FAF6F0; }
  .addr-item .addr-info { flex: 1; }
  .addr-item .addr-line1 { font-size: 14px; font-weight: 600; color: #2D2520; }
  .addr-item .addr-line2 { font-size: 12px; color: #6B5B4A; margin-top: 2px; }
  .addr-item .addr-dist { font-size: 11px; color: #9A8B7E; margin-top: 4px; }
  .addr-item svg { color: #8B5A2B; }

  /* Toast */
  .toast { position: absolute; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px); background: rgba(45,37,32,0.92); color: white; padding: 10px 18px; border-radius: 20px; font-size: 13px; z-index: 200; opacity: 0; pointer-events: none; transition: all 0.3s; backdrop-filter: blur(4px); }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* 描述 */
  .guide {
    position: fixed; top: 16px; right: 16px; background: rgba(0,0,0,0.85); color: white;
    padding: 10px 14px; border-radius: 12px; font-size: 12px; line-height: 1.5; max-width: 220px; z-index: 999;
  }
  .guide b { color: #FFC56B; }

  @media (max-width: 420px) {
    body { padding: 0; }
    .phone { width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }
    .notch { display: none; }
    .status-bar { padding-top: env(safe-area-inset-top, 0); }
    .guide { display: none; }
  }
</style>
</head>
<body>

<div class="guide">
  <b>交互原型说明</b><br>
  点击商品→详情/加购<br>
  底部 Tab 切换页面<br>
  购物车→结算→订单详情
</div>

<div class="phone">
  <div class="notch"></div>

  <!-- 状态栏 -->
  <div class="status-bar" style="position: absolute; top: 0; left: 0; right: 0; z-index: 100;">
    <span>9:41</span>
    <div class="right">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12h2m4-6h2m4 0h2m4 6h2M4 18h2m4 0h2m4 0h2"/></svg>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12.55a11 11 0 0 1 14 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg>
      <svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="21" y="9" width="3" height="6" rx="1" fill="currentColor"/><rect x="4" y="9" width="12" height="6" fill="white"/></svg>
    </div>
  </div>

  <!-- ============ 首页 ============ -->
  <div class="screen active" id="screen-home">
    <div class="screen-body">
      <div class="topbar">
        <div class="title" style="display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; color: #2D2520; padding-left: 4px;">
          <span style="font-size: 20px;">☕</span>
          <span>云顶咖啡</span>
        </div>
        <div class="grow"></div>
        <div class="icon-btn">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </div>
      </div>

      <div class="search-bar" onclick="showToast('搜索功能演示')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <span style="color: #C5B5A2; font-size: 13px;">搜索 美式 / 拿铁 / 甜点</span>
      </div>

      <div class="home-banner" onclick="goScreen('coupons')">
        <span class="tag">新用户专享</span>
        <h2>新人立减 8 元</h2>
        <div class="meta">注册即领 · 仅限堂食/自取 · 立即领取 →</div>
      </div>

      <div class="quick-row">
        <div class="quick-item" onclick="goScreen('coupons')">
          <div class="quick-icon red">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4"/><path d="M4 6v12c0 1.1.9 2 2 2h14v-4"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
          </div>
          <div class="label">领券中心</div>
        </div>
        <div class="quick-item" onclick="showToast('会员积分兑换')">
          <div class="quick-icon orange">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="6"/><polyline points="9 14 12 17 15 14"/><line x1="12" y1="17" x2="12" y2="22"/></svg>
          </div>
          <div class="label">积分商城</div>
        </div>
        <div class="quick-item" onclick="showToast('充值优惠活动')">
          <div class="quick-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
          </div>
          <div class="label">充值有礼</div>
        </div>
      </div>

      <div class="seckill">
        <div class="seckill-head">
          <div class="title">
            <span>⚡ 限时秒杀</span>
            <span class="badge">距结束 02:14:36</span>
          </div>
          <div class="more" onclick="showToast('查看更多秒杀')">
            更多 <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
          </div>
        </div>
        <div class="seckill-list">
          <div class="seckill-item" onclick="goDetail('mocha')">
            <div class="img" style="background: #C99066;">☕</div>
            <div class="name">经典摩卡</div>
            <div class="price-row">
              <span class="now">¥15</span>
              <span class="old">¥26</span>
            </div>
          </div>
          <div class="seckill-item" onclick="goDetail('latte')">
            <div class="img" style="background: #E8D5B7;">🥛</div>
            <div class="name">香草拿铁</div>
            <div class="price-row">
              <span class="now">¥19</span>
              <span class="old">¥25</span>
            </div>
          </div>
          <div class="seckill-item" onclick="goDetail('matcha')">
            <div class="img" style="background: #B5C9A4;">🍵</div>
            <div class="name">抹茶拿铁</div>
            <div class="price-row">
              <span class="now">¥18</span>
              <span class="old">¥25</span>
            </div>
          </div>
          <div class="seckill-item" onclick="goDetail('cappuccino')">
            <div class="img" style="background: #F0E6D7;">☕</div>
            <div class="name">卡布奇诺</div>
            <div class="price-row">
              <span class="now">¥17</span>
              <span class="old">¥24</span>
            </div>
          </div>
        </div>
      </div>

      <div class="section-title">
        <span>为你推荐</span>
        <span class="sub">查看全部 →</span>
      </div>

      <div class="cat-bar">
        <div class="cat-item active">全部</div>
        <div class="cat-item">招牌咖啡</div>
        <div class="cat-item">鲜榨果茶</div>
        <div class="cat-item">甜品蛋糕</div>
        <div class="cat-item">轻食简餐</div>
      </div>

      <div class="product-grid" id="product-grid">
        <!-- JS 渲染 -->
      </div>
    </div>

    <!-- 底部 TabBar -->
    <div class="tabbar">
      <div class="tab active" data-tab="home" onclick="switchTab('home')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        <span>首页</span>
      </div>
      <div class="tab" data-tab="order" onclick="switchTab('order')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11V7a3 3 0 0 1 6 0v4"/><rect x="5" y="11" width="14" height="10" rx="2"/></svg>
        <span>订单</span>
      </div>
      <div class="tab" data-tab="cart" onclick="switchTab('cart')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        <span>购物车</span>
        <span class="badge" id="tab-cart-badge" style="display: none;">0</span>
      </div>
      <div class="tab" data-tab="mine" onclick="switchTab('mine')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>我的</span>
      </div>
    </div>
  </div>

  <!-- ============ 商品详情 ============ -->
  <div class="screen" id="screen-detail">
    <div class="screen-body" style="padding-bottom: 90px;">
      <div class="topbar" style="position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent;">
        <div class="back" onclick="goBack()" style="background: rgba(255,255,255,0.8); border-radius: 50%;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </div>
        <div class="grow"></div>
        <div class="icon-btn" style="background: rgba(255,255,255,0.8); border-radius: 50%;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
        </div>
      </div>

      <div class="detail-hero" id="detail-hero">
        ☕
        <div class="detail-tag-bar">
          <div class="dot active"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

      <div class="detail-price-bar">
        <div class="price-row">
          <span class="price" id="detail-price"><span class="yuan">¥</span><span class="num">22</span></span>
          <span class="old">¥28</span>
          <span style="background: #FAD8D5; color: #D94B3F; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;">立减券可叠加</span>
        </div>
        <div class="name" id="detail-name">经典拿铁咖啡</div>
        <div class="desc" id="detail-desc">精选阿拉比卡咖啡豆，搭配丝滑牛奶，每一口都是享受</div>
        <div class="meta">
          <span>月售 1.2万+</span>
          <span>·</span>
          <span>好评 98%</span>
          <span>·</span>
          <span>☕ 招牌</span>
        </div>
      </div>

      <div class="spec-card" onclick="openSpecModal()">
        <div class="spec-row">
          <span class="label">规格</span>
          <span class="value" id="spec-summary">请选择规格</span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
      </div>

      <div class="detail-section">
        <h4>商品详情</h4>
        <p>· 100% 阿拉比卡咖啡豆，单一产地云南保山<br>· 中度烘焙，保留咖啡豆原始风味<br>· 搭配本地鲜奶，奶香浓郁<br>· 建议搭配：燕麦奶 +¥2，换抹茶奶 +¥3<br>· 堂食杯型可选：350ml / 450ml / 600ml</p>
      </div>

      <div class="detail-section">
        <h4>评价 (1,287)</h4>
        <p style="color: #B07A2F; margin-bottom: 8px;">★★★★★ 4.9 分</p>
        <p style="font-size: 12px;"><b style="color: #2D2520;">小仙女可可</b> · 2024.08.10<br>奶泡很绵密，咖啡香味浓郁，强烈推荐！</p>
      </div>
    </div>

    <div class="detail-bottom">
      <div class="icon-btn" onclick="switchTab('cart')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        <span class="label">购物车</span>
        <span class="cart-count" id="detail-cart-count">0</span>
      </div>
      <div class="icon-btn" onclick="showToast('已收藏')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        <span class="label">收藏</span>
      </div>
      <button class="btn btn-ghost" onclick="openSpecModal(true)">加入购物车</button>
      <button class="btn" onclick="openSpecModal(false, true)">立即购买</button>
    </div>

    <!-- 规格弹窗 -->
    <div class="modal-mask" id="spec-modal" onclick="if(event.target===this) closeSpecModal()">
      <div class="modal">
        <div class="modal-head">
          <div class="thumb" id="modal-thumb">☕</div>
          <div class="info">
            <div class="name" id="modal-name">经典拿铁咖啡</div>
            <div class="price" id="modal-price">¥22</div>
            <div class="desc" id="modal-stock">库存 999</div>
          </div>
          <div class="modal-close" onclick="closeSpecModal()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </div>
        </div>
        <div class="spec-group">
          <div class="label">杯型</div>
          <div class="spec-options" id="spec-size">
            <div class="spec-option" data-val="小杯 350ml" onclick="selectSpec(this, 'size')">小杯 350ml</div>
            <div class="spec-option active" data-val="中杯 450ml" onclick="selectSpec(this, 'size')">中杯 450ml</div>
            <div class="spec-option" data-val="大杯 600ml" onclick="selectSpec(this, 'size')">大杯 600ml</div>
          </div>
        </div>
        <div class="spec-group">
          <div class="label">温度</div>
          <div class="spec-options" id="spec-temp">
            <div class="spec-option active" data-val="热" onclick="selectSpec(this, 'temp')">热</div>
            <div class="spec-option" data-val="温" onclick="selectSpec(this, 'temp')">温</div>
            <div class="spec-option" data-val="冰" onclick="selectSpec(this, 'temp')">冰</div>
          </div>
        </div>
        <div class="spec-group">
          <div class="label">糖度</div>
          <div class="spec-options" id="spec-sugar">
            <div class="spec-option" data-val="无糖" onclick="selectSpec(this, 'sugar')">无糖</div>
            <div class="spec-option active" data-val="半糖" onclick="selectSpec(this, 'sugar')">半糖</div>
            <div class="spec-option" data-val="全糖" onclick="selectSpec(this, 'sugar')">全糖</div>
          </div>
        </div>
        <div class="spec-group">
          <div class="label">加料 (可选)</div>
          <div class="spec-options" id="spec-extra">
            <div class="spec-option" data-val="燕麦奶 +¥2" data-price="2" onclick="selectExtra(this)">燕麦奶 +¥2</div>
            <div class="spec-option" data-val="抹茶奶 +¥3" data-price="3" onclick="selectExtra(this)">抹茶奶 +¥3</div>
            <div class="spec-option" data-val="浓缩 +¥2" data-price="2" onclick="selectExtra(this)">浓缩 +¥2</div>
          </div>
        </div>
        <div class="modal-qty">
          <div class="label">数量</div>
          <div class="qty">
            <button onclick="changeQty(-1)">−</button>
            <span class="num" id="modal-qty">1</span>
            <button onclick="changeQty(1)">+</button>
          </div>
        </div>
        <button class="btn btn-block modal-btn" id="modal-confirm-btn" onclick="confirmSpec()">加入购物车 · ¥22</button>
      </div>
    </div>

    <!-- 通用弹窗（地址选择等） -->
    <div class="modal-mask" id="common-modal" onclick="if(event.target===this) closeModal()">
      <div class="modal">
        <div class="modal-head">
          <div class="info" style="flex: 1;">
            <div class="name" id="common-modal-title">标题</div>
          </div>
          <div class="modal-close" onclick="closeModal()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </div>
        </div>
        <div id="common-modal-body"></div>
      </div>
    </div>
  </div>

  <!-- ============ 购物车 ============ -->
  <div class="screen" id="screen-cart">
    <div class="screen-body" style="padding-bottom: 200px;">
      <div class="topbar">
        <div class="title">购物车 <span style="font-size: 12px; color: #9A8B7E; font-weight: 400;">(<span id="cart-count">0</span>)</span></div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="showToast('管理购物车')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
        </div>
      </div>

      <div id="cart-content">
        <!-- JS 渲染 -->
      </div>
    </div>

    <div class="cart-bottom" id="cart-bottom" style="display: none;">
      <div class="cart-check" id="cart-checkall" onclick="toggleCheckAll()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
      </div>
      <span style="font-size: 13px;">全选</span>
      <div class="grow"></div>
      <div class="total">
        <div class="label">合计</div>
        <div class="price">¥<span id="cart-total">0</span></div>
      </div>
      <button class="btn" onclick="goCheckout()">去结算 (<span id="cart-selected">0</span>)</button>
    </div>

    <!-- 底部 TabBar -->
    <div class="tabbar">
      <div class="tab" data-tab="home" onclick="switchTab('home')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        <span>首页</span>
      </div>
      <div class="tab" data-tab="order" onclick="switchTab('order')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11V7a3 3 0 0 1 6 0v4"/><rect x="5" y="11" width="14" height="10" rx="2"/></svg>
        <span>订单</span>
      </div>
      <div class="tab active" data-tab="cart" onclick="switchTab('cart')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        <span>购物车</span>
        <span class="badge" id="tab-cart-badge-2" style="display: none;">0</span>
      </div>
      <div class="tab" data-tab="mine" onclick="switchTab('mine')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>我的</span>
      </div>
    </div>
  </div>

  <!-- ============ 确认订单 ============ -->
  <div class="screen" id="screen-checkout">
    <div class="screen-body" style="padding-bottom: 90px;">
      <div class="topbar">
        <div class="back" onclick="switchTab('cart')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </div>
        <div class="title">确认订单</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="showToast('联系客服')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
        </div>
      </div>

      <div class="order-section">
        <div class="pickup-tabs">
          <div class="pickup-tab active" onclick="switchPickup('self', this)">到店自取</div>
          <div class="pickup-tab" onclick="switchPickup('delivery', this)">店家配送</div>
        </div>

        <!-- 自取：显示门店 -->
        <div class="row" id="row-store">
          <div class="label">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            <span>取餐门店</span>
          </div>
          <div class="value">
            <div class="value-text">
              <div>云顶咖啡 · 陆家嘴店</div>
              <div class="muted">距您 320m</div>
            </div>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
          </div>
        </div>

        <!-- 配送：显示地址（默认隐藏） -->
        <div class="row" id="row-address" style="display: none;" onclick="showAddressPicker()">
          <div class="label">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            <span>配送地址</span>
          </div>
          <div class="value">
            <div class="value-text">
              <div id="address-line1">上海市浦东新区世纪大道 100 号</div>
              <div class="muted"><span id="address-line2">3 栋 2 单元 1801 室</span> · 距门店 1.2km</div>
            </div>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
          </div>
        </div>

        <div class="row row-time-clickable" id="row-time" onclick="toggleTimePanel()">
          <div class="label">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <span id="time-label">取餐时间</span>
          </div>
          <div class="value">
            <div class="value-text">
              <div id="time-action">立即制作</div>
              <div class="muted" id="time-estimate">预计 8-12 分钟</div>
            </div>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="time-arrow" style="flex-shrink: 0; width: 14px; height: 14px; color: #9A8B7E; transition: transform 0.2s;"><polyline points="9 18 15 12 9 6"/></svg>
          </div>
        </div>

        <!-- 配送时段内嵌下拉面板 -->
        <div id="time-panel" style="display: none; background: #FAF6F0; border-radius: 10px; margin: 0 16px 8px; padding: 12px;"></div>
      </div>

      <div class="order-section">
        <h5>商品清单</h5>
        <div id="checkout-items"></div>
      </div>

      <div class="order-summary">
        <div class="row">
          <span class="label">商品金额</span>
          <span class="value">¥<span id="sum-goods">0</span></span>
        </div>
        <div class="row">
          <span class="label">优惠券</span>
          <span class="value discount" id="sum-coupon">-¥0</span>
        </div>
        <div class="row">
          <span class="label">包装费</span>
          <span class="value">¥<span id="sum-pack">1</span></span>
        </div>
        <div class="row">
          <span class="label">配送费</span>
          <span class="value" id="sum-fee">免运费</span>
        </div>
        <div class="row total-row">
          <span class="label">实付金额</span>
          <span class="value">¥<span id="sum-total">0</span></span>
        </div>
      </div>

      <div class="order-section" onclick="goScreen('coupons', 'checkout')">
        <div class="row">
          <div class="label">优惠券</div>
          <div class="value" style="color: #D94B3F;">3张可用 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
        </div>
      </div>

      <div class="order-section" onclick="showToast('添加备注')">
        <div class="row">
          <div class="label">订单备注</div>
          <div class="value muted">选填，建议留言前先与商家沟通</div>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
      </div>

      <div class="order-section" onclick="showToast('选择支付方式')">
        <div class="row">
          <div class="label">支付方式</div>
          <div class="value">微信支付 <span class="muted">余额 ¥128</span></div>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
      </div>
    </div>

    <div class="order-bottom">
      <div class="total-info">
        <div class="label">合计 <span style="color: #D94B3F;">已优惠 ¥0</span></div>
        <div class="price">¥<span id="checkout-total">0</span></div>
      </div>
      <button class="btn" style="padding: 12px 36px;" onclick="submitOrder()">提交订单</button>
    </div>
  </div>

  <!-- ============ 订单详情 ============ -->
  <div class="screen" id="screen-order-detail">
    <div class="screen-body" style="padding-bottom: 90px;">
      <div class="topbar">
        <div class="back" onclick="goBack()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </div>
        <div class="title">订单详情</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="showToast('联系客服')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
        </div>
        <div class="icon-btn" onclick="showToast('更多操作')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>
        </div>
      </div>

      <div class="order-status-card">
        <div class="status" id="od-status">制作中</div>
        <div class="tip" id="od-tip">预计还有 5 分钟，请耐心等待</div>
        <div class="progress">
          <div class="step done">
            <div class="dot">✓</div>
            <div class="label">已支付</div>
          </div>
          <div class="step active">
            <div class="dot">●</div>
            <div class="label">制作中</div>
          </div>
          <div class="step">
            <div class="dot">3</div>
            <div class="label">待取餐</div>
          </div>
        </div>
      </div>

      <div class="order-info" id="order-info">
        <div class="row" id="od-store-row">
          <span class="label">取餐门店</span>
          <span class="value" id="od-store">云顶咖啡 · 陆家嘴店</span>
        </div>
        <div class="row" id="od-address-row" style="display: none;">
          <span class="label">配送地址</span>
          <span class="value" id="od-address" style="font-size: 12px; line-height: 1.4;">-</span>
        </div>
        <div class="row">
          <span class="label">取餐方式</span>
          <span class="value" id="od-pickup-type">到店自取 · 立即制作</span>
        </div>
        <div class="row">
          <span class="label">订单号</span>
          <span class="value" id="od-id" style="display: flex; align-items: center; gap: 6px;">
            <span id="od-id-text">YT2026081900145</span>
            <svg onclick="copyOrderId()" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" style="color: #9A8B7E; cursor: pointer;"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          </span>
        </div>
        <div class="row">
          <span class="label">下单时间</span>
          <span class="value" id="od-time">2026-08-19 14:02:35</span>
        </div>
      </div>

      <div class="order-items">
        <h5>商品清单</h5>
        <div id="order-detail-items"></div>
      </div>

      <div class="order-amount" id="order-amount">
        <div class="row">
          <span class="label">商品金额</span>
          <span class="value">¥<span id="od-goods">0</span></span>
        </div>
        <div class="row">
          <span class="label">优惠券</span>
          <span class="value" style="color: #D94B3F;" id="od-coupon">-¥0</span>
        </div>
        <div class="row">
          <span class="label">包装费</span>
          <span class="value">¥1</span>
        </div>
        <div class="row total">
          <span class="label">实付</span>
          <span class="value">¥<span id="od-total">0</span></span>
        </div>
      </div>
    </div>

    <div class="order-detail-bottom">
      <button class="btn ghost" onclick="switchTab('home')">再来一单</button>
      <button class="btn ghost" onclick="showToast('已通知商家')">催单</button>
      <button class="btn primary" onclick="showToast('查看取餐码')">查看取餐码</button>
    </div>
  </div>

  <!-- ============ 订单列表 (Tab 容器) ============ -->
  <div class="screen" id="screen-order">
    <div class="screen-body" style="padding-bottom: 90px;">
      <div class="topbar">
        <div class="title">我的订单</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="resetOrderDemo()" title="恢复示例数据">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
        </div>
      </div>

      <div class="order-tabs">
        <div class="order-tab active" onclick="switchOrderTab(this, 'all')">全部</div>
        <div class="order-tab" onclick="switchOrderTab(this, 'paying')">待支付</div>
        <div class="order-tab" onclick="switchOrderTab(this, 'making')">制作中</div>
        <div class="order-tab" onclick="switchOrderTab(this, 'done')">已完成</div>
      </div>

      <div id="order-list"></div>
    </div>

    <div class="tabbar">
      <div class="tab" data-tab="home" onclick="switchTab('home')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        <span>首页</span>
      </div>
      <div class="tab active" data-tab="order" onclick="switchTab('order')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11V7a3 3 0 0 1 6 0v4"/><rect x="5" y="11" width="14" height="10" rx="2"/></svg>
        <span>订单</span>
      </div>
      <div class="tab" data-tab="cart" onclick="switchTab('cart')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        <span>购物车</span>
        <span class="badge" id="tab-cart-badge-3" style="display: none;">0</span>
      </div>
      <div class="tab" data-tab="mine" onclick="switchTab('mine')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>我的</span>
      </div>
    </div>
  </div>

  <!-- ============ 我的 ============ -->
  <div class="screen" id="screen-mine">
    <div class="screen-body" style="padding-bottom: 90px;">
      <div class="topbar">
        <div class="title">我的</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="goScreen('message')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
        </div>
        <div class="icon-btn" onclick="goScreen('settings')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        </div>
      </div>

      <div class="user-card" onclick="goScreen('profile')">
        <div class="top">
          <div class="avatar">林</div>
          <div class="info">
            <div class="name">林小咖 <span style="font-size: 12px; opacity: 0.9; font-weight: 400;">☎ 138****5678</span></div>
            <div class="level">黄金会员 · 2,480 积分 · 距白金差 520 分</div>
          </div>
          <div class="vip">个人主页 →</div>
        </div>
        <div class="user-stats">
          <div class="item" onclick="event.stopPropagation(); goScreen('coupons')">
            <div class="num">12</div>
            <div class="label">优惠券</div>
          </div>
          <div class="item" onclick="event.stopPropagation(); goScreen('wallet')">
            <div class="num">¥38</div>
            <div class="label">余额</div>
          </div>
          <div class="item" onclick="event.stopPropagation(); switchTab('order')">
            <div class="num">28</div>
            <div class="label">订单</div>
          </div>
          <div class="item" onclick="event.stopPropagation(); goScreen('points')">
            <div class="num">2,480</div>
            <div class="label">积分</div>
          </div>
        </div>
      </div>

      <div class="section-title">
        <span>我的订单</span>
        <span class="sub" onclick="switchTab('order')">查看全部 →</span>
      </div>
      <div class="order-tabs">
        <div class="order-tab" onclick="filterOrders('待支付')">待支付</div>
        <div class="order-tab" onclick="filterOrders('制作中')">制作中</div>
        <div class="order-tab" onclick="filterOrders('待取餐')">待取餐</div>
        <div class="order-tab" onclick="filterOrders('已完成')">已完成</div>
      </div>

      <!-- 常用功能 网格 -->
      <div class="grid-menu" id="mine-grid">
        <div class="grid-item" onclick="goScreen('coupons')">
          <div class="grid-icon" style="background: #FAD8D5; color: #D94B3F;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4"/><path d="M4 6v12c0 1.1.9 2 2 2h14v-4"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
          </div>
          <span>我的优惠券</span>
        </div>
        <div class="grid-item" onclick="goScreen('address')">
          <div class="grid-icon" style="background: #FCE3D0; color: #D97B3F;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
          </div>
          <span>收货地址</span>
        </div>
        <div class="grid-item" onclick="goScreen('wallet')">
          <div class="grid-icon" style="background: #F0E6D7; color: #8B5A2B;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
          </div>
          <span>我的钱包</span>
        </div>
        <div class="grid-item" onclick="goScreen('cards')">
          <div class="grid-icon" style="background: linear-gradient(135deg, #FAD8D5, #FCE3D0); color: #D94B3F;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
          </div>
          <span>卡包转赠</span>
        </div>
        <div class="grid-item" onclick="goScreen('points')">
          <div class="grid-icon" style="background: #D8E8D5; color: #5A8A4E;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
          </div>
          <span>积分商城</span>
        </div>
        <div class="grid-item" onclick="goScreen('feedback')">
          <div class="grid-icon" style="background: #FAEDDB; color: #B07A2F;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          </div>
          <span>意见反馈</span>
        </div>
      </div>

      <!-- 服务列表 -->
      <div class="menu-list">
        <div class="menu-item" onclick="goScreen('service')">
          <div class="icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
          </div>
          <span class="name">在线客服</span>
          <span class="value">9:00-22:00</span>
          <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
        <div class="menu-item" onclick="goScreen('about')">
          <div class="icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
          </div>
          <span class="name">关于我们</span>
          <span class="value">v 2.4.1</span>
          <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
      </div>
    </div>

    <div class="tabbar">
      <div class="tab" data-tab="home" onclick="switchTab('home')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        <span>首页</span>
      </div>
      <div class="tab" data-tab="order" onclick="switchTab('order')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11V7a3 3 0 0 1 6 0v4"/><rect x="5" y="11" width="14" height="10" rx="2"/></svg>
        <span>订单</span>
      </div>
      <div class="tab" data-tab="cart" onclick="switchTab('cart')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        <span>购物车</span>
        <span class="badge" id="tab-cart-badge-4" style="display: none;">0</span>
      </div>
      <div class="tab active" data-tab="mine" onclick="switchTab('mine')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>我的</span>
      </div>
    </div>
  </div>

  <!-- ============ 优惠券 ============ -->
  <div class="screen" id="screen-coupons">
    <div class="screen-body" style="padding-bottom: 30px;">
      <div class="topbar">
        <div class="back" onclick="goBack()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </div>
        <div class="title" id="coupons-title">领券中心</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="showToast('使用说明')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        </div>
      </div>

      <div class="cat-bar">
        <div class="cat-item active">全部</div>
        <div class="cat-item">满减券</div>
        <div class="cat-item">折扣券</div>
        <div class="cat-item">免运费</div>
        <div class="cat-item">已过期</div>
      </div>

      <div id="coupon-list"></div>
    </div>
  </div>

  <!-- ============ 个人资料 ============ -->
  <div class="screen" id="screen-profile">
    <div class="screen-body" style="padding-bottom: 30px;">
      <div class="topbar">
        <div class="back" onclick="goBack()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
        <div class="title">个人资料</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="showToast('编辑资料')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
        </div>
      </div>

      <div style="background: linear-gradient(135deg, #8B5A2B 0%, #C99066 100%); padding: 24px 20px 32px; color: white;">
        <div style="display: flex; align-items: center; gap: 14px;">
          <div style="width: 64px; height: 64px; border-radius: 50%; background: white; color: #8B5A2B; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;">林</div>
          <div style="flex: 1;">
            <div style="font-size: 18px; font-weight: 700;">林小咖</div>
            <div style="font-size: 12px; opacity: 0.9; margin-top: 4px;">ID: YT2026081901 · 注册于 2024.05.12</div>
          </div>
        </div>
      </div>

      <div class="profile-row" style="margin-top: -16px;">
        <div class="profile-item">
          <span class="label">昵称</span>
          <span class="value">林小咖 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>
        </div>
        <div class="profile-item">
          <span class="label">手机号</span>
          <span class="value">138****5678 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>
        </div>
        <div class="profile-item">
          <span class="label">性别</span>
          <span class="value">未设置 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>
        </div>
        <div class="profile-item">
          <span class="label">生日</span>
          <span class="value">未设置 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>
        </div>
        <div class="profile-item" onclick="showToast('微信账号绑定')">
          <span class="label">微信</span>
          <span class="value" style="color: #5A8A4E;">已绑定 ✓</span>
        </div>
      </div>
    </div>
  </div>

  <!-- ============ 收货地址 ============ -->
  <div class="screen" id="screen-address">
    <div class="screen-body" style="padding-bottom: 30px;">
      <div class="topbar">
        <div class="back" onclick="goBack()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
        <div class="title">收货地址</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="showAddressEditor()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        </div>
      </div>
      <div style="padding: 12px 16px;">
        <div class="address-card">
          <div class="tag-row">
            <span class="name">林小咖</span>
            <span class="phone-num">138****5678</span>
            <span class="default-tag">默认</span>
          </div>
          <div class="addr">上海市浦东新区世纪大道 100 号 3 栋 2 单元 1801 室</div>
          <div class="actions">
            <span onclick="event.stopPropagation(); showToast('编辑地址')">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              编辑
            </span>
            <span onclick="event.stopPropagation(); showToast('删除地址')">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/></svg>
              删除
            </span>
          </div>
        </div>
        <div class="address-card">
          <div class="tag-row">
            <span class="name">林小咖</span>
            <span class="phone-num">138****5678</span>
          </div>
          <div class="addr">上海市浦东新区陆家嘴环路 1000 号 恒生银行大厦 28 楼</div>
          <div class="actions">
            <span onclick="event.stopPropagation(); showToast('编辑地址')">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              编辑
            </span>
            <span onclick="event.stopPropagation(); setDefault(this)" data-id="1">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
              设为默认
            </span>
            <span onclick="event.stopPropagation(); showToast('删除地址')">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/></svg>
              删除
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ============ 会员中心 ============ -->
  <div class="screen" id="screen-vip">
    <div class="screen-body" style="padding-bottom: 30px;">
      <div class="topbar">
        <div class="back" onclick="goBack()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
        <div class="title">会员中心</div>
      </div>
      <div class="vip-card">
        <div class="vip-level">☀ 黄金会员</div>
        <div style="font-size: 12px; opacity: 0.9; margin-top: 4px;">有效期至 2026.12.31</div>
        <div class="vip-progress"><div class="vip-progress-fill" style="width: 82%;"></div></div>
        <div class="vip-meta">距白金会员还差 520 积分 · 完成订单或签到获取</div>
        <div class="vip-rights">
          <div class="right-item"><div class="icon">💰</div><div class="name">消费返积分</div></div>
          <div class="right-item"><div class="icon">🎂</div><div class="name">生日礼包</div></div>
          <div class="right-item"><div class="icon">🎫</div><div class="name">专享券</div></div>
          <div class="right-item"><div class="icon">📦</div><div class="name">免运费</div></div>
        </div>
      </div>

      <div class="list-card">
        <h5>会员特权 <span class="sub">查看全部</span></h5>
        <div class="profile-item" style="padding: 12px 0; border: 0;">
          <span class="label">🎁 新人礼包</span>
          <span class="value">已领取</span>
        </div>
        <div class="profile-item" style="padding: 12px 0; border: 0;">
          <span class="label">☕ 生日双倍积分</span>
          <span class="value">已开启</span>
        </div>
        <div class="profile-item" style="padding: 12px 0; border: 0;">
          <span class="label">🚚 每月免运费 4 次</span>
          <span class="value">已使用 1/4</span>
        </div>
        <div class="profile-item" style="padding: 12px 0; border: 0;">
          <span class="label">⚡ 优先制作</span>
          <span class="value" style="color: #5A8A4E;">已生效</span>
        </div>
      </div>

      <div class="list-card" style="background: linear-gradient(135deg, #2D2520 0%, #4A3825 100%); color: white;">
        <h5 style="color: white;">升级白金会员</h5>
        <div style="font-size: 12px; opacity: 0.9; margin-bottom: 12px;">再得 520 积分，享 9 大专属特权</div>
        <button class="btn" style="background: #FFC56B; color: #2D2520; padding: 10px 24px; font-size: 13px;" onclick="showToast('前往积分任务')">去赚积分</button>
      </div>
    </div>
  </div>

  <!-- ============ 钱包 ============ -->
  <div class="screen" id="screen-wallet">
    <div class="screen-body" style="padding-bottom: 30px;">
      <div class="topbar">
        <div class="back" onclick="goBack()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
        <div class="title">我的钱包</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="showToast('账单明细')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        </div>
      </div>
      <div class="wallet-balance">
        <div class="label">账户余额</div>
        <div class="amount"><span class="yuan">¥</span>38.00</div>
        <div class="actions">
          <button onclick="goScreen('recharge')">购买礼品储蓄卡</button>
          <button onclick="showToast('提现功能')">提现</button>
        </div>
      </div>

      <div class="list-card" style="background: linear-gradient(135deg, #2D2520 0%, #6B4A2F 100%); color: white;" onclick="goScreen('cards')">
        <div class="row" style="display: flex; align-items: center; gap: 12px;">
          <div style="font-size: 30px;">🎁</div>
          <div style="flex: 1;">
            <div style="font-size: 15px; font-weight: 700;">我的卡包</div>
            <div style="font-size: 11px; opacity: 0.9; margin-top: 2px;">礼品储蓄卡 · 可转赠好友</div>
          </div>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="opacity: 0.8;"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
      </div>

      <div class="list-card">
        <h5>最近交易</h5>
        <div class="profile-item">
          <span class="label">订单支付 · 经典拿铁 x1</span>
          <span class="value" style="color: #D94B3F;">-¥22.00</span>
        </div>
        <div class="profile-item">
          <span class="label">购买礼品储蓄卡 · 微信支付</span>
          <span class="value" style="color: #5A8A4E;">+¥200.00</span>
        </div>
        <div class="profile-item">
          <span class="label">退款 · 订单 YT2024080156</span>
          <span class="value" style="color: #5A8A4E;">+¥18.00</span>
        </div>
        <div class="profile-item">
          <span class="label">订单支付 · 美式 x2</span>
          <span class="value" style="color: #D94B3F;">-¥36.00</span>
        </div>
      </div>
    </div>
  </div>

  <!-- ============ 购买礼品储蓄卡（购买+转赠合并页） ============ -->
  <div class="screen" id="screen-recharge">
    <div class="screen-body" style="padding-bottom: 100px;">
      <div class="topbar">
        <div class="back" onclick="goBack()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
        <div class="title">购买礼品储蓄卡</div>
        <div class="grow"></div>
        <div class="icon-btn" onclick="goScreen('card-rules')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        </div>
      </div>

      <div style="margin: 0 16px 16px; padding: 16px; background: linear-gradient(135deg, #FCE3D0 0%, #FAEDDB 100%); border-radius: 12px; display: flex; align-items: center; gap: 12px;">
        <div style="width: 36px; height: 36px; background: #D97B3F; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px;">🎁</div>
        <div style="flex: 1;">
          <div style="font-size: 13px; font-weight: 600;">自用转赠两相宜</div>
          <div style="font-size: 11px; color: #6B5B4A; margin-top: 2px;">一次可买多张，可自用也可转赠给好友</div>
        </div>
      </div>

      <div class="section-title"><span>选择卡面额</span></div>
      <div class="recharge-grid" id="card-face-grid">
        <div class="recharge-item" data-face="100" onclick="pickCardFace(this, 100)">
          <div class="amount"><span class="yuan">¥</span>100</div>
          <div class="bonus">体验装</div>
        </div>
        <div class="recharge-item active" data-face="200" onclick="pickCardFace(this, 200)">
          <div class="amount"><span class="yuan">¥</span>200</div>
          <div class="bonus">推荐</div>
        </div>
      </div>

      <div class="section-title"><span>购买数量</span></div>
      <div style="margin: 0 16px 12px; background: white; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;">
        <div>
          <div style="font-size: 13px; color: #6B5B4A;">共 <span id="buy-qty" style="color: #2D2520; font-weight: 700; font-size: 16px;">1</span> 张</div>
          <div style="font-size: 11px; color: #9A8B7E; margin-top: 2px;">一次最多购买 10 张</div>
        </div>
        <div style="display: flex; align-items: center; gap: 14px;">
          <button type="button" onclick="changeCardQty(-1)" style="width: 30px; height: 30px; border-radius: 50%; border: 1px solid #E0D5C2; background: #FAF6F0; font-size: 18px; color: #8B5A2B; cursor: pointer; font-family: inherit;">−</button>
          <span id="buy-qty-display" style="font-size: 16px; font-weight: 700; min-width: 24px; text-align: center; color: #2D2520;">1</span>
          <button type="button" onclick="changeCardQty(1)" style="width: 30px; height: 30px; border-radius: 50%; border: 1px solid #E0D5C2; background: #FAF6F0; font-size: 18px; color: #8B5A2B; cursor: pointer; font-family: inherit;">+</button>
        </div>
      </div>

      <div class="section-title"><span>使用方式</span></div>
      <div class="settings-section">
        <div class="settings-item" onclick="pickCardMode('self', this)">
          <span class="label">📦 自用</span>
          <span class="switch on"></span>
        </div>
        <div class="settings-item" onclick="pickCardMode('gift', this)">
          <span class="label">🎁 转赠给好友</span>
          <span class="switch"></span>
        </div>
      </div>

      <div id="card-gift-section" style="display: none;">
        <div class="section-title"><span>转赠设置</span></div>
        <div style="margin: 0 16px 12px; background: white; border-radius: 12px; padding: 4px 4px 4px 16px; display: flex; align-items: center; gap: 8px;">
          <span style="color: #6B5B4A; font-size: 15px; font-weight: 500;">+86</span>
          <input id="buy-gift-phone" type="tel" inputmode="numeric" maxlength="11" placeholder="请输入对方手机号" style="flex: 1; padding: 12px 8px; border: 0; outline: 0; font-size: 16px; font-family: inherit; background: transparent;" oninput="onBuyPhoneInput(this)" />
          <button id="buy-gift-search-btn" class="btn" style="padding: 8px 16px; font-size: 13px;" onclick="searchBuyReceiver()">查询</button>
        </div>

        <div style="margin: 0 16px 12px;">
          <button class="btn btn-ghost btn-block" onclick="goScreen('contacts'); window._buyContactsPending=true;" style="background: white; border: 1px solid #F0E6D7;">
            <span style="display: flex; align-items: center; justify-content: center; gap: 6px;">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><path d="M20 8v6M23 11h-6"/></svg>
              从通讯录选择
            </span>
          </button>
        </div>

        <div id="buy-receiver-card" style="display: none; margin: 0 16px 12px; background: #FAF6F0; border-radius: 12px; padding: 14px; border: 1.5px solid #8B5A2B;">
          <div style="display: flex; align-items: center; gap: 12px;">
            <div id="buy-receiver-avatar" style="width: 44px; height: 44px; border-radius: 50%; background: #FAEDDB; color: #B07A2F; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;">?</div>
            <div style="flex: 1;">
              <div style="display: flex; align-items: center; gap: 6px;">
                <span id="buy-receiver-name" style="font-size: 15px; font-weight: 600;">-</span>
                <span style="background: #FCE3D0; color: #D97B3F; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;">云顶用户</span>
              </div>
              <div id="buy-receiver-phone" style="font-size: 12px; color: #6B5B4A; margin-top: 2px;">-</div>
            </div>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="3" style="color: #8B5A2B;"><polyline points="20 6 9 17 4 12"/></svg>
          </div>
        </div>

        <div id="buy-receiver-empty" style="display: none; margin: 0 16px 12px; background: #FAD8D5; border-radius: 12px; padding: 12px 14px; font-size: 12px; color: #D94B3F; line-height: 1.6;">
          ❌ 该手机号尚未注册云顶咖啡，转赠前请先邀请对方注册
        </div>

        <div style="margin: 0 16px 12px; background: white; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;">
          <div>
            <div style="font-size: 13px; font-weight: 600;">转赠数量</div>
            <div style="font-size: 11px; color: #9A8B7E; margin-top: 2px;">剩余 <span id="buy-self-keep">0</span> 张留给自己</div>
          </div>
          <div style="display: flex; align-items: center; gap: 12px;">
            <button type="button" onclick="changeGiftQty(-1)" style="width: 28px; height: 28px; border-radius: 50%; border: 1px solid #E0D5C2; background: #FAF6F0; font-size: 16px; color: #8B5A2B; cursor: pointer; font-family: inherit;">−</button>
            <span id="buy-gift-qty" style="font-size: 16px; font-weight: 700; min-width: 22px; text-align: center; color: #D94B3F;">1</span>
            <button type="button" onclick="changeGiftQty(1)" style="width: 28px; height: 28px; border-radius: 50%; border: 1px solid #E0D5C2; background: #FAF6F0; font-size: 16px; color: #8B5A2B; cursor: pointer; font-family: inherit;">+</button>
          </div>
        </div>

        <div class="section-title"><span>转赠留言（选填）</span></div>
        <div style="margin: 0 16px; background: white; border-radius: 12px; padding: 12px;">
          <textarea id="buy-gift-msg" placeholder="说点什么吧~（最多 50 字）" maxlength="50" style="width: 100%; min-height: 70px; border: 0; outline: 0; resize: none; font-size: 13px; font-family: inherit; background: transparent;">
编辑页面

转赠成功

转赠信息

什么是礼品储蓄卡？

如何使用？

如何转赠？

退款规则

常见问题

活动规则

我的邀请记录

Hi~ 我是你的咖啡小助手 ☕

云顶咖啡

反馈类型

联系方式（选填）
