:root {

  --primary: #1d4ed8;

  --primary-dark: #14318f;

  --navy: #0f2747;

  --gold: #c08a2d;

  --bg: #f4f6f9;

  --card: #ffffff;

  --text: #16202e;

  --muted: #8a93a3;

  --buy: #d9822b;

  --sell: #1d6fb8;

  --coop: #1d4ed8;

  --border: #e8ebf0;

}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; height: 100%; }

body {

  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  background: #eef1f5; color: var(--text); font-size: 14px;

}

.hidden { display: none !important; }



/* 登录门 */

.gate { position: fixed; inset: 0; background: linear-gradient(160deg, #1d4ed8, #0f2747); display: flex; align-items: center; justify-content: center; z-index: 50; }

.gate-card { background: #fff; border-radius: 16px; padding: 32px 28px; width: 80%; max-width: 320px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.2); }

.gate-logo { font-size: 22px; font-weight: 700; color: var(--primary); }

.gate-sub { color: var(--muted); margin: 6px 0 22px; font-size: 13px; }

.gate-admin { display: block; margin-top: 14px; color: var(--coop); font-size: 13px; text-decoration: none; }

.gate-tip { margin-top: 14px; color: var(--muted); font-size: 11px; }

.btn-wechat { background: #07c160; color: #fff; margin-top: 10px; }

.btn-wechat:hover { background: #06ad56; }



/* 布局 */

.app { display: flex; flex-direction: column; height: var(--app-h, 100vh); max-width: 480px; margin: 0 auto; background: var(--bg); box-shadow: 0 0 24px rgba(0,0,0,.08); }

.topbar { height: 48px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; position: sticky; top: 0; z-index: 10; }

.top-back { position: absolute; left: 4px; top: 0; height: 48px; width: 44px; border: none; background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }

.view { flex: 1; overflow-y: auto; padding: 12px 12px 70px; }

/* 安全区补偿在第 3 节 .tabbar 里统一做（height 用 calc(56px + --sa-b)），这里不再重复加 */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: #fff; border-top: 1px solid var(--border); display: flex; z-index: 10; max-width: 480px; margin: 0 auto; }

.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; gap: 2px; }

.tab span { font-size: 20px; }

.tab.active { color: var(--primary); }

.tab span svg { width: 22px; height: 22px; display: block; }

.tab-fab svg { width: 24px; height: 24px; display: block; }

/* 中间发布按钮（嵌入 tabbar 居中） */

.tab-fab { position: relative; top: -9px; width: 48px !important; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(29,78,216,.35); display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; cursor: pointer; flex-shrink: 0; margin: 0 16px; overflow: visible; }

.tab-fab:active { transform: scale(.92); }

.tab-fab label { display: none; }

/* 动态光圈：呼吸光晕 + 向外扩散的声波环 */

.tab-fab::before {

  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1;

  pointer-events: none; animation: fabGlow 2s ease-out infinite;

}

.tab-fab::after {

  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1;

  border: 2px solid rgba(29,78,216,.55); pointer-events: none; animation: fabPing 2s ease-out infinite;

}

@keyframes fabGlow {

  0%   { box-shadow: 0 0 0 0 rgba(29,78,216,.45); }

  70%  { box-shadow: 0 0 0 12px rgba(29,78,216,0); }

  100% { box-shadow: 0 0 0 0 rgba(29,78,216,0); }

}

@keyframes fabPing {

  0%   { transform: scale(1);   opacity: .7; }

  100% { transform: scale(1.9); opacity: 0; }

}

.fab { display: none; } /* 原浮动发布按钮已移入 tabbar 中间 */



/* 卡片 */

.card { background: var(--card); border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }

.row { display: flex; align-items: center; }

.between { justify-content: space-between; }

.muted { color: var(--muted); font-size: 12px; }

.tag { display: inline-block; background: #f0f1f2; color: #666; border-radius: 4px; padding: 2px 7px; font-size: 11px; margin: 3px 4px 0 0; }

.badge { font-size: 11px; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 600; }

.badge.buy { background: var(--buy); }

.badge.sell { background: var(--sell); }

.badge.coop { background: var(--coop); }

.title { font-size: 16px; font-weight: 600; margin: 8px 0 6px; }

.content { color: #333; line-height: 1.6; white-space: pre-wrap; }

.meta { margin-top: 10px; display: flex; align-items: center; gap: 8px; }

.avatar { width: 32px; height: 32px; border-radius: 50%; background: #ddd; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }
.avatar.vip-ring { box-shadow: 0 0 0 2px #c08a2d, 0 0 6px rgba(192,138,45,.45); }
.vip-badge { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #7a5410; background: linear-gradient(135deg, #f7e7c3, #f0d49a); border-radius: 10px; vertical-align: middle; }

.contact-btn { margin-left: auto; background: var(--primary); color: #fff; border: none; border-radius: 16px; padding: 6px 14px; font-size: 12px; }

.like { color: var(--muted); font-size: 13px; }



/* tabs 筛选 */

.filter { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }

.filter .chip { padding: 6px 14px; background: #fff; border-radius: 16px; font-size: 13px; color: #555; border: 1px solid transparent; }

.filter .chip.active { background: var(--primary); color: #fff; }



/* 表单 */

.field { margin-bottom: 14px; }

.field label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; }

.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 14px; font-family: inherit; }

.field textarea { min-height: 90px; resize: vertical; }

.btn { display: block; width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 15px; background: #eee; color: #333; }

.btn-primary { background: var(--primary); color: #fff; }

.seg { display: flex; gap: 8px; }

.seg .opt { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--border); border-radius: 8px; color: #555; }

.seg .opt.active { border-color: var(--primary); color: var(--primary); font-weight: 600; background: #eaf1ff; }



/* 消息 */

.conv { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 8px; }

.unread { background: #fa5151; color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 6px; }

/* 166px = 顶部栏 48 + .view 上下内边距 12/70 + 底部输入区余量 36 */
.chat-page { display: flex; flex-direction: column; height: calc(var(--app-h, 100vh) - 166px); padding-bottom: 8px; }

.chat-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }

.chat-box { display: flex; gap: 8px; padding: 10px; background: var(--bg); border-top: 1px solid var(--border); flex-shrink: 0; }

.chat-box input { flex: 1; border: 1px solid var(--border); border-radius: 20px; padding: 10px 14px; }

/* 聊天气泡 */

.bubble { max-width: 72%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-break: break-word; margin: 6px 0; display: inline-block; }

.bubble.them { background: #f0f0f0; color: #222; align-self: flex-start; border-bottom-left-radius: 4px; }

.bubble.me { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }

.empty { text-align: center; color: var(--muted); padding: 40px 0; }



/* 首页 banner 轮播 */

.banner { position: relative; height: 130px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }

.bslide { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: flex-end; padding: 14px; background: linear-gradient(135deg, #1d4ed8, #0f2747); color: #fff; }

.bslide.active { display: flex; }

.bcap { font-size: 17px; font-weight: 700; }

.bsub { font-size: 12px; opacity: .9; margin-top: 2px; }

.dots { position: absolute; bottom: 8px; right: 12px; display: flex; gap: 5px; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }

.dot.active { background: #fff; width: 14px; border-radius: 3px; }



/* 公告条 */

.notice { display: flex; align-items: center; gap: 8px; background: #fff8e6; color: #a76b00; padding: 9px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }

.notice .nic { font-size: 14px; }

.notice .ncontent { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* 快捷入口 */

.quick { display: flex; gap: 10px; margin-bottom: 12px; }

.quick .q { flex: 1; background: #fff; border-radius: 12px; padding: 12px 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); }

.quick .qic { font-size: 24px; }

.quick .q div:nth-child(2) { font-size: 13px; font-weight: 600; margin-top: 4px; }



/* 角标 */

.tag.verified { background: #e8f3ff; color: #1769ff; }

.tag.vip { background: #fff4e0; color: #d48806; }

.tag.enterprise { background: #eaf1ff; color: #1d4ed8; }

.tag.sticky { background: #ffece0; color: #fa5151; }



/* 我的菜单 */

.mlist { background: #fff; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }

.mlist .mi { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px; border-bottom: 1px solid #f2f2f2; }

.mlist .mi:last-child { border-bottom: none; }

.mlist .mi:active { background: #fafafa; }



/* 收藏星标 */

.star { background: none; border: none; color: #c8c9cc; font-size: 18px; padding: 4px 6px; }

.star.on { color: #ffb300; }



/* 会员中心 */

.center { text-align: center; }

.tier { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; }

.tier .price { color: #fa5151; font-size: 18px; font-weight: 700; }

.tier .ben { margin: 8px 0 12px; padding-left: 18px; color: #555; font-size: 13px; }

.tier .ben li { margin-bottom: 3px; }



/* 认证状态标 */

.tag.pending { background: #fff4e0; color: #d48806; }

.tag.rejected { background: #ffece0; color: #fa5151; }

.tag.approved { background: #eaf1ff; color: #1d4ed8; }



/* 通知未读 */

.unread-card { border-left: 3px solid var(--primary); }



/* 推广海报（我的海报 #3） */

.poster { background: linear-gradient(160deg, #1d4ed8, #0f2747); border-radius: 14px; padding: 20px; color: #fff; box-shadow: 0 6px 20px rgba(7,193,96,.3); }

.poster-top { display: flex; align-items: center; gap: 12px; }

.poster-top .avatar { background: rgba(255,255,255,.25); }

.poster-top .muted { color: rgba(255,255,255,.85); }

.poster-slogan { margin: 16px 4px; font-size: 14px; line-height: 1.6; background: rgba(255,255,255,.12); border-radius: 8px; padding: 12px; }

.poster-foot { text-align: center; font-size: 12px; opacity: .9; }



/* 次级按钮（置顶等） */

.ghost-btn { background: #fff; color: #555; border: 1px solid var(--border); border-radius: 16px; padding: 6px 12px; font-size: 12px; margin-right: 6px; }

.ocr-fields .field:last-child { margin-bottom: 0; }



/* 钱包账单金额 */

.plus { color: var(--primary); font-weight: 700; }

.minus { color: #fa5151; font-weight: 700; }



/* 首页区块标题 + 推荐圈子横滑 */

.section-title { font-size: 15px; font-weight: 700; margin: 4px 2px 10px; }

.rec-scroll { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; }

.rec-scroll::-webkit-scrollbar { display: none; }

.rec-card { flex: 0 0 132px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }

.rec-cover { height: 68px; color: #fff; font-size: 14px; font-weight: 700; padding: 10px; display: flex; align-items: flex-end; }

.rec-body { padding: 8px 10px; font-size: 11px; display: flex; align-items: center; justify-content: space-between; }



/* 圈子卡片（封面条版） */

.circle-card { padding: 0; overflow: hidden; }

.ccover { padding: 18px 14px; color: #fff; }

.ccover-name { font-size: 18px; font-weight: 700; }

.ccover-name .crown { display: inline-block; background: rgba(255,255,255,.25); border-radius: 4px; font-size: 11px; font-weight: 500; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }

.ccover-meta { font-size: 12px; opacity: .9; margin-top: 4px; }

.cbody { padding: 12px 14px; }

.cnotice { margin-top: 10px; background: #fff8e6; color: #a76b00; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5; }



/* 圈子详情页（原站风格） */

.cd-wrap { padding: 0; overflow: hidden; }

.cd-header { display: flex; align-items: center; gap: 12px; padding: 16px 14px; background: linear-gradient(160deg,#1d4ed8,#0f2747); color: #fff; }

.cd-cover { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 14px; background: rgba(255,255,255,.15); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.cd-info { flex: 1; min-width: 0; }

.cd-name { font-size: 17px; font-weight: 700; line-height: 1.3; }

.cd-meta { font-size: 12px; opacity: .85; margin-top: 3px; }

.cd-stats { display: flex; text-align: center; padding: 14px 0; border-bottom: 1px solid var(--border); }

.cd-stat { flex: 1; }

.cd-num { display: block; font-size: 22px; font-weight: 800; color: var(--primary); line-height: 1.2; }

.cd-stat span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.cd-owner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }

.cd-owner .avatar { flex: 0 0 44px; width: 44px; height: 44px; font-size: 16px; }

.cd-owner-info { flex: 1; min-width: 0; }

.cd-owner-right { flex: 0 0 auto; text-align: right; }

.cd-desc { padding: 4px 14px 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }

.cd-section-title { padding: 14px 14px 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* 底部固定价格栏 */

/* 底部加 safe-area：iPhone X 及以上在微信里，底部横条会遮住按钮 */
.cd-paybar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding: 8px 14px calc(8px + var(--sa-b, 0px)); background: #fff; border-top: 1px solid var(--border); z-index: 99; box-shadow: 0 -2px 10px rgba(0,0,0,.06); gap: 10px; max-width: 480px; margin: 0 auto; }

.cd-pay-left { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }

.cd-pay-price { font-size: 24px; font-weight: 800; color: #d9822b; line-height: 1.1; }

.cd-pay-daily { font-size: 11px; color: #999; line-height: 1.2; }

.cd-pay-valid { font-size: 12px; color: #999; flex-shrink: 0; white-space: nowrap; }

.cd-pay-btn { flex: 1; min-width: 0; background: linear-gradient(135deg,#f59e0b,#d97706); border: none; color: #fff; font-size: 15px; font-weight: 700; padding: 12px 16px; border-radius: 24px; white-space: nowrap; }

.cd-actions { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }



/* 人脉广场 */

.plaza-hero { background: linear-gradient(160deg, #1d4ed8, #0f2747); color: #fff; }

.plaza-title { font-size: 20px; font-weight: 800; }

.plaza-sub { font-size: 12px; opacity: .92; margin: 6px 0 12px; }

.plaza-sub b { font-size: 15px; }

.plaza-search { display: flex; gap: 8px; }

.plaza-search input { flex: 1; border: none; border-radius: 8px; padding: 10px 12px; font-size: 14px; }

.plaza-search .btn-primary { width: auto; padding: 10px 18px; }

.plaza-card .contact-btn { margin-left: 0; flex: 0 0 auto; }

/* 人脉广场：个人名片 / 企业名片 区分 */

.plaza-card-ent { border-left: 3px solid var(--gold); background: linear-gradient(120deg, #fbf6ec, #fffdf8); }

.plaza-type-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--gold); color: #fff; vertical-align: middle; }

.plaza-type-badge.plaza-type-personal { background: #e8eefc; color: #1d4ed8; }

.plaza-card-ent .row > div b { font-size: 15px; color: #8a5a16; }



/* 找老板（原站 find-boss 专区） */

.boss-hero { background: linear-gradient(160deg, #2b6cff, #5b8cff); color: #fff; }

.boss-title { font-size: 22px; font-weight: 800; }

.boss-sub { font-size: 12px; opacity: .92; margin: 6px 0 12px; }

.boss-sub b { font-size: 14px; }

.boss-card { border-left: 3px solid #2b6cff; }

.boss-entry { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, #eef3ff, #f6f9ff); border: 1px solid #dbe6ff; }

.boss-entry-title { font-size: 16px; font-weight: 700; color: #2b6cff; margin-bottom: 2px; }

.boss-entry .btn-primary { background: #2b6cff; border-color: #2b6cff; flex: 0 0 auto; }

/* 找老板：横向行业分类导航条（原站标志性布局）+ 统计头 + 工具条 */

.boss-stats { font-size: 12px; opacity: .92; margin: 8px 0 12px; }

.boss-stats b { font-size: 15px; }

.boss-cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; margin-bottom: 10px; }

.boss-cats::-webkit-scrollbar { display: none; }

.boss-cats .chip { flex: 0 0 auto; background: #f2f4f7; color: #555; border: 1px solid transparent; }

.boss-cats .chip.active { background: #2b6cff; color: #fff; }

.boss-toolbar { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 10px; }

.boss-toolbar .filter { margin-bottom: 0; }

.boss-toolbar #cityFilter .chip { font-size: 12px; padding: 5px 10px; }

/* 老板卡片：供需标签 + 操作区 */

.tag.boss { background: #e8efff; color: #2b6cff; font-weight: 600; }

.tag.auth { background: #e8f3ff; color: #1769ff; }

.needs { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }

.ntag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; padding: 3px 8px; font-size: 12px; }

.ntag.buy { background: #fdf1e6; color: #d9822b; border-left: 3px solid #d9822b; }

.ntag.sell { background: #fff4e0; color: #d48806; border-left: 3px solid #d48806; }

.ntag.coop { background: #eaf1ff; color: #2b6cff; border-left: 3px solid #2b6cff; }

.boss-actions { margin-top: 10px; gap: 8px; }

.boss-actions .ghost-btn, .boss-actions .contact-btn { flex: 1; margin: 0; }



/* 公司目录式老板卡（原站格式） */

.company-card { padding: 14px; }

.company-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.province-badge { background: #2b6cff; color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; flex: 0 0 auto; }

.company-name { flex: 1; min-width: 0; border: 1px solid #d8dde6; border-radius: 4px; padding: 6px 10px; font-size: 15px; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.status-badge { font-size: 12px; padding: 3px 8px; border-radius: 4px; flex: 0 0 auto; }

.status-badge.ok { background: #eaf1ff; color: #1d4ed8; border: 1px solid #c9daf7; }

/* 名片置顶角标 + 置顶购买区块 */

.top-badge { background: linear-gradient(135deg,#1d4ed8,#0f2747); color:#fff; font-size:11px; padding:2px 7px; border-radius:4px; margin-left:6px; flex:0 0 auto; font-weight:600; }

.top-promo { border:1px solid #e2e8f2; }

.top-promo-title { font-size:15px; font-weight:700; color:#0f2747; }

.top-promo-status { font-size:12px; color:#9aa0a6; }

.top-promo-status.on { color:#1d4ed8; font-weight:600; }

.top-plans { display:flex; flex-direction:column; gap:8px; margin-top:4px; }

.top-plan { display:flex; align-items:center; justify-content:space-between; background:#f6f8fc; border-radius:10px; padding:10px 12px; }

/* 名片置顶套餐可点选（单选） */
.top-plan-sel { cursor:pointer; border:2px solid transparent; transition:border-color .15s; }
.top-plan-sel.active { border-color:var(--primary,#1d4ed8); background:#f0f5ff; }

.top-plan-name { font-size:14px; font-weight:600; color:#222; }

.top-plan-price { font-size:13px; color:#d9822b; font-weight:700; margin-top:2px; }

.top-buy { margin-left:10px; }

.company-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.ctag { background: #eaf1ff; color: #2b6cff; font-size: 12px; padding: 3px 8px; border-radius: 3px; }

.company-needs { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }

.company-grid { display: flex; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; padding: 10px 0; margin: 4px 0 10px; }

.cg-item { flex: 1; padding: 0 8px; text-align: center; border-right: 1px solid #ececec; min-width: 0; }

.cg-item:last-child { border-right: none; }

.cg-label { font-size: 11px; color: #9aa0a6; margin-bottom: 4px; }

.cg-value { font-size: 13px; color: #333; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.company-foot { display: flex; align-items: center; justify-content: space-between; }

.view-count { font-size: 12px; color: #fa5151; }

.view-count b { font-size: 14px; margin: 0 2px; }

.view-contact { background: #2b6cff; color: #fff; border: none; border-radius: 4px; padding: 8px 18px; font-size: 13px; cursor: pointer; }

.view-contact:active { opacity: .85; }



/* 圈子页（参照原站：我的圈子横滑 + 左信息右封面列表行） */

.circles-h { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 12px; padding: 2px 0 6px; }

.circles-h::-webkit-scrollbar { display: none; }

.cbox { flex: 0 0 64px; height: 64px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.cbox-name { font-size: 13px; font-weight: 700; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60px; }

.cbox-sub { font-size: 11px; opacity: .9; margin-top: 3px; }

.cbox.my { background: linear-gradient(160deg, #1d4ed8, #0f2747); }

.cbox.create { background: linear-gradient(143deg, #3697ea, #2f80c6); font-size: 24px; }

.cbox.more { background: #f0f0f0; color: #333; font-size: 13px; }



.citem { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }

.cinfo { flex: 1; min-width: 0; }

.ctitle { font-size: 15px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.csrc { font-size: 12px; color: #9aa0a6; margin-top: 4px; }

.cbtns { display: flex; gap: 6px; align-items: center; }

.ccover-sm { flex: 0 0 64px; height: 64px; border-radius: 10px; color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; }



/* 圈子详情：圈内名片提示条（参照原站） */

.circle-member-bar { background: #fff6ef; color: #ff771d; font-size: 12px; border-radius: 8px; padding: 8px 10px; margin: 10px 0; }

.circle-member-bar.muted { background: #f6f7f9; color: #9aa0a6; }





/* ============ 首页排版(参照原站) ============ */

/* 首页头部：固定定位（X5 WebView 的 sticky 不可靠，必须用 fixed） */

.home-header-fixed {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  max-width: 480px;

  margin: 0 auto;

  z-index: 20;

  background: #fff;

  padding: 9px 12px;

  display: flex;

  align-items: center;

  gap: 8px;

  box-shadow: 0 1px 3px rgba(0,0,0,.08);

}

.home-search {

  flex: 1;

  display: flex;

  align-items: center;

  background: #f2f3f5;

  border-radius: 18px;

  padding: 7px 12px;

  gap: 6px;

  cursor: pointer;

  min-width: 0;

}

.search-ic { color: #9aa0a6; font-size: 14px; flex-shrink: 0; }

.home-search input {

  flex: 1;

  border: none;

  background: transparent;

  outline: none;

  font-size: 13px;

  color: #333;

  min-width: 0;

}

.home-search input::placeholder { color: #9aa0a6; }

.home-profile-btn {

  background: #1a1a1a;

  color: #fff;

  border: none;

  border-radius: 18px;

  padding: 7px 12px;

  font-size: 13px;

  font-weight: 500;

  white-space: nowrap;

  cursor: pointer;

  flex-shrink: 0;

}

.home-qrcode-btn {

  width: 36px;

  height: 36px;

  border-radius: 8px;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #ececec;

  cursor: pointer;

  position: relative;

  flex-shrink: 0;

}

.qr-ic { font-size: 18px; }



/* Tab 栏：固定在搜索栏下方 */

.home-tabs {

  display: flex;

  background: #fff;

  border-bottom: 1px solid #f0f0f0;

  position: fixed;

  left: 0;

  right: 0;

  top: 54px;

  max-width: 480px;

  margin: 0 auto;

  z-index: 19;

  box-shadow: 0 1px 3px rgba(0,0,0,.06);

}

.home-tab {

  flex: 1;

  text-align: center;

  padding: 12px 0;

  font-size: 15px;

  color: #666;

  position: relative;

  font-weight: 500;

  cursor: pointer;

}

.home-tab.active { color: #1a1a1a; font-weight: 700; }

.home-tab.active::after {

  content: '';

  position: absolute;

  bottom: 4px;

  left: 50%;

  transform: translateX(-50%);

  width: 24px;

  height: 3px;

  background: var(--primary);

  border-radius: 2px;

}



/* 推荐圈子轮播（严格参照原站 .recommend：标题 + 换一批 + 左滑 3 页轮播 + 2×2 网格）*/

.rec-section { background:#fff; margin:0 0 8px; overflow:hidden; }

.rec-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px; }

.rec-title { font-size:18px; font-weight:600; color:#181818; }

.rec-change { display:flex; align-items:center; font-size:13px; color:#999; cursor:pointer; user-select:none; }

.rec-change-icon { width:14px; height:14px; margin-right:4px; }

.rec-change:active { opacity:.6; }

.rec-window { overflow:hidden; padding:0 10px 10px; }

.rec-box { display:flex; transition:transform .3s ease; }

.rec-page { box-sizing:border-box; flex-shrink:0; }

/* 精选圈子大卡：左封面 + 右标题/简介/分类 + 右下来源 */

.rec-feature { position:relative; display:flex; align-items:center; height:96px; border-bottom:1px solid #f5f5f5; }

.rec-feature-cover { width:72px; height:69px; border-radius:7px; margin:0 12px 0 8px; flex-shrink:0; background-size:cover; background-position:center; }

.rec-feature-body { flex:1; min-width:0; display:flex; flex-direction:column; }

.rec-feature-title { font-size:17px; color:#333; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.rec-feature-desc { font-size:14px; color:#5b5b5b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:5px; }

.rec-feature-sponsor { font-size:12px; color:#a8a8a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }

.rec-feature-count { position:absolute; right:8px; bottom:8px; font-size:13px; color:#a8a8a8; }

/* 2×2 网格小卡：封面居左 + 标题 + 人数 + 加入按钮 */

.rec-grid { display:flex; flex-wrap:wrap; padding-top:8px; }

.rec-grid-card { width:50%; box-sizing:border-box; margin-bottom:8px; }

.rec-grid-inner { position:relative; background:#f9f9f9; border-radius:9px; padding:10px 10px 10px 56px; min-height:88px; margin-right:8px; }

.rec-grid-cover { position:absolute; left:10px; top:10px; width:38px; height:38px; border-radius:4px; background-size:cover; background-position:center; }

.rec-grid-title { font-size:14px; font-weight:600; color:#333; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }

.rec-grid-member { position:absolute; left:56px; bottom:10px; font-size:12px; color:#444; }

.rec-grid-member b { font-size:15px; color:#333; font-weight:600; margin-right:1px; }

.rec-grid-join { position:absolute; right:10px; bottom:9px; font-size:12px; font-weight:600; color:#fff; background:linear-gradient(135deg,#2f6bff,var(--primary)); border:none; border-radius:14px; padding:4px 13px; cursor:pointer; box-shadow:0 4px 10px rgba(29,78,216,.28); transition:transform .12s ease, filter .15s, box-shadow .15s; }

.rec-grid-join:active { transform:scale(.96); box-shadow:0 2px 6px rgba(29,78,216,.3); }

.rec-grid-join.joined { color:#999; background:#f0f0f0; border:1px solid #e2e2e2; box-shadow:none; }

/* 指示点 */

.rec-dots { display:flex; justify-content:center; gap:6px; padding:2px 0 10px; }

.rec-dots span { width:6px; height:6px; border-radius:50%; background:#d8d8d8; transition:all .3s; }

.rec-dots span.on { background:var(--primary); width:14px; border-radius:3px; }



/* 我的名片 */

.my-card {

  background: #fff;

  border-radius: 12px;

  padding: 14px 12px;

  margin: 0 12px 8px;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);

}

.my-card-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 14px;

}

.my-card-title { font-size: 16px; font-weight: 700; color: #1a1a1a; }

.my-card-stats {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 12px;

  color: #666;

}

.my-card-stats b { color: #3a7afe; font-weight: 700; margin: 0 2px; }

.my-card-stat-sep { width: 1px; height: 12px; background: #ececec; }

.my-card-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 8px;

}

.my-card-item { text-align: center; cursor: pointer; padding: 4px 0; }

.my-card-ic {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  margin: 0 auto 6px;

}

.my-card-ic-1 { background: linear-gradient(135deg, #1d4ed8, #0f2747); }

.my-card-ic-2 { background: linear-gradient(135deg, #2f6fd0, #1d4ed8); }

.my-card-ic-3 { background: linear-gradient(135deg, #3a7afe, #1d4ed8); }

.my-card-ic-4 { background: linear-gradient(135deg, #c08a2d, #a8721f); }

.my-card-ic-5 { background: linear-gradient(135deg, #4b6cb7, #182848); }

.my-card-label { font-size: 12px; color: #333; }



/* Banner 广告（旧的单条纯文字条已废弃，改由 .home-banner 轮播承载，见打磨层第 27 段） */



/* 热门动态标题 */

.feed-section-title {

  padding: 14px 12px 8px;

  font-size: 16px;

  font-weight: 700;

  color: #1a1a1a;

}



/* 动态卡 */

.feed-card {

  background: #fff;

  margin: 0 12px 10px;

  padding: 14px;

  border-radius: 12px;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);

  cursor: pointer;

}

.feed-row { display: flex; gap: 12px; }

.feed-avatar {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: linear-gradient(135deg, #1d4ed8, #2f6fd0);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  flex-shrink: 0;

}

.feed-body { flex: 1; min-width: 0; }

.feed-meta-top {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 4px;

}

.feed-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }

.feed-type {

  font-size: 11px;

  background: #f0f5ff;

  color: #3a7afe;

  padding: 1px 6px;

  border-radius: 4px;

}

.feed-title-line {

  font-size: 15px;

  color: #1a1a1a;

  font-weight: 500;

  margin-bottom: 4px;

}

.feed-content-preview {

  font-size: 13px;

  color: #666;

  margin-bottom: 6px;

  display: -webkit-box;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.feed-meta-bottom {

  font-size: 11px;

  color: #9aa0a6;

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  align-items: center;

}

.feed-meta-sep { color: #e0e0e0; }

.feed-tag { color: #3a7afe; }

.feed-actions {

  margin-top: 10px;

  padding-top: 10px;

  border-top: 1px solid #f5f5f5;

  display: flex;

  font-size: 13px;

  color: #666;

}

.feed-action {

  flex: 1;

  text-align: center;

  cursor: pointer;

  padding: 4px 0;

}

.feed-action-contact { color: #3a7afe; }



/* 热门动态 - 左图右文卡片（参照原站信息流） */

.feed-card-hot {

  display: flex;

  gap: 12px;

  padding: 12px !important;

}

.feed-hot-left {

  flex: 0 0 110px;

  width: 110px;

  height: 90px;

  border-radius: 8px;

  overflow: hidden;

  background: #f0f2f5;

  flex-shrink: 0;

}

.feed-hot-cover {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.feed-hot-noimg {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  font-weight: 700;

  color: #c0c4cc;

  background: linear-gradient(135deg, #e8ecf1, #d4dae6);

}

.feed-hot-right {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 2px 0;

}

.feed-hot-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-bottom: 4px;

}

.feed-tag-pill {

  font-size: 11px;

  padding: 1px 7px;

  border-radius: 3px;

  white-space: nowrap;

  line-height: 1.6;

}

.feed-tag-top { background: #fff0f0; color: #e54d42; }

.feed-tag-type { background: #fff7e6; color: #f5a623; }

.feed-tag-normal { background: #f0f5ff; color: #3a7afe; }

.feed-tag-loc { background: #eef7f0; color: #27ae60; }

.feed-hot-title {

  font-size: 15px;

  font-weight: 600;

  color: #1a1a1a;

  line-height: 1.45;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  margin-bottom: 6px;

}

.feed-hot-meta {

  font-size: 12px;

  color: #9aa0a6;

  display: flex;

  gap: 10px;

  align-items: center;

}

.feed-hot-meta .feed-meta-sep::after { content: '|'; color: #e0e0e0; }

.feed-promo-line {
  padding: 0;
  margin: 2px 0 0;
  font-size: 12px;
  color: #e8412e;
  display: flex;
  align-items: center;
  gap: 4px;
}



/* 动态详情页（参照 mtj.scwsh.net 信息港风格） */

.detail-page { padding: 12px; }

.detail-head {

  background: #fff;

  border-radius: 12px;

  padding: 14px;

  margin-bottom: 10px;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);

}

.detail-title { font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-bottom: 8px; }

.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #9aa0a6; }

.detail-author { color: #3a7afe; font-weight: 600; }

.detail-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 13px; color: #555; }

.detail-fields span { background: #f7f8fa; padding: 4px 10px; border-radius: 6px; }

.detail-content {

  background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px;

  font-size: 15px; line-height: 1.7; color: #333; white-space: pre-wrap; word-break: break-word;

}

.detail-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; }

.detail-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #f0f2f5; cursor: zoom-in; }

.img-viewer { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 999; display: none; align-items: center; justify-content: center; padding: 16px; }

.img-viewer.show { display: flex; }

.img-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }

.img-viewer .img-viewer-hint { position: absolute; top: 14px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: 12px; }

.detail-stats { display: flex; gap: 14px; font-size: 12px; color: #9aa0a6; padding: 0 4px 10px; }

.detail-contact { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px; }

.detail-contact-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }

.detail-contact-tip { font-size: 12px; color: #9aa0a6; margin: 6px 0 12px; }

.detail-contact-btns { display: flex; flex-direction: column; gap: 10px; }

.detail-contact-btns .btn { width: 100%; }

.detail-actions { display: flex; flex-direction: row; gap: 8px; }

.detail-actions .btn { flex: 1; font-size: 13px; padding: 8px 4px; }

.detail-report {

  background: none; border: 1px solid #ffd5d5; color: #e54d42;

  border-radius: 8px; padding: 8px; font-size: 13px; cursor: pointer;

}

.detail-disclaimer { font-size: 11px; color: #bbb; line-height: 1.6; padding: 10px 4px 14px; }

.detail-bar {

  position: fixed; left: 0; right: 0; bottom: 0; height: 52px;

  padding-bottom: var(--sa-b, 0px); box-sizing: content-box;

  background: #fff; border-top: 1px solid #eee; z-index: 50;

  display: flex; box-shadow: 0 -2px 8px rgba(0,0,0,.05); max-width: 480px; margin: 0 auto;

}

.detail-bar-item {

  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;

  gap: 2px; font-size: 11px; color: #666; cursor: pointer;

}

.detail-bar-item > div { font-size: 18px; line-height: 1; }

.detail-bar-call { background: var(--primary); }

.detail-bar-call > div, .detail-bar-call > span { color: #fff; }



/* 发布表单 - 多图上传 */

.img-upload { display: flex; flex-wrap: wrap; gap: 8px; }

.img-thumb { position: relative; width: 78px; height: 78px; border-radius: 8px; overflow: hidden; border: 1px solid #eee; background: #f5f5f5; }

.img-thumb img { width: 100%; height: 100%; object-fit: cover; }

.img-thumb .img-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; }

.img-add { width: 78px; height: 78px; border-radius: 8px; border: 1px dashed #c9d2e3; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #b0b8c8; cursor: pointer; background: #fafbfd; }



/* ============ 首页 Tab 内容 ============ */

.home-tab-body { background: #f7f8fa; padding-top: 98px; }

.home-section { padding: 0 0 16px; }

.home-section-title {

  padding: 16px 12px 10px;

  font-size: 15px;

  font-weight: 700;

  color: #1a1a1a;

}



/* 我的圈子 Tab */

.my-circle-row {

  display: flex;

  align-items: center;

  gap: 12px;

  background: #fff;

  padding: 12px;

  margin: 0 12px 8px;

  border-radius: 10px;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);

  cursor: pointer;

}

.my-circle-cover {

  width: 52px;

  height: 52px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 14px;

  font-weight: 700;

  flex-shrink: 0;

  overflow: hidden;

}

.my-circle-info { flex: 1; min-width: 0; }

.my-circle-name {

  font-size: 15px;

  font-weight: 600;

  color: #1a1a1a;

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 2px;

}

.my-circle-meta { font-size: 12px; color: #9aa0a6; }

.my-circle-arrow { color: #c8ccd1; font-size: 18px; flex-shrink: 0; }

.my-circle-view-btn { flex-shrink: 0; padding:6px 18px; font-size:13px; border-radius:20px; background:#1d4ed8; color:#fff; border:none; white-space:nowrap; }

.vip-tag {

  font-size: 11px;

  background: #fff5e6;

  color: #ff7d00;

  border: 1px solid #ffd9a8;

  border-radius: 4px;

  padding: 1px 6px;

  font-weight: 600;

}



/* 工作台 Tab */

.work-stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 0;

  background: #fff;

  margin: 10px 12px;

  border-radius: 12px;

  padding: 14px 0;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);

}

.work-stat { text-align: center; padding: 4px 0; position: relative; }

.work-stat + .work-stat::before {

  content: '';

  position: absolute;

  left: 0;

  top: 20%;

  bottom: 20%;

  width: 1px;

  background: #f0f0f0;

}

.work-stat .num { font-size: 20px; font-weight: 800; color: #1a1a1a; }

.work-stat .lbl { font-size: 11px; color: #9aa0a6; margin-top: 2px; }



.work-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  background: #fff;

  margin: 0 12px;

  border-radius: 12px;

  padding: 16px 8px;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);

}

.work-item {

  text-align: center;

  padding: 10px 4px;

  cursor: pointer;

  border-radius: 8px;

}

.work-item:active { background: #f5f6f8; }

.work-ic { font-size: 26px; margin-bottom: 4px; }

.work-label { font-size: 12px; color: #333; }



/* 会员福利 Tab */

.vip-hero {

  margin: 10px 12px;

  padding: 22px 18px;

  border-radius: 12px;

  background: linear-gradient(135deg, #1d4ed8, #2f6fd0);

  color: #fff;

  box-shadow: 0 6px 16px rgba(79,172,254,.3);

  position: relative;

  overflow: hidden;

}

.vip-hero.active {

  background: linear-gradient(135deg, #c08a2d, #a8721f);

  box-shadow: 0 6px 16px rgba(192,138,45,.25);

}

.vip-hero-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }

.vip-hero-sub { font-size: 13px; opacity: .9; margin-bottom: 14px; line-height: 1.5; }

.vip-hero-btn {

  background: #fff;

  color: #1d4ed8;

  border: none;

  border-radius: 20px;

  padding: 9px 22px;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

}

.vip-hero.active .vip-hero-btn { color: #c08a2d; }



.vip-tier {

  background: #fff;

  margin: 0 12px 10px;

  padding: 14px;

  border-radius: 12px;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);

}

.vip-tier-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding-bottom: 10px;

  border-bottom: 1px dashed #ececec;

  margin-bottom: 10px;

}

.vip-tier-info { flex: 1; }

.vip-tier-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }

.vip-tier-days { font-size: 12px; color: #9aa0a6; margin-top: 2px; }

.vip-tier-price { font-size: 22px; font-weight: 800; color: #ff7d00; }

.vip-tier-benefits {

  list-style: none;

  padding: 0;

  margin: 0 0 12px;

}

.vip-tier-benefits li {

  font-size: 13px;

  color: #555;

  padding: 5px 0;

  padding-left: 18px;

  position: relative;

  line-height: 1.5;

}

.vip-tier-benefits li::before {

  content: '✓';

  position: absolute;

  left: 0;

  color: #1d4ed8;

  font-weight: 700;

}

.vip-tier-buy {

  width: 100%;

  background: linear-gradient(135deg, #ff7d00, #ff9a3d);

  color: #fff;

  border: none;

  border-radius: 8px;

  padding: 11px;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

}

.vip-tier-buy:active { opacity: .9; }



/* 会员权限标签（实际功能权限展示） */

.vip-perm-list { display: flex; flex-wrap: wrap; gap: 6px; }

.vip-perm-tag { display: inline-block; padding: 4px 10px; background: linear-gradient(135deg, #fff6e5, #fffbf0); border: 1px solid #f0c88e; border-radius: 12px; font-size: 12px; color: #c08a2d; font-weight: 600; }



/* 发布页顶部展示区 */

.pub-banner {

  margin: 0 0 10px;

  border-radius: 10px;

  overflow: hidden;

}

.pub-banner img {

  width: 100%;

  display: block;

  border-radius: 10px;

}

.pub-notice {

  background: #fffbeb;

  border: 1px solid #fde68a;

  color: #92400e;

  font-size: 12.5px;

  line-height: 1.65;

  padding: 10px 12px;

  border-radius: 8px;

  margin-bottom: 10px;

  word-break: break-all;

}



/* 发布页顶部导航栏 */

.pub-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 14px;

  background: var(--primary, #1d4ed8);

  color: #fff;

  font-size: 16px;

  font-weight: 600;

}

.pub-back {

  cursor: pointer;

  font-size: 18px;

  font-weight: 700;

  opacity: .9;

}

.pub-title {

  flex: 1;

  text-align: center;

}



/* 发布页分隔线 */

.pub-divider {

  text-align: center;

  margin: 18px 0 14px;

  position: relative;

  color: #9aa0a6;

  font-size: 13px;

}

.pub-divider::before,

.pub-divider::after {

  content: '';

  position: absolute;

  top: 50%;

  width: calc(50% - 80px);

  height: 1px;

  background: #e5e7eb;

}

.pub-divider::before { left: 0; }

.pub-divider::after { right: 0; }

.pub-divider span {

  background: #fff;

  padding: 0 12px;

  position: relative;

}



/* 发布分类圆形图标卡片 */

.pub-cats {

  display: flex;

  justify-content: space-around;

  gap: 10px;

  padding: 4px 4px 20px;

}

.pub-cat {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  width: 68px;

  cursor: pointer;

  border-radius: 50% 50% 12px 12px;

  padding: 14px 6px 10px;

  transition: transform .15s, box-shadow .15s;

  -webkit-tap-highlight-color: transparent;

}

.pub-cat:active {

  transform: scale(.93);

}

.pub-cat-icon {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: rgba(255,255,255,.25);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  font-weight: 700;

  line-height: 1;

}

.pub-cat-label {

  font-size: 12px;

  font-weight: 500;

  white-space: nowrap;

}





/* ==================================================================

   H5 设计系统 v2 · 质感打磨层

   原则：不换色系（商务蓝+藏青+金），统一层次、留白、按压反馈、

   空状态、加载骨架、轻提示；存量类名语义不变，全部页面自动受益。

   ================================================================== */



/* ===== 1. 令牌增强 ===== */

:root {

  --radius-lg: 16px; --radius: 14px; --radius-sm: 10px;

  --shadow-1: 0 1px 2px rgba(16, 32, 56, .05), 0 4px 14px rgba(16, 32, 56, .06);

  --shadow-2: 0 10px 30px rgba(16, 32, 56, .14);

  --gold-2: #d8a64a;

  --ok: #0f9d58; --warn: #d9822b; --danger: #d23b3b;

  --line-2: #f0f2f6;

  --primary-soft: #eef3ff;

  --sa-b: env(safe-area-inset-bottom, 0px);

  /* iOS 上 100vh 不随地址栏收起 / 软键盘弹出而收缩，会把固定底部的输入框顶出屏幕。
     支持 dvh 的浏览器用 dvh，不支持的自动回落 100vh */
  --app-h: 100vh;

}

@supports (height: 100dvh) {
  :root { --app-h: 100dvh; }
}



/* ===== 2. 全局质感 ===== */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.view { padding: 12px 12px calc(70px + var(--sa-b)); scroll-behavior: smooth; }

img { -webkit-user-drag: none; }

button { font-family: inherit; }



/* 顶部栏升级为藏青渐变（与后台统一），加投影增强层次 */

.topbar {

  background: linear-gradient(135deg, #163873 0%, var(--navy) 100%);

  box-shadow: 0 2px 12px rgba(15, 39, 71, .18);

  letter-spacing: .3px;

}



/* ===== 3. 底部 Tab 栏 ===== */

.tabbar {

  height: calc(56px + var(--sa-b));

  padding-bottom: var(--sa-b);

  box-shadow: 0 -4px 20px rgba(16, 32, 56, .07);

  border-top: 1px solid var(--line-2);

}

.tab { transition: color .15s; position: relative; }

.tab span { font-size: 21px; transition: transform .18s ease; }

.tab.active { color: var(--primary); font-weight: 600; }

.tab.active span { transform: translateY(-1px) scale(1.06); }

.tab.active::before {

  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);

  width: 18px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-grad, linear-gradient(135deg, #c08a2d, #d8a64a));

}

.tab-fab button, .tab-fab {

  /* 中央发布按钮保持突出 */

}



/* ===== 4. 卡片 ===== */

.card {

  border-radius: var(--radius);

  box-shadow: var(--shadow-1);

  border: 1px solid rgba(232, 235, 240, .7);

  padding: 15px;

  transition: box-shadow .18s;

}

/* 可点击卡片：按下轻沉反馈 */

.card[data-id], .feed-card, .company-card, .boss-card, .plaza-card, .work-item, .my-circle-row, .conv, .citem {

  transition: transform .12s ease, box-shadow .18s ease;

}

.card[data-id]:active, .feed-card:active, .company-card:active, .boss-card:active,

.plaza-card:active, .work-item:active, .my-circle-row:active, .conv:active, .citem:active {

  transform: scale(.985);

  box-shadow: var(--shadow-2);

}



/* ===== 5. 按钮：统一高度 / 渐变 / 按压反馈 ===== */

.btn {

  border-radius: var(--radius-sm);

  font-weight: 600;

  letter-spacing: .3px;

  transition: transform .12s ease, filter .15s, box-shadow .15s;

}

.btn:active { transform: scale(.97); filter: brightness(.94); }

.btn-primary {

  background: linear-gradient(135deg, #2f6bff, var(--primary));

  box-shadow: 0 6px 16px rgba(29, 78, 216, .28);

}

.btn-primary:active { box-shadow: 0 3px 10px rgba(29, 78, 216, .3); }

.btn-primary:disabled, .btn:disabled { opacity: .55; box-shadow: none; }

/* 幽灵按钮 / 联系按钮：按压反馈 + 品牌色描边升级 */

.ghost-btn { transition: all .15s; color: #4a5568; }

.ghost-btn:active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); transform: scale(.96); }

.contact-btn { background: linear-gradient(135deg, #2f6bff, var(--primary)); font-weight: 600; transition: transform .12s, box-shadow .15s; }

.contact-btn:active { transform: scale(.94); box-shadow: 0 4px 12px rgba(29, 78, 216, .3); }



/* ===== 6. 表单控件 ===== */

.field label { font-weight: 600; color: #3a4556; font-size: 13px; }

.field input, .field textarea, .field select {

  border-radius: var(--radius-sm);

  background: #fff;

  transition: border-color .15s, box-shadow .15s;

  font-size: 15px;

}

.field input:focus, .field textarea:focus, .field select:focus {

  outline: none; border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(29, 78, 216, .13);

}

.field input::placeholder, .field textarea::placeholder { color: #b9c2ce; }

/* 分段选择器：选中态加投影，未选中可点 */

.seg .opt { transition: all .15s; cursor: pointer; }

.seg .opt.active { box-shadow: 0 3px 10px rgba(29, 78, 216, .18); }



/* ===== 7. 标签 / 角标 ===== */

.tag { border-radius: 6px; padding: 2px 8px; font-size: 11px; }

.tag.vip { background: linear-gradient(135deg, #f7e7c3, #f0d49a); color: #7a5410; }

.tag.verified { background: #e8f6ee; color: #0f7a44; }

.tag.enterprise { background: var(--primary-soft); color: var(--primary); }



/* ===== 8. 空状态：带图标 + 说明层级 ===== */

.empty {

  padding: 52px 20px;

  color: #a6afbd;

  font-size: 13.5px;

  line-height: 1.6;

}

.empty::before {

  content: "📭";

  display: block;

  font-size: 34px;

  margin-bottom: 10px;

  opacity: .55;

  filter: grayscale(30%);

}



/* ===== 9. 骨架屏（路由加载期显示，替代「加载中…」文字） ===== */

@keyframes sm-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.sk {

  background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 37%, #eef1f5 63%);

  background-size: 800px 100%;

  animation: sm-shimmer 1.3s ease-in-out infinite;

  border-radius: 8px;

}

.sk-card { background: #fff; border-radius: var(--radius); padding: 15px; margin-bottom: 12px; box-shadow: var(--shadow-1); }

.sk-line { height: 13px; margin-bottom: 10px; }

.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.w80 { width: 80%; }

.sk-block { height: 96px; margin-top: 4px; }

.sk-row { display: flex; gap: 10px; align-items: center; }

.sk-ava { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; }



/* ===== 10. 轻提示 Toast ===== */

#toast {

  position: fixed; left: 50%; bottom: calc(96px + var(--sa-b)); transform: translateX(-50%);

  z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 8px;

  pointer-events: none; width: max-content; max-width: 82vw;

}

.toast-item {

  padding: 10px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 500; color: #fff;

  background: rgba(22, 32, 46, .92); box-shadow: 0 8px 24px rgba(15, 39, 71, .28);

  animation: h5-in .22s ease; transition: opacity .24s, transform .24s;

  max-width: 100%; word-break: break-all; text-align: center; line-height: 1.5;

}

.toast-ok { background: linear-gradient(135deg, #16a34a, #0f9d58); }

.toast-err { background: linear-gradient(135deg, #ef5a5a, #d23b3b); }

.toast-warn { background: linear-gradient(135deg, #f0a92b, #d9822b); }

.toast-item.out { opacity: 0; transform: translateY(8px); }

@keyframes h5-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }



/* ===== 11. 横向滚动区隐藏滚动条（首页 tab / 推荐位） ===== */

.home-tabs, .rec-window, .top-plans, .boss-cats, .pub-cats { scrollbar-width: none; -ms-overflow-style: none; }

.home-tabs::-webkit-scrollbar, .rec-window::-webkit-scrollbar, .top-plans::-webkit-scrollbar,

.boss-cats::-webkit-scrollbar, .pub-cats::-webkit-scrollbar { display: none; }



/* ===== 12. 首页局部打磨 ===== */

.home-search {

  box-shadow: 0 4px 16px rgba(16, 32, 56, .08);

}

.home-section-title { letter-spacing: .3px; }

/* 快捷入口按压反馈 */

.work-item:active .work-ic { transform: scale(.92); }

.work-ic { transition: transform .12s ease; }

/* 推荐位加入按钮 */

.rec-grid-join, .rec-feature-count { letter-spacing: .2px; }



/* ===== 13. 列表分隔与滚动条（纵向） ===== */

.view::-webkit-scrollbar { width: 0; height: 0; }



/* ===== 14. 动画进场：页面内容轻浮现 ===== */

@keyframes h5-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.view > .card, .view > .feed-card, .view > .company-card, .view > .boss-card, .view > .plaza-card,

.view > .vip-tier, .view > .citem, .view > .sec-card {

  animation: h5-fade-up .26s ease both;

}

@media (prefers-reduced-motion: reduce) {

  .view > * { animation: none !important; }

  .sk { animation: none; }

}



/* ===== 15. 弹层 / 图片查看器 ===== */

.img-viewer { backdrop-filter: blur(4px); }

/* 原生风格的页面级弹窗容器（JS 动态创建） */

.sm-dialog-mask {

  position: fixed; inset: 0; background: rgba(10, 22, 44, .48); z-index: 998;

  display: flex; align-items: center; justify-content: center; padding: 28px;

  animation: h5-in .18s ease;

}

.sm-dialog {

  background: #fff; border-radius: var(--radius-lg); padding: 22px 20px 16px;

  width: 100%; max-width: 320px; box-shadow: var(--shadow-2);

  animation: h5-pop .2s ease;

}

.sm-dialog-title { font-size: 16px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 10px; }

.sm-dialog-text { font-size: 14px; color: #5a6678; line-height: 1.7; text-align: center; word-break: break-all; }

.sm-dialog-btns { display: flex; gap: 10px; margin-top: 18px; }

.sm-dialog-btns .btn { flex: 1; }

@keyframes h5-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }



/* ===== 16. 圈子卡片：简介 / 推荐标（通讯录广场合并进圈子页） ===== */

.cdesc {

  margin-top: 5px;

  font-size: 12.5px;

  color: #7c8698;

  line-height: 1.55;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.tag.rec {

  background: linear-gradient(135deg, #f7e7c3, #f0d49a);

  color: #7a5410;

  font-weight: 700;

}



/* ===== 17. 发布栏目：58 同城风格（圆角方块渐变图标，替代异形圆片） ===== */

.pub-cat {

  background: none;

  border-radius: 0;

  padding: 0;

  gap: 9px;

  width: 76px;

}

.pub-cat-icon {

  width: 56px;

  height: 56px;

  border-radius: 17px;

  background: rgba(255,255,255,.25); /* 兜底，实际由内联渐变接管 */

  font-size: 22px;

  font-weight: 800;

  color: #fff;

  box-shadow: 0 8px 18px rgba(16, 32, 56, .16);

}

.pub-cat-label {

  font-size: 13px;

  font-weight: 600;

  color: #3a4556;

}



/* ===== 18. 排版升级：字号+1、标题加粗、次级文字提亮（对标成熟信息流站点） ===== */

body { font-size: 15px; color: #1c2634; }



/* 次级文字：从「浅灰小字」提为「中灰正常字号」，保证可读 */

.muted { color: #66738a; font-size: 12.5px; }

.csrc { color: #66738a; font-size: 12.5px; }

.meta { color: #66738a; }



/* 卡片标题：统一 16px 加粗，主次分明 */

.title { font-size: 16px; font-weight: 700; color: #1c2634; }

.ctitle { font-size: 15.5px; font-weight: 700; }

.cell-name, .cd-name, .conv > div > div:first-child { font-weight: 600; }



/* 首页区块标题 / 推荐位标题加大加粗 */

.home-section-title, .section-title, .rec-title, .feed-section-title {

  font-size: 16.5px;

  font-weight: 800;

  color: #1c2634;

}

.feed-hot-title { font-size: 15.5px; font-weight: 700; color: #1c2634; }



/* 表单输入字号 +1，与正文一致 */

.field input, .field textarea, .field select { font-size: 15px; }

.plaza-search input { font-size: 15px; }



/* 聊天气泡同步 */

.bubble { font-size: 15px; }



/* ===== 19. 信息流卡片：对标 58 类站点排版 ===== */

.feed-card { padding: 12px; border-radius: 14px; }

.feed-hot-left { flex: 0 0 104px; width: 104px; height: 104px; border-radius: 12px; }

.feed-hot-tags { gap: 6px; margin-bottom: 7px; }

.feed-tag-pill { font-size: 11.5px; padding: 2.5px 8px; border-radius: 5px; font-weight: 600; }

.feed-tag-top { background: #fa5151; color: #fff; }

.feed-tag-type { background: #e3edff; color: #1d6fe0; }

.feed-tag-loc { background: #eef1f5; color: #5a6678; }

.feed-tag-normal { background: #f2f4f8; color: #5a6678; }

.feed-hot-title { font-size: 16px; font-weight: 800; color: #1c2634; line-height: 1.4; margin-bottom: 8px; }

.feed-hot-meta { justify-content: space-between; color: #66738a; font-size: 12.5px; }

.feed-hot-meta .feed-meta-sep::after { content: ''; }

.feed-promo-line { color: #e8412e; font-weight: 600; padding-top: 2px; }



/* ===== 20. 阅读舒适度：整体再大一号、再黑一点（用户群体年龄偏高） ===== */

body { font-size: 16px; line-height: 1.6; letter-spacing: .2px; color: #141c28; }



/* 全站小灰字统一提级：12 → 13，颜色加深 */

.muted, .csrc, .meta, .feed-hot-meta, .detail-meta { font-size: 13px !important; color: #55607a; }

.work-label { font-size: 13px !important; color: #2a3648; font-weight: 600; }

.tab { font-size: 12px !important; }

.home-tab { font-size: 14px !important; }

.feed-tag-pill { font-size: 12px !important; }

.tag { font-size: 12.5px; }

.kpi-label, .metric-label { font-size: 13px; }



/* 标题层级同步放大 */

.title { font-size: 17px; font-weight: 700; }

.ctitle { font-size: 16px; }

.feed-hot-title { font-size: 16.5px !important; }

.home-section-title, .section-title, .rec-title, .feed-section-title { font-size: 17px !important; }

.detail-title { font-size: 19px; font-weight: 800; }



/* 卡片描述行距放宽 */

.cdesc { line-height: 1.65; }



/* ===== 21. 对比度强化：全站字重加粗一档、灰字全部加深（解决「看着淡、看字累」） ===== */

body { font-weight: 500; color: #0f1722; }



/* 次级文字：从蓝灰提到深灰蓝，不再发虚 */

.muted, .csrc, .meta, .feed-hot-meta, .detail-meta { color: #3d495e !important; font-weight: 500; }

.kpi-label, .metric-label { color: #3d495e; }

.cdesc { color: #2a3648; }



/* 首页入口 / 底部 Tab：加粗加深 */

.work-label { color: #141c28; font-weight: 700; }

.tab { color: #3d495e; font-weight: 600; }

.tab.active { color: #1d4ed8; font-weight: 700; }



/* 筛选标签 / 徽标文字加深 */

.chip { color: #2a3648; font-weight: 600; }

.feed-tag-normal, .feed-tag-loc { color: #2a3648; }



/* 表单标签与输入文字 */

.field label { color: #141c28; font-weight: 600; }

.field input, .field textarea, .field select { color: #0f1722; font-weight: 500; }


/* ===== 22. 信息流卡片尺寸统一（所有卡片等高） ===== */
.feed-card-hot {
  align-items: flex-start !important;
}
.feed-hot-left {
  flex: 0 0 104px !important;
  width: 104px !important;
  height: 78px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f0f2f5 !important;
  flex-shrink: 0 !important;
}
.feed-hot-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.feed-hot-noimg {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== 23. 动态卡片等高：消除同一列表里卡片高矮不一 ===== */

/* A. 左图右文卡（首页热门动态 / 详情页相似内容）
   差异来源已全部锁死：标签只占一行、标题固定两行高、
   底部信息一行、推广行收进卡片内且无内容时高度归零。 */

.feed-card-hot {
  align-items: stretch !important;
  min-height: 122px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

.feed-hot-left {
  flex: 0 0 104px !important;
  width: 104px !important;
  height: 98px !important;
}

.feed-hot-right {
  min-height: 98px !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* 标签行：固定一行，超出部分右侧渐隐，不再换行把卡片顶高 */
.feed-hot-tags {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  height: 20px !important;
  gap: 5px !important;
  margin-bottom: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}

.feed-hot-tags .feed-tag-pill { flex: 0 0 auto !important; }

/* 标题：固定两行高度，只有一行标题的卡片不再矮一截 */
.feed-hot-title {
  font-size: 15.5px !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2 !important;
  min-height: 40px !important;
  margin-bottom: 0 !important;
}

/* 底部信息行：固定一行 */
.feed-hot-meta {
  height: 19px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* 推广行：从卡片外挪进卡片右侧底部；没有推广时留出空行但高度归零 */
.feed-hot-right .feed-promo-line {
  display: block !important;
  height: 16px !important;
  line-height: 16px !important;
  font-size: 12px !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.feed-hot-right .feed-promo-line:empty { height: 0 !important; }

/* B. 大卡动态（圈子动态 / 个人主页 / 搜索结果 / 我的动态）
   同样锁死：标题两行、正文两行、标签一行。 */

.post-card .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
  min-height: 46px;
}

.post-card .content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  min-height: 48px;
}

.post-card .content:empty { min-height: 0; }

/* 标签行：固定一行，超出渐隐 */
.post-card .post-tags {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  height: 22px;
  margin-top: 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}

.post-card .post-tags:empty { height: 0; margin-top: 0; }

.post-card .post-tags .tag {
  flex: 0 0 auto;
  margin: 0 6px 0 0;
}

/* ===== 24. 发布页：@提及选人面板 + 输入体验打磨（非富文本） ===== */
/* 描述输入区：自动增高，超高内滚，不撑破页面 */
textarea.pub-editor {
  min-height: 96px;
  max-height: 280px;
  resize: none;
  overflow-y: auto;
  line-height: 1.6;
}
/* 输入区工具条：左边提示、右边操作 */
.editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.editor-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.editor-tools .ghost-btn {
  padding: 4px 10px;
  font-size: 13px;
}
.char-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.char-count.warn { color: var(--warn); }
.char-count.over { color: var(--danger); }
/* 底部弹出面板：遮罩复用 .sm-dialog-mask，面板本身从底部升起 */
.sm-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: calc(var(--app-h, 100vh) * 0.72);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--sa-b);
  box-shadow: var(--shadow-2);
  animation: h5-sheet-up .22s ease;
}
@keyframes h5-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.sm-sheet-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sm-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}
.sm-sheet-search { padding: 10px 12px 4px; }
.sm-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 12px 12px;
}
.sm-sheet-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line-2);
  display: flex;
  gap: 10px;
}
.sm-sheet-foot .btn { flex: 1; }
/* 候选人行 */
.mp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
}
.mp-item + .mp-item { border-top: 1px solid var(--line-2); }
.mp-item.sel { background: var(--primary-soft); }
.mp-ava {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef1f6;
  flex: 0 0 38px;
}
.mp-info { flex: 1; min-width: 0; }
.mp-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.mp-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid #cfd8e6;
  flex: 0 0 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
}
.mp-item.sel .mp-check { background: var(--primary); border-color: var(--primary); }
.mp-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 36px 0;
  line-height: 1.8;
}
/* 已提及的人：小 chip 展示，可点掉 */
.mention-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.mention-picked:empty { display: none; }
.mention-picked .mp-chip {
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* 正文里被 @ 到的昵称高亮（详情页） */
.mention-at {
  color: var(--primary);
  font-weight: 600;
}


/* ================= 25. 动态详情打磨：联系 TA / 互动条 / 评论操作 ================= */
/* 作者卡片（联系 TA）：整块可点跳名片，联系方式沿用名片页的三态口径 */
.dac {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-2);
}
.dac-top { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.dac-ava { width: 46px; height: 46px; font-size: 17px; flex: none; }
.dac-info { flex: 1; min-width: 0; }
.dac-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.dac-sub {
  font-size: 12px; color: #9aa0a6; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dac-contact { font-size: 12px; color: #555; margin-top: 6px; line-height: 1.5; }
.dac-btns { display: flex; gap: 8px; margin-top: 12px; }
.dac-btns .btn {
  flex: 1; font-size: 13px; padding: 8px 4px;
  text-align: center; text-decoration: none;
}
.dac-btns .muted { font-size: 13px; align-self: center; }

/* 互动条：点赞 / 收藏可点，选中态用主色 */
.detail-stats { align-items: center; }
.ds-btn {
  border: 1px solid var(--line-2);
  background: #fff;
  color: #9aa0a6;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}
.ds-btn.on {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* 评论区：名字/头像可点跳名片，楼主有标识，操作按钮轻量 */
.cm-text { margin-top: 2px; word-break: break-word; }
.cm-name { font-weight: 600; color: #3a7afe; cursor: pointer; }
.cm-ava { cursor: pointer; }
.cm-op-tag {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--buy);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 4px;
  vertical-align: 1px;
}
.cm-ops { display: flex; gap: 14px; margin-top: 6px; }
.cm-op-btn { border: 0; background: none; padding: 0; color: #9aa0a6; font-size: 12px; cursor: pointer; }
.cm-op-btn.danger { color: #c8761a; }

/* 评论输入：回复态提示 + 输入行 */
.cm-input { margin-top: 12px; }
.cm-input-row { display: flex; gap: 8px; margin-top: 8px; }
.cm-input-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 13px;
}
.cm-input-row .contact-btn { margin-left: 0; flex: none; }
.cm-reply-tip {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #9aa0a6;
}
.cm-reply-tip button {
  border: 0; background: none; padding: 0;
  color: var(--primary); font-size: 12px; cursor: pointer;
}

/* ===== 圈子管理 / 分销（#11） ===== */
.sheet.sm-dialog { max-width: 360px; max-height: 76vh; overflow: auto; border-radius: 18px; }
.sheet-body { font-size: 15px; }
.mg-item {
  padding: 14px 6px; border-bottom: 1px solid var(--line-2, #eef0f2);
  display: flex; align-items: center; cursor: pointer;
}
.mg-item:active { background: #f6f8fb; }
.mg-item.danger { color: #e0483b; }
.mg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--line-2, #eef0f2);
}
.mg-row .tag { margin-left: 4px; }
.ghost-btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 14px; margin-left: 6px; }
.mg-list { max-height: 52vh; overflow: auto; }

/* 圈子动态卡片管理按钮 */
.post-card-wrap { position: relative; }
.circle-post-mg {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(15, 39, 71, .55); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer;
}
.circle-post-mg:active { background: rgba(15, 39, 71, .8); }

/* 圈子工具条 */
.cd-tools .btn-primary { background: var(--primary); }

/* ================= 28. 会员中心打磨（清单 #12） ================= */

/* 会员信息顶卡 */
.member-hero { padding: 22px 16px; }
.member-hero.is-member {
  background: linear-gradient(135deg, #fff7e8, #fffdf8);
  border: 1px solid #ffe7bf;
}
.mh-badge {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: #9aa0a6; background: #eef0f2; border-radius: 12px; padding: 3px 12px;
}
.member-hero.is-member .mh-badge { color: #b8801f; background: #ffeccb; }
.mh-status { font-size: 16px; font-weight: 600; margin: 10px 0 4px; }
.mh-status b { color: var(--primary); }
.mh-points { font-size: 13px; color: #7a828e; }
.mh-points b { color: #1d4ed8; }

/* 套餐分段标题 */
.section-title {
  padding: 14px 12px 6px; font-size: 15px; font-weight: 700; color: #1a2330;
}

/* 套餐卡片列表 */
.tier-list { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }
.tier-card {
  position: relative; background: #fff; border: 1px solid #e7eaef; border-radius: 14px; padding: 16px;
}
.tier-card.tier-best {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(29, 78, 216, .12);
}
.tier-flag {
  position: absolute; top: -11px; right: 14px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 600;
  padding: 2px 12px; border-radius: 11px;
}
.tier-name { font-size: 16px; font-weight: 700; }
.tier-price { font-size: 26px; font-weight: 800; margin-top: 4px; }
.tier-unit { font-size: 13px; font-weight: 400; color: #9aa0a6; margin-left: 4px; }
.tier-perday { font-size: 12px; color: #9aa0a6; margin-top: 2px; }
.tier-ben { margin: 12px 0 14px; padding-left: 18px; }
.tier-ben li { font-size: 13px; color: #5b6472; margin: 5px 0; list-style: disc; }

/* 会员开通引导提示 */
.member-tip {
  margin: 12px; padding: 12px 14px; background: #f4f7ff;
  border-radius: 10px; font-size: 13px; color: #5b6472; line-height: 1.7;
}

/* 幽灵按钮（当前档「续费」用，与主色「开通」形成区分） */
.btn.btn-ghost {
  background: #fff; color: var(--primary);
  border: 1px solid var(--primary);
}
.btn.btn-ghost:active { background: #f0f5ff; }

/* ================= 27. 首页信息流（清单 #3）：公告滚动条 + Banner 轮播 ================= */

/* --- 首页公告条：单条常驻，多条纵向无缝滚动（整组复制两遍 + translateY(-50%)） --- */
.home-notice {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 0; padding: 0 10px; height: 34px;
  border-radius: 17px; border: 1px solid #ffe7bf;
  background: linear-gradient(90deg, #fff7e8, #fffdf8);
  overflow: hidden;
}
.home-notice .hn-viewport { flex: 1; min-width: 0; height: 34px; overflow: hidden; }
.home-notice .hn-track { transition: transform .5s ease; }
.home-notice .hn-track.rolling { animation: hn-roll linear infinite; }
@keyframes hn-roll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.home-notice .hn-item {
  height: 34px; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #8a5a12; cursor: pointer; overflow: hidden;
}
.home-notice .hn-ic { font-size: 12px; flex-shrink: 0; }
.home-notice .hn-txt {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-notice .hn-more {
  flex-shrink: 0; font-size: 12px; color: #c08a2d;
  padding-left: 8px; border-left: 1px solid #ffe0b2; cursor: pointer;
}
.home-notice .hn-more:active { opacity: .6; }

/* --- Banner 轮播：后台配了图走图片，没配图回退成原来的渐变文字条 --- */
.home-banner { margin: 0 12px 8px; }
.home-banner .hb-window { overflow: hidden; border-radius: 12px; }
.home-banner .hb-track { display: flex; transition: transform .45s cubic-bezier(.25, .8, .25, 1); }
.home-banner .hb-slide { height: 64px; cursor: pointer; }
.home-banner .hb-img { width: 100%; height: 64px; object-fit: cover; display: block; }
.home-banner .hb-slide.hb-text-only {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1d4ed8, #2f6fd0);
}
.home-banner .hb-text {
  color: #fff; font-size: 20px; font-weight: 600; padding: 0 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-banner .hb-dots { display: flex; justify-content: center; gap: 6px; padding: 6px 0 0; }
.home-banner .hb-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d8d8d8; transition: all .3s; cursor: pointer;
}
.home-banner .hb-dots span.on { background: var(--primary); width: 14px; border-radius: 3px; }

/* --- 公告详情弹层 --- */
.nsi-item { padding: 12px 4px; border-bottom: 1px solid var(--line-2, #eef0f2); }
.nsi-item:last-child { border-bottom: 0; }
.nsi-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.nsi-content { font-size: 14px; color: #5b6472; line-height: 1.6; }
.nsi-link { margin-top: 6px; font-size: 13px; color: var(--primary); cursor: pointer; }

/* ================= 29. 我的内容管理（清单 #13）：动态删除入口 / 收藏分类筛选 ================= */

/* 我的动态：卡片内删除按钮（靠右、弱化描边红，不与主操作抢注意力） */
.my-post-del {
  margin-left: auto; flex: 0 0 auto;
  background: #fff; color: #e54d42; border: 1px solid #f3c3bf;
  border-radius: 12px; padding: 3px 12px; font-size: 12px;
}
.my-post-del:active { background: #fff2f1; }
.my-post-del:disabled { opacity: .5; }

/* 我的收藏：搜索框 */
.coll-search { margin-top: 10px; }
.coll-search input {
  width: 100%; border: 1px solid var(--border); border-radius: 18px;
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  box-sizing: border-box;
}

/* 底部弹层（askAmount / askText）内的「取消 / 确定」按钮行 */
.sheet-btns { display: flex; gap: 10px; margin-top: 6px; }
.sheet-btns .btn { flex: 1; width: auto; margin: 0; }

/* ===== 企业认证状态条（编辑名片 / 发布动态 两处认证面板共用） ===== */
.cert-status { border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; border-left: 3px solid transparent; }
.cert-st-title { font-size: 14px; font-weight: 700; }
.cert-st-tip { font-size: 12px; margin-top: 4px; line-height: 1.6; opacity: .92; }
.cert-st-none     { background: #f4f6f9; border-left-color: #9aa0a6; color: #5f6672; }
.cert-st-pending  { background: #fff7ed; border-left-color: #d9822b; color: #8a4b0f; }
.cert-st-approved { background: #f0fdf4; border-left-color: #16a34a; color: #146c2e; }
.cert-st-rejected { background: #fef2f2; border-left-color: #e54d42; color: #a02016; }
/* 审核中 / 已认证 时锁定的表单元素（防覆盖已通过状态） */
.cert-lockable:disabled { opacity: .5; cursor: not-allowed; }
.cert-lockable:disabled.btn-primary { background: #b9c2d0; }

/* ============ P1-12 触摸目标 ≥44px 体验兜底（2026-09-09） ============ */
/* 可点击筛选 chip（行业 / 圈子 / 排序 / 标签等） */
.chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
/* 详情页操作按钮与举报按钮 */
.detail-actions .btn { padding: 12px 4px; min-height: 44px; box-sizing: border-box; }
.detail-report { padding: 12px; min-height: 44px; box-sizing: border-box; }
/* 我的动态删除按钮 */
.my-post-del { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
/* 分段切换（个人 / 企业名片、筛选项等） */
.seg .opt { min-height: 44px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* 资讯封面（后台「文章」cover 字段：列表 + 详情渲染） */
.art-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: #f2f3f5; }

/* 列表头像占位底色：图片加载中/失败时显示灰底，不出现破图图标 */
.mp-ava { background: #eef0f2; }