/* ===== 布局模块 ===== */

/* 顶部导航 */
.navbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: center; height: var(--navbar-height); padding: 0 var(--space-lg); background: var(--white); border-bottom: 1px solid var(--border); }
.navbar-title { font-size: var(--font-lg); font-weight: 600; text-align: center; flex: 1; }
.navbar-back { position: absolute; left: var(--space-lg); font-size: var(--font-lg); color: var(--text); width: 32px; z-index: 1; }
.navbar-right { position: absolute; right: var(--space-lg); font-size: var(--font-md); color: var(--text-secondary); z-index: 1; }

/* 底部 TabBar */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; height: var(--tabbar-height); background: var(--white); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--font-sm); color: var(--text-secondary); padding: 4px 0; }
.tabbar-item.active { color: var(--publish-primary); }
.tabbar-item .fa { font-size: 20px; margin-bottom: 2px; }
.tabbar-center { position: relative; top: -10px; }
.tabbar-center .fa { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--publish-primary), var(--publish-primary-light)); box-shadow: 0 4px 12px rgba(255,107,53,0.4); }

/* 绿色接单端 TabBar */
.tabbar-task .tabbar-item.active { color: var(--task-primary); }
.tabbar-task .tabbar-center .fa { background: linear-gradient(135deg, var(--task-primary), var(--task-primary-light)); box-shadow: 0 4px 12px rgba(0,185,107,0.4); }

/* 轮播 */
.banner-swiper { position: relative; overflow: hidden; border-radius: var(--radius-lg); margin: var(--space-lg); }
.banner-swiper .slides { display: flex; transition: transform .3s; }
.banner-swiper .slide { flex-shrink: 0; width: 100%; }
.banner-swiper .slide img { width: 100%; height: 150px; object-fit: cover; }
.banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.banner-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.5); }
.banner-dot.active { width: 18px; background: #fff; }

/* 搜索栏 */
.search-bar { display: flex; align-items: center; background: var(--white); border-radius: var(--radius-lg); padding: 8px var(--space-md); margin: var(--space-md) var(--space-lg); }
.search-bar .fa { color: var(--text-light); margin-right: var(--space-sm); }
.search-bar input { flex: 1; font-size: var(--font-md); color: var(--text); }
.search-bar input::placeholder { color: var(--text-light); }

/* 筛选栏 */
.filter-tabs { display: flex; background: var(--white); padding: 0 var(--space-lg); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--border); }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab { padding: 10px 16px; font-size: var(--font-md); color: var(--text-secondary); position: relative; flex-shrink: 0; }
.filter-tab.active { color: var(--publish-primary); font-weight: 600; }
.filter-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--publish-primary); border-radius: 2px; }

/* 接单端绿色筛选 */
.filter-tabs-task .filter-tab.active { color: var(--task-primary); }
.filter-tabs-task .filter-tab.active::after { background: var(--task-primary); }

/* 九宫格 */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.grid-item { display: flex; flex-direction: column; align-items: center; padding: var(--space-lg) var(--space-sm); }
.grid-item .fa { font-size: 28px; margin-bottom: var(--space-sm); }
.grid-item span { font-size: var(--font-sm); }

/* 任务卡片 */
.task-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); margin: 0 var(--space-lg) var(--space-md); box-shadow: var(--shadow); position: relative; }
.task-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.task-card-title { font-size: var(--font-md); font-weight: 600; flex: 1; }
.task-card-body { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-sm); }
.task-card-info { font-size: var(--font-sm); color: var(--text-secondary); }
.task-card-info span { margin-right: var(--space-lg); }
.task-card-footer { display: flex; align-items: center; justify-content: space-between; }
.task-card-price { font-size: var(--font-xl); color: var(--danger); font-weight: 700; }
.task-card-price span { font-size: var(--font-sm); color: var(--text-secondary); font-weight: 400; }
.task-card-btn { padding: 8px 20px; border-radius: 20px; font-size: var(--font-sm); font-weight: 500; }
.task-card-btn.publish-btn { background: var(--publish-primary); color: #fff; }
.task-card-btn.task-btn { background: var(--task-primary); color: #fff; }

/* 统计卡片 */
.stat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); padding: 0 var(--space-lg); margin-bottom: var(--space-lg); }
.stat-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; box-shadow: var(--shadow); }
.stat-card .value { font-size: var(--font-xxl); font-weight: 700; margin-bottom: 4px; }
.stat-card .label { font-size: var(--font-sm); color: var(--text-secondary); }

/* 分步进度条 */
.steps { display: flex; padding: var(--space-lg) var(--space-xl); background: var(--white); margin-bottom: var(--space-md); }
.step { flex: 1; display: flex; align-items: center; font-size: var(--font-sm); color: var(--text-light); }
.step::before { content: ''; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); margin-right: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.step.active { color: var(--publish-primary); }
.step.active::before { border-color: var(--publish-primary); background: var(--publish-primary); color: #fff; }
.step.done { color: var(--success); }
.step.done::before { border-color: var(--success); background: var(--success); color: #fff; }
.step-line { flex: 0.5; height: 2px; background: var(--border); margin: 0 4px; }
.step-line.done { background: var(--success); }

/* 确认对话框 */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-box { background: var(--white); border-radius: var(--radius-lg); width: 80%; max-width: 320px; padding: var(--space-xl); text-align: center; }
.modal-box .title { font-size: var(--font-lg); font-weight: 600; margin-bottom: var(--space-md); }
.modal-box .content { font-size: var(--font-md); color: var(--text-secondary); margin-bottom: var(--space-xl); }
.modal-actions { display: flex; gap: var(--space-md); }
.modal-actions .btn { flex: 1; }

/* 下拉刷新 */
.pull-refresh { position: relative; overflow: hidden; }
.pull-tip { text-align: center; padding: 10px; font-size: var(--font-sm); color: var(--text-light); }