/* ===== 移动端优先 - 尚云商城 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 14px; }
body { font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; background: #f5f5f5; color: #333; line-height: 1.5; padding-bottom: env(safe-area-inset-bottom); }
a { color: #333; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; }
input, button, select, textarea { font-family: inherit; font-size: inherit; outline: none; border: none; -webkit-appearance: none; }

/* ===== 左右分栏布局 ===== */
.split-layout { display: flex; height: calc(100vh - 48px - 50px); overflow: hidden; background: #fff; }
.side-menu { width: 86px; background: #f5f5f5; height: 100%; overflow-y: auto; flex-shrink: 0; }
.side-menu-item { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #666; position: relative; }
.side-menu-item.active { background: #fff; color: #e4393c; font-weight: bold; }
.side-menu-item.active::before { content: ''; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px; background: #e4393c; border-radius: 0 3px 3px 0; }
.side-content { flex: 1; height: 100%; overflow-y: auto; padding: 10px; background: #fff; }
.side-goods-item { display: flex; padding: 10px 0; border-bottom: 1px solid #f9f9f9; }
.side-goods-item img { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; flex-shrink: 0; margin-right: 10px; background: #f5f5f5; }
.side-goods-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.side-goods-item .name { font-size: 14px; font-weight: bold; line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-goods-item .sales { color: #999; font-size: 11px; }
.side-goods-item .bottom { display: flex; justify-content: space-between; align-items: center; }
.side-goods-item .price { color: #e4393c; font-size: 16px; font-weight: bold; }
.side-goods-item .btn-add { width: 24px; height: 24px; background: #e4393c; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }

/* ===== 顶部导航栏 ===== */
.header { background: #fff; position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.header-inner { display: flex; align-items: center; height: 48px; padding: 0 12px; }
.logo { font-size: 18px; font-weight: bold; color: #e4393c; white-space: nowrap; }
.header-search { flex: 1; margin: 0 10px; height: 32px; background: #f5f5f5; border-radius: 16px; display: flex; align-items: center; padding: 0 12px; }
.header-search input { flex: 1; background: none; height: 100%; font-size: 13px; color: #333; }
.header-search input::placeholder { color: #aaa; }
.header-search button { background: none; color: #e4393c; font-size: 13px; font-weight: bold; padding: 0 4px; }

/* ===== 底部Tab导航 ===== */
.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex; height: 50px; border-top: 1px solid #eee; z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; font-size: 10px; text-decoration: none; position: relative; }
.tab-item .tab-icon { width: 24px; height: 24px; margin-bottom: 2px; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.4; }
.tab-item.active { color: #e4393c; }
.tab-item.active .tab-icon { opacity: 1; filter: invert(33%) sepia(96%) saturate(1862%) hue-rotate(338deg) brightness(86%) contrast(97%); } /* 红色滤镜 */
.tab-item .badge { position: absolute; top: 2px; right: 50%; margin-right: -18px; background: #e4393c; color: #fff; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; }

/* 图标定义 (使用 Base64 SVG) */
.icon-home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); }
.icon-cate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E"); }
.icon-cart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E"); }
.icon-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); }

/* 支付图标 */
.icon-alipay { width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%231677FF'%3E%3Cpath d='M884.3 546.6c-49.2 24.3-107.5 44-173.3 58.7 18.5 45.4 33.3 93.3 43.8 143.1 82.5-12.8 141.7-65 141.7-65s17.9 33.3 22.8 45.7c-2.4 9-5.1 17.5-8.2 25.5-31.5 82-123 129.8-123 129.8s-20.9-20.7-32.5-37.1c-14.7-20.6-26.6-43.7-35.3-68.7-41.9 10.5-87.1 18.2-135 22.3v136H517V803.1c-208.5-8.7-340.5-98.8-340.5-98.8s15.3-38.3 25-52.6c11.6-17 26.3-31.6 43.6-42.9 6.2 3.1 12.8 6 19.8 8.7 54.4 20.7 122.9 32.7 197.8 36.9-10.9-46.7-25.9-91.8-44.2-134.4-129.3-16.7-227-63.1-227-63.1s13.3-39 20.3-51c8.5-14.7 19.3-27.7 32-38.6 3.6 1.3 7.5 2.5 11.5 3.6 60.1 16.5 130.4 29.5 206.8 38-7-28-15.7-55.2-26.1-81.3H264.9V274h264V188h68v86h272v53H598.6c9.6 25.8 17.8 52.4 24.3 79.4 110.1 12.5 203.4 46.8 203.4 46.8s-13.3 40.5-20.3 53.3c-8.6 15.6-19.7 29.3-32.8 40.6-3.8-1.5-8-2.9-12.3-4.1-51.5-14.9-111-26.5-175.7-34.5 16.6 39.4 30.2 80.9 40 124.3 64.6-13.8 121.7-32.3 169-54.6 14.5 17.5 28.1 33.6 28.1 33.6zM461.7 608.2c16 38.3 29.2 78.4 38.8 120.3-64.8-4-123.6-14.7-169.8-32.3 26.6 44.1 82.5 82.9 174.5 91.5v-61c-22.3 2-45.2 3.1-68.5 3.1-60.8 0-117.3-6.9-165.7-19.1 7.2-18.4 16.3-35.9 27-52.1 41.5-62.9 163.7-50.4 163.7-50.4z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; }
.icon-wxpay { width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%2309BB07'%3E%3Cpath d='M396.9 203.9c-179.7 0-325.4 117.1-325.4 261.5 0 85.3 50.9 160.3 128 209.6L169 769l99.3-51.7c39.6 11 81.7 17.1 125.7 17.1 9.9 0 19.8-0.3 29.6-0.9-10.4-33-16.1-68-16.1-104.3 0-184.2 188.7-333.6 421.4-333.6 22.4 0 44.5 1.4 66.2 4.1-27.1-56.7-93.5-95.8-168.2-95.8h-130z'/%3E%3Cpath d='M828.6 348.6c-184.9 0-334.8 120.5-334.8 269.1 0 148.7 150 269.1 334.8 269.1 35.8 0 70.1-4.6 102.6-13.1l80.2 42.1-24.6-76.3c63-40.2 104.5-101.3 104.5-170.6 0-148.6-150-269.1-334.8-269.1zM742.8 548c0-18.4 17.8-33.3 39.8-33.3 22 0 39.8 14.9 39.8 33.3s-17.8 33.3-39.8 33.3c-21.9 0-39.8-14.9-39.8-33.3z m198.9 0c0-18.4 17.8-33.3 39.8-33.3 22 0 39.8 14.9 39.8 33.3s-17.8 33.3-39.8 33.3c-22 0-39.8-14.9-39.8-33.3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; }
.icon-qqpay { width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='none' stroke='%2312B7F5' stroke-width='60'%3E%3Cpath d='M825.6 476.8c0-153.6-140.8-278.4-313.6-278.4S198.4 323.2 198.4 476.8c0 10.9 0.7 21.6 2.1 32.2-34.6 27.6-56.5 70.3-56.5 118.2 0 84.8 68.8 153.6 153.6 153.6 4.3 0 8.5-0.2 12.7-0.5 48.7 30.6 113.6 49.3 184.5 52.8l9.6-1.1 6.8 0.8c65.4-3.1 125.6-19.3 172.5-46.1 7.2 2.1 14.8 3.3 22.6 3.3 47.9 0 86.8-38.9 86.8-86.8 0-41.2-28.7-75.7-67.2-84.5 1.5-12.8 2.3-25.9 2.3-39.2l-2.6 0.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; }

/* 通用空状态/占位图 */
.icon-empty { width: 60px; height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'%3E%3C/polyline%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; margin: 0 auto 10px; }
.icon-image { width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; }
.icon-success { width: 60px; height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c41a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; margin: 0 auto 10px; }
.icon-wait { width: 60px; height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faad14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; margin: 0 auto 10px; }

/* ===== 页面容器 ===== */
.page { padding-top: 48px; padding-bottom: 50px; min-height: 100vh; }
.page-notab { padding-bottom: 0; }
.page-noheader { padding-top: 0; }

/* ===== 分类横滑 ===== */
.cate-scroll { display: flex; overflow-x: auto; padding: 10px 12px; gap: 8px; background: #fff; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.cate-scroll::-webkit-scrollbar { display: none; }
.cate-tag { display: inline-block; padding: 6px 14px; background: #f5f5f5; border-radius: 16px; color: #666; font-size: 13px; flex-shrink: 0; }
.cate-tag.active { background: #e4393c; color: #fff; }

/* ===== 商品列表 - 两列网格 ===== */
.goods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px 12px; }
.goods-card { background: #fff; border-radius: 8px; overflow: hidden; }
.goods-card .img-wrap { width: 100%; aspect-ratio: 1; background: #f9f9f9; overflow: hidden; }
.goods-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.goods-card .img-placeholder { width: 100%; aspect-ratio: 1; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 28px; }
.goods-card .info { padding: 8px 10px 10px; }
.goods-card .name { font-size: 13px; line-height: 1.4; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.goods-card .price-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.goods-card .price { color: #e4393c; font-size: 16px; font-weight: bold; }
.goods-card .price::before { content: '¥'; font-size: 12px; }
.goods-card .sales { color: #aaa; font-size: 11px; }

/* ===== 商品详情 ===== */
.detail-page { padding-top: 0; padding-bottom: 56px; }
.detail-back { position: fixed; top: 10px; left: 10px; z-index: 200; width: 32px; height: 32px; background: rgba(0,0,0,.35); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.detail-img { width: 100%; aspect-ratio: 1; background: #f5f5f5; }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-main { background: #fff; padding: 14px 14px 20px; margin-bottom: 8px; }
.detail-main .price-box { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.detail-main .price { color: #e4393c; font-size: 24px; font-weight: bold; }
.detail-main .price::before { content: '¥'; font-size: 14px; }
.detail-main .title { font-size: 15px; font-weight: bold; line-height: 1.5; }
.detail-section { background: #fff; padding: 14px; margin-bottom: 8px; }
.detail-section .sec-title { font-size: 13px; color: #999; margin-bottom: 10px; }
.sku-list { display: flex; gap: 8px; flex-wrap: wrap; }
.sku-item { padding: 6px 14px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.sku-item.active { border-color: #e4393c; color: #e4393c; background: #fef0f0; }
.sku-item.disabled { color: #ccc; background: #f9f9f9; }
.qty-box { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 30px; height: 30px; background: #f5f5f5; border-radius: 4px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.qty-input { width: 44px; height: 30px; text-align: center; background: #f5f5f5; border-radius: 4px; font-size: 14px; }
.stock-info { color: #999; font-size: 12px; margin-left: 8px; }
.detail-desc { background: #fff; padding: 14px; margin-bottom: 8px; }
.detail-desc h3 { font-size: 14px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eee; }
.detail-desc img { max-width: 100%; }
.detail-action { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex; height: 50px; box-shadow: 0 -1px 6px rgba(0,0,0,.06); z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.detail-action .act-btn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #fff; border: none; }
.detail-action .btn-cart { background: #ff9800; }
.detail-action .btn-buy { background: #e4393c; }

/* ===== 登录页 ===== */
.auth-page { padding: 60px 24px 0; background: #fff; min-height: 100vh; }
.auth-page .logo-area { text-align: center; margin-bottom: 40px; }
.auth-page .logo-area h1 { font-size: 24px; color: #e4393c; }
.auth-page .logo-area p { color: #999; font-size: 13px; margin-top: 6px; }
.auth-tabs { display: flex; margin-bottom: 24px; border-bottom: 1px solid #eee; }
.auth-tabs a { flex: 1; text-align: center; padding: 12px 0; color: #999; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tabs a.active { color: #e4393c; border-color: #e4393c; font-weight: bold; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; color: #666; margin-bottom: 6px; font-size: 13px; }
.form-group input { width: 100%; height: 46px; border: 1px solid #e8e8e8; border-radius: 6px; padding: 0 14px; font-size: 15px; background: #fafafa; }
.form-group input:focus { border-color: #e4393c; background: #fff; }

/* ===== 购物车 ===== */
.cart-page { padding-bottom: 110px; }
.cart-title { background: #fff; padding: 14px; font-size: 16px; font-weight: bold; }
.cart-item { display: flex; align-items: center; padding: 12px 14px; background: #fff; margin-bottom: 1px; }
.cart-item .check { width: 24px; flex-shrink: 0; }
.cart-item .check input { width: 18px; height: 18px; accent-color: #e4393c; }
.cart-item .thumb { width: 80px; height: 80px; border-radius: 6px; object-fit: cover; margin: 0 10px; flex-shrink: 0; }
.cart-item .item-info { flex: 1; min-width: 0; }
.cart-item .item-name { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-item .item-sku { color: #999; font-size: 12px; margin-top: 2px; }
.cart-item .item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cart-item .item-price { color: #e4393c; font-weight: bold; font-size: 15px; }
.cart-item .item-qty { display: flex; align-items: center; gap: 4px; }
.cart-item .item-qty .qb { width: 26px; height: 26px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cart-item .item-qty .qi { width: 36px; height: 26px; text-align: center; font-size: 13px; background: #f0f0f0; border-radius: 4px; }
.cart-item .item-delete { color: #ccc; font-size: 18px; padding: 4px 0 4px 8px; }
.cart-bar { position: fixed; bottom: 50px; left: 0; right: 0; background: #fff; display: flex; align-items: center; height: 50px; box-shadow: 0 -1px 6px rgba(0,0,0,.06); z-index: 90; padding: 0 14px; }
.cart-bar .check-all { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; }
.cart-bar .check-all input { width: 18px; height: 18px; accent-color: #e4393c; }
.cart-bar .total-area { flex: 1; text-align: right; padding-right: 12px; }
.cart-bar .total-area .label { font-size: 12px; color: #666; }
.cart-bar .total-area .amount { color: #e4393c; font-size: 18px; font-weight: bold; }
.cart-bar .btn-settle { background: #e4393c; color: #fff; height: 36px; padding: 0 20px; border-radius: 18px; font-size: 14px; font-weight: bold; }
.cart-empty { text-align: center; padding: 100px 0; color: #999; }
.cart-empty p { margin-bottom: 16px; }

/* ===== 地址卡片 ===== */
.addr-card { background: #fff; padding: 14px; margin-bottom: 1px; border-left: 3px solid transparent; }
.addr-card.active { border-left-color: #e4393c; background: #fef7f7; }
.addr-card .addr-name { font-weight: bold; font-size: 15px; }
.addr-card .addr-phone { color: #666; font-size: 13px; margin-left: 10px; }
.addr-card .addr-detail { color: #666; font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* ===== 订单确认 ===== */
.confirm-page { padding-bottom: 60px; }
.section-title { font-size: 14px; font-weight: bold; padding: 12px 14px 8px; color: #333; }
.confirm-goods { background: #fff; }
.confirm-goods-item { display: flex; padding: 10px 14px; gap: 10px; border-bottom: 1px solid #f5f5f5; }
.confirm-goods-item img { width: 70px; height: 70px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.confirm-goods-item .g-info { flex: 1; }
.confirm-goods-item .g-name { font-size: 13px; line-height: 1.4; }
.confirm-goods-item .g-sku { color: #999; font-size: 12px; margin-top: 2px; }
.confirm-goods-item .g-bottom { display: flex; justify-content: space-between; margin-top: 6px; }
.confirm-goods-item .g-price { color: #e4393c; font-weight: bold; }
.confirm-goods-item .g-qty { color: #999; font-size: 12px; }
.remark-box { background: #fff; padding: 12px 14px; margin-top: 8px; }
.remark-box input { width: 100%; height: 38px; background: #f5f5f5; border-radius: 6px; padding: 0 12px; font-size: 13px; border: none; }
.submit-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 14px; box-shadow: 0 -1px 6px rgba(0,0,0,.06); z-index: 90; }
.submit-bar .total { font-size: 12px; color: #666; }
.submit-bar .total .amount { color: #e4393c; font-size: 20px; font-weight: bold; }
.submit-bar .btn-submit { background: #e4393c; color: #fff; height: 38px; padding: 0 24px; border-radius: 19px; font-size: 15px; font-weight: bold; }

/* ===== 收银台 ===== */
.cashier-page { padding-top: 48px; background: #fff; min-height: 100vh; }
.cashier-header { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, #e4393c, #ff6b6b); color: #fff; }
.cashier-header .label { font-size: 14px; opacity: .8; }
.cashier-header .amount { font-size: 36px; font-weight: bold; margin: 8px 0; }
.cashier-header .amount::before { content: '¥'; font-size: 18px; }
.cashier-header .order-no { font-size: 12px; opacity: .7; }
.cashier-countdown { text-align: center; padding: 10px; color: #999; font-size: 13px; background: #fff; }
.cashier-countdown span { color: #e4393c; font-weight: bold; }
.pay-methods { padding: 10px 14px; }
.pay-methods .sec-label { font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.pay-method-item { display: flex; align-items: center; padding: 14px; border: 2px solid #eee; border-radius: 8px; margin-bottom: 10px; }
.pay-method-item.active { border-color: #e4393c; background: #fef7f7; }
.pay-method-item .pm-icon { font-size: 26px; margin-right: 12px; }
.pay-method-item .pm-name { font-size: 15px; font-weight: bold; flex: 1; }
.pay-method-item .pm-check { width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 50%; }
.pay-method-item.active .pm-check { background: #e4393c; border-color: #e4393c; position: relative; }
.pay-method-item.active .pm-check::after { content: '✓'; color: #fff; position: absolute; top: -2px; left: 2px; font-size: 14px; }
.cashier-footer { padding: 20px; }
.cashier-footer .btn-pay { width: 100%; height: 46px; background: #e4393c; color: #fff; border-radius: 23px; font-size: 16px; font-weight: bold; }
.result-page { padding-top: 48px; text-align: center; background: #fff; min-height: 100vh; }
.result-icon { font-size: 60px; margin-top: 60px; }
.result-title { font-size: 18px; font-weight: bold; margin: 16px 0 8px; }
.result-desc { color: #999; font-size: 13px; }
.result-actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; }

/* ===== 订单列表 ===== */
.order-tabs { display: flex; background: #fff; position: sticky; top: 48px; z-index: 50; border-bottom: 1px solid #eee; }
.order-tabs a { flex: 1; text-align: center; padding: 12px 0; font-size: 13px; color: #666; border-bottom: 2px solid transparent; }
.order-tabs a.active { color: #e4393c; border-color: #e4393c; font-weight: bold; }
.order-card { background: #fff; margin: 8px 12px; border-radius: 8px; overflow: hidden; }
.order-card-header { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f5f5f5; }
.order-card-header .order-no { color: #999; font-size: 12px; }
.order-card-header .status { color: #e4393c; font-size: 13px; font-weight: bold; }
.order-card-body { padding: 10px 14px; }
.order-goods-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.order-goods-row img { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; }
.order-goods-row .og-info { flex: 1; min-width: 0; }
.order-goods-row .og-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-goods-row .og-sku { color: #999; font-size: 12px; }
.order-goods-row .og-price { color: #e4393c; font-weight: bold; font-size: 13px; text-align: right; white-space: nowrap; }
.order-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid #f5f5f5; }
.order-card-footer .total { font-size: 13px; }
.order-card-footer .total .amount { color: #e4393c; font-weight: bold; }
.order-card-footer .actions { display: flex; gap: 8px; }

/* ===== 通用按钮 ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 18px; font-size: 13px; border: none; }
.btn-primary { background: #e4393c; color: #fff; }
.btn-default { background: #fff; color: #666; border: 1px solid #ddd; }
.btn-sm { padding: 5px 14px; font-size: 12px; border-radius: 14px; }
.btn-block { display: block; width: 100%; }
.btn-lg { height: 46px; font-size: 16px; border-radius: 23px; }
.btn[disabled] { opacity: .5; }

/* ===== 消息提示 ===== */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.75); color: #fff; padding: 12px 24px; border-radius: 8px; z-index: 9999; display: none; font-size: 14px; max-width: 80%; text-align: center; }
.toast.show { display: block; animation: fadeInOut 2s ease; }
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ===== 空状态 ===== */
.empty { text-align: center; padding: 80px 20px; color: #999; }
.empty .empty-icon { font-size: 50px; margin-bottom: 12px; }
.empty p { font-size: 14px; }

/* ===== 后台管理 ===== */
.admin-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e, #16213e); }
.admin-login-box { background: #fff; width: 340px; max-width: 90vw; border-radius: 12px; padding: 36px 28px; }
.admin-login-box h2 { text-align: center; margin-bottom: 8px; font-size: 22px; }
.admin-login-box .sub { text-align: center; color: #999; margin-bottom: 28px; font-size: 13px; }
.admin-header { background: #1a1a2e; color: #fff; height: 50px; display: flex; align-items: center; padding: 0 16px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.admin-header h1 { font-size: 16px; flex: 1; }
.admin-header .admin-user { font-size: 13px; color: #aaa; }
.admin-header .admin-logout { color: #ff6b6b; font-size: 13px; margin-left: 12px; }
.admin-body { padding: 58px 12px 12px; }
.admin-nav { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; position: relative; z-index: 10; }
.admin-nav a { padding: 8px 16px; background: #fff; border-radius: 6px; font-size: 13px; color: #666; cursor: pointer; text-decoration: none; }
.admin-nav a.active { background: #1a1a2e; color: #fff; }
.admin-card { background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.admin-card-title { padding: 12px 14px; font-weight: bold; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.admin-table { width: 100%; overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; }
.admin-table table { width: 100%; min-width: 640px; border-collapse: collapse; }
.admin-table th { background: #fafafa; padding: 10px 12px; text-align: left; font-size: 13px; color: #666; white-space: nowrap; }
.admin-table td { padding: 10px 12px; border-top: 1px solid #f5f5f5; font-size: 13px; }
.admin-table .status-on { color: #52c41a; }
.admin-table .status-off { color: #ff4d4f; }
.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.stat-card { background: #fff; border-radius: 8px; padding: 16px; text-align: center; }
.stat-card .num { font-size: 24px; font-weight: bold; color: #e4393c; }
.stat-card .label { font-size: 12px; color: #999; margin-top: 4px; }
.admin-pagination { display: flex; justify-content: center; gap: 6px; padding: 12px; }
.admin-pagination a, .admin-pagination span { padding: 6px 12px; background: #fff; border-radius: 4px; font-size: 13px; }
.admin-pagination span.current { background: #1a1a2e; color: #fff; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: none; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 90vw; max-width: 500px; max-height: 80vh; overflow-y: auto; padding: 20px; }
.modal h3 { margin-bottom: 16px; }

/* ===== 数字键盘收银台 ===== */
.keypad-body { background: #f5f5f5; margin: 0; padding: 0; height: 100vh; overflow: hidden; }
.keypad-page { display: flex; flex-direction: column; height: 100vh; max-width: 500px; margin: 0 auto; background: #fff; }
.keypad-topbar { background: linear-gradient(135deg, #1a1a2e, #16213e); color: #fff; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.keypad-title { font-size: 17px; font-weight: bold; letter-spacing: 1px; }
.keypad-display { background: linear-gradient(135deg, #1a1a2e, #0f3460); color: #fff; padding: 20px 20px 24px; text-align: center; flex-shrink: 0; }
.keypad-label { font-size: 13px; opacity: .7; margin-bottom: 10px; }
.keypad-amount { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.keypad-yen { font-size: 24px; font-weight: 300; opacity: .8; }
.keypad-value { font-size: 48px; font-weight: bold; letter-spacing: 2px; font-family: "DIN Alternate", "Helvetica Neue", -apple-system, sans-serif; min-height: 58px; line-height: 1; }
.keypad-methods { display: flex; gap: 0; flex-shrink: 0; border-bottom: 1px solid #eee; background: #fff; }
.keypad-method { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 0; gap: 6px; font-size: 12px; color: #999; border-bottom: 2px solid transparent; transition: all .2s; }
.keypad-method.active { color: #333; border-bottom-color: #e4393c; background: #fef7f7; }
.keypad-method .icon-alipay, .keypad-method .icon-wxpay, .keypad-method .icon-qqpay { width: 28px; height: 28px; }
.keypad-grid { flex: 1; display: flex; flex-direction: column; background: #e8e8e8; gap: 1px; padding: 1px 0 0; }
.keypad-row { display: flex; gap: 1px; flex: 1; min-height: 0; }
.keypad-key { flex: 1; background: #fff; border: none; font-size: 24px; font-weight: 500; color: #333; display: flex; align-items: center; justify-content: center; font-family: -apple-system, "Helvetica Neue", sans-serif; transition: background .1s; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.keypad-key:active { background: #e8e8e8; }
.keypad-zero { flex: 2; }
.keypad-del { background: #f0f0f0; color: #666; }
.keypad-del:active { background: #ddd; }
.keypad-clear { background: #f0f0f0; color: #ff6b6b; font-size: 20px; font-weight: bold; }
.keypad-clear:active { background: #ddd; }
.keypad-confirm { background: #e4393c; color: #fff; font-size: 16px; font-weight: bold; line-height: 1.3; flex: 1; }
.keypad-confirm:active { background: #c0313a; }