/* ===== 全局重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: #f5f5f5; color: #333; }
button { border: none; outline: none; cursor: pointer; font-family: inherit; }
input, select { outline: none; font-family: inherit; }

/* ===== App容器 ===== */
#app { width: 100%; max-width: 430px; height: 100vh; margin: 0 auto; background: #f5f5f5; display: flex; flex-direction: column; position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.05); }

/* ===== 页面容器 ===== */
.page-container { flex: 1; overflow: hidden; position: relative; }
.page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; display: flex; flex-direction: column; opacity: 0; transform: translateX(30px); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; z-index: 1; overflow: hidden; }
.page.active { opacity: 1; transform: translateX(0); pointer-events: auto; z-index: 2; }
.page.slide-from-left { transform: translateX(-30px); }
.page.active.slide-from-left { transform: translateX(0); }

/* 任务详情页从右侧滑入 */
#page-task-detail { transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
#page-task-detail.active { transform: translateX(0); opacity: 1; }
#page-task-detail.closing { transform: translateX(100%); opacity: 0; }

/* ===== 顶部Header ===== */
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 36px 16px 10px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(102,126,234,0.15); }
/* 财气装饰：金色光晕 */
.header::before { content: ''; position: absolute; top: -20px; right: -15px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, rgba(255,215,0,0) 70%); pointer-events: none; }
.header::after { content: ''; position: absolute; bottom: -30px; left: -10px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(255,180,0,0.12) 0%, rgba(255,180,0,0) 70%); pointer-events: none; }
/* 浮动金币元素 */
.header-coin { position: absolute; font-size: 12px; opacity: 0.15; pointer-events: none; animation: coinFloat 3s ease-in-out infinite; }
.header-coin.c1 { top: 8px; left: 20%; animation-delay: 0s; }
.header-coin.c2 { top: 14px; right: 30%; font-size: 10px; animation-delay: 0.8s; }
.header-coin.c3 { bottom: 6px; left: 40%; font-size: 14px; animation-delay: 1.5s; }
.header-coin.c4 { bottom: 10px; right: 15%; font-size: 10px; animation-delay: 0.4s; }
@keyframes coinFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.18; } 50% { transform: translateY(-6px) rotate(15deg); opacity: 0.3; } }
.header-title { font-size: 17px; font-weight: 600; position: relative; z-index: 1; }
.header-user { font-size: 12px; opacity: 0.9; position: relative; z-index: 1; }
.header-back { font-size: 24px; cursor: pointer; width: 24px; text-align: center; position: relative; z-index: 1; }
@keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== 页面内容 ===== */
.page-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; position: relative; background: #f5f5f5; }

/* ===== 下拉刷新 ===== */
.pull-refresh-indicator { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; z-index: 10; transition: top 0.2s ease, opacity 0.2s ease; opacity: 0; }
.pull-refresh-indicator.visible { opacity: 1; }
.pull-refresh-indicator svg { width: 22px; height: 22px; color: #667eea; transition: transform 0.2s ease; }
.pull-refresh-indicator.refreshing svg { animation: refresh-spin 0.8s linear infinite; }
.pull-refresh-text { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #999; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.pull-refresh-indicator.visible ~ .pull-refresh-text { opacity: 0.8; }

/* ===== 首页 - 提交卡片 ===== */
.submit-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 14px; padding: 20px; color: #fff; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(102,126,234,0.15); }
.submit-card-title { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.submit-card-title .icon { font-size: 22px; }
.submit-card-desc { font-size: 13px; opacity: 0.85; margin-bottom: 16px; }
.submit-card .btn-primary { width: 100%; padding: 12px; background: rgba(255,255,255,0.95); color: #667eea; border-radius: 8px; font-size: 15px; font-weight: 600; }

/* ===== 区块标题 ===== */
.section-title { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; margin: 16px 0 10px; color: #333; }
.section-count { font-size: 13px; color: #999; font-weight: 400; }

/* ===== 每日接单次数横幅 ===== */
.daily-order-banner { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #e6f7ff, #f0f5ff); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 14px; color: #333; border: 1px solid #d6e4ff; }
.daily-order-banner .daily-order-icon { font-size: 18px; }
.daily-order-banner.daily-order-exhausted { background: linear-gradient(135deg, #fff2f0, #fff7f5); border-color: #ffccc7; color: #e74c3c; }
.daily-order-banner.daily-order-exhausted .daily-order-icon { opacity: 0.6; }

/* ===== 认证提醒横幅 ===== */
.verify-reminder-banner { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #fffbe6, #fff7e6); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: #d48806; border: 1px solid #ffe58f; }
.verify-reminder-banner .verify-reminder-icon { font-size: 16px; flex-shrink: 0; }
.verify-reminder-banner .verify-reminder-text { flex: 1; line-height: 1.4; }
.verify-reminder-banner .verify-reminder-btn { flex-shrink: 0; background: #faad14; color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; }

/* ===== 店铺列表 ===== */
.store-list { display: flex; flex-direction: column; gap: 10px; }
.store-item { background: #fff; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); transition: transform 0.15s ease; }
.store-item:active { transform: scale(0.99); }
.store-item-img { width: 60px; height: 60px; border-radius: 10px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; overflow: hidden; }
.store-item-img img { width: 100%; height: 100%; object-fit: contain; }
.store-item-info { flex: 1; min-width: 0; }
.store-item-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-item-shop { font-size: 12px; color: #667eea; margin-bottom: 4px; }
.store-item-desc { font-size: 12px; color: #999; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-item-price { display: flex; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.store-item-price .display-price { color: #fa8c16; font-weight: 600; }
.store-item-price .price { color: #e74c3c; font-weight: 600; }
.store-item-price .commission { color: #27ae60; font-weight: 600; }
.store-item-btn { padding: 8px 16px; background: #667eea; color: #fff; border-radius: 6px; font-size: 13px; flex-shrink: 0; }

/* ===== 佣金概览 ===== */
.commission-overview { display: flex; background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.commission-item { flex: 1; text-align: center; }
.commission-item:not(:last-child) { border-right: 1px solid #f0f0f0; }
.commission-value { font-size: 18px; font-weight: 700; color: #e74c3c; }
.commission-label { font-size: 12px; color: #999; margin-top: 4px; }

/* ===== 订单筛选Tab ===== */
.order-tabs { display: flex; background: #fff; border-radius: 12px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.order-tab { flex: 1; padding: 10px; text-align: center; font-size: 13px; color: #666; position: relative; }
.order-tab.active { color: #667eea; font-weight: 600; }
.order-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: #667eea; border-radius: 2px; }

/* ===== 订单时间筛选 ===== */
.order-time-filter { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.order-time-filter::-webkit-scrollbar { display: none; }
.time-filter-item { padding: 6px 14px; font-size: 12px; color: #666; background: #fff; border-radius: 16px; white-space: nowrap; flex-shrink: 0; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.05); -webkit-tap-highlight-color: transparent; }
.time-filter-item.active { background: #667eea; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(102,126,234,0.25); }
.time-filter-item:active { transform: scale(0.95); }

/* ===== 订单列表 ===== */
.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-item { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.order-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; }
.order-store-name { font-size: 14px; font-weight: 600; }
.order-status { font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.order-status.pending { background: #fff4e6; color: #f39c12; }
.order-status.confirmed { background: #e8f5e9; color: #27ae60; }
.order-status.rejected { background: #ffebee; color: #e74c3c; }
.order-item-body { display: flex; justify-content: space-between; align-items: center; }
.order-number { font-size: 13px; color: #666; }
.order-number .label { color: #999; }
.order-amount { text-align: right; }
.order-price { font-size: 16px; font-weight: 600; color: #e74c3c; }
.order-commission { font-size: 12px; color: #27ae60; margin-top: 2px; }
.order-date { font-size: 12px; color: #666; margin-top: 8px; font-weight: 500; }

/* ===== 任务详情页 ===== */
.task-detail-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); margin-bottom: 16px; }
.task-detail-img { width: 100%; min-height: 120px; max-height: 500px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.task-detail-img img { display: block; max-width: 100%; max-height: 500px; width: auto; height: auto; }
.task-detail-img-placeholder { font-size: 64px; color: #ccc; }
.task-detail-titles { padding: 16px; }
.task-detail-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.task-detail-field-label { font-size: 12px; color: #999; font-weight: 500; }
.copy-btn { font-size: 12px; color: #667eea; padding: 2px 10px; border: 1px solid #667eea; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.copy-btn.copied { background: #667eea; color: #fff; }
.task-detail-full-title { font-size: 17px; font-weight: 700; line-height: 1.4; color: #333; }
.task-detail-short-title { font-size: 14px; color: #666; }
.task-detail-shop-name { font-size: 15px; color: #333; font-weight: 600; }
.task-detail-prices { padding: 0 16px 16px; }
.task-price-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #f5f5f5; }
.task-price-row:first-child { border-top: none; }
.task-price-label { font-size: 14px; color: #999; }
.task-price-value { font-size: 16px; font-weight: 600; }
.task-detail-desc { padding: 0 16px 16px; font-size: 13px; color: #999; line-height: 1.5; }
.task-submit-area { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.task-submit-btn { width: 100%; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; margin-top: 8px; }

/* ===== 冷却/间隔相关 ===== */
.store-item-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.interval-badge { font-size: 10px; color: #1890ff; background: #e6f1fb; padding: 2px 6px; border-radius: 4px; }
.cooldown-badge { font-size: 10px; color: #e74c3c; background: #fdf0f0; padding: 2px 6px; border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.store-item-btn.cooldown { background: #ccc !important; cursor: not-allowed; }
.store-item-cooldown { opacity: 0.7; }
.task-detail-interval { padding: 8px 16px 12px; font-size: 12px; color: #1890ff; background: #e6f1fb; border-radius: 8px; margin: 0 0 12px; }
.cooldown-info-box { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: #fff3e0; border-radius: 8px; margin-top: 8px; font-size: 14px; color: #e65100; }
.cooldown-info-box span:last-child { font-weight: 700; font-size: 16px; }

/* ===== 库存/认领相关 ===== */
.stock-badge { font-size: 10px; color: #52c41a; background: #f0fff0; padding: 2px 6px; border-radius: 4px; }
.stock-badge.sold-out { color: #e74c3c; background: #fdf0f0; }
.claimed-badge { font-size: 10px; color: #fff; background: #fa8c16; padding: 2px 6px; border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
.store-item-btn.disabled { background: #ccc !important; cursor: not-allowed; }
.store-item-btn.claimed { background: #fa8c16 !important; cursor: pointer; }
.store-item-soldout { opacity: 0.6; }
.task-detail-stock { padding: 8px 16px 12px; font-size: 12px; color: #52c41a; background: #f0fff0; border-radius: 8px; margin: 0 0 12px; }
.claim-info-box { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; background: #fff7e6; border-radius: 8px; margin-top: 8px; font-size: 13px; color: #d46b08; flex-wrap: wrap; }
.claim-info-box #detail-claim-countdown { font-weight: 700; font-size: 18px; color: #fa541c; }

/* ===== 提现中心 - 余额卡片 ===== */
.balance-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 14px; padding: 24px; color: #fff; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(102,126,234,0.15); }
.balance-label { font-size: 13px; opacity: 0.85; }
.balance-amount { font-size: 36px; font-weight: 700; margin: 8px 0 16px; }
.balance-info { display: flex; gap: 16px; font-size: 12px; opacity: 0.85; margin-bottom: 16px; }
.balance-info span { font-weight: 600; }
.btn-withdraw { width: 100%; padding: 12px; background: rgba(255,255,255,0.95); color: #667eea; border-radius: 8px; font-size: 15px; font-weight: 600; }

/* ===== 提现记录 ===== */
.withdraw-list { display: flex; flex-direction: column; gap: 10px; }
.withdraw-item { background: #fff; border-radius: 12px; padding: 14px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.withdraw-amount { font-size: 18px; font-weight: 600; color: #e74c3c; }
.withdraw-date { font-size: 12px; color: #999; margin-top: 2px; }
.withdraw-status { font-size: 12px; padding: 4px 10px; border-radius: 4px; }
.withdraw-status.pending { background: #fff4e6; color: #f39c12; }
.withdraw-status.processing { background: #e3f2fd; color: #1890ff; }
.withdraw-status.approved { background: #e8f5e9; color: #27ae60; }
.withdraw-status.rejected { background: #ffebee; color: #e74c3c; }

/* ===== 实名认证 + 支付宝绑定卡片 ===== */
.account-verify-card { background: #fff; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.verify-card-icon { width: 42px; height: 42px; border-radius: 10px; background: #f0f4ff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.verify-card-info { flex: 1; min-width: 0; }
.verify-card-title { font-size: 15px; font-weight: 600; color: #333; }
.verify-card-desc { font-size: 12px; color: #999; margin-top: 3px; line-height: 1.4; }
.verify-card-status { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 20px; cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; }
.verify-card-status.unverified { background: #fff4e6; color: #f39c12; }
.verify-card-status.unverified:active { transform: scale(0.95); }
.verify-card-status.verified { background: #e8f5e9; color: #27ae60; }
.verify-card-status.bound { background: #e8f5e9; color: #27ae60; }
.verify-card-status.locked { background: #f5f5f5; color: #bbb; cursor: not-allowed; }

/* ===== 实名/支付宝弹窗内部样式 ===== */
.verify-notice { background: #f0f4ff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.verify-notice-icon { font-size: 20px; flex-shrink: 0; }
.verify-notice-text { font-size: 13px; color: #555; line-height: 1.5; }
.verify-tip { font-size: 12px; color: #999; margin-top: 8px; line-height: 1.5; }
.verify-locked-info { background: #fff9e6; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.verify-locked-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
.verify-locked-row:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
.verify-locked-label { color: #999; }
.verify-locked-value { font-weight: 600; color: #333; }

/* ===== 我的页面 ===== */
.user-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 14px; padding: 20px; display: flex; align-items: center; gap: 14px; color: #fff; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(102,126,234,0.15); }
.user-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.user-info { flex: 1; }
.user-name { font-size: 17px; font-weight: 600; }
.user-phone { font-size: 13px; opacity: 0.85; margin-top: 4px; }
.user-edit-icon { font-size: 16px; opacity: 0.7; flex-shrink: 0; }

/* ===== 编辑资料弹窗 ===== */
.profile-avatar-section { display: flex; justify-content: center; margin-bottom: 20px; }

.menu-group { background: #fff; border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.menu-item { display: flex; align-items: center; padding: 14px; cursor: pointer; }
.menu-item:not(:last-child) { border-bottom: 1px solid #f5f5f5; }
.menu-icon { font-size: 20px; margin-right: 12px; width: 24px; text-align: center; }
.menu-text { flex: 1; font-size: 15px; }
.menu-arrow { color: #ccc; font-size: 18px; }

/* ===== 退出登录 ===== */
.logout-group { margin-top: 20px; }
.logout-item { justify-content: center; }
.logout-item .menu-text { flex: none; color: #e74c3c; font-weight: 600; text-align: center; }
.logout-item .menu-icon { margin-right: 8px; }

/* ===== 底部导航 ===== */
.tabbar { display: flex; background: #fff; border-top: 1px solid #eee; padding: 6px 0; padding-bottom: env(safe-area-inset-bottom, 6px); flex-shrink: 0; box-shadow: 0 -1px 8px rgba(0,0,0,0.04); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; cursor: pointer; transition: all 0.25s ease; }
.tab-icon { font-size: 22px; transition: transform 0.25s ease; }
.tab-text { font-size: 11px; color: #999; transition: color 0.25s ease; }
.tab-item.active .tab-text { color: #667eea; font-weight: 600; }
.tab-item.active .tab-icon { transform: scale(1.15); }

/* ===== 内容淡入动画 ===== */
.page.active .page-content > *:not(.pull-refresh-indicator) { animation: contentFadeIn 0.35s ease forwards; }
@keyframes contentFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== 弹窗 ===== */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 16px; width: 88%; max-width: 380px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; animation: modalIn 0.2s ease; }
@keyframes modalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; font-size: 16px; font-weight: 600; }
.modal-close { cursor: pointer; font-size: 18px; color: #999; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid #f0f0f0; }
.modal-footer button { flex: 1; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 600; }

/* ===== 表单 ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; }
.form-input { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 15px; background: #fafafa; }
.form-input:focus { border-color: #667eea; background: #fff; }

.store-info-preview { background: #f8f9ff; border-radius: 8px; padding: 12px; margin-top: 8px; }
.preview-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.preview-row:last-child { margin-bottom: 0; }
.display-price-tag { color: #fa8c16; font-weight: 600; }
.price-tag { color: #e74c3c; font-weight: 600; }
.commission-tag { color: #27ae60; font-weight: 600; }

.available-amount { font-size: 28px; font-weight: 700; color: #667eea; }
.withdraw-tip { font-size: 12px; color: #999; margin-top: 8px; }

/* ===== 按钮 ===== */
.btn-primary { background: #667eea; color: #fff; }
.btn-cancel { background: #f5f5f5; color: #666; }

/* ===== 客服弹窗 ===== */
.service-item { text-align: center; padding: 20px; }
.service-name { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.service-desc { font-size: 13px; color: #999; margin-bottom: 16px; }
.service-qr { width: 200px; height: 200px; margin: 0 auto; border-radius: 10px; overflow: hidden; border: 1px solid #eee; }
.service-qr img { width: 100%; height: 100%; object-fit: cover; }
.service-qr-placeholder { width: 200px; height: 200px; margin: 0 auto; border-radius: 10px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 14px; border: 2px dashed #e0e0e0; }
.service-tip { font-size: 13px; color: #667eea; margin-top: 12px; }

/* ===== 加载/空状态 ===== */
.loading { text-align: center; padding: 40px; color: #999; font-size: 14px; }
.empty { text-align: center; padding: 40px 20px; color: #ccc; font-size: 14px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ===== Toast ===== */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s; max-width: 280px; text-align: center; }
.toast.show { opacity: 1; }

/* ===== 用户等级徽章 ===== */
.user-level-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; color: #fff; margin-left: 6px; vertical-align: middle; }

/* ===== 用户分组徽章 ===== */
.user-group-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; color: #fff; margin-left: 4px; vertical-align: middle; }

/* ===== 等级信息卡片 ===== */
.level-info-card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.level-info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.level-info-title { font-size: 15px; font-weight: 600; }
.level-info-mult { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 10px; color: #fff; }
.level-info-desc { font-size: 13px; color: #999; line-height: 1.5; }

/* ===== 每日接单次数卡片 ===== */
.daily-order-card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.daily-order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.daily-order-card-title { font-size: 15px; font-weight: 600; }
.daily-order-card-remaining { font-size: 20px; font-weight: 700; color: #52c41a; }
.daily-order-card-remaining.exhausted { color: #e74c3c; }
.daily-order-card-bar { height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.daily-order-card-bar-fill { height: 100%; background: #1890ff; border-radius: 3px; transition: width 0.3s; }
.daily-order-card-desc { font-size: 13px; color: #999; }

/* ===== 订单中的等级佣金提示 ===== */
.order-level-tip { font-size: 11px; color: #9334e6; margin-top: 4px; }
.submit-level-tip { background: rgba(255,255,255,0.15); border-radius: 6px; padding: 8px 10px; font-size: 12px; margin-bottom: 12px; opacity: 0.9; }

/* ===== 升级经验条卡片 ===== */
.exp-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.exp-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.exp-level-badge { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; color: #fff; font-size: 13px; font-weight: 600; }
.exp-level-icon { font-size: 16px; }
.exp-level-name { font-size: 13px; }
.exp-points-display { display: flex; align-items: baseline; gap: 4px; }
.exp-points-value { font-size: 24px; font-weight: 700; color: #667eea; }
.exp-points-label { font-size: 12px; color: #999; }

/* 进度条 */
.exp-bar-container { margin-bottom: 8px; }
.exp-bar-track { position: relative; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.exp-bar-fill { height: 100%; border-radius: 5px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.exp-bar-fill::after { content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6)); border-radius: 5px; }
.exp-bar-glow { position: absolute; top: 0; left: 0; right: 0; height: 100%; animation: expGlow 2s ease-in-out infinite; border-radius: 5px; }
@keyframes expGlow { 0%, 100% { opacity: 0.3; transform: translateX(-30%); } 50% { opacity: 0.7; transform: translateX(30%); } }

.exp-bar-info { display: flex; justify-content: flex-end; gap: 4px; font-size: 12px; color: #999; margin-bottom: 6px; }
.exp-bar-info #exp-bar-current { font-weight: 600; color: #667eea; }
.exp-bar-hint { font-size: 12px; color: #999; margin-bottom: 14px; }

/* 积分规则 */
.exp-rules { display: flex; gap: 12px; margin-bottom: 14px; }
.exp-rule-item { flex: 1; display: flex; align-items: center; gap: 6px; background: #f8f9ff; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #555; }
.exp-rule-icon { font-size: 16px; }

/* 等级预览 */
.exp-levels-preview { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 4px; }
.exp-level-dot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.exp-level-dot > span:first-child { font-size: 20px; filter: grayscale(1); opacity: 0.4; transition: all 0.3s; }
.exp-level-dot-name { font-size: 10px; color: #999; }
.exp-level-dot-pts { font-size: 9px; color: #ccc; }
.exp-level-dot.active > span:first-child { filter: none; opacity: 1; transform: scale(1.3); }
.exp-level-dot.active .exp-level-dot-name { color: #667eea; font-weight: 600; }
.exp-level-dot.active .exp-level-dot-pts { color: #667eea; }
.exp-level-dot.passed > span:first-child { filter: none; opacity: 0.7; }
.exp-level-dot.passed .exp-level-dot-name { color: #52c41a; }
.exp-level-dot.passed .exp-level-dot-pts { color: #52c41a; }
.exp-level-line { flex: 1; height: 2px; background: #f0f0f0; margin: 0 2px; margin-top: -18px; }
.exp-level-line:first-child { display: none; }

/* ===== 邀请好友卡片 ===== */
.invite-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 18px; margin-bottom: 12px; color: #fff; box-shadow: 0 2px 8px rgba(102,126,234,0.2); }
.invite-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.invite-card-icon { font-size: 20px; }
.invite-card-title { font-size: 16px; font-weight: 600; }
.invite-card-desc { font-size: 12px; opacity: 0.85; margin-bottom: 14px; line-height: 1.5; }
.invite-code-box { background: rgba(255,255,255,0.15); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.invite-code-label { font-size: 12px; opacity: 0.8; margin-bottom: 6px; }
.invite-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.invite-code-value { font-size: 20px; font-weight: 700; letter-spacing: 1px; font-family: 'Courier New', monospace; }
.invite-copy-btn { padding: 6px 14px; background: rgba(255,255,255,0.95); color: #667eea; border-radius: 8px; font-size: 13px; font-weight: 600; flex-shrink: 0; transition: transform 0.15s; }
.invite-copy-btn:active { transform: scale(0.95); }
.invite-stats { display: flex; align-items: center; }
.invite-stat-item { flex: 1; text-align: center; }
.invite-stat-value { font-size: 24px; font-weight: 700; }
.invite-stat-label { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.invite-stat-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.25); }

/* ===== 团队页面 ===== */
.team-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 18px; color: #fff; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(102,126,234,0.2); }
.team-banner-icon { font-size: 36px; flex-shrink: 0; animation: logoBounce 2.5s ease-in-out infinite; }
.team-banner-text { flex: 1; }
.team-banner-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.team-banner-desc { font-size: 12px; opacity: 0.85; line-height: 1.5; }

.team-benefits-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.team-benefit-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.team-benefit-row:not(:last-child) { border-bottom: 1px solid #f5f5f5; }
.team-benefit-level { display: flex; align-items: center; gap: 6px; min-width: 64px; flex-shrink: 0; }
.team-benefit-icon { font-size: 18px; }
.team-benefit-name { font-size: 14px; font-weight: 600; color: #333; }
.team-benefit-desc { flex: 1; font-size: 12px; color: #999; }
.team-benefit-pts { font-size: 13px; font-weight: 600; color: #667eea; flex-shrink: 0; }

/* ===== 三步注册引导弹窗 ===== */
.onboarding-overlay { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.onboarding-modal { width: 92%; max-width: 400px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; border-radius: 16px; animation: onboardingIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes onboardingIn { from { transform: scale(0.85) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

/* 顶部Logo区域 */
.onboarding-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 28px 20px 20px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.onboarding-header::before { content: ''; position: absolute; top: -20px; right: -10px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, rgba(255,215,0,0) 70%); }
.onboarding-header::after { content: ''; position: absolute; bottom: -30px; left: -10px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,180,0,0.15) 0%, rgba(255,180,0,0) 70%); }
.onboarding-logo { font-size: 48px; margin-bottom: 8px; animation: logoBounce 2s ease-in-out infinite; }
@keyframes logoBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.onboarding-title { font-size: 20px; font-weight: 700; position: relative; z-index: 1; }
.onboarding-subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; position: relative; z-index: 1; }

/* 步骤指示器 */
.onboarding-steps { display: flex; align-items: center; justify-content: center; padding: 16px 20px 8px; background: #f8f9ff; gap: 0; }
.onboarding-step-indicator { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; background: #e0e0e0; color: #999; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; transition: all 0.3s ease; }
.step-label { font-size: 11px; color: #999; transition: color 0.3s; white-space: nowrap; }
.onboarding-step-indicator.active .step-dot { background: #667eea; color: #fff; transform: scale(1.15); box-shadow: 0 2px 8px rgba(102,126,234,0.35); }
.onboarding-step-indicator.active .step-label { color: #667eea; font-weight: 600; }
.onboarding-step-indicator.completed .step-dot { background: #52c41a; color: #fff; }
.onboarding-step-indicator.completed .step-label { color: #52c41a; }
.step-line { width: 40px; height: 2px; background: #e0e0e0; margin: 0 4px; margin-bottom: 18px; transition: background 0.3s; }
.step-line.filled { background: #52c41a; }

/* 步骤内容区 */
.onboarding-body { flex: 1; overflow-y: auto; padding: 20px; }
.onboarding-step-content { display: none; text-align: center; animation: stepFadeIn 0.3s ease; }
.onboarding-step-content.active { display: block; }
@keyframes stepFadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.step-icon-large { font-size: 56px; margin-bottom: 12px; animation: iconPop 0.5s ease; }
@keyframes iconPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.step-title-large { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 8px; }
.step-desc-large { font-size: 13px; color: #999; line-height: 1.6; margin-bottom: 20px; padding: 0 16px; }

/* 微信授权按钮 */
.btn-wechat-auth { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: #07c160; color: #fff; border-radius: 10px; font-size: 16px; font-weight: 600; transition: all 0.2s; box-shadow: 0 4px 12px rgba(7,193,96,0.3); }
.btn-wechat-auth:active { transform: scale(0.97); }
.btn-wechat-auth:disabled { opacity: 0.6; }
.wechat-icon { font-size: 20px; }

/* 微信授权成功信息 */
.wechat-auth-info { display: flex; align-items: center; gap: 12px; background: #f0fff4; border: 1px solid #b7eb8f; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.wechat-avatar-placeholder { width: 44px; height: 44px; border-radius: 50%; background: #07c160; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.wechat-name-display { flex: 1; text-align: left; font-size: 15px; font-weight: 600; color: #333; }
.wechat-bound-badge { font-size: 12px; color: #52c41a; background: #d9f7be; padding: 3px 10px; border-radius: 12px; font-weight: 600; }

/* 手机号步骤 */
.phone-tip { font-size: 12px; margin-top: 6px; text-align: left; min-height: 16px; }
.phone-tip.error { color: #e74c3c; }

/* 邀请码步骤 */
.invite-verify-info { font-size: 12px; text-align: left; margin-top: 6px; padding: 8px 12px; border-radius: 8px; }
.invite-verify-info.error { background: #fff2f0; color: #e74c3c; }
.invite-verify-info.success { background: #f0fff4; color: #52c41a; }
.invite-code-tip { font-size: 12px; color: #999; margin-top: 8px; line-height: 1.5; text-align: left; }

/* 按钮行 */
.onboarding-btn-row { display: flex; gap: 10px; margin-top: 24px; }
.btn-prev { flex: 1; padding: 13px; background: #f5f5f5; color: #666; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s; }
.btn-prev:active { transform: scale(0.97); background: #e8e8e8; }
.btn-next { flex: 2; padding: 13px; background: #667eea; color: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s; box-shadow: 0 3px 10px rgba(102,126,234,0.3); }
.btn-next:active { transform: scale(0.97); }
.btn-complete { flex: 2; padding: 13px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s; box-shadow: 0 3px 10px rgba(102,126,234,0.35); }
.btn-complete:active { transform: scale(0.97); }
.btn-complete:disabled { opacity: 0.6; }

/* 用户登录弹窗 */
.login-tip { font-size: 12px; color: #f5222d; margin-top: 8px; min-height: 16px; }
.login-bottom-link { text-align: center; margin-top: 16px; font-size: 13px; color: #999; }
.login-bottom-link a { color: #667eea; font-weight: 600; text-decoration: none; }
.set-password-hint { background: #fff7e6; border: 1px solid #ffd591; border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 12px; color: #d46b08; line-height: 1.5; }

/* 步骤1单独的下一步按钮（全宽） */
#step1-next-btn { width: 100%; padding: 13px; background: #667eea; color: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s; box-shadow: 0 3px 10px rgba(102,126,234,0.3); margin-top: 16px; }
#step1-next-btn:active { transform: scale(0.97); }