/* ═══════════════════════════════════════
   轻享商城 — 移动端优先样式（主题驱动）
   所有颜色/尺寸由 CSS 变量控制，通过主题配置面板动态调整
   ═══════════════════════════════════════ */

:root {
  --primary: #ff4757;
  --primary-dark: #e84142;
  --primary-light: #ff6b81;
  --bg: #f5f5f5;
  --card-bg: #fff;
  --text: #2d3436;
  --text-light: #636e72;
  --text-muted: #b2bec3;
  --border: #eee;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
  --radius: 12px;
  --radius-sm: 8px;
  --font-size: 16px;
  --font-size-sm: 12px;
  --font-size-lg: 18px;
  --layout-max: 480px;
  --header-style: gradient;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size: var(--font-size, 16px); -webkit-text-size-adjust:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
  padding-bottom:calc(60px + var(--safe-bottom));
  min-height:100vh;
}
a { color: var(--text); text-decoration:none; }
img { max-width:100%; display:block; }
input,textarea,select,button { font-size:inherit; font-family:inherit; outline:none; }
button { cursor:pointer; border:none; }

/* ─── Header ─── */
.header {
  position:sticky; top:0; z-index:100;
  color:#fff; padding:12px 16px;
  display:flex; align-items:center; gap:12px;
}
.header-solid { background: var(--primary); }
.header-gradient { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.header-transparent { background: transparent; color: var(--text); }
.header h1 { font-size: var(--font-size-lg, 18px); font-weight:600; flex:1; }
.header .back { font-size:22px; opacity:.9; flex-shrink:0; }
.header-right { display:flex; gap:8px; align-items:center; }
.header-icon { color:#fff; font-size:20px; opacity:.9; position:relative; }
.header-transparent .header-icon { color: var(--text); }
.badge {
  position:absolute; top:-6px; right:-8px;
  background:#fff; color:var(--primary); font-size:10px;
  min-width:18px; height:18px; line-height:18px;
  text-align:center; border-radius:9px; font-weight:700;
}

/* ─── Bottom Nav ─── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--card-bg);
  border-top:1px solid var(--border);
  display:flex; padding:6px 0 calc(6px + var(--safe-bottom));
}
.nav-item { flex:1; text-align:center; font-size:10px; color:var(--text-muted); }
.nav-item.active { color:var(--primary); }
.nav-item .nav-icon { font-size:22px; display:block; margin-bottom:2px; }

/* ─── Page Content ─── */
.page { padding:12px 16px; }
.page-title { font-size: var(--font-size-lg, 16px); font-weight:600; margin-bottom:12px; }

/* ─── Cards ─── */
.card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden;
}

/* ─── Banner ─── */
.banner { margin:12px 16px; border-radius: var(--radius); overflow:hidden; }
.banner img { width:100%; aspect-ratio:16/6; object-fit:cover; }

/* ─── Section ─── */
.section { margin:16px 0; }
.section-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 16px; margin-bottom:10px;
}
.section-title { font-size: var(--font-size-lg, 16px); font-weight:600; }
.section-more { font-size: var(--font-size-sm, 12px); color: var(--text-light); }

/* ─── Product Grid ─── */
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px; }
.product-card {
  background: var(--card-bg); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow);
}
.product-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.product-info { padding:8px 10px 10px; }
.product-name { font-size:13px; display:-webkit-box; -webkit-line-clamp:2;
                -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; min-height:2.6em; }
.product-price { margin-top:6px; display:flex; align-items:baseline; gap:4px; }
.price-now { font-size: var(--font-size-lg, 16px); font-weight:700; color:var(--primary); }
.price-old { font-size: var(--font-size-sm, 11px); color: var(--text-muted); text-decoration:line-through; }
.product-sales { font-size: var(--font-size-sm, 11px); color: var(--text-muted); }

/* ─── Product List (horizontal) ─── */
.h-scroll {
  display:flex; gap:10px; overflow-x:auto; padding:0 16px 8px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.h-scroll::-webkit-scrollbar { display:none; }
.h-scroll .product-card { flex-shrink:0; width:140px; scroll-snap-align:start; }

/* ─── Product Detail ─── */
.prod-detail-img { width:100%; aspect-ratio:1; object-fit:cover; }
.prod-detail-body { padding:16px; background: var(--card-bg); }
.prod-detail-name { font-size: var(--font-size-lg, 18px); font-weight:600; margin-bottom:8px; }
.prod-detail-price { font-size:24px; font-weight:700; color:var(--primary); }
.prod-detail-old { font-size:13px; color: var(--text-muted); text-decoration:line-through; margin-left:8px; }
.prod-detail-meta { display:flex; gap:16px; font-size: var(--font-size-sm, 12px); color: var(--text-light); margin-top:8px; }
.prod-detail-desc { padding:16px; margin-top:10px; background: var(--card-bg);
                    border-radius: var(--radius); line-height:1.8; color: var(--text-light); font-size:14px; }
.prod-bottom-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background: var(--card-bg); border-top:1px solid var(--border);
  display:flex; align-items:center; padding:10px 16px calc(10px + var(--safe-bottom));
  gap:10px;
}
.btn-cart { flex:1; padding:10px; border-radius: var(--radius-sm); background: var(--border); font-weight:600; }
.btn-buy { flex:1; padding:10px; border-radius: var(--radius-sm);
           background:linear-gradient(135deg, var(--primary), var(--primary-dark));
           color:#fff; font-weight:600; }

/* ─── Buttons ─── */
.btn { display:inline-flex; align-items:center; justify-content:center;
       padding:10px 20px; border-radius: var(--radius-sm); font-weight:600;
       transition:opacity .2s; font-size:14px; }
.btn:active { opacity:.8; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; }
.btn-outline { border:1.5px solid var(--primary); color:var(--primary); background:transparent; }
.btn-block { width:100%; }
.btn-sm { padding:6px 12px; font-size: var(--font-size-sm, 12px); }
.btn-danger { background:#f44336; color:#fff; }
.btn-gray { background: var(--border); color: var(--text); }
.btn-success { background:#4caf50; color:#fff; }
.btn-warning { background:#ff9800; color:#fff; }
.btn-info { background:#2196f3; color:#fff; }

/* ─── Cart ─── */
.cart-item { display:flex; padding:12px 16px; align-items:center; gap:10px;
             background: var(--card-bg); border-bottom:1px solid var(--border); }
.cart-item img { width:72px; height:72px; border-radius: var(--radius-sm); object-fit:cover; }
.cart-item-info { flex:1; }
.cart-item-name { font-size:14px; }
.cart-item-price { color:var(--primary); font-weight:600; margin-top:4px; }
.qty-control { display:flex; align-items:center; gap:4px; }
.qty-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
           background: var(--card-bg); font-size:16px; display:flex; align-items:center;
           justify-content:center; }
.qty-num { min-width:24px; text-align:center; font-size:14px; }

/* ─── Checkout ─── */
.addr-card { padding:12px 16px; background: var(--card-bg); margin-bottom:8px;
             border-radius: var(--radius-sm); }
.addr-name { font-weight:600; }
.addr-detail { font-size:13px; color: var(--text-light); margin-top:4px; }

/* ─── Order ─── */
.order-card { background: var(--card-bg); border-radius: var(--radius); margin-bottom:10px;
              box-shadow: var(--shadow); }
.order-header { display:flex; justify-content:space-between; padding:10px 16px;
                border-bottom:1px solid var(--border); font-size: var(--font-size-sm, 12px); }
.order-status { font-weight:600; }
.order-items { padding:10px 16px; }
.order-item { display:flex; gap:10px; margin-bottom:8px; }
.order-item img { width:56px; height:56px; border-radius:6px; object-fit:cover; }
.order-item-info { flex:1; font-size:13px; }
.order-footer { display:flex; justify-content:space-between; align-items:center;
                padding:10px 16px; border-top:1px solid var(--border); font-size:13px; }
.order-actions { display:flex; gap:6px; }

/* ─── Order Timeline ─── */
.timeline { padding:16px; }
.timeline-item { display:flex; gap:12px; position:relative; padding-bottom:16px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:4px;
                background: var(--border); border:2px solid var(--border); }
.timeline-dot.active { background: var(--primary); border-color: var(--primary); }
.timeline-dot.current { background: var(--card-bg); border-color: var(--primary);
                        box-shadow: 0 0 0 3px var(--primary-light); }
.timeline-line { position:absolute; left:5px; top:18px; bottom:0; width:2px;
                 background: var(--border); }
.timeline-item:last-child .timeline-line { display:none; }
.timeline-content { flex:1; }
.timeline-label { font-size:13px; font-weight:500; }
.timeline-time { font-size: var(--font-size-sm, 11px); color: var(--text-muted); margin-top:2px; }

/* ─── Status Progress Bar ─── */
.progress-bar { display:flex; align-items:center; padding:12px 16px; gap:0; }
.progress-step { flex:1; text-align:center; position:relative; }
.progress-step .dot { width:10px; height:10px; border-radius:50%; margin:0 auto;
                      background: var(--border); display:block; }
.progress-step.active .dot { background: var(--primary); }
.progress-step .label { font-size:10px; color: var(--text-muted); margin-top:4px; display:block; }
.progress-step.active .label { color: var(--primary); font-weight:600; }
.progress-step .line { position:absolute; top:4px; right:-50%; width:100%; height:2px;
                       background: var(--border); z-index:-1; }
.progress-step.active .line { background: var(--primary); }
.progress-step:last-child .line { display:none; }

/* ─── Auth Forms ─── */
.auth-page { display:flex; flex-direction:column; align-items:center; padding:60px 24px; min-height:100vh;
             background:linear-gradient(180deg, var(--card-bg), var(--bg)); }
.auth-logo { font-size:36px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.auth-sub { color: var(--text-light); margin-bottom:30px; }
.form-group { margin-bottom:16px; width:100%; max-width:360px; }
.form-label { font-size:13px; color: var(--text-light); margin-bottom:4px; display:block; }
.form-input { width:100%; padding:12px 14px; border:1.5px solid var(--border);
              border-radius: var(--radius-sm); font-size:15px;
              transition:border-color .2s; background: var(--card-bg); }
.form-input:focus { border-color:var(--primary); }
.form-textarea { width:100%; padding:12px 14px; border:1.5px solid var(--border);
                 border-radius: var(--radius-sm); font-size:15px; resize:vertical;
                 min-height:80px; }
select.form-input { appearance:auto; }

/* ─── Flash Messages ─── */
.flash { padding:10px 16px; margin:8px 16px; border-radius: var(--radius-sm);
         font-size:13px; display:flex; align-items:center; gap:6px; }
.flash-success { background:#e8f5e9; color:#2e7d32; }
.flash-danger { background:#ffebee; color:#c62828; }
.flash-warning { background:#fff3e0; color:#e65100; }
.flash-info { background:#e3f2fd; color:#1565c0; }

/* ─── Admin ─── */
.admin-header { background: var(--text); }
.admin-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.admin-stat { background: var(--card-bg); padding:16px; border-radius: var(--radius);
              text-align:center; box-shadow: var(--shadow); }
.admin-stat-num { font-size:28px; font-weight:700; color:var(--primary); }
.admin-stat-label { font-size: var(--font-size-sm, 12px); color: var(--text-light); margin-top:4px; }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th,.admin-table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); }
.admin-table th { background: var(--bg); font-weight:600; font-size: var(--font-size-sm, 12px); color: var(--text-light); }

/* ─── Admin Tabs ─── */
.admin-tabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:12px;
              -webkit-overflow-scrolling:touch; }
.admin-tab { flex-shrink:0; padding:8px 16px; border-radius:20px; font-size:13px;
             background: var(--bg); color: var(--text-light); white-space:nowrap; }
.admin-tab.active { background: var(--primary); color:#fff; }

/* ─── Theme Editor ─── */
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.color-picker { width:100%; height:40px; border:1.5px solid var(--border);
                border-radius: var(--radius-sm); padding:2px; cursor:pointer; }
.theme-preview { border:1px solid var(--border); border-radius: var(--radius);
                 padding:16px; margin-top:12px; }

/* ─── Payment ─── */
.payment-page { text-align:center; padding:40px 16px; }
.payment-qr-box { display:inline-block; background: var(--card-bg); padding:24px;
                  border-radius: var(--radius); box-shadow: var(--shadow); }
.payment-qr-box img { width:220px; height:220px; }
.payment-amount { font-size:28px; font-weight:700; color:var(--primary); margin:16px 0; }
.payment-tip { font-size:13px; color: var(--text-light); }

/* ─── Status Badge ─── */
.status-badge { display:inline-block; padding:2px 10px; border-radius:12px;
                font-size: var(--font-size-sm, 11px); font-weight:600; color:#fff; }

/* ─── Order Detail Status Header ─── */
.order-status-header { padding:24px 16px; text-align:center; color:#fff; }
.order-status-header .icon { font-size:40px; margin-bottom:8px; }
.order-status-header .status-name { font-size:18px; font-weight:600; }
.order-status-header .order-no { font-size:12px; opacity:.8; margin-top:4px; }

/* ─── Toast / Notification ─── */
.toast { position:fixed; top:60px; right:16px; z-index:9999;
         padding:10px 16px; border-radius: var(--radius-sm);
         color:#fff; font-size:13px; max-width:280px;
         animation: slideIn .3s ease; }
.toast-success { background:#4caf50; }
.toast-warning { background:#ff9800; }
.toast-error { background:#f44336; }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; }
                     to { transform:translateX(0); opacity:1; } }

/* ─── Misc ─── */
.empty-state { text-align:center; padding:60px 20px; color: var(--text-muted); }
.empty-state .empty-icon { font-size:60px; margin-bottom:16px; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.mb-3 { margin-bottom:12px; }
.text-center { text-align:center; }
.text-sm { font-size: var(--font-size-sm); }
.text-muted { color: var(--text-light); }
.font-bold { font-weight:600; }
.w-full { width:100%; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── Address List ─── */
.address-item { padding:12px 16px; background: var(--card-bg); margin-bottom:6px;
                border-radius: var(--radius-sm); position:relative; }
.address-item .addr-tag { display:inline-block; font-size:10px; padding:1px 6px;
                          border-radius:4px; background:var(--primary); color:#fff; margin-left:6px; }

/* ─── Categories ─── */
.cat-grid { display:flex; gap:8px; padding:12px 16px; overflow-x:auto;
            -webkit-overflow-scrolling:touch; }
.cat-grid::-webkit-scrollbar { display:none; }
.cat-item { flex-shrink:0; padding:6px 16px; border-radius:20px; background: var(--card-bg);
            border:1px solid var(--border); font-size:13px; white-space:nowrap; }
.cat-item.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ─── Responsive ─── */
@media (min-width: 768px) {
  body { max-width: var(--layout-max, 480px); margin:0 auto; border-left:1px solid var(--border);
         border-right:1px solid var(--border); box-shadow:0 0 20px rgba(0,0,0,.06); }
  .bottom-nav { max-width: var(--layout-max, 480px); left:50%; transform:translateX(-50%); }
  .prod-bottom-bar { max-width: var(--layout-max, 480px); left:50%; transform:translateX(-50%); }
}

/* ─── Animations ─── */
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); }
                    to { opacity:1; transform:translateY(0); } }
.fade-in { animation:fadeIn .3s ease; }