/* ============================================
   小微兔任务 - 手机版H5样式
   主色 #1f3864 / 强调 #ff6b35 / 移动优先
   ============================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
    --primary:#1f3864; --primary-light:#2a4a7f;
    --accent:#ff6b35; --accent-hover:#e55a28;
    --bg:#f5f7fa; --card:#fff;
    --text:#333; --text-light:#888; --border:#eee;
    --green:#4caf50; --red:#f44336; --orange:#ff9800; --blue:#2196f3;
    --radius:10px;
}
html { font-size:16px; }
body {
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
    background:var(--bg); color:var(--text); line-height:1.5;
    max-width:480px; margin:0 auto; min-height:100vh; position:relative;
}
a { text-decoration:none; color:inherit; }
input,textarea,select { font-family:inherit; font-size:14px; outline:none; }
button { font-family:inherit; cursor:pointer; border:none; }

/* ---- 顶部导航 ---- */
.nav-bar {
    position:sticky; top:0; z-index:100;
    background:var(--primary); color:#fff;
    padding:0 16px; height:48px;
    display:flex; align-items:center; gap:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.nav-bar .nav-title { font-size:17px; font-weight:700; flex:1; text-align:center; }
.nav-bar .nav-back, .nav-bar .nav-right {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#fff; cursor:pointer;
}
.nav-bar .nav-right { font-size:13px; width:auto; padding:0 4px; }

/* ---- 公告条 ---- */
.notice-bar {
    background:#fff8e1; color:#f57c00; font-size:12px;
    padding:8px 16px; display:flex; align-items:center; gap:6px;
    border-bottom:1px solid #ffe0b2;
}
.notice-bar .icon { flex-shrink:0; }

/* ---- 分类标签 ---- */
.cat-scroll {
    display:flex; gap:8px; padding:12px 16px; overflow-x:auto;
    background:var(--card); border-bottom:1px solid var(--border);
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cat-scroll::-webkit-scrollbar { display:none; }
.cat-tag {
    flex-shrink:0; padding:6px 16px; border-radius:20px;
    font-size:13px; background:#f0f2f5; color:var(--text-light);
    transition:all .2s; white-space:nowrap;
}
.cat-tag.active { background:var(--primary); color:#fff; }

/* ---- 任务卡片 ---- */
.task-list { padding:12px 16px 80px; }
.task-card {
    background:var(--card); border-radius:var(--radius);
    padding:14px 16px; margin-bottom:12px;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    transition:transform .15s;
}
.task-card:active { transform:scale(.98); }
.task-card .tc-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.task-card .tc-cat {
    font-size:11px; padding:2px 8px; border-radius:4px;
    background:rgba(31,56,100,.08); color:var(--primary);
}
.task-card .tc-top-badge {
    font-size:11px; padding:2px 8px; border-radius:4px;
    background:#fff3e0; color:var(--accent); font-weight:600;
}
.task-card .tc-title {
    font-size:15px; font-weight:600; line-height:1.4;
    margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.task-card .tc-bottom { display:flex; align-items:center; justify-content:space-between; }
.task-card .tc-reward { color:var(--accent); font-size:18px; font-weight:800; }
.task-card .tc-reward small { font-size:12px; font-weight:400; }
.task-card .tc-meta { font-size:12px; color:var(--text-light); }

/* ---- 状态标签 ---- */
.st { font-size:11px; padding:2px 8px; border-radius:4px; font-weight:600; display:inline-block; }
.st-wait { background:#fff3e0; color:#f57c00; }
.st-run  { background:#e3f2fd; color:#1976d2; }
.st-done { background:#e8f5e9; color:#388e3c; }
.st-cancel { background:#f5f5f5; color:#999; }
.st-reject { background:#ffebee; color:#c62828; }

/* ---- 底部Tab ---- */
.tab-bar {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px; z-index:100;
    background:#fff; border-top:1px solid var(--border);
    display:flex; padding:6px 0 env(safe-area-inset-bottom);
    box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
.tab-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    font-size:11px; color:var(--text-light); padding:4px 0; transition:color .2s;
}
.tab-item .tab-icon { font-size:22px; line-height:1; }
.tab-item.active { color:var(--primary); font-weight:600; }
.tab-item.publish-btn .tab-icon {
    background:var(--accent); color:#fff; width:44px; height:44px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-top:-20px; box-shadow:0 4px 12px rgba(255,107,53,.4);
    border:3px solid #fff;
}

/* ---- 表单 ---- */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; color:var(--text-light); margin-bottom:6px; }
.form-control {
    width:100%; padding:11px 14px; border:1px solid #ddd; border-radius:8px;
    background:#fff; color:var(--text); font-size:14px; transition:border-color .2s;
}
.form-control:focus { border-color:var(--primary); }
textarea.form-control { min-height:90px; resize:vertical; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }

/* ---- 按钮 ---- */
.btn {
    display:block; width:100%; padding:12px; border-radius:8px;
    font-size:15px; font-weight:600; text-align:center; transition:all .2s;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-accent { background:var(--accent); color:#fff; }
.btn-outline { background:transparent; border:1.5px solid var(--primary); color:var(--primary); }
.btn-disabled { background:#ccc; color:#fff; pointer-events:none; }
.btn-sm { display:inline-block; width:auto; padding:6px 18px; font-size:13px; border-radius:6px; }

/* ---- 空状态 ---- */
.empty-state {
    text-align:center; padding:60px 20px; color:var(--text-light);
}
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; opacity:.4; }
.empty-state p { font-size:14px; }

/* ---- 加载更多 ---- */
.load-more {
    text-align:center; padding:16px; font-size:13px; color:var(--text-light);
}
.load-more:active { color:var(--primary); }

/* ---- 登录页 ---- */
.login-page {
    min-height:100vh; background:linear-gradient(160deg,var(--primary) 0%,var(--primary-light) 100%);
    display:flex; align-items:center; justify-content:center; padding:40px 24px;
}
.login-box {
    width:100%; background:rgba(255,255,255,.95); border-radius:16px;
    padding:36px 28px; box-shadow:0 16px 48px rgba(0,0,0,.25);
}
.login-box .login-logo { text-align:center; margin-bottom:24px; }
.login-box .login-logo h1 { font-size:20px; color:var(--primary); margin-top:10px; }
.login-box .login-logo p { font-size:12px; color:var(--text-light); margin-top:4px; }
.login-tabs { display:flex; margin-bottom:24px; border-bottom:2px solid var(--border); }
.login-tabs .lt {
    flex:1; text-align:center; padding:10px; font-size:15px; font-weight:600;
    color:var(--text-light); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s;
}
.login-tabs .lt.active { color:var(--primary); border-bottom-color:var(--primary); }
.login-foot { text-align:center; margin-top:16px; font-size:12px; color:var(--text-light); }

/* ---- 详情页 ---- */
.detail-head {
    background:var(--card); padding:18px 16px; margin-bottom:10px;
}
.detail-head .dh-top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.detail-head h2 { font-size:18px; font-weight:700; line-height:1.4; margin-bottom:10px; }
.detail-head .dh-reward {
    display:flex; align-items:baseline; gap:6px; padding:10px 14px;
    background:#fff5f0; border-radius:8px; margin-bottom:10px;
}
.detail-head .dh-reward .amount { font-size:26px; font-weight:800; color:var(--accent); }
.detail-head .dh-reward .per { font-size:13px; color:var(--text-light); }
.detail-head .dh-meta { display:flex; gap:16px; font-size:12px; color:var(--text-light); }
.detail-section { background:var(--card); padding:16px; margin-bottom:10px; }
.detail-section h3 { font-size:15px; font-weight:700; margin-bottom:10px; color:var(--primary); }
.detail-section .ds-content { font-size:14px; color:var(--text); line-height:1.7; white-space:pre-wrap; word-break:break-all; }
.detail-section .ds-steps { font-size:14px; color:var(--text); line-height:1.8; white-space:pre-wrap; word-break:break-all; }
.detail-publisher { display:flex; align-items:center; gap:10px; }
.detail-publisher .dp-avatar {
    width:36px; height:36px; border-radius:50%; background:var(--primary);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}
.detail-publisher .dp-name { font-size:14px; font-weight:600; }
.detail-publisher .dp-time { font-size:12px; color:var(--text-light); }

/* ---- 底部操作栏 ---- */
.action-bar {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px; z-index:100;
    background:#fff; border-top:1px solid var(--border);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    display:flex; gap:12px; box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
.action-bar .btn { flex:1; }

/* ---- 个人中心 ---- */
.profile-head {
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    padding:24px 20px 20px; color:#fff;
}
.profile-head .ph-row { display:flex; align-items:center; gap:14px; }
.profile-head .ph-avatar {
    width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.15);
    border:2px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center;
    font-size:22px; font-weight:700; color:#fff;
}
.profile-head .ph-name { font-size:18px; font-weight:700; }
.profile-head .ph-phone { font-size:13px; color:rgba(255,255,255,.7); margin-top:2px; }
.profile-head .ph-badge {
    display:inline-block; font-size:11px; padding:2px 10px; border-radius:10px;
    background:rgba(255,255,255,.2); margin-top:6px;
}
.profile-stats {
    display:flex; background:var(--card); margin:-12px 16px 10px; border-radius:var(--radius);
    box-shadow:0 2px 10px rgba(0,0,0,.08); overflow:hidden;
}
.profile-stats .ps-item { flex:1; text-align:center; padding:14px 0; }
.profile-stats .ps-item + .ps-item { border-left:1px solid var(--border); }
.profile-stats .ps-num { font-size:18px; font-weight:800; color:var(--primary); }
.profile-stats .ps-label { font-size:12px; color:var(--text-light); margin-top:2px; }
.menu-list { background:var(--card); border-radius:var(--radius); margin:0 16px 12px; overflow:hidden; }
.menu-item {
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    font-size:14px; border-bottom:1px solid var(--border); transition:background .15s;
}
.menu-item:last-child { border-bottom:none; }
.menu-item:active { background:#f5f5f5; }
.menu-item .mi-icon { font-size:18px; width:24px; text-align:center; }
.menu-item .mi-arrow { margin-left:auto; color:#ccc; font-size:14px; }

/* ---- 会员套餐卡 ---- */
.plan-list { padding:12px 16px 80px; }
.plan-card {
    background:var(--card); border-radius:var(--radius); padding:16px;
    margin-bottom:12px; border:2px solid transparent; transition:all .2s;
}
.plan-card.selected { border-color:var(--accent); box-shadow:0 4px 16px rgba(255,107,53,.15); }
.plan-card .pc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.plan-card .pc-name { font-size:16px; font-weight:700; }
.plan-card .pc-price { font-size:22px; font-weight:800; color:var(--accent); }
.plan-card .pc-price small { font-size:12px; font-weight:400; color:var(--text-light); }
.plan-card .pc-feats { font-size:13px; color:var(--text-light); line-height:1.8; }

/* ---- 流水记录 ---- */
.tx-list { background:var(--card); border-radius:var(--radius); margin:0 16px 12px; overflow:hidden; }
.tx-item { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }
.tx-item:last-child { border-bottom:none; }
.tx-item .tx-info { flex:1; }
.tx-item .tx-remark { font-size:14px; font-weight:600; margin-bottom:2px; }
.tx-item .tx-time { font-size:12px; color:var(--text-light); }
.tx-item .tx-amount { font-size:15px; font-weight:700; }
.tx-amount.income { color:var(--green); }
.tx-amount.expense { color:var(--accent); }

/* ---- 搜索框 ---- */
.search-bar {
    display:flex; gap:8px; padding:10px 16px; background:var(--card);
    border-bottom:1px solid var(--border); align-items:center;
}
.search-bar input {
    flex:1; padding:8px 14px; border:none; border-radius:20px;
    background:#f0f2f5; font-size:13px;
}
.search-bar .sb-btn {
    padding:8px 16px; border-radius:20px; background:var(--primary);
    color:#fff; font-size:13px; font-weight:600;
}