/* ============================================================
   wf-* 设计系统 · PC 端方案 A（2026-11-04 阶段 1）
   规范依据《PC端重建开发规范.md》：60-30-10 用色 / #012a90 唯一强调 /
   卡片 12px 按钮 8px / 无衬线系统栈 / 不复用法妞类名
   本文件自包含：令牌 → 基础 → 组件 → 页面区块，仅新布局页面加载
   ============================================================ */

/* ---------- 1. 令牌 ---------- */
:root {
    /* 品牌蓝阶（唯一强调色族） */
    --wf-blue-50: #eef3fb;
    --wf-blue-100: #d8e4f5;
    --wf-blue-500: #2b57b8;
    --wf-blue-600: #012a90;
    --wf-blue-700: #01206e;
    --wf-blue-900: #01104a;
    /* 中性（60% 大面积 + 30% 结构） */
    --wf-bg: #f5f7fa;
    --wf-card: #ffffff;
    --wf-text: #1a2233;
    --wf-text-2: #5a6478;
    --wf-text-3: #98a1b3;
    --wf-line: #e8ecf2;
    /* 语义色（仅状态） */
    --wf-ok: #1a9e5c;
    --wf-warn: #d97706;
    --wf-danger: #dc2626;
    /* 形状与阴影 */
    --wf-r-card: 12px;
    --wf-r-btn: 8px;
    --wf-shadow: 0 1px 3px rgba(16, 42, 90, .06), 0 4px 14px rgba(16, 42, 90, .05);
    --wf-shadow-up: 0 4px 10px rgba(16, 42, 90, .09), 0 12px 28px rgba(16, 42, 90, .08);
    /* 字体 */
    --wf-font: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* ---------- 2. 基础 ---------- */
.wf-page { margin: 0; font-family: var(--wf-font); color: var(--wf-text); background: var(--wf-card); font-size: 15px; line-height: 1.7; }
.wf-page a { color: inherit; text-decoration: none; }
.wf-page img { max-width: 100%; }
.wf-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.wf-srh1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 3. 按钮 ---------- */
.wf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 20px; border: none; border-radius: var(--wf-r-btn); font-size: 15px; font-family: inherit; cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s; }
.wf-btn:active { transform: translateY(1px); }
.wf-btn-primary { background: var(--wf-blue-600); color: #fff; }
.wf-btn-primary:hover { background: var(--wf-blue-700); }
.wf-btn-ghost { background: var(--wf-blue-50); color: var(--wf-blue-600); }
.wf-btn-ghost:hover { background: var(--wf-blue-100); }
.wf-btn-line { background: #fff; color: var(--wf-blue-600); border: 1px solid var(--wf-blue-100); }
.wf-btn-line:hover { border-color: var(--wf-blue-500); }
.wf-btn-sm { height: 30px; padding: 0 14px; font-size: 13px; }

/* ---------- 4. 顶栏 + 主导航 ---------- */
.wf-topbar { background: #f2f4f8; border-bottom: 1px solid var(--wf-line); font-size: 13px; color: var(--wf-text-2); }
.wf-topbar-in { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.wf-topbar-links { display: flex; gap: 18px; }
.wf-topbar-links a:hover { color: var(--wf-blue-600); }
.wf-city { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.wf-city .bi { font-size: 12px; }

.wf-header { background: #fff; border-bottom: 1px solid var(--wf-line); position: sticky; top: 0; z-index: 50; }
.wf-header-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.wf-logo { display: flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 700; color: var(--wf-blue-600); letter-spacing: 1px; flex-shrink: 0; }
.wf-logo i { font-style: normal; }
.wf-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.wf-nav > a, .wf-nav .wf-hasmenu > span { display: inline-flex; align-items: center; height: 68px; padding: 0 15px; font-size: 16px; color: var(--wf-text); cursor: pointer; position: relative; }
.wf-nav > a:hover, .wf-hasmenu:hover > span { color: var(--wf-blue-600); }
.wf-nav .on { color: var(--wf-blue-600); font-weight: 600; }
.wf-nav .on::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--wf-blue-600); }

/* 知识库 mega 下拉（hover 展开，纯 CSS） */
.wf-hasmenu { position: relative; }
.wf-mega { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); width: 560px; background: #fff; border: 1px solid var(--wf-line); border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow-up); padding: 18px 20px; display: none; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; }
.wf-hasmenu:hover .wf-mega { display: grid; }
.wf-mega a { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border-radius: var(--wf-r-btn); font-size: 14px; color: var(--wf-text); }
.wf-mega a:hover { background: var(--wf-blue-50); color: var(--wf-blue-600); }
.wf-mega .bi { color: var(--wf-blue-600); font-size: 17px; }

/* ---------- 5. Hero 搜索区 ---------- */
.wf-hero { background: linear-gradient(180deg, #eef3fb 0%, #f7f9fc 100%); border-bottom: 1px solid var(--wf-line); }
.wf-hero-in { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; padding: 52px 0 48px; }
.wf-hero h2 { margin: 0 0 8px; font-size: 32px; line-height: 1.3; font-weight: 700; }
.wf-hero h2 em { font-style: normal; color: var(--wf-blue-600); }
.wf-hero-sub { margin: 0 0 24px; font-size: 15px; color: var(--wf-text-2); }

.wf-search { display: flex; background: #fff; border-radius: var(--wf-r-btn); box-shadow: var(--wf-shadow-up); overflow: hidden; border: 1px solid var(--wf-line); }
.wf-search-tabs { display: flex; align-items: stretch; border-right: 1px solid var(--wf-line); }
.wf-search-tabs button { border: none; background: none; padding: 0 20px; font-size: 15px; color: var(--wf-text-2); cursor: pointer; font-family: inherit; }
.wf-search-tabs .on { color: var(--wf-blue-600); font-weight: 600; box-shadow: inset 0 -3px 0 var(--wf-blue-600); }
.wf-search input { flex: 1; border: none; outline: none; padding: 0 18px; font-size: 15px; height: 52px; font-family: inherit; color: var(--wf-text); }
.wf-search input::placeholder { color: var(--wf-text-3); }
.wf-search button[type=submit] { border: none; background: var(--wf-blue-600); color: #fff; padding: 0 30px; font-size: 16px; cursor: pointer; font-family: inherit; }
.wf-search button[type=submit]:hover { background: var(--wf-blue-700); }

.wf-chips { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--wf-text-3); flex-wrap: wrap; }
.wf-chips a { padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--wf-line); color: var(--wf-text-2); }
.wf-chips a:hover { color: var(--wf-blue-600); border-color: var(--wf-blue-100); background: var(--wf-blue-50); }

/* 统计卡（真实数据） */
.wf-stat-card { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 22px 24px; }
.wf-stat-card h3 { margin: 0 0 14px; font-size: 14px; color: var(--wf-text-2); font-weight: 400; display: flex; align-items: center; gap: 7px; }
.wf-stat-card h3 .bi { color: var(--wf-blue-600); }
.wf-stat-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px dashed var(--wf-line); font-size: 13px; color: var(--wf-text-2); }
.wf-stat-row b { font-size: 17px; color: var(--wf-blue-600); font-variant-numeric: tabular-nums; }

/* ---------- 6. 快捷服务条 ---------- */
.wf-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: -26px auto 0; position: relative; }
.wf-quick a { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 16px 18px; transition: box-shadow .15s, transform .15s; }
.wf-quick a:hover { box-shadow: var(--wf-shadow-up); transform: translateY(-2px); }
.wf-quick .bi { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--wf-blue-50); color: var(--wf-blue-600); font-size: 19px; flex-shrink: 0; }
.wf-quick b { display: block; font-size: 15px; }
.wf-quick span { display: block; font-size: 12px; color: var(--wf-text-3); }

/* ---------- 7. 区块通用 ---------- */
.wf-section { padding: 36px 0 8px; }
.wf-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.wf-sec-head h2 { margin: 0; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.wf-sec-head h2::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--wf-blue-600); }
.wf-sec-more { font-size: 13px; color: var(--wf-text-3); }
.wf-sec-more:hover { color: var(--wf-blue-600); }
.wf-sec-more .bi { font-size: 11px; }

/* ---------- 8. 首页双栏 ---------- */
.wf-cols { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }

/* 最新咨询列表 */
.wf-q-list { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); overflow: hidden; }
.wf-q-item { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--wf-line); }
.wf-q-item:last-child { border-bottom: none; }
.wf-q-item:hover { background: #fafbfd; }
.wf-q-cat { flex-shrink: 0; font-size: 12px; color: var(--wf-blue-600); background: var(--wf-blue-50); border-radius: 4px; padding: 2px 8px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-q-tit { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-q-item:hover .wf-q-tit { color: var(--wf-blue-600); }
.wf-q-meta { flex-shrink: 0; font-size: 12px; color: var(--wf-text-3); }

/* 右栏卡片 */
.wf-side-card { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 18px 20px; margin-bottom: 20px; }
.wf-side-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.wf-side-card h3 a { font-size: 12px; color: var(--wf-text-3); font-weight: 400; }

/* 律师卡 */
.wf-lawyer { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--wf-line); }
.wf-lawyer:last-child { border-bottom: none; }
.wf-lawyer img, .wf-lawyer .wf-ava-ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--wf-blue-50); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); font-size: 20px; }
.wf-lawyer-info { flex: 1; min-width: 0; }
.wf-lawyer-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.wf-lawyer-name .wf-tag { font-size: 11px; color: var(--wf-blue-600); background: var(--wf-blue-50); border-radius: 3px; padding: 1px 6px; font-weight: 400; }
.wf-lawyer-firm { font-size: 12px; color: var(--wf-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-lawyer-btn { align-self: center; }

/* 排行榜 */
.wf-rank li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--wf-line); list-style: none; font-size: 14px; }
.wf-rank li:last-child { border-bottom: none; }
.wf-rank { margin: 0; padding: 0; }
.wf-rank-no { width: 20px; height: 20px; border-radius: 5px; background: var(--wf-line); color: var(--wf-text-2); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-style: normal; }
.wf-rank li:nth-child(-n+3) .wf-rank-no { background: var(--wf-blue-600); color: #fff; }
.wf-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-rank-num { font-size: 12px; color: var(--wf-text-3); font-variant-numeric: tabular-nums; }

/* ---------- 9. 知识库八库 ---------- */
.wf-lib { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wf-lib a { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; transition: box-shadow .15s, transform .15s; }
.wf-lib a:hover { box-shadow: var(--wf-shadow-up); transform: translateY(-2px); }
.wf-lib .bi { width: 42px; height: 42px; border-radius: 10px; background: var(--wf-blue-50); color: var(--wf-blue-600); font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wf-lib b { display: block; font-size: 16px; margin-bottom: 2px; }
.wf-lib span { font-size: 12px; color: var(--wf-text-3); line-height: 1.5; display: block; }

/* ---------- 10. 文章区 ---------- */
.wf-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wf-art-card { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.wf-art-card:hover { box-shadow: var(--wf-shadow-up); transform: translateY(-2px); }
.wf-art-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--wf-blue-50); }
.wf-art-body { padding: 14px 16px 16px; }
.wf-art-body h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-art-card:hover h3 { color: var(--wf-blue-600); }
.wf-art-body p { margin: 0 0 8px; font-size: 13px; color: var(--wf-text-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-art-meta { font-size: 12px; color: var(--wf-text-3); }

/* ---------- 11. 律所区 ---------- */
.wf-firm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wf-firm-card { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 20px; transition: box-shadow .15s, transform .15s; }
.wf-firm-card:hover { box-shadow: var(--wf-shadow-up); transform: translateY(-2px); }
.wf-firm-card h3 { margin: 0 0 6px; font-size: 17px; }
.wf-firm-card:hover h3 { color: var(--wf-blue-600); }
.wf-firm-card p { margin: 0 0 12px; font-size: 13px; color: var(--wf-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 12. CTA 条 ---------- */
.wf-cta { background: linear-gradient(135deg, var(--wf-blue-900), var(--wf-blue-700)); border-radius: var(--wf-r-card); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 26px 34px; margin: 36px 0 40px; }
.wf-cta h2 { margin: 0 0 4px; font-size: 21px; }
.wf-cta p { margin: 0; font-size: 13px; opacity: .75; }
.wf-cta .wf-btn-primary { background: #fff; color: var(--wf-blue-700); }
.wf-cta .wf-btn-primary:hover { background: var(--wf-blue-50); }

/* ---------- 13. 页脚 ---------- */
.wf-footer { background: var(--wf-blue-900); color: rgba(255,255,255,.82); margin-top: 24px; font-size: 13px; }
.wf-footer a { color: rgba(255,255,255,.72); }
.wf-footer a:hover { color: #fff; }
.wf-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; padding: 38px 0 30px; }
.wf-footer h4 { margin: 0 0 14px; font-size: 14px; color: #fff; font-weight: 600; }
.wf-footer li { list-style: none; margin-bottom: 9px; }
.wf-footer ul { margin: 0; padding: 0; }
.wf-footer-brand { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.wf-footer-brand .bi { color: #fff; }
.wf-footer-desc { line-height: 1.8; opacity: .68; max-width: 320px; }
.wf-footer-bar { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; text-align: center; font-size: 12px; opacity: .55; }

/* ---------- 14. 响应式降级（阶段 1 首页保底） ---------- */
@media (max-width: 1000px) {
    .wf-hero-in { grid-template-columns: 1fr; }
    .wf-cols { grid-template-columns: 1fr; }
    .wf-lib { grid-template-columns: repeat(2, 1fr); }
    .wf-art-grid, .wf-firm-grid { grid-template-columns: 1fr 1fr; }
    .wf-quick { grid-template-columns: repeat(2, 1fr); }
    .wf-nav { display: none; }
}


/* ============================================================
   阶段 1 修订（用户首验反馈）：链接化按钮颜色修复 + 高级感打磨 + 补齐区块
   ============================================================ */

/* —— 修复：a 标签按钮文字不可见（.wf-page a 继承色优先级压过单类按钮色） —— */
.wf-page a.wf-btn-primary { color: #fff; }
.wf-page a.wf-btn-primary:hover { color: #fff; }
.wf-page a.wf-btn-ghost, .wf-page a.wf-btn-line { color: var(--wf-blue-600); }
.wf-page a.wf-btn-ghost:hover, .wf-page a.wf-btn-line:hover { color: var(--wf-blue-700); }
.wf-page .wf-cta a.wf-btn-primary { color: var(--wf-blue-700); }
.wf-page .wf-cta a.wf-btn-primary:hover { color: var(--wf-blue-700); }

/* —— 高级感：hero 背景增加层次（低对比光斑 + 细网格，纯 CSS 无图） —— */
.wf-hero {
    background:
        radial-gradient(620px 300px at 82% -18%, rgba(1, 42, 144, .06), transparent 68%),
        radial-gradient(500px 260px at 8% 118%, rgba(1, 42, 144, .05), transparent 66%),
        linear-gradient(180deg, #edf2fb 0%, #f7f9fc 100%);
}
.wf-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(1,42,144,.022) 0 1px, transparent 1px 56px);
}
.wf-hero { position: relative; }
.wf-hero-in { position: relative; }

/* 标题字距与层级 */
.wf-sec-head h2 { letter-spacing: .5px; }
.wf-hero h2 { letter-spacing: .5px; }
.wf-stat-row b { font-size: 19px; letter-spacing: .3px; }

/* 搜索框聚焦光晕 */
.wf-search:focus-within { border-color: var(--wf-blue-500); box-shadow: 0 0 0 3px rgba(43, 87, 184, .12), var(--wf-shadow-up); }

/* 快捷条图标微动 */
.wf-quick a .bi { transition: transform .18s; }
.wf-quick a:hover .bi { transform: scale(1.08); }

/* 八库图标渐变底 */
.wf-lib a .bi { background: linear-gradient(135deg, var(--wf-blue-50), #e2ebf9); }

/* CTA 细纹理 */
.wf-cta { background: linear-gradient(135deg, #01124f, #01206e 58%, #012a90); position: relative; overflow: hidden; }
.wf-cta::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(58deg, rgba(255,255,255,.028) 0 1px, transparent 1px 34px); pointer-events: none; }

/* —— 咨询区数据 tabs（还原旧版三路数据切换） —— */
.wf-q-tabs { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--wf-line); background: #fafbfd; border-radius: 12px 12px 0 0; }
.wf-q-tabs button { border: none; background: none; font-size: 15px; color: var(--wf-text-2); padding: 0 16px; height: 46px; cursor: pointer; font-family: inherit; position: relative; }
.wf-q-tabs button:hover { color: var(--wf-blue-600); }
.wf-q-tabs button.on { color: var(--wf-blue-600); font-weight: 600; }
.wf-q-tabs button.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--wf-blue-600); }
.wf-q-tabs .wf-q-extra { margin-left: auto; font-size: 13px; color: var(--wf-text-3); padding-right: 8px; }
.wf-q-tabs .wf-q-extra:hover { color: var(--wf-blue-600); }
.wf-q-pane { display: none; }
.wf-q-pane.on { display: block; }

/* 排行卡双榜切换 */
.wf-rank-tabs { display: flex; gap: 14px; font-size: 13px; color: var(--wf-text-3); margin-bottom: 4px; }
.wf-rank-tabs button { border: none; background: none; font-size: 13px; color: var(--wf-text-3); cursor: pointer; font-family: inherit; padding: 0; }
.wf-rank-tabs button.on { color: var(--wf-blue-600); font-weight: 600; }
.wf-rank-pane { display: none; }
.wf-rank-pane.on { display: block; }

/* 普法子频道 chips */
.wf-sub-chips { display: inline-flex; gap: 8px; align-items: center; }
.wf-sub-chips a { font-size: 13px; color: var(--wf-text-3); padding: 2px 10px; border-radius: 999px; }
.wf-sub-chips a:hover { color: var(--wf-blue-600); background: var(--wf-blue-50); }

/* 文书区强化：免费标签 + 下载按钮 */
.wf-free-tag { flex-shrink: 0; font-size: 11px; color: var(--wf-warn); background: #fdf3e7; border-radius: 3px; padding: 1px 6px; }
.wf-dl-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border: 1px solid var(--wf-blue-100); border-radius: 6px; font-size: 13px; color: var(--wf-blue-600); }
.wf-dl-btn:hover { background: var(--wf-blue-50); border-color: var(--wf-blue-500); }

/* hero 推广位（还原旧 banner 能力） */
.wf-banner-slot { margin-top: 16px; border-radius: var(--wf-r-card); overflow: hidden; box-shadow: var(--wf-shadow); position: relative; }
.wf-banner-slot a { display: block; }
.wf-banner-slot img { width: 100%; height: 110px; object-fit: cover; display: block; }

/* 文章缩略图占位（空图不发出无效请求） */
.wf-art-ph { width: 100%; height: 150px; background: linear-gradient(135deg, var(--wf-blue-50), #e4ecf8); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); font-size: 26px; }


/* —— 阶段1修订2：全宽推广横幅（还原旧站大banner位）+ 侧卡合并分隔 —— */
.wf-banner-strip{margin-top:28px}
.wf-banner-strip a{display:block;border-radius:var(--wf-r-card);overflow:hidden;box-shadow:var(--wf-shadow)}
.wf-banner-strip img{width:100%;height:auto;display:block}
.wf-side-div{height:1px;background:var(--wf-line);margin:14px -20px}

/* —— 阶段1修订3：横幅回顶 + 广告位接入 + 排行独立双榜区 —— */
.wf-banner-strip{margin:20px auto 0;padding:0 20px}
.wf-banner-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--wf-r-card);box-shadow:var(--wf-shadow)}
.wf-banner-track a{scroll-snap-align:start;display:block}
.wf-rank-board{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wf-rank-board h3 i{color:var(--wf-blue-600);margin-right:4px;font-size:15px}
@media (max-width:1000px){.wf-rank-board{grid-template-columns:1fr}}

/* —— 右栏底部电话咨询速联卡（补齐双栏高度 + 转化位） —— */
.wf-hotline-card{background:linear-gradient(135deg,#01124f,#01206e 60%,#012a90);border-radius:var(--wf-r-card);color:#fff;padding:22px 22px 20px;position:relative;overflow:hidden}
.wf-hotline-card::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(58deg,rgba(255,255,255,.028) 0 1px,transparent 1px 34px);pointer-events:none}
.wf-hotline-tit{font-size:14px;opacity:.85;display:flex;align-items:center;gap:7px}
.wf-hotline-tit .bi{font-size:15px}
.wf-hotline-num{display:block;font-size:24px;font-weight:700;letter-spacing:1px;margin:8px 0 4px;font-variant-numeric:tabular-nums;color:#fff}
.wf-hotline-num:hover{color:var(--wf-blue-50)}
.wf-hotline-sub{font-size:12px;opacity:.6}

/* —— 阶段1修订4：整体背景层次——浅灰全局底 + 白卡浮起 ——
   全白页面下白卡只能靠阴影区分（平）；换浅灰底后内容卡自然浮起，
   深色卡（CTA/热线卡）对比更强；hero 渐变尾部与底色无缝衔接 */
.wf-page { background: var(--wf-bg); }
.wf-hero {
    background:
        radial-gradient(620px 300px at 82% -18%, rgba(1, 42, 144, .07), transparent 68%),
        radial-gradient(500px 260px at 8% 118%, rgba(1, 42, 144, .05), transparent 66%),
        linear-gradient(180deg, #e9f0fb 0%, var(--wf-bg) 100%);
}
/* 顶栏与页面同底色融合 */
.wf-topbar { background: #eef1f7; }
/* hero 下缘分隔线随底色减淡 */
.wf-hero { border-bottom-color: #e3e9f2; }

/* —— 阶段1修订5：消除 hero 色带断层（用户反馈网格突兀/上下分界线） ——
   横幅移顶后 hero 成了夹在浅灰之间的色带：删网格纹、删渐变底、删分界线，
   仅保留两团极淡光斑做氛围，整页背景无缝；hero 靠内容自身（大标题/搜索卡/统计卡）成立 */
.wf-hero::before { content: none; }
.wf-hero {
    background:
        radial-gradient(620px 300px at 82% -10%, rgba(1, 42, 144, .05), transparent 68%),
        radial-gradient(520px 280px at 6% 115%, rgba(1, 42, 144, .04), transparent 66%);
    border-bottom: none;
}

/* —— 阶段1修订6：窄窗口适配中间档 + 副文案加深（用户两反馈） ——
   原断点只有 1000px 一刀切，1000-1200 硬撑原列数、1000 下全变通栏巨卡=挤边感 */
/* 容器左右留白加大，内容离窗口边缘更有呼吸感 */
.wf-container { padding-left: 24px; padding-right: 24px; }

/* 副文案加深：太灰的 #98a1b3 → 可读的 #5a6478 */
.wf-quick span { color: #5a6478; }
.wf-lib span { color: #5a6478; }

/* 中间档 1150px：先收一列，避免硬撑 */
@media (max-width: 1180px) {
    .wf-quick { grid-template-columns: repeat(3, 1fr); }
    .wf-lib { grid-template-columns: repeat(3, 1fr); }
    .wf-art-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 窄档 760px：排行并排转单列、文章转单列 */
@media (max-width: 790px) {
    .wf-rank-board { grid-template-columns: 1fr; }
    .wf-art-grid { grid-template-columns: 1fr; }
    .wf-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
    .wf-search-tabs button { padding: 0 12px; font-size: 14px; }
    .wf-search button[type=submit] { padding: 0 18px; }
}

/* —— 顶部城市选择：悬停展开面板（还原旧站交互：热门省份+拼音分组，不再跳页） —— */
.wf-city-sel { position: relative; }
.wf-city { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.wf-city-panel { position: absolute; top: 100%; left: -12px; width: 560px; background: #fff; border: 1px solid var(--wf-line); border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow-up); padding: 16px 18px; display: none; z-index: 60; }
.wf-city-sel:hover .wf-city-panel { display: block; }
.wf-city-sel:hover .wf-city { color: var(--wf-blue-600); }
.wf-city-hot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--wf-line); margin-bottom: 12px; font-size: 13px; }
.wf-city-hot em { font-style: normal; color: var(--wf-text-3); margin-right: 2px; }
.wf-city-hot a { padding: 2px 10px; border-radius: 999px; background: var(--wf-blue-50); color: var(--wf-blue-600); }
.wf-city-hot a:hover { background: var(--wf-blue-100); }
.wf-city-alpha { max-height: 300px; overflow-y: auto; }
.wf-city-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--wf-line); font-size: 13px; }
.wf-city-row:last-child { border-bottom: none; }
.wf-city-row strong { flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; background: var(--wf-blue-50); color: var(--wf-blue-600); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.wf-city-list { display: flex; flex-wrap: wrap; gap: 2px 0; }
.wf-city-list a { padding: 2px 9px; color: var(--wf-text-2); white-space: nowrap; }
.wf-city-list a:hover { color: var(--wf-blue-600); }
.wf-city-foot { padding-top: 12px; font-size: 13px; }
.wf-city-foot a { color: var(--wf-blue-600); }

/* —— 阶段2：登录/注册 轻头转化页 + 表单组件令牌 —— */
.wf-auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.wf-auth-top { background: #fff; border-bottom: 1px solid var(--wf-line); }
.wf-auth-top-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wf-auth-back { font-size: 14px; color: var(--wf-text-2); display: inline-flex; align-items: center; gap: 5px; }
.wf-auth-back:hover { color: var(--wf-blue-600); }
.wf-auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }

.wf-auth { display: grid; grid-template-columns: 400px 440px; border-radius: 16px; overflow: hidden; box-shadow: var(--wf-shadow-up); max-width: 840px; }
.wf-auth-brand { background: linear-gradient(160deg, #01124f, #01206e 55%, #012a90); color: #fff; padding: 52px 44px; display: flex; flex-direction: column; }
.wf-auth-brand h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.45; font-weight: 700; }
.wf-auth-brand > p { margin: 0 0 40px; font-size: 14px; opacity: .78; line-height: 1.8; }
.wf-auth-stats { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.wf-auth-stats b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.wf-auth-stats span { font-size: 12px; opacity: .62; }
.wf-auth-main { background: #fff; padding: 44px 48px; }
.wf-auth-main h1 { margin: 0 0 18px; font-size: 22px; }

.wf-auth-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--wf-line); margin-bottom: 22px; }
.wf-auth-tabs button { border: none; background: none; font-size: 15px; color: var(--wf-text-3); padding: 0 2px 12px; cursor: pointer; font-family: inherit; position: relative; }
.wf-auth-tabs button.on { color: var(--wf-blue-600); font-weight: 600; }
.wf-auth-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wf-blue-600); }
.wf-auth-pane { display: none; }
.wf-auth-pane.on { display: block; }

/* 表单组件令牌（全站表单继承） */
.wf-form .wf-field { margin-bottom: 16px; }
.wf-label { display: block; font-size: 14px; margin-bottom: 7px; color: var(--wf-text); }
.wf-label em { font-style: normal; font-size: 12px; color: var(--wf-text-3); margin-left: 4px; }
.wf-req { color: var(--wf-danger); font-style: normal; }
.wf-input-wrap { position: relative; }
.wf-input { display: block; width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid var(--wf-line); border-radius: var(--wf-r-btn); font-size: 14px; font-family: inherit; color: var(--wf-text); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.wf-input::placeholder { color: var(--wf-text-3); }
.wf-input:focus { border-color: var(--wf-blue-500); box-shadow: 0 0 0 3px rgba(43, 87, 184, .12); }
.wf-input-wrap .wf-input { padding-right: 104px; }
.wf-eye { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: none; background: none; color: var(--wf-text-3); cursor: pointer; font-size: 16px; }
.wf-eye:hover { color: var(--wf-blue-600); }
.wf-sms-btn { position: absolute; top: 6px; right: 6px; height: 32px; padding: 0 12px; border: none; border-radius: 6px; background: var(--wf-blue-50); color: var(--wf-blue-600); font-size: 13px; cursor: pointer; font-family: inherit; }
.wf-sms-btn:disabled { color: var(--wf-text-3); cursor: default; }
.wf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wf-text-2); margin: 4px 0 16px; cursor: pointer; }
.wf-check input { width: 15px; height: 15px; accent-color: var(--wf-blue-600); }
.wf-check a { color: var(--wf-blue-600); }
.wf-err { margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; background: #fdf0f0; border: 1px solid #f5d5d5; color: var(--wf-danger); font-size: 13px; }
.wf-btn-block { width: 100%; height: 46px; font-size: 16px; letter-spacing: 6px; }

.wf-auth-alt { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--wf-line); }
.wf-auth-alt .wf-btn-block { letter-spacing: 2px; }
.wf-auth-swap { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--wf-text-3); }
.wf-auth-swap a { color: var(--wf-blue-600); }

.wf-field-collapse { margin-bottom: 6px; }
.wf-collapse-toggle { border: none; background: none; color: var(--wf-text-3); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }
.wf-collapse-toggle:hover { color: var(--wf-blue-600); }
.wf-collapse-box { margin-top: 10px; }

.wf-auth-foot { text-align: center; padding: 22px 0 26px; font-size: 12px; color: var(--wf-text-3); border-top: 1px solid var(--wf-line); background: #fff; }
.wf-auth-foot a { margin: 0 10px; }
.wf-auth-foot a:hover { color: var(--wf-blue-600); }
.wf-auth-foot span { margin-left: 12px; }

@media (max-width: 900px) {
    .wf-auth { grid-template-columns: 1fr; max-width: 460px; }
    .wf-auth-brand { padding: 34px 32px 28px; }
    .wf-auth-brand h2 { font-size: 22px; }
    .wf-auth-stats { flex-direction: row; gap: 30px; margin-top: 18px; }
    .wf-auth-main { padding: 32px 28px; }
}

/* 三条身份线互链（会员/律师/律所） */
.wf-auth-roles { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--wf-text-3); }
.wf-auth-roles a { margin: 0 8px; color: var(--wf-text-2); }
.wf-auth-roles a:hover { color: var(--wf-blue-600); }


/* 底部身份条（浅蓝底横条：比小灰字醒目、比胶囊组克制；一级切换只留登录方式） */
.wf-role-strip { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; padding: 11px 14px; background: var(--wf-blue-50); border-radius: 8px; font-size: 13px; color: var(--wf-text-2); }
.wf-role-strip a { display: inline-flex; align-items: center; gap: 5px; color: var(--wf-blue-600); font-weight: 500; }
.wf-role-strip a:hover { text-decoration: underline; }
.wf-role-strip .bi { font-size: 13px; }

/* —— 批A：会员中心线（wf_user 布局 + 用户卡 + 列表行/状态徽章/空态组件） —— */
.wf-userpage { min-height: 100vh; display: flex; flex-direction: column; }
.wf-utop { background: #fff; border-bottom: 1px solid var(--wf-line); position: sticky; top: 0; z-index: 50; }
.wf-utop-in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.wf-utop-left { display: flex; align-items: center; gap: 14px; }
.wf-utop-crumb { font-size: 13px; color: var(--wf-text-3); border-left: 1px solid var(--wf-line); padding-left: 14px; }
.wf-utop-right { display: flex; align-items: center; gap: 20px; }
.wf-bell { position: relative; font-size: 18px; color: var(--wf-text-2); }
.wf-bell:hover { color: var(--wf-blue-600); }
.wf-bell-dot { position: absolute; top: -7px; right: -12px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--wf-danger); color: #fff; font-size: 11px; font-style: normal; display: flex; align-items: center; justify-content: center; line-height: 1; }
.wf-utop-user { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wf-utop-user img, .wf-utop-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--wf-blue-50); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); }
.wf-utop-user b { font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-utop-out { font-size: 13px; color: var(--wf-text-3); display: inline-flex; align-items: center; gap: 4px; }
.wf-utop-out:hover { color: var(--wf-danger); }

.wf-user-body { flex: 1; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; padding-top: 24px; padding-bottom: 40px; }
.wf-sidenav { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 10px 8px; position: sticky; top: 84px; }
.wf-sidenav-tit { font-size: 12px; color: var(--wf-text-3); padding: 12px 12px 6px; }
.wf-sidenav a { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--wf-text-2); }
.wf-sidenav a .bi { font-size: 15px; color: var(--wf-text-3); }
.wf-sidenav a:hover { background: var(--wf-bg); color: var(--wf-blue-600); }
.wf-sidenav a.on { background: var(--wf-blue-50); color: var(--wf-blue-600); font-weight: 600; }
.wf-sidenav a.on .bi { color: var(--wf-blue-600); }

/* 通用卡片/卡片头（会员线内容容器） */
.wf-card { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 20px 22px; }
.wf-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.wf-card-head b { font-size: 16px; }
.wf-card-head a { font-size: 12px; color: var(--wf-text-3); }
.wf-card-head a:hover { color: var(--wf-blue-600); }

/* 用户卡 */
.wf-ucard { margin-bottom: 16px; }
.wf-ucard-main { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--wf-line); }
.wf-ucard-ava { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wf-ucard-ava-ph { background: var(--wf-blue-50); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); font-size: 26px; }
.wf-ucard-info { flex: 1; }
.wf-ucard-name { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.wf-ucard-score { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wf-text-3); }
.wf-progress { width: 140px; height: 6px; border-radius: 3px; background: var(--wf-line); overflow: hidden; }
.wf-progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--wf-blue-500), var(--wf-blue-600)); }
.wf-ucard-score b { color: var(--wf-blue-600); font-variant-numeric: tabular-nums; }
.wf-ucard-score a { color: var(--wf-blue-600); }
.wf-ucard-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 14px; }
.wf-ucard-stats a { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wf-ucard-stats b { font-size: 21px; font-variant-numeric: tabular-nums; }
.wf-ucard-stats span { font-size: 12px; color: var(--wf-text-3); }
.wf-ucard-stats a:hover b { color: var(--wf-blue-600); }

/* 快捷入口条 */
.wf-uc-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.wf-uc-quick a { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); height: 48px; font-size: 14px; }
.wf-uc-quick a:hover { box-shadow: var(--wf-shadow-up); transform: translateY(-1px); }
.wf-uc-quick .bi { color: var(--wf-blue-600); }

/* 双栏面板 */
.wf-uc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* 列表行组件（资产页复用） */
.wf-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--wf-line); font-size: 14px; }
.wf-row:last-child { border-bottom: none; }
a.wf-row:hover .wf-row-tit { color: var(--wf-blue-600); }
.wf-row-tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-row-meta { flex-shrink: 0; font-size: 12px; color: var(--wf-text-3); }

/* 状态徽章（0待审/1通过/2拒绝 等，语义色仅状态） */
.wf-status { flex-shrink: 0; font-size: 12px; padding: 2px 9px; border-radius: 4px; }
.wf-status-0 { color: var(--wf-warn); background: #fdf3e7; }
.wf-status-1 { color: var(--wf-ok); background: #e9f7ef; }
.wf-status-2 { color: var(--wf-danger); background: #fdf0f0; }

/* 积分数字 */
.wf-score-num { font-variant-numeric: tabular-nums; color: var(--wf-text-3); }
.wf-score-num.plus { color: var(--wf-ok); }

/* 空态组件 */
.wf-empty { padding: 34px 0 26px; text-align: center; color: var(--wf-text-3); }
.wf-empty .bi { font-size: 34px; color: var(--wf-line); }
.wf-empty p { margin: 10px 0 14px; font-size: 13px; }

@media (max-width: 1000px) {
    .wf-user-body { grid-template-columns: 1fr; }
    .wf-sidenav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
    .wf-sidenav-tit { display: none; }
    .wf-sidenav a { height: 34px; padding: 0 12px; background: var(--wf-bg); border-radius: 999px; }
    .wf-uc-cols { grid-template-columns: 1fr; }
    .wf-uc-quick { grid-template-columns: repeat(2, 1fr); }
    .wf-utop-crumb { display: none; }
}

/* —— 批A修订（用户三反馈）：容器收缩根因修复 + 加宽 + 面板等高 + 红点hidden坑 —— */
/* ① wf-user-body 收缩根因：.wf-container 的 margin:0 auto 打败 flex 交叉轴 stretch
  + flex:1 的 basis:0% 使宽度收缩为内容宽——显式满宽修复 */
.wf-user-body { width: 100%; box-sizing: border-box; }
/* ② 会员线容器加宽：1200 → 1440（控制台型页面标准宽，大屏留白显著减少） */
.wf-userpage .wf-container { max-width: 1440px; }
/* ③ 双栏面板等高对齐（align-items:start 会让两卡高低不齐） */
.wf-uc-cols { align-items: stretch; }
.wf-uc-panel { display: flex; flex-direction: column; }
.wf-uc-panel .wf-empty { margin: auto 0; }
/* ④ 铃铛红点 hidden 坑：display:flex 覆盖了 [hidden] 的 UA display:none，
  无未读时渲染成空红团——显式恢复隐藏（组件通例：凡自定义 display 的元素必须带 [hidden] 兜底） */
.wf-bell-dot[hidden] { display: none; }

/* —— 批B：资产四页组件 —— */
/* 提问块 + 最新回答预览 */
.wf-qblock { border-bottom: 1px dashed var(--wf-line); }
.wf-qblock:last-of-type { border-bottom: none; }
.wf-ans-preview { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 12px; padding: 10px 12px; background: var(--wf-bg); border-radius: 8px; }
.wf-ans-preview img, .wf-ans-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--wf-blue-50); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); font-size: 14px; }
.wf-ans-preview b { font-size: 12px; color: var(--wf-text-2); font-weight: 500; }
.wf-best { font-size: 11px; color: var(--wf-warn); background: #fdf3e7; border-radius: 3px; padding: 0 5px; font-style: normal; }
.wf-ans-preview p { margin: 3px 0 0; font-size: 12px; color: var(--wf-text-3); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 加急标签 */
.wf-urgent { font-style: normal; font-size: 11px; color: #fff; background: var(--wf-danger); border-radius: 3px; padding: 1px 5px; margin-right: 6px; vertical-align: 2px; }
/* 状态筛选 chips */
.wf-filter-chips { display: flex; gap: 8px; margin-bottom: 14px; }
.wf-filter-chips a { padding: 5px 14px; border-radius: 999px; background: var(--wf-bg); color: var(--wf-text-2); font-size: 13px; }
.wf-filter-chips a:hover { color: var(--wf-blue-600); }
.wf-filter-chips a.on { background: var(--wf-blue-600); color: #fff; font-weight: 500; }
/* 订单行 */
.wf-order-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-order-amt { font-variant-numeric: tabular-nums; font-size: 16px; margin-right: 4px; }
/* 优惠券 */
.wf-cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.wf-cp-stat { text-align: center; padding: 18px 0; }
.wf-cp-stat b { display: block; font-size: 24px; color: var(--wf-blue-600); font-variant-numeric: tabular-nums; }
.wf-cp-stat span { font-size: 12px; color: var(--wf-text-3); }
.wf-cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wf-coupon { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--wf-line); }
.wf-coupon-val { width: 110px; background: linear-gradient(160deg, var(--wf-blue-600), var(--wf-blue-700)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 8px; }
.wf-coupon-val b { font-size: 22px; font-variant-numeric: tabular-nums; }
.wf-coupon-val span { font-size: 11px; opacity: .75; }
.wf-coupon-info { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.wf-coupon-info b { font-size: 14px; }
.wf-coupon-info p { margin: 0; font-size: 12px; color: var(--wf-text-3); }
.wf-coupon-info em { font-style: normal; font-size: 12px; color: var(--wf-blue-600); margin-top: auto; }
.wf-coupon.off { opacity: .55; filter: grayscale(.4); }
.wf-coupon.off .wf-coupon-info em { color: var(--wf-text-3); }
/* 框架分页重样式（{$page} 输出的 Bootstrap ul.pagination） */
.wf-usermain .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 18px 0 4px; justify-content: center; }
.wf-usermain .pagination li a, .wf-usermain .pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px; background: #fff; border: 1px solid var(--wf-line); color: var(--wf-text-2); font-size: 13px; }
.wf-usermain .pagination li.active span { background: var(--wf-blue-600); border-color: var(--wf-blue-600); color: #fff; }
.wf-usermain .pagination li a:hover { border-color: var(--wf-blue-500); color: var(--wf-blue-600); }
.wf-usermain .pagination li.disabled span { color: var(--wf-text-3); background: var(--wf-bg); }
@media (max-width: 1000px) { .wf-cp-grid { grid-template-columns: 1fr; } }

/* —— 批C：资料页（左右结构表单 wf-form-h + 双TAB + 头像/绑定区） —— */
.wf-pf-tabs { margin-bottom: 20px; }
.wf-pf-pane { display: none; }
.wf-pf-pane.on { display: block; }
.wf-form-h { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 26px 28px; margin-bottom: 18px; }
.wf-frow { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.wf-flabel { font-size: 14px; color: var(--wf-text-2); line-height: 44px; text-align: right; }
.wf-fcell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wf-fhint { font-size: 12px; color: var(--wf-text-3); }
.wf-textarea { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; line-height: 1.6; }
.wf-select { appearance: auto; }
.wf-pf-ava { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.wf-pf-ava-ph { background: var(--wf-blue-50); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); font-size: 26px; }
.wf-inline-edit { flex-direction: row; align-items: center; gap: 10px; }
.wf-inline-edit .wf-input { flex: 1; }
.wf-inline-edit input[readonly] { background: var(--wf-bg); color: var(--wf-text-2); }
.wf-pf-bind { background: #fff; border-radius: var(--wf-r-card); box-shadow: var(--wf-shadow); padding: 26px 28px; }
.wf-pf-bind .wf-frow:last-child { margin-bottom: 0; }
@media (max-width: 790px) {
    .wf-frow { grid-template-columns: 1fr; }
    .wf-flabel { text-align: left; line-height: 1.6; }
}

/* —— 批D：积分/邀请/消息组件 —— */
.wf-score-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.wf-score-balance span, .wf-score-balance em { font-size: 12px; color: var(--wf-text-3); font-style: normal; display: block; }
.wf-score-balance b { font-size: 34px; font-weight: 700; color: var(--wf-blue-600); font-variant-numeric: tabular-nums; line-height: 1.3; }
.wf-score-exchange { text-align: right; }
.wf-score-exchange p { margin: 0 0 8px; font-size: 13px; color: var(--wf-text-2); }
.wf-score-exchange .wf-fhint { display: block; margin-top: 6px; }
.wf-score-thead, .wf-score-tr { display: grid; grid-template-columns: 1fr 90px 90px 150px; gap: 10px; align-items: center; }
.wf-score-thead { font-size: 12px; color: var(--wf-text-3); padding: 8px 0; border-bottom: 1px solid var(--wf-line); }
.wf-score-thead span:nth-child(n+2), .wf-score-tr > *:nth-child(n+2) { text-align: right; }
.wf-score-tr { padding: 12px 0; border-bottom: 1px dashed var(--wf-line); font-size: 14px; }
.wf-score-tr:last-child { border-bottom: none; }
.wf-inv-card { display: flex; gap: 30px; align-items: center; margin-bottom: 16px; }
.wf-inv-left { flex: 1; }
.wf-inv-left h2 { margin: 0 0 6px; font-size: 19px; }
.wf-inv-left > p { margin: 0 0 14px; font-size: 13px; color: var(--wf-text-3); }
.wf-inv-link { display: flex; gap: 10px; margin-bottom: 8px; }
.wf-inv-link input { flex: 1; height: 38px; padding: 0 12px; border: 1px dashed var(--wf-blue-100); border-radius: 8px; background: var(--wf-blue-50); color: var(--wf-blue-700); font-size: 13px; outline: none; min-width: 0; }
.wf-inv-stats { display: flex; gap: 28px; flex-shrink: 0; }
.wf-inv-stats div { text-align: center; }
.wf-inv-stats b { display: block; font-size: 24px; color: var(--wf-blue-600); font-variant-numeric: tabular-nums; }
.wf-inv-stats span { font-size: 12px; color: var(--wf-text-3); }
.wf-msg { padding: 14px 0; border-bottom: 1px dashed var(--wf-line); }
.wf-msg:last-of-type { border-bottom: none; }
.wf-msg-row { display: flex; align-items: center; gap: 10px; }
.wf-msg-row b { font-size: 14px; }
.wf-msg.read .wf-msg-row b { color: var(--wf-text-3); font-weight: 500; }
.wf-msg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wf-danger); flex-shrink: 0; }
.wf-msg-row .wf-btn { margin-left: auto; }
.wf-msg-row .wf-row-meta { flex-shrink: 0; }
.wf-msg-body { margin: 6px 0 0 17px; font-size: 13px; color: var(--wf-text-3); line-height: 1.7; }
.wf-msg-headbar { align-items: center; }
@media (max-width: 1000px) {
    .wf-score-top { flex-direction: column; align-items: stretch; }
    .wf-score-exchange { text-align: left; }
    .wf-score-thead, .wf-score-tr { grid-template-columns: 1fr 70px 70px; }
    .wf-score-thead span:nth-child(4), .wf-score-tr > span:nth-child(5), .wf-score-tr > .wf-row-meta { display: none; }
    .wf-inv-card { flex-direction: column; align-items: stretch; }
}

.wf-claim-row { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.wf-claim-row i { font-style: normal; font-size: 11px; color: var(--wf-text-3); }
.wf-claimed { color: var(--wf-ok); font-size: 12px; }

/* —— 批F：控件与通用反馈组件（券红配色/按钮收窄/下拉美化/确认弹窗/toast/日历） —— */
/* 优惠券回归暖红票券色（对齐旧 PC 红系） */
.wf-coupon-val { background: linear-gradient(160deg, #e63535, #c8161d); }
.wf-coupon.off .wf-coupon-val { background: linear-gradient(160deg, #b9b9b9, #9a9a9a); }
/* 表单按钮不拉伸满行（wf-fcell 为纵向 flex，按钮默认被拉满） */
.wf-fcell .wf-btn { align-self: flex-start; }
/* 原生 select 美化：去系统外观 + 自定义箭头 */
.wf-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%2398a1b3'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
/* 确认弹窗 */
.wf-dialog-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .16s; }
.wf-dialog-mask.show { opacity: 1; }
.wf-dialog { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(1, 42, 144, .18); width: 400px; max-width: calc(100vw - 48px); padding: 26px 28px 22px; transform: translateY(10px); transition: transform .16s; }
.wf-dialog-mask.show .wf-dialog { transform: translateY(0); }
.wf-dialog h3 { margin: 0 0 10px; font-size: 17px; }
.wf-dialog p { margin: 0 0 22px; font-size: 14px; color: var(--wf-text-2); line-height: 1.7; }
.wf-dialog p b { color: var(--wf-blue-600); }
.wf-dialog-btns { display: flex; gap: 12px; justify-content: flex-end; }
/* toast 顶部提示条（3s 自动消失） */
.wf-toast { position: fixed; top: 24px; left: 50%; transform: translate(-50%, -80px); z-index: 210; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; box-shadow: 0 8px 30px rgba(1, 42, 144, .16); padding: 11px 22px; font-size: 14px; transition: transform .22s; }
.wf-toast.show { transform: translate(-50%, 0); }
.wf-toast .bi { font-size: 16px; }
.wf-toast-success .bi { color: var(--wf-ok); }
.wf-toast-error .bi { color: var(--wf-danger); }
.wf-toast-info .bi { color: var(--wf-blue-600); }
/* 轻量日历 */
.wf-dp { position: absolute; z-index: 190; background: #fff; border-radius: 12px; box-shadow: var(--wf-shadow-up); padding: 12px; display: none; width: 252px; }
.wf-dp.show { display: block; }
.wf-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.wf-dp-grid > b { grid-column: 2 / 7; font-size: 13px; line-height: 28px; }
.wf-dp-week { font-size: 11px; color: var(--wf-text-3); line-height: 22px; }
.wf-dp-day { height: 28px; border: none; background: none; border-radius: 6px; font-size: 12px; color: var(--wf-text); cursor: pointer; font-family: inherit; }
.wf-dp-day:hover { background: var(--wf-blue-50); color: var(--wf-blue-600); }
.wf-dp-day.on { background: var(--wf-blue-600); color: #fff; }
.wf-dp-day.wf-dp-other { font-size: 15px; color: var(--wf-text-3); }

/* —— 批G：优惠券票券化（橙红渐变 + 打孔缺口 + 撕票虚线 + 斜纹，用户定调） —— */
.wf-coupon-val {
    background: linear-gradient(150deg, #ff9a5c 0%, #ff6a35 42%, #ef3b20 100%);
    position: relative;
    overflow: hidden;
}
/* 面额区斜纹质感（票券经典装饰） */
.wf-coupon-val::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 6px, transparent 6px 14px);
}
.wf-coupon-val > * { position: relative; z-index: 1; }
/* 撕票线：面额区右缘竖虚线 */
.wf-coupon-val { border-right: 2px dashed rgba(255,255,255,.55); }
/* 打孔缺口：面额/信息分界处上下两枚半圆（白卡底色穿透，票券撕口感） */
.wf-coupon { position: relative; }
.wf-coupon::before, .wf-coupon::after {
    content: ""; position: absolute; left: 110px; transform: translateX(-50%);
    width: 16px; height: 16px; border-radius: 50%; background: #fff; z-index: 2;
    box-shadow: inset 0 1px 2px rgba(1,42,144,.08);
}
.wf-coupon::before { top: -9px; }
.wf-coupon::after { bottom: -9px; }
/* 过期券灰化（覆盖红渐变） */
.wf-coupon.off .wf-coupon-val { background: linear-gradient(150deg, #c3c3c3, #9a9a9a); border-right-color: rgba(255,255,255,.55); }
/* 领取按钮配套暖色（仅券卡片上下文，不动全局主按钮） */
.wf-coupon .wf-btn-primary { background: linear-gradient(135deg, #ff7a3d, #ef3b20); }
.wf-coupon .wf-btn-primary:hover { background: linear-gradient(135deg, #ff6a2d, #de2f15); }
/* 面额数字排版（¥小 大额） */
.wf-coupon-val b { font-size: 24px; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.wf-coupon-val b::before { content: "¥"; font-size: 13px; font-weight: 500; margin-right: 1px; opacity: .9; }

/* 折扣/免单面额排版（¥ 前缀仅满减券） */
.wf-coupon-val b.wf-val-discount::before { content: none; }
.wf-coupon-val b.wf-val-discount { font-size: 21px; }
.wf-coupon-val b.wf-val-discount i { font-style: normal; font-size: 13px; margin-left: 2px; }

/* 券状态角标（右上角，过期/已使用显眼标识） */
.wf-coupon { overflow: visible; }
.wf-cp-badge { position: absolute; top: -7px; right: -6px; z-index: 3; font-size: 11px; padding: 3px 10px; border-radius: 999px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.wf-cp-badge.expired { background: linear-gradient(135deg, #9aa3b2, #7b8494); }
.wf-cp-badge.used { background: linear-gradient(135deg, #c3c3c3, #9a9a9a); }

/* —— 批F：详情页（问答/委托）+ 附件页 —— */
.wf-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wf-text-3); padding-top: 20px; padding-bottom: 0; }
.wf-crumbs a:hover { color: var(--wf-blue-600); }
.wf-crumbs .bi { font-size: 10px; }
.wf-detail-cols { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; padding-top: 0; padding-bottom: 40px; }
.wf-detail-main > .wf-card + .wf-card { margin-top: 16px; }
/* 问题卡 */
.wf-qd-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wf-qd-cat { font-size: 12px; color: var(--wf-blue-600); background: var(--wf-blue-50); border-radius: 4px; padding: 2px 9px; }
.wf-qd-loc { font-size: 12px; color: var(--wf-text-3); display: inline-flex; align-items: center; gap: 3px; }
.wf-qd-title { margin: 0 0 12px; font-size: 24px; line-height: 1.45; }
.wf-qd-meta { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--wf-text-3); padding-bottom: 14px; border-bottom: 1px solid var(--wf-line); flex-wrap: wrap; }
.wf-qd-meta .bi { margin-right: 3px; }
.wf-qd-toentrust { color: var(--wf-blue-600); display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.wf-qd-body { padding-top: 16px; font-size: 15px; line-height: 1.9; color: var(--wf-text); word-break: break-word; }
/* 回答卡 */
.wf-ans-card { position: relative; padding: 18px 0; border-bottom: 1px dashed var(--wf-line); }
.wf-ans-card:last-child { border-bottom: none; }
.wf-ans-best { position: absolute; top: 18px; right: 0; font-size: 12px; color: var(--wf-warn); background: #fdf3e7; padding: 3px 10px; border-radius: 4px; }
.wf-ans-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wf-ans-head img, .wf-ans-ava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--wf-blue-50); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); }
.wf-ans-head b { font-size: 14px; display: block; }
.wf-ans-head .wf-btn { margin-left: auto; }
.wf-ans-body { font-size: 14px; line-height: 1.9; color: var(--wf-text); }
.wf-ans-foot { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--wf-text-3); }
.wf-ans-card.best .wf-ans-body { background: #fffdf8; border-radius: 8px; padding: 12px 14px; border: 1px solid #f7ecd9; }
/* 委托详情 */
.wf-entrust-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wf-entrust-cta h3 { margin: 0 0 4px; font-size: 17px; }
.wf-entrust-cta p { margin: 0; font-size: 13px; color: var(--wf-text-3); }
.wf-entrust-tips p { display: flex; gap: 8px; font-size: 13px; color: var(--wf-text-2); line-height: 1.7; margin: 0 0 12px; }
.wf-entrust-tips .bi { color: var(--wf-blue-600); flex-shrink: 0; }
/* 附件页 */
.wf-files-loading { text-align: center; padding: 30px 0; color: var(--wf-text-3); font-size: 13px; }
.wf-spin { animation: wf-spin 1s linear infinite; display: inline-block; }
@keyframes wf-spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .wf-detail-cols { grid-template-columns: 1fr; } }

/* —— 批G：发起提问 + 发布委托 —— */
/* 提问页 */
.wf-ask-hero { text-align: center; padding: 0 0 24px; border-bottom: 1px solid var(--wf-line); margin-bottom: 24px; }
.wf-ask-hero h1 { font-size: 28px; margin: 0 0 8px; }
.wf-ask-hero p { font-size: 14px; color: var(--wf-text-3); margin: 0; }
.wf-ask-tip { display: flex; gap: 12px; align-items: flex-start; background: var(--wf-blue-50); border-radius: 10px; padding: 16px 18px; margin-bottom: 24px; }
.wf-ask-tip .bi { font-size: 22px; color: var(--wf-blue-600); flex-shrink: 0; }
.wf-ask-tip p { margin: 0; font-size: 13px; color: var(--wf-text-2); line-height: 1.8; }
.wf-ask-target { display: flex; align-items: center; gap: 12px; background: #fff8f0; border: 1px solid #f5e0c8; border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; }
.wf-ask-target img, .wf-ask-target-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--wf-blue-50); display: flex; align-items: center; justify-content: center; color: var(--wf-blue-500); font-size: 20px; flex-shrink: 0; }
.wf-ask-target div { flex: 1; font-size: 14px; line-height: 1.7; }
.wf-ask-target b { color: var(--wf-blue-600); }
.wf-ask-fee { font-size: 20px; color: var(--wf-danger); }
.wf-ask-cancel { font-size: 13px; color: var(--wf-blue-600); flex-shrink: 0; }
.wf-ask-textarea { width: 100%; box-sizing: border-box; min-height: 200px; padding: 18px 20px; border: 1px solid var(--wf-line); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--wf-text); background: #fafbfd; outline: none; resize: vertical; line-height: 1.8; }
.wf-ask-textarea:focus { border-color: var(--wf-blue-500); box-shadow: 0 0 0 3px rgba(43, 87, 184, .1); background: #fff; }
.wf-ask-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wf-text-3); margin: 12px 0 18px; }
.wf-ask-meta .bi { color: var(--wf-blue-500); }
.wf-ask-submit { width: 100%; height: 48px; font-size: 16px; letter-spacing: 4px; }
.wf-ask-count { display: block; text-align: right; font-size: 12px; color: var(--wf-text-3); margin-top: 8px; }
.wf-ask-count em { font-style: normal; color: var(--wf-blue-600); font-weight: 600; }

/* 发布委托 */
.wf-editor-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.wf-editor-toolbar button { width: 32px; height: 32px; border: 1px solid var(--wf-line); border-radius: 6px; background: #fff; color: var(--wf-text-2); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.wf-editor-toolbar button:hover { border-color: var(--wf-blue-500); color: var(--wf-blue-600); }
.wf-editor { min-height: 220px; padding: 16px 18px; border: 1px solid var(--wf-line); border-radius: 10px; font-size: 14px; line-height: 1.8; color: var(--wf-text); background: #fafbfd; outline: none; overflow-y: auto; }
.wf-editor:focus { border-color: var(--wf-blue-500); box-shadow: 0 0 0 3px rgba(43, 87, 184, .1); background: #fff; }
.wf-editor:empty::before { content: attr(data-placeholder); color: var(--wf-text-3); pointer-events: none; }
.wf-editor h3 { font-size: 16px; font-weight: 700; margin: 12px 0 6px; }
.wf-entrust-privacy { display: flex; align-items: center; gap: 8px; background: #fff8f0; border: 1px solid #f5e0c8; border-radius: 8px; padding: 12px 16px; font-size: 12px; color: var(--wf-text-2); margin-top: 18px; }
.wf-entrust-privacy .bi { color: var(--wf-warn); font-size: 16px; }
@media (max-width: 1000px) {
    .wf-ask-target { flex-direction: column; text-align: center; }
}