:root {
            --bg: #faf7f2; --card: #ffffff; --primary: #6B4226; --accent: #d4942b;
            --success: #3d7a3d; --danger: #c0392b; --warning: #e8962e;
            --text: #2c1f0e; --text-light: #6b5d4f; --border: #e5dbce;
            --shadow: 0 2px 16px rgba(60,25,5,0.06); --shadow-lg: 0 12px 40px rgba(60,25,5,0.12);
            --radius: 16px; --radius-sm: 12px; --radius-xs: 8px;
            --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
            --font: 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
        }
		/* ========== 排行榜美化 ========== */
.leaderboard-ol { padding:0; list-style:none; margin:0; }
.leaderboard-li { display:flex; align-items:center; padding:10px 8px; border-bottom:1px solid var(--border); gap:8px; font-size:0.9rem; }
.leaderboard-li:last-child { border-bottom:none; }
.lb-rank { width:28px; font-weight:700; text-align:center; font-size:1.1rem; }
.lb-name { flex:1; font-weight:600; color:var(--text); }
.lb-phone { color:#888; font-size:0.8rem; margin-right:8px; }
.lb-points { 
    min-width: 60px; 
    text-align: right; 
    color: var(--accent); 
    font-weight: 700; 
    white-space: nowrap; 
}
.gift-card .gc-redeemed {
    font-size: 0.7rem;
    color: #999;
    margin-top: 2px;
}
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-tap-highlight-color:transparent}
        .top-bar{background:var(--card);border-bottom:1px solid var(--border);padding:12px 18px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
        .top-bar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.2rem;color:var(--primary)}
        .mode-switcher{display:flex;gap:4px;background:#f3ede4;border-radius:25px;padding:3px}
        .mode-btn{padding:8px 16px;border:none;background:transparent;border-radius:22px;cursor:pointer;font-weight:600;font-size:.85rem;color:var(--text-light);transition:var(--transition);white-space:nowrap;font-family:var(--font);display:flex;align-items:center;gap:4px}
        .mode-btn.active{background:var(--primary);color:#fff;box-shadow:0 3px 12px rgba(107,66,38,.3)}
        .container{max-width:820px;margin:0 auto;padding:16px 14px 100px}
        .card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:14px;border:1px solid var(--border)}
        .card-header{font-weight:700;font-size:1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--primary)}
        .hero-phone-input{width:100%;padding:16px 18px;border:3px solid var(--border);border-radius:var(--radius-sm);font-size:1.2rem;font-family:var(--font);text-align:center;letter-spacing:2px;transition:var(--transition);background:#fefdfb;font-weight:500}
        .hero-phone-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 6px rgba(212,148,43,.07);background:#fff}
        .hero-phone-input::placeholder{letter-spacing:0;color:#c5b9a5;font-weight:400;font-size:.95rem}
        .customer-hero{text-align:center;padding:8px 0 6px;animation:fadeInUp .4s ease}
        @keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
        .customer-hero .ch-name-wrap{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:2px}
        .customer-hero .ch-name{font-size:1.4rem;font-weight:700;color:var(--primary)}
        .customer-hero .ch-edit-btn{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--text-light);padding:4px;border-radius:50%;transition:var(--transition)}
        .customer-hero .ch-edit-btn:hover{background:#f0ebe0;color:var(--primary)}
        .customer-hero .ch-name-edit-input{padding:6px 12px;border:2px solid var(--accent);border-radius:20px;font-size:1.1rem;font-family:var(--font);text-align:center;width:160px}
        .customer-hero .ch-points-big{font-size:3.8rem;font-weight:800;color:var(--accent);line-height:1;margin:4px 0;letter-spacing:-2px}
        .customer-hero .ch-points-label{font-size:.8rem;color:var(--text-light);letter-spacing:2px}
        .action-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
        .action-btn{flex:1;min-width:100px;padding:14px 18px;border-radius:25px;font-weight:700;font-size:.9rem;cursor:pointer;border:none;transition:var(--transition);font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;touch-action:manipulation}
        .action-btn:active{transform:scale(.94)}
        .action-btn.primary-action{background:var(--primary);color:#fff;box-shadow:0 4px 16px rgba(107,66,38,.3)}
        .action-btn.accent-action{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(212,148,43,.3)}
        .gift-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
        .gift-card{background:#fff;border:2px solid var(--border);border-radius:var(--radius-sm);padding:14px 10px 12px;text-align:center;cursor:pointer;transition:var(--transition);position:relative;user-select:none;display:flex;flex-direction:column;align-items:center;gap:4px}
        .gift-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
        .gift-card.affordable{border-color:#c8a65c;background:#fffef9;box-shadow:0 0 0 3px rgba(200,166,92,.1);animation:glowPulse 2.5s ease-in-out infinite}
        @keyframes glowPulse{0%,100%{box-shadow:0 0 0 3px rgba(200,166,92,.1)}50%{box-shadow:0 0 0 8px rgba(200,166,92,.04)}}
        .gift-card.almost{border-color:#e0a850;background:#fffdf7;border-style:dashed}
        .gift-card.locked{opacity:.5;cursor:pointer;pointer-events:auto;background:#fafaf7;border-color:#e8e2d8}
        .gift-card .gc-badge{position:absolute;top:8px;right:8px;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:12px}
        .gift-card.affordable .gc-badge{background:#e8f5e0;color:#3d7a3d}
        .gift-card.almost .gc-badge{background:#fef7e8;color:#c07820}
        .gift-card .gc-icon{font-size:4.5rem;margin-top:4px}/*默认图标大小*/
        .gift-card.affordable .gc-icon{animation:bounceIcon 1.8s ease-in-out infinite}
        @keyframes bounceIcon{0%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}50%{transform:translateY(0)}}
        .gift-card .gc-name{font-weight:700;font-size:.88rem;color:var(--text)}
        .gift-card .gc-cost{font-weight:700;color:var(--accent);font-size:.95rem}
        .gift-card .gc-progress-wrap{width:100%;margin-top:2px}
        .gift-card .gc-progress-bar{width:100%;height:6px;background:#eee;border-radius:10px;overflow:hidden}
        .gift-card .gc-progress-fill{height:100%;border-radius:10px;transition:width .5s ease}
        .gift-card.affordable .gc-progress-fill{background:linear-gradient(90deg,#7cc47c,#4a9e4a)}
        .gift-card.almost .gc-progress-fill{background:linear-gradient(90deg,#f0c060,#e8962e)}
        .gift-card .gc-hint{font-size:.7rem;color:#999;margin-top:1px;min-height:17px}
        .gift-card.affordable .gc-hint{color:#3d7a3d;font-weight:600}
        .gift-card.almost .gc-hint{color:#c07820;font-weight:600}
        .record-list{list-style:none;display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto}
        .record-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fdfcf9;border-radius:10px;border:1px solid var(--border);flex-wrap:wrap;font-size:.85rem}
        .record-item .ri-icon{font-size:1.3rem;flex-shrink:0}
        .record-item .ri-detail{flex:1;min-width:80px}
        .record-item .ri-detail .ri-title{font-weight:600;font-size:.85rem}
        .record-item .ri-points{font-weight:700;font-size:.9rem;white-space:nowrap}
        .record-item .ri-points.plus{color:var(--success)}.record-item .ri-points.minus{color:var(--danger)}
        .record-item .ri-points.pending{color:var(--warning)}
        .record-item .ri-time{font-size:.7rem;color:#aaa;white-space:nowrap}
        .record-item .ri-status{font-size:.7rem;padding:3px 8px;border-radius:10px;font-weight:600}
        .ri-status.status-pending{background:#fef7e8;color:#c07820}
        .ri-status.status-confirmed{background:#e8f5e0;color:#3d7a3d}
        .empty-state{text-align:center;padding:22px;color:#bbb;font-size:.85rem}
        .empty-state .empty-icon{font-size:2.4rem;display:block;margin-bottom:4px}
        .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        .modal{background:#fff;border-radius:var(--radius);padding:24px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);animation:popIn .3s ease;max-height:85vh;overflow-y:auto}
        .modal h3{margin-bottom:12px;color:var(--primary);font-size:1.1rem;display:flex;align-items:center;gap:8px}
        .modal .modal-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap}
        .modal input{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:var(--radius-xs);font-size:1rem;font-family:var(--font);background:#fefdfb;margin-bottom:8px}
        .modal input:focus{outline:none;border-color:var(--accent)}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:11px 18px;border:none;border-radius:25px;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);font-family:var(--font);white-space:nowrap;min-height:42px;touch-action:manipulation}
        .btn:active{transform:scale(.94)}.btn:disabled{opacity:.5;cursor:not-allowed}
        .btn-primary{background:var(--primary);color:#fff;box-shadow:0 3px 12px rgba(107,66,38,.3)}
        .btn-accent{background:var(--accent);color:#fff;box-shadow:0 3px 12px rgba(212,148,43,.3)}
        .btn-outline{background:#fff;color:var(--primary);border:2px solid var(--primary)}
        .btn-sm{padding:7px 14px;font-size:.8rem;border-radius:20px;min-height:34px}
        .btn-success{background:var(--success);color:#fff}
        .toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none;width:90%;max-width:420px}
        .toast{padding:14px 20px;border-radius:25px;font-weight:600;font-size:.9rem;text-align:center;animation:slideDown .35s ease,fadeOut .35s ease 2.2s forwards;box-shadow:var(--shadow-lg);pointer-events:auto}
        .toast.success{background:#3d7a3d;color:#fff}.toast.error{background:#c0392b;color:#fff}.toast.info{background:#3a5f7a;color:#fff}
        @keyframes slideDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
        @keyframes fadeOut{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}
        .register-card{text-align:center;margin-top:12px;padding:16px;background:#fffdf5;border:2px dashed #e0c878;border-radius:var(--radius-sm);animation:fadeInUp .4s ease}
        .register-card .rc-title{font-weight:700;font-size:1rem;color:#8a6d20;margin-bottom:8px}
        .register-card .rc-sub{font-size:.82rem;color:#8a6d20;margin-bottom:10px}
        .register-card input{width:180px;padding:10px 14px;border:2px solid #e0c878;border-radius:20px;text-align:center;font-size:1rem;font-family:var(--font);margin-bottom:8px}
        .register-card input:focus{outline:none;border-color:var(--accent)}
        .tab-nav-inline{display:flex;gap:3px;background:#f5efe4;border-radius:25px;padding:3px;overflow-x:auto;margin-bottom:10px}
        .tab-btn-sm{flex:1 0 auto;padding:9px 13px;border:none;background:transparent;border-radius:22px;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--text-light);transition:var(--transition);white-space:nowrap;font-family:var(--font);display:flex;align-items:center;gap:4px;justify-content:center}
        .tab-btn-sm.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(107,66,38,.3)}
        .mtab-content{display:none}.mtab-content.active{display:block}
		/* 移除顾客端和后台记录列表的滚动条 */
#custRecordsList,
#mRecordsList {
    max-height: none;
    overflow-y: visible;
}
/* 统一后台待确认列表与客户列表的间距，与记录列表一致 */
#pendingList,
#mCustomerList {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
        @media(max-width:600px){
            .top-bar{padding:8px 10px}.brand{font-size:1rem}.mode-btn{padding:7px 10px;font-size:.75rem}
            .container{padding:10px 8px 80px}.card{padding:14px}
            .hero-phone-input{font-size:1rem;padding:14px 16px}
            .customer-hero .ch-points-big{font-size:2.8rem}.customer-hero .ch-name{font-size:1.2rem}
            .action-btn{padding:11px 14px;font-size:.82rem}
            .gift-showcase{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px}
            .gift-card{padding:10px 7px}.gift-card .gc-icon{font-size:1.8rem}.gift-card .gc-name{font-size:.78rem}
            .modal{padding:16px;max-width:94vw}
            .register-card input{width:140px}
        }
.btn-xs {
    padding: 2px 6px;       /* 原来是 4px 10px，缩小内边距 */
    font-size: 0.6rem;      /* 原来是 0.72rem，减小文字尺寸 */
    border-radius: 10px;    /* 稍微减小圆角，让按钮看起来更紧凑 */
    min-height: 20px;       /* 原来是 28px，降低最小高度 */
    font-weight: 600;       /* 保持加粗 */
}
.btn-danger {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 3px 10px rgba(192,57,43,0.25);
}
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* 或 flex-start，看需要 */
    gap: 5px;
    margin-top: 10px;
    padding: 0 2px;           /* ← 关键：左右留一点空间，防止贴边被裁 */
}

.pagination .pagination-btn {
    min-width: 32px;
    text-align: center;
}



// ==================== 店名管理 ====================
const API_SHOP_SETTINGS = '/api/settings';   // 根据你的后端调整 
 
// 保存店名到页面（也更新浏览器标题）
function updateShopNameDisplay(name) {
  document.getElementById('shopBrandName').textContent = name || '千里行鞋店积分';
  // 可选：修改页面标题 
  document.title = (name || '千里行鞋店积分') + ' - 积分系统';
}
 
// 从服务器加载店名 
async function loadShopName() {
  try {
    const res = await fetch(API_SHOP_SETTINGS);
    const data = await res.json();
    if (data.shopName) {
      updateShopNameDisplay(data.shopName);
      // 填到输入框里，方便编辑 
      document.getElementById('mShopName').value = data.shopName;
    }
  } catch (e) {
    console.warn('加载店名失败，使用默认名称', e);
  }
}
 
// 保存店名到服务器 
async function saveShopName(newName) {
  try {
    const res = await fetch(API_SHOP_SETTINGS, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ shopName: newName })
    });
    if (res.ok) {
      updateShopNameDisplay(newName);
      showToast('✅ 店名已更新');
    } else {
      showToast('❌ 保存失败，请重试');
    }
  } catch (e) {
    showToast('❌ 网络错误');
  }
}
 
// 绑定保存按钮事件（在页面 DOM 加载好后执行）
document.addEventListener('DOMContentLoaded', () => {
  // 加载店铺名称 
  loadShopName();
 
  // 店长保存按钮 
  const saveBtn = document.getElementById('btnMSaveShopName');
  const input = document.getElementById('mShopName');
  if (saveBtn && input) {
    saveBtn.addEventListener('click', async () => {
      const name = input.value.trim();
      if (!name) {
        alert('店名不能为空');
        return;
      }
      // 需要先验证店长权限（比如已经输入了管理密码才能操作，你们项目应该有验证机制）
      // 这里直接保存，如果你已有 pin 验证，可以在外面包一层 
      await saveShopName(name);
    });
  }
});