/* 互帮大厅 - 移动端优先 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --red: #e02e24; --red-dark: #c81e1e; --bg: #fff7f2; --card: #fff;
  --text: #2b2b2b; --muted: #999; --line: #f0e6de; --ok: #0a8f4e; --err: #d32f2f;
}
body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 640px; margin: 0 auto; padding: 14px 14px 80px; }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.topbar .brand { font-weight: 800; font-size: 17px; color: var(--red); }
.topbar nav { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.topbar .pts { color: #b8860b; font-weight: 700; }
.btn-mini { background: var(--red); color: #fff; padding: 4px 12px; border-radius: 999px; }

.hero { background: linear-gradient(135deg, #ff6a3d, var(--red)); border-radius: 18px; color: #fff; padding: 22px 18px; margin-bottom: 18px; }
.hero h1 { font-size: 22px; margin-bottom: 4px; }
.hero p { opacity: .92; font-size: 13px; margin-bottom: 14px; }
.stats { display: flex; gap: 8px; margin-bottom: 14px; }
.stats div { flex: 1; background: rgba(255,255,255,.16); border-radius: 10px; padding: 8px 4px; text-align: center; }
.stats b { display: block; font-size: 18px; }
.stats span { font-size: 11px; opacity: .85; }
.hero-cta { display: flex; gap: 10px; }
.hero-cta .btn { flex: 1; text-align: center; }

.sec-title { font-size: 16px; margin: 18px 0 10px; }
.card { background: var(--card); border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.04); margin-bottom: 14px; }
.card h1 { font-size: 19px; margin-bottom: 10px; }

.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card { background: var(--card); border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.04); display: block; }
.task-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.task-time { margin-left: auto; color: var(--muted); font-size: 12px; }
.task-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.task-note { color: #666; font-size: 13px; margin-bottom: 4px; }
.task-meta { display: flex; gap: 14px; align-items: center; color: #777; font-size: 13px; }
.task-meta .need { color: var(--red); }
.task-meta .go { margin-left: auto; color: var(--red); font-weight: 600; }

.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #ffe9d6; color: #c2571a; font-weight: 600; }
.badge-助力 { background: #e3f2fd; color: #1565c0; }
.badge-砍价 { background: #ffe9d6; color: #c2571a; }
.badge-拼团 { background: #ede7f6; color: #6a1b9a; }
.badge-投票 { background: #e8f5e9; color: #2e7d32; }
.badge-其他 { background: #f1f3f4; color: #5f6368; }
.badge-done { background: #e8f5e9; color: #2e7d32; }
.badge-open { background: #fff3e0; color: #ef6c00; }
.badge-closed { background: #f1f3f4; color: #9aa0a6; }
.badge-expired { background: #efebe9; color: #8d6e63; }
.task-card.card-expired { opacity: .55; }

.code-box { background: #f8f9fa; border: 1px dashed #dadce0; border-radius: 10px; padding: 12px 14px; margin: 10px 0; cursor: pointer; user-select: all; word-break: break-all; }
.code-box span { display: block; font-size: 15px; line-height: 1.6; }
.code-box small { display: block; margin-top: 6px; color: #1a73e8; font-size: 12px; }

.btn { display: inline-block; border: 0; border-radius: 12px; padding: 11px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:active { background: var(--red-dark); }
.btn-ghost { background: #fff; color: var(--red); border: 1px solid var(--red); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-big { font-size: 17px; padding: 14px; }

.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 13px; color: #666; margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; background: #fff; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }

.flash { border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.flash-ok { background: #e8f5e9; color: var(--ok); }
.flash-err { background: #ffebee; color: var(--err); }

.hint { color: #888; font-size: 13px; margin-bottom: 12px; }
.alt { text-align: center; margin-top: 12px; font-size: 14px; color: #666; }
.alt a { color: var(--red); font-weight: 600; }
.auth { max-width: 420px; margin: 20px auto; }
.empty { text-align: center; color: var(--muted); padding: 28px 0; background: var(--card); border-radius: 14px; }

.back { display: inline-block; margin-bottom: 10px; color: #888; font-size: 13px; }
.task-detail h1 { font-size: 18px; }
.task-detail .note { color: #555; margin-bottom: 10px; }
.task-link { color: #1565c0; font-weight: 600; word-break: break-all; }
.progress-row { margin: 14px 0; }
.progress { height: 10px; background: #f1e8e0; border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #ff9800, var(--red)); border-radius: 999px; transition: width .4s; }
.progress-text { font-size: 13px; color: #666; }
.help-list { list-style: none; background: var(--card); border-radius: 14px; overflow: hidden; }
.help-list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.help-list li:last-child { border-bottom: 0; }
.help-list time { margin-left: auto; color: var(--muted); font-size: 12px; }
.help-list a { flex: 1; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ffb74d, var(--red)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.avatar-lg { width: 52px; height: 52px; font-size: 22px; }
.me-head { display: flex; gap: 14px; align-items: center; }

.log-list { list-style: none; background: var(--card); border-radius: 14px; overflow: hidden; }
.log-list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.log-list li:last-child { border-bottom: 0; }
.log-list b.up { color: var(--ok); } .log-list b.down { color: var(--err); }
.log-list time { margin-left: auto; color: var(--muted); font-size: 12px; }

.pager { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.pager a, .pager b { padding: 6px 12px; background: #fff; border-radius: 8px; font-size: 14px; }
.pager b { background: var(--red); color: #fff; }

.tbl-wrap { overflow-x: auto; background: var(--card); border-radius: 14px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tbl th { color: #888; font-weight: 600; }
.inline { display: inline-block; margin-right: 4px; }
.btn-mini2 { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.btn-mini2.danger { color: var(--err); border-color: #ffcdd2; }

.foot { text-align: center; color: #bbb; font-size: 12px; padding: 20px 0 30px; }

/* ===== v2 新增 ===== */
.task-url { color: #4a7dbd; font-size: 12px; word-break: break-all; margin-bottom: 6px; }
.task-img { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; margin: 10px 0; border: 1px solid var(--line); }
.thumb { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin: 6px 0 4px; border: 1px solid var(--line); }
.badge-pin { background: #fff8e1; color: #b8860b; }
.btn-danger { background: #fff; color: var(--err); border: 1px solid #ffcdd2; }
.bad { color: var(--err); }
.muted { color: var(--muted); }
.grid3 { display: flex; gap: 10px; }
.grid3 .field { flex: 1; }
.inline-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-row input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.link-box { margin-bottom: 6px; }
@media (max-width: 560px) { .grid3 { flex-direction: column; gap: 0; } }