/* ============================================
   会员接单系统 - 全局样式
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f5f5; color: #333; font-size: 14px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ===== 页面容器（前台手机端） ===== */
.page { max-width: 480px; margin: 0 auto; min-height: 100vh; background: #fff; position: relative; }

/* ===== 通用按钮 ===== */
.btn { display: inline-block; padding: 10px 20px; background: #4facfe; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; text-align: center; transition: opacity .2s; }
.btn:hover { opacity: .9; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 4px; }
.btn-danger { background: #ff4d4f; }
.btn-warn { background: #faad14; }
.btn-outline { background: #fff; color: #4facfe; border: 1px solid #4facfe; }
.btn-ghost { background: #f0f0f0; color: #333; }
.btn-wechat { background: #07c160; width: 100%; padding: 14px; font-size: 16px; border-radius: 30px; margin-bottom: 14px; }
.btn-qq { background: #12b7f5; width: 100%; padding: 14px; font-size: 16px; border-radius: 30px; }

/* ===== 表单 ===== */
.input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 14px; margin-bottom: 10px; background: #fff; }
.input:focus { border-color: #4facfe; }
.label { font-size: 13px; color: #666; margin-bottom: 4px; display: block; }
textarea.input { resize: vertical; }

/* ===== 卡片 ===== */
.card { background: #fff; border-radius: 10px; margin: 12px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #f7f7f7; }
.detail-row:last-child { border-bottom: none; }
.detail-row span { color: #888; }
.detail-row b { color: #333; }

/* ===== 头像 ===== */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #eee; }
.avatar-lg { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #fff; background: #fff; object-fit: cover; }

/* ===== 标签 ===== */
.role-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: #e6f7ff; color: #1890ff; margin-left: 6px; }
.price { color: #ff5722; font-weight: bold; }
.muted { color: #999; font-size: 12px; }
.error { background: #fff1f0; color: #ff4d4f; padding: 10px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }

/* ============================================
   登录页
   ============================================ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: rgba(255,255,255,.95); border-radius: 16px; padding: 40px 30px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.login-card .logo { font-size: 56px; margin-bottom: 10px; }
.login-card h2 { font-size: 22px; margin-bottom: 8px; }
.login-card .subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }

/* ============================================
   底部导航
   ============================================ */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff; border-top: 1px solid #eee; display: flex; height: 60px; z-index: 99; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; font-size: 11px; gap: 2px; position: relative; }
.bottom-nav a .nav-icon { width: 26px; height: 26px; object-fit: contain; }
.bottom-nav a .nav-label { font-size: 11px; }
.bottom-nav a.active .nav-label { color: #4facfe; font-weight: 600; }

/* ============================================
   首页 - 轮播图
   ============================================ */
.carousel { position: relative; width: 100%; height: 180px; overflow: hidden; background: #eee; }
.carousel-inner { display: flex; height: 100%; transition: transform .4s ease; }
.carousel-item { min-width: 100%; height: 100%; }
.carousel-item img { width: 100%; height: 100%; object-fit: cover; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; border: none; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.carousel-arrow.left { left: 10px; }
.carousel-arrow.right { right: 10px; }

/* ============================================
   分类区
   ============================================ */
.category-box { margin: 12px; }
.category-row { display: flex; gap: 14px; overflow-x: auto; padding: 10px 0; }
.category-row::-webkit-scrollbar { display: none; }
.category-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; }
.category-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #f0f0f0; }
.category-item span { font-size: 11px; color: #555; white-space: nowrap; }

/* ============================================
   接单大厅 / 订单列表
   ============================================ */
.section-title { padding: 10px 14px; font-size: 15px; font-weight: 600; }
.zone-tabs { display: flex; padding: 0 14px 10px; gap: 10px; }
.zone-tabs a, .zone-tabs span { padding: 4px 14px; border-radius: 14px; background: #eee; font-size: 13px; cursor: pointer; color: #666; }
.zone-tabs a.active, .zone-tabs span.on { background: #4facfe; color: #fff; }
.order-list { padding: 0 14px; }
.order-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; align-items: center; }
.order-info { flex: 1; min-width: 0; }
.order-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.order-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.zone-tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; }
.zone-wx { background: #e8f7ee; color: #07c160; }
.zone-qq { background: #e6f4fd; color: #12b7f5; }
.cat-tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; background: #f0f0f0; color: #666; }
.order-right { text-align: right; margin-left: 10px; }
.order-right .price { font-size: 16px; margin-bottom: 6px; }

/* ===== 状态标签 ===== */
.status-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.status-pending { background: #fff7e6; color: #faad14; }
.status-taken { background: #e6f7ff; color: #1890ff; }
.status-submitted { background: #f9f0ff; color: #722ed1; }
.status-done { background: #f6ffed; color: #52c41a; }
.status-rejected { background: #fff1f0; color: #ff4d4f; }

/* ============================================
   聊天列表
   ============================================ */
.chat-list { background: #fff; }
.chat-item { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #f0f0f0; }
.chat-info { flex: 1; min-width: 0; margin-left: 12px; }
.chat-name { font-size: 15px; font-weight: 500; }
.chat-last { font-size: 12px; color: #999; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4f; margin-left: 8px; flex-shrink: 0; }

/* ============================================
   聊天详情
   ============================================ */
.chat-page { display: flex; flex-direction: column; height: 100vh; background: #f5f5f5; max-width: 480px; margin: 0 auto; }
.chat-header { display: flex; align-items: center; padding: 12px 14px; background: #fff; border-bottom: 1px solid #eee; gap: 10px; }
.back-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #333; padding: 0 6px; text-decoration: none; }
.top-bar { display: flex; align-items: center; padding: 12px 14px; background: #fff; border-bottom: 1px solid #eee; gap: 10px; }
.top-title { font-size: 16px; font-weight: 600; flex: 1; text-align: center; margin-right: 36px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; }
.msg-row { display: flex; margin-bottom: 14px; }
.msg-row.me { justify-content: flex-end; }
.bubble { max-width: 70%; padding: 9px 12px; border-radius: 10px; background: #fff; font-size: 14px; word-break: break-word; }
.msg-row.me .bubble { background: #4facfe; color: #fff; }
.chat-input { display: flex; padding: 10px; background: #fff; border-top: 1px solid #eee; gap: 8px; }
.chat-input input { flex: 1; padding: 9px 12px; border: 1px solid #ddd; border-radius: 20px; outline: none; font-size: 14px; }
.chat-input button { padding: 9px 18px; background: #4facfe; color: #fff; border: none; border-radius: 20px; cursor: pointer; }

/* ============================================
   我的页面
   ============================================ */
.me-header { background: linear-gradient(135deg,#4facfe,#00f2fe); padding: 30px 20px; color: #fff; display: flex; align-items: center; gap: 14px; }
.me-info { flex: 1; }
.me-name { font-size: 18px; font-weight: 600; }
.me-id { font-size: 13px; opacity: .9; margin-top: 2px; }
.me-wallet { font-size: 13px; opacity: .95; margin-top: 4px; }

/* ============================================
   后台管理
   ============================================ */
.admin-body { display: flex; min-height: 100vh; background: #f5f5f5; }
.admin-side { width: 200px; background: #2c3e50; color: #fff; padding: 0; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; }
.admin-logo { text-align: center; font-size: 18px; font-weight: bold; padding: 20px 0; border-bottom: 1px solid #34495e; }
.admin-side a { display: block; padding: 12px 20px; color: #bdc3c7; font-size: 14px; transition: all .2s; }
.admin-side a:hover, .admin-side a.active { background: #34495e; color: #fff; }
.admin-main { flex: 1; padding: 20px; min-width: 0; }
.admin-main h1 { font-size: 20px; margin-bottom: 20px; }
.admin-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.admin-table th { background: #fafafa; color: #666; font-weight: 600; }
.form-row { margin-bottom: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); text-align: center; }
.stat-num { font-size: 28px; font-weight: bold; color: #4facfe; }
.stat-label { color: #999; font-size: 13px; margin-top: 4px; }
.filter-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-tabs a { padding: 6px 14px; border-radius: 14px; background: #fff; font-size: 13px; color: #666; border: 1px solid #eee; }
.filter-tabs a.active { background: #4facfe; color: #fff; border-color: #4facfe; }

/* ===== 响应式 ===== */
@media (max-width: 640px) {
  .admin-body { flex-direction: column; }
  .admin-side { width: 100%; min-height: auto; flex-direction: row; flex-wrap: wrap; position: relative; }
  .admin-logo { width: 100%; }
  .admin-side a { flex: 1; text-align: center; padding: 10px; font-size: 12px; }
}