/* ==========================================================================
   外起 · forthrise C 端小程序样式
   ========================================================================== */

/* ------------------------------ 桌面外壳 ------------------------------ */
.mp-stage {
  min-height: calc(100vh - var(--toweb-h, 0px));
  display: flex; align-items: flex-start; justify-content: center;
  gap: 40px; padding: 40px 24px calc(40px + var(--safe-b));
  background:
    radial-gradient(1200px 600px at 12% -10%, var(--c-brand-soft), transparent 62%),
    radial-gradient(900px 500px at 92% 8%, rgba(0, 184, 148, 0.07), transparent 60%),
    var(--c-bg);
}

.device {
  position: relative; flex: 0 0 auto;
  width: 390px; height: 844px;
  padding: 11px;
  border-radius: 52px;
  background: linear-gradient(160deg, #2b2b30, #0c0c0e 55%, #232328);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.09) inset,
    0 34px 80px rgba(0, 0, 0, 0.32),
    0 8px 22px rgba(0, 0, 0, 0.18);
}
.device::after {
  content: ""; position: absolute; right: -3px; top: 186px;
  width: 3px; height: 92px; border-radius: 0 3px 3px 0;
  background: linear-gradient(#3a3a40, #1c1c20);
}
.screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 42px; overflow: hidden;
  background: var(--c-bg);
  display: flex; flex-direction: column;
  isolation: isolate;
}

/* ------------------------------ 状态栏 ------------------------------ */
.status-bar {
  flex: 0 0 auto; height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 26px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--c-primary);
  font-family: var(--font-num);
  user-select: none;
}
.status-bar .sb-right { display: flex; align-items: center; gap: 5px; }
.sb-bat { width: 22px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px currentColor; position: relative; opacity: .95; }
.sb-bat::after { content: ""; position: absolute; left: 1.6px; top: 1.6px; bottom: 1.6px; width: 13px; border-radius: 1.4px; background: currentColor; }
.sb-bat::before { content: ""; position: absolute; right: -3px; top: 3.2px; width: 1.6px; height: 4.6px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .5; }
.notch {
  position: absolute; z-index: 30; top: 9px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 30px; border-radius: 99px;
  background: #08080a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ------------------------------ 导航栏 ------------------------------ */
.mp-nav {
  flex: 0 0 auto; position: relative; z-index: 12;
  height: var(--navbar-h);
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  /* 🔴 2026-09-30（磊哥定）：去掉顶栏与工作区之间的横灰线，三端一致。
     原为 `box-shadow: inset 0 -1px 0 var(--c-line)`（亮色 #eee / 暗色 #2c2c2e）。
     顶栏是半透明毛玻璃（--c-glass + blur），与内容区本就有观感差异。
     ⚠️ `.nav-plain`（找工五页）下面那条 `box-shadow: none` 保留 —— 语义独立，
        将来若单页要恢复线条不会互相牵连。 */
  box-shadow: none;
}
/* 第 41 期·补7（2026-09-28 磊哥定稿）：找工地图五页顶栏 ——
   ① nav-plain（jobs 四页 + 报刊亭）：去掉导航栏底部灰色分隔线；
   ② nav-jobs（仅 jobs 四页）：右上角「我的申请」图标线条改主题蓝
     （报刊亭的搜索/通知按钮不动 —— 磊哥原话「报刊亭里的通知和搜索按钮，不变」）。
   类由 app.js 的 renderTab 按路由精确打点（详情页不带）。 */
.mp-nav.nav-plain { box-shadow: none; }
.mp-nav.nav-jobs .mp-nav-actions .ic-btn { color: var(--c-brand); }
.mp-nav-title {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 16px; font-weight: 600; letter-spacing: -0.012em;
  pointer-events: none;
  padding: 0 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; z-index: 1; }
.mp-nav-actions .badge-count { position: absolute; top: 2px; right: 2px; }
.mp-nav-btn { position: relative; }

/* 子级分段（发现 / 找工 内部导航） */
.mp-subnav {
  flex: 0 0 auto; position: relative; z-index: 11;
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.mp-subnav .utabs { border-bottom: 1px solid var(--c-line); padding: 0 16px; scrollbar-width: none; }
.mp-subnav .utabs::-webkit-scrollbar { display: none; }

/* 子分页小红点：暗岗新频道提示（停留在该分页时自动收起） */
.utab-dot {
  position: absolute; top: 7px; right: -8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-error);
  pointer-events: none;
}

/* ------------------------------ 内容区 ------------------------------ */
.mp-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-quaternary) transparent;
  background: var(--c-bg);
}
.mp-body::-webkit-scrollbar { width: 4px; }
.mp-body::-webkit-scrollbar-thumb { background: var(--c-quaternary); border-radius: 99px; }
.mp-page { padding: var(--pad-page) var(--pad-page) 24px; }
.mp-page-flush { padding: 0 0 24px; }
.mp-pad { padding-left: var(--pad-page); padding-right: var(--pad-page); }

/* 顶部吸顶工具条 */
.mp-toolbar {
  position: sticky; top: 0; z-index: 10;
  padding: 10px var(--pad-page);
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.mp-toolbar.is-plain { background: var(--c-bg); }

/* ------------------------------ Tab 栏 ------------------------------ */
/* 第 42 期（2026-09-29 磊哥截图定稿）：手机底部改「悬浮 Dock」——
   底栏容器只做占位（透明），真正的视觉是一条圆角毛玻璃胶囊（.dock）+ 右侧圆形「我」（.dock-me）。
   桌面（web.css 的 .web-aside .tabbar）有自己的完整覆盖，不受这里影响。 */
.tabbar {
  flex: 0 0 auto; position: relative; z-index: 20;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding: 0 12px var(--safe-b);
  display: flex; align-items: center;
  background: transparent; box-shadow: none;
}
/* 一级导航的两套结构：
   .tabbar-m = 手机（悬浮 Dock：社区/找工/消息 + 圆形我）；.tabbar-d = 桌面（三组分节）。
   同一份数据渲染两套，由 CSS 按断点反选 —— JS 不做任何宽度判断。 */
.tabbar-m { display: flex; flex: 1 1 auto; width: 100%; align-items: center; gap: 10px; }
.tabbar-d { display: none; }
.nav-group-h, .nav-g-badge { display: none; }

.dock {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  height: calc(var(--tabbar-h) - 2px);
  border-radius: var(--r-pill);
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--c-line);
  padding: 0 5px;
  overflow: hidden;
}
.dock-item {
  flex: 1 1 0; height: calc(var(--tabbar-h) - 12px);
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: var(--c-tertiary);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.dock-item:active { transform: scale(0.95); }
.dock-item.is-on { background: var(--c-brand-soft); color: var(--c-brand); }
/* 截图口径：未选中只显示图标，选中才带文字 */
.dock-item .dock-label { display: none; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.dock-item.is-on .dock-label { display: inline; }
.dock-ic { position: relative; display: flex; }
.dock-item .badge-count { position: absolute; top: -5px; right: -10px; }
.dock-me {
  flex: 0 0 auto;
  width: calc(var(--tabbar-h) - 2px); height: calc(var(--tabbar-h) - 2px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--c-line);
  color: var(--c-secondary);
  transition: color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.dock-me:active { transform: scale(0.95); }
.dock-me.is-on { color: var(--c-brand); }

/* 第 42 期：首页顶栏（.nav-home）= 左「推荐 ˅」排序入口 + 右大「+」发帖，截图口径 ——
   隐藏搜索 / 铃铛 / 页面标题（搜索与通知由「消息」页签与各栏目页承接）。 */
.mp-nav.nav-home .ic-btn { display: none; }
.mp-nav.nav-home .mp-nav-title { display: none; }
.nav-feed-pill {
  display: flex; align-items: center; gap: 3px;
  height: 34px; padding: 0 9px 0 12px;
  border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-line);
  font-size: 14px; font-weight: 600; z-index: 1;
  transition: transform var(--dur-1) var(--ease);
}
.nav-feed-pill:active { transform: scale(0.96); }
.nav-feed-pill-t { line-height: 1; }
.nav-plus {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); color: var(--c-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--c-line);
  z-index: 1;
  transition: transform var(--dur-1) var(--ease);
}
.nav-plus:active { transform: scale(0.94); }

/* 「推荐 ˅」信息流选择抽屉的行（复用 .sheet-modal 外壳） */
.fm-list { display: flex; flex-direction: column; padding-bottom: 6px; }
.fm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 6px; font-size: 15px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-primary); text-align: left;
}
.fm-row:last-child { border-bottom: 0; }
.fm-row.is-on { color: var(--c-brand); font-weight: 600; }

.tabbar-item {
  flex: 1 1 0; height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; position: relative;
  color: var(--c-tertiary);
  transition: color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.tabbar-item:active { transform: scale(0.94); }
.tabbar-item.is-on { color: var(--c-primary); }
.tabbar-item .tb-label { font-size: 10px; font-weight: 500; letter-spacing: 0; }
.tabbar-item .tb-ic { position: relative; }
.tabbar-item .badge-count { position: absolute; top: -5px; right: -9px; }
.tabbar-item.is-on .tb-ic { transform: translateY(-1px); }
.tabbar-item.is-on::before {
  content: ""; position: absolute; top: 3px; width: 22px; height: 3px; border-radius: 99px;
  background: var(--c-primary); opacity: 0;
  animation: tabpop var(--dur-3) var(--ease-out) forwards;
}
@keyframes tabpop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 悬浮发帖按钮 */
.fab {
  position: absolute; right: 16px; z-index: 22;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: var(--c-bg);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.26), 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.fab:hover { transform: scale(1.06); }
.fab:active { transform: scale(0.94); }
.fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.7); }
.fab-menu {
  position: absolute; right: 16px; z-index: 21;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 80px);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: all var(--dur-2) var(--ease);
}
.fab-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.fab-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-primary);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-1) var(--ease);
}
.fab-menu-item:active { transform: scale(0.96); }

/* ------------------------------ 帖子卡片 ------------------------------ */
.post {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.post:hover { box-shadow: var(--shadow-pop); }
.post-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px 0; }
.post-author { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.post-meta { font-size: 11px; color: var(--c-tertiary); margin-top: 1px; }
.post-body { padding: 10px 14px 12px; }
.post-title { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 5px; }
.post-text { font-size: 13.5px; color: var(--c-secondary); line-height: 1.62; }
/* 第 46 期·补8i（2026-09-30 磊哥定）：信息流卡片里「图片」与下方「#标签」原本贴在一起（间距 0），
   统一加 12px 下边距，让标签离图片远一点。手机/桌面共用（web.css 未覆盖 margin）。
   用字面量 12px：手机端 mini.css 不加载桌面 --d-sp-* 令牌，var() 会失效。 */
.post-media { margin: 0 0 12px; position: relative; padding: 0 14px; }
.post-media .cv { width: 100%; border-radius: 14px; }
.post-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.post-media-grid .cv:first-child { grid-column: span 2; }
/* P3：真实上传的图片 / 视频。第 46 期·补8（磊哥定）：卡片里的图改成
   「满宽 + 原始比例完整显示」——不再压成固定 196px 的小方块裁切。
   超高图用 max-height + object-fit:contain 兜底（缩到框内完整显示，不裁），
   点图进入全屏看图（data-img-open，见 app.js openImageViewer）。 */
/* 补8 修订（2026-09-30 磊哥定）：卡片图片不再是满宽大图，改为限制尺寸的圆角矩形缩略图。
   按原比例完整显示（不裁切），超出的宽/高各自缩进框内；左对齐贴着正文，像帖子里的配图。 */
.post-media .post-img { display: block; width: auto; max-width: 440px; max-height: 340px; object-fit: contain; background: var(--c-card); border-radius: 14px; cursor: zoom-in; }
.post-media .post-video { display: block; width: 100%; height: 200px; object-fit: contain; background: #000; }
.post-img { display: block; max-width: 480px; width: auto; background: var(--c-card); border-radius: 12px; }
.post-video { display: block; width: 100%; background: #000; }
/* 第 46 期·补8（磊哥定）：点图全屏看图（lightbox）。参考即刻/微博沉浸式看图：
   深色遮罩 + 图片居中完整显示 + 点任意处/Esc/右上角× 关闭。 */
.img-viewer { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; }
.img-viewer-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .86); }
.img-viewer-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.img-viewer-stage { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; display: grid; place-items: center; }
.img-viewer-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.img-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; }
.img-viewer-nav.is-prev { left: 16px; }
.img-viewer-nav.is-next { right: 16px; }
.img-viewer-count { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-size: 13px; }
.img-viewer-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, .6); font-size: 12px; white-space: nowrap; }
.post-actions {
  display: flex; align-items: center;
  padding: 6px 6px 8px;
  box-shadow: inset 0 1px 0 var(--c-line);
  margin-top: 4px;
}
.post-act {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; border-radius: var(--r-sm);
  font-size: 12px; color: var(--c-secondary);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.post-act:hover { background: var(--c-fill-hover); }
.post-act:active { transform: scale(0.95); }
.post-act.is-on { color: var(--c-primary); font-weight: 600; }
.post-act.is-on .ic { animation: pop var(--dur-3) var(--ease-out); }
.post-act[data-act="toggle-like"].is-on { color: #e04a4a; }
.post-act[data-act="toggle-dislike"].is-on { color: var(--c-brand); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.post-featured {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--c-brand);
}

/* 投票 */
.poll { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.poll-opt {
  position: relative; overflow: hidden;
  padding: 10px 12px; border-radius: var(--r-input);
  background: var(--c-card);
  font-size: 13px; text-align: left; width: 100%;
  transition: background-color var(--dur-2) var(--ease);
}
.poll-opt:hover { background: var(--c-fill-hover); }
.poll-opt-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--c-brand-soft);
  transition: width var(--dur-3) var(--ease);
}
.poll-opt.is-chosen .poll-opt-fill { background: var(--c-brand-line); }
.poll-opt-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poll-opt.is-chosen .poll-opt-inner { font-weight: 600; }
.poll-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--c-tertiary); }

/* 链接卡 */
.link-card {
  display: flex; gap: 12px; align-items: center;
  margin: 0 14px 12px; padding: 12px;
  border-radius: var(--r-input); background: var(--c-card);
  transition: background-color var(--dur-1) var(--ease);
}
.link-card:hover { background: var(--c-fill-hover); }
.link-thumb { width: 52px; height: 52px; border-radius: 10px; flex: 0 0 auto; }
.link-title { font-size: 13px; font-weight: 600; line-height: 1.35; }

/* ------------------------------ 通用条目卡片 ------------------------------ */
.ent {
  background: var(--c-surface); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ent:hover { box-shadow: var(--shadow-pop); }
.ent-click { cursor: pointer; }
.ent-click:active { transform: scale(0.993); }
.ent-body { padding: 12px 14px 14px; }

/* Coffee Chat 条目 */
.cc-kind {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600; line-height: 1;
  background: var(--c-brand-soft); color: var(--c-brand);
}
.cc-kind.is-lead { background: var(--c-success-soft); color: #00916f; }
.cc-kind.is-coop { background: rgba(107, 78, 230, 0.1); color: #6b4ee6; }
.cc-when { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-secondary); }
.cc-progress { display: flex; align-items: center; gap: 8px; }
.cc-avatars { flex: 1 1 auto; min-width: 0; }

/* 报刊亭条目 */
.kk-cat {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600; line-height: 1;
}
.kk-cat.is-national { background: rgba(47, 107, 255, 0.1); color: var(--c-brand); }
.kk-cat.is-local { background: var(--c-warn-soft); color: #a97a10; }
.kk-cat.is-insight { background: rgba(107, 78, 230, 0.1); color: #6b4ee6; }
.kk-points { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.kk-point { display: flex; gap: 8px; font-size: 12.5px; color: var(--c-secondary); line-height: 1.55; }
.kk-point i { flex: 0 0 auto; margin-top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-quaternary); }

/* 标杆条目 */
.bm-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bm-stats { display: flex; gap: 18px; }

/* coffee chat 故事条目 */
.cs-topic {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600; line-height: 1;
}
.cs-topic.is-career { background: var(--c-brand-soft); color: var(--c-brand); }
.cs-topic.is-biz { background: var(--c-success-soft); color: #00916f; }
.cs-topic.is-talk { background: rgba(107, 78, 230, 0.1); color: #6b4ee6; }
.cs-topic.is-move { background: var(--c-warn-soft); color: #a97a10; }
.cs-quote {
  display: flex; gap: 7px; align-items: flex-start;
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-md, 10px);
  background: var(--c-brand-soft); color: var(--c-brand);
  font-size: 12.5px; line-height: 1.6;
}
.cs-quote span { min-width: 0; }
.cs-quote svg { flex: 0 0 auto; margin-top: 3px; }

/* 职位卡 */

/* 团队卡 */
.team-cover { height: 108px; }

/* 团队头像（公司 logo）：白环 + 一圈极细描边，两道边界各管一段 ——
   内环负责与深色封面分离，描边负责与米色 / 浅绿那类浅封面分离。
   只留内环时，浅封面上的 logo 会整个"糊"进背景、看不出边界（实测）。
   描边的深浅必须跟着主题反转（见下面 [data-theme="dark"] 那条）：
   内环在暗色主题下本身就是深色，压在深封面上同样会消失。 */
.team-logo {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 17px; font-weight: 600; color: #fff;
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px rgba(0, 0, 0, 0.10);
  background: linear-gradient(140deg, #4a5666, #2b3340);
}
[data-theme="dark"] .team-logo {
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px rgba(255, 255, 255, 0.18);
}
/* ---- 第 19 期（2026-09-26）：点企业卡片改开居中浮窗（团队主页照 bonjour 截图）----
   旧的 .team-body / .team-detail-* （封面浮出量那套）随第 18/19 期版式退场，一并清掉。
   .team-logo 仍被列表卡（jm-logo）与浮窗头部共用，保留（含上方深色主题描边反转）。 */
.jm-sh-head { display: flex; align-items: flex-start; gap: 12px; }
.jm-sh-name {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
}
.jm-sh-name > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-sh-intro { margin-top: 12px; line-height: 1.7; }
.jm-sh-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.jm-sh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-card);
  font-size: 12px; color: var(--c-secondary);
}
.jm-sh-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.jm-sh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 767px) {
  .jm-sh-duo { grid-template-columns: 1fr; }
}
.jm-sh-card-t { font-size: 12px; font-weight: 600; color: var(--c-tertiary); margin-bottom: 6px; }
.jm-sh-f { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.jm-sh-n {
  display: flex; align-items: flex-start; gap: 6px; padding: 5px 0;
  font-size: 12px; color: var(--c-secondary); line-height: 1.5;
}
.jm-sh-n svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-tertiary); }
/* 标签页：bonjour 同款深色激活药丸；行内横向滚动（放不下时） */
.jm-tabrow {
  display: flex; gap: 6px; overflow-x: auto; margin-top: 16px; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.jm-tabrow::-webkit-scrollbar { display: none; }
.jm-tabpill {
  flex: 0 0 auto; border: 0; cursor: pointer;
  padding: 7px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--c-secondary);
  background: var(--c-card);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.jm-tabpill.is-on { background: var(--c-primary); color: var(--c-bg); }
.jm-tabbody { margin-top: 12px; min-height: 0; }
/* 分享图弹框 */
.jm-share img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--c-line); }
.jm-share-actions { display: flex; gap: 10px; margin-top: 12px; }
.jm-share-actions .btn { flex: 1 1 auto; text-align: center; text-decoration: none; }

/* 简历条目（我的-我的申请） */
.app-progress { display: flex; align-items: center; gap: 10px; }

/* ------------------------------ 消息 ------------------------------ */
.msg-item { display: flex; gap: 12px; padding: 13px 14px; position: relative; transition: background-color var(--dur-1) var(--ease); cursor: pointer; }
.msg-item:hover { background: var(--c-fill-hover); }
.msg-item + .msg-item { box-shadow: inset 0 1px 0 var(--c-line); }
.msg-item.is-unread::before {
  content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand);
}
.msg-title { font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.msg-text { font-size: 12.5px; color: var(--c-secondary); line-height: 1.5; margin-top: 3px; }
.msg-time { font-size: 11px; color: var(--c-tertiary); flex: 0 0 auto; }

/* 来信统一收件箱：通知行（.msg-item）与私信行（.lt-row）混排，视觉对齐 */
.lt-list > .msg-item { padding: 13px 16px; }
.lt-list > * + * { box-shadow: inset 0 1px 0 var(--c-line); }

.msg-cat-card { display: flex; align-items: center; gap: 14px; padding: 15px 16px; }
.msg-cat-icon {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center;
}

/* ------------------------------ 个人 Profile ------------------------------ */
/* 第 4 期双名片：网名跟在真名后面，字号小一档、弱色 —— 是「怎么称呼我」，不抢真名的位置 */
/* 第 4 期双名片：可见范围条（社区名片 / 找工介绍 各一条），把「谁能看到」写在脸上 */
.pf-scope { display: block; }
.pf-scope .t-body { line-height: 1.5; }
.pf-scope-ic {
  width: 30px; height: 30px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--c-brand-soft); color: var(--c-brand);
}
.pf-scope-ic.is-lock { background: var(--c-subtle, var(--c-card)); color: var(--c-secondary); }

/* 补10（2026-10-01 磊哥：一句话即可）：四类角色逐行说明整体移除，
   范围条只剩一条细横幅（行内样式），这里只留锁图标底色。 */

/* ── 补9（2026-10-01）：我的CV·附件简历（CV | 作品集）──
   .cv-drop 虚线上传框（磊哥截图形式）；.cv-row 附件/链接行。 */
.cv-drop {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 14px; border: 1.5px dashed var(--c-line); border-radius: 12px;
  background: transparent; color: var(--c-secondary); font-size: 13.5px; cursor: pointer;
}
.cv-drop:hover { border-color: var(--c-brand); color: var(--c-brand); }
.cv-drop-in { justify-content: flex-start; cursor: default; padding: 10px 12px; }
.cv-drop-in:hover { border-color: var(--c-line); color: var(--c-secondary); }
.cv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--c-line); border-radius: 12px;
}
.cv-row > svg { flex: 0 0 auto; color: var(--c-tertiary); }
/* 补13（2026-10-01 磊哥体检 P2-10）：附件上传进度条 —— 原来 uploadDoc 支持
   onProgress 却没接，10MB 文件传上去毫无反馈。细条 + 品牌色填充。 */
.cv-prog { height: 4px; border-radius: 999px; background: var(--c-line); overflow: hidden; }
.cv-prog-fill { height: 100%; width: 0; border-radius: 999px; background: var(--c-brand); transition: width .18s ease; }
.mt-xs { margin-top: 4px; }

/* ── 补14（2026-10-01 磊哥：简单、干净、高级）：我的CV 顶部精简 ──
   ① .cv-priv      私密资料条特殊化（淡蓝底 + 蓝锁 + 「私密」小胶囊）
   ② .cv-name      名字卡里的名字（原来那里是「找工介绍」标题）
   ③ .cv-comp-num  完整度大号蓝字（原来是一行小灰字）
   ④ .cv-vis-chip  「企业可见」小胶囊开关（原来是一整行文字 + 大开关）
   颜色一律走 CSS 变量，浅 / 深色主题自动跟随。 */
.cv-priv { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--c-brand-soft); }
.cv-priv-ic { display: grid; place-items: center; flex: 0 0 auto; color: var(--c-brand); }
.cv-priv-chip {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--c-brand); background: var(--c-card);
}
.cv-name { font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.cv-comp-num {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--c-brand); font-variant-numeric: tabular-nums;
}
.cv-vis-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 5px 11px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 11.5px; font-weight: 600;
  color: var(--c-tertiary); background: var(--c-subtle, var(--c-card));
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cv-vis-chip.is-on { color: var(--c-brand); background: var(--c-brand-soft); }
.cv-vis-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── 补15（2026-10-01 磊哥）：「我的CV」两处 ──
   ① .cv-cloud    「附件与作品链接都在云端」提示条**特殊化** —— 从小灰字升级成一条
                  淡蓝底横幅（蓝色云图标 + 蓝色「云端保存」小标题 + 说明），
                  与页面顶部的私密资料条一上一下呼应。颜色走变量，深浅主题自动跟随。
   ② .cv-tail     页面末尾留白 —— 「我的CV」用的是 .mp-pad（只有左右内边距、
                  没有底距），内容会贴着悬浮 Dock，故末尾补一段空高。 */
.cv-cloud { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; background: var(--c-brand-soft); }
.cv-cloud-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 999px;
  color: var(--c-brand); background: var(--c-card);
}
.cv-cloud-t { font-size: 12.5px; font-weight: 600; color: var(--c-brand); letter-spacing: -.01em; }
.cv-cloud-d { font-size: 12.5px; color: var(--c-secondary); line-height: 1.6; margin-top: 3px; }
.cv-tail { height: 32px; }
.pf-title { font-size: 13px; color: var(--c-secondary); margin-top: 3px; }
/* P4：一行个人定位。层级刻意排在「名字」之下、「头衔 · 公司」之上 ——
   比职位更能说明你是谁，但不该抢过名字。 */
/* P4：卡片作者行下方的一行个人定位（只有「我」的帖子带这个字段） */
.post-headline { font-size: 11.5px; color: var(--c-brand); line-height: 1.4; margin-top: 2px; }

/* 第 34 期遗留的「名片 / 动态」顶部标签栏 CSS 已于第 38 期删除：
   名片页标签（动态 / 收藏）现由下方「第 38 期」的 .pf-tabs / .pf-tab 接手，
   点击打开居中弹框，不再有内联 pane 与下划指示条。 */



/* 第 17 期：浮框底部的按钮条。`margin-top:auto` 把它顶到浮框底边 ——
   浮框是 flex 列、`.sheet-body` 是 `flex:1 1 auto` + 可滚，
   所以内容再长，「放进主页 / 保存这一块」也永远贴在眼前（不用滚到底去找）。 */
.sheet-actions {
  margin-top: auto; padding-top: 12px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  box-shadow: inset 0 1px 0 var(--c-line);
}
/* 旧版四格均分统计（.pf-stats/.pf-stat）已随第 15 期 hero 重排退役，
   由上方 .bj-stats 三枚「数字+标签」行替代。 */
.pf-verified { display: inline-flex; align-items: center; gap: 3px; color: var(--c-brand); font-size: 11px; font-weight: 600; }

.pf-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px var(--pad-page); }
.pf-row + .pf-row { box-shadow: inset 0 1px 0 var(--c-line); }
.pf-row-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; background: var(--c-card); color: var(--c-secondary); }

/* 经历时间轴 */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1.5px; background: var(--c-line); }
.tl-item { position: relative; padding: 0 0 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -21px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-bg); box-shadow: inset 0 0 0 2px var(--c-quaternary);
}
.tl-item.is-current::before { box-shadow: inset 0 0 0 2px var(--c-brand); background: var(--c-brand); }

/* 勋章墙 */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.badge-cell {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; border-radius: var(--r-card);
  background: var(--c-surface); box-shadow: var(--shadow-card);
  text-align: center; position: relative; overflow: hidden;
}
.badge-medal {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  position: relative;
}
.badge-medal.is-gold { background: linear-gradient(140deg, #e8b53e, #b3820f); box-shadow: 0 4px 14px rgba(200, 150, 20, 0.32); }
.badge-medal.is-silver { background: linear-gradient(140deg, #b9c1cb, #7e8894); box-shadow: 0 4px 14px rgba(120, 130, 145, 0.28); }
.badge-medal.is-bronze { background: linear-gradient(140deg, #cf9a6d, #96603a); box-shadow: 0 4px 14px rgba(150, 96, 58, 0.28); }
.badge-medal.is-locked { background: var(--c-card); color: var(--c-quaternary); box-shadow: none; }
.badge-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.badge-desc { font-size: 10px; color: var(--c-tertiary); line-height: 1.4; }
.badge-lock { position: absolute; top: 8px; right: 8px; color: var(--c-quaternary); }

/* ------------------------------ 简历 CV ------------------------------ */
.cv-doc {
  background: var(--c-surface); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.cv-doc-head { padding: 18px 16px 14px; border-bottom: 1px solid var(--c-line); }
.cv-sec { padding: 14px 16px; }
.cv-sec + .cv-sec { border-top: 1px solid var(--c-line); }
.cv-sec-title { font-size: 12px; font-weight: 600; color: var(--c-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
.cv-item + .cv-item { margin-top: 14px; }
.cv-completeness { display: flex; align-items: center; gap: 12px; }

/* 表单 sheet 内的字段间距 */
.form-col { display: flex; flex-direction: column; gap: 14px; }

/* ------------------------------ 登录页 ------------------------------ */
.login-hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 32px 28px;
  background: radial-gradient(120% 80% at 50% 0%, var(--c-brand-soft), transparent 62%);
}
.login-logo {
  display: flex; justify-content: center; margin: 0 auto 12px;
}

/* ------------------------------ 桌面侧栏（页面索引） ------------------------------ */
.mp-side {
  width: 264px; flex: 0 0 auto;
  position: sticky; top: 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.mp-side-card { background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; }
.mp-side-group-title { font-size: 11px; font-weight: 600; color: var(--c-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin: 14px 0 6px; }
.mp-side-group-title:first-child { margin-top: 0; }
.mp-side-link {
  display: block; padding: 6px 9px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--c-secondary); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mp-side-link:hover { background: var(--c-fill-hover); color: var(--c-primary); }
.mp-side-link.is-on { background: var(--c-brand-soft); color: var(--c-brand); font-weight: 600; }

/* ------------------------------ 底部固定操作栏 ------------------------------ */
.mp-footer-bar {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  z-index: 18;
  padding: 11px var(--pad-page);
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 var(--c-line);
  animation: footer-in var(--dur-3) var(--ease-out);
}
@keyframes footer-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
/* 有底部操作栏的页面留出空间 */
.mp-page-flush + .mp-footer-bar { position: static; bottom: auto; }

.comment-bar {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  z-index: 18;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--pad-page);
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 var(--c-line);
}

/* ── 第 41 期·补5：名片页「动态 / 收藏」历史帖子的**弹层形态** ──
   复用详情页正文（postDetailHTML），但装进居中弹层里，故做三处适配：
   ① 去掉 .post 的卡片底色（弹层自身就是容器，套两层白底显脏）；
   ② 底部评论栏改成**普通文档流一行**（弹层内会滚，固定条会盖住内容）；
   ③ 内边距收一档，弹层里视觉更紧凑。 */
.pf-post-sheet-in .post { box-shadow: none; border-radius: 0; background: transparent; }
.pf-post-sheet-in .post-head { padding-top: 4px; }
.pf-post-sheet-in .pf-sheet-cbar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--c-line);
}

/* ── 第 41 期·补8：「我的申请」弹层形态（.ap-sheet） ──
   正文复用页面渲染（applicationsHTML(d, true)），只是外层从 .mp-pad.mt-lg
   换成 .ap-sheet-in —— 弹层自带内边距，再套 .mp-pad 会双重留白。
   弹层内容较长（统计条 + 分组列表），底部补一档留白，滚动时最后一张卡不贴边。 */
.ap-sheet-in { padding-bottom: 4px; }
.ap-sheet .sheet-body { padding-bottom: 8px; }

/* ------------------------------ 暗岗（高阶岗位频道） ------------------------------ */
.dk-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--r-card);
  background: var(--c-surface); box-shadow: var(--shadow-card);
}
.dk-banner.is-member { background: var(--c-primary); color: var(--c-bg); }
.dk-banner.is-member .t-card,
.dk-banner.is-member .t-micro { color: var(--c-bg); }
.dk-banner.is-member .t-micro { opacity: .78; }
.dk-banner-btn { color: var(--c-bg); box-shadow: inset 0 0 0 1px currentColor; opacity: .92; }

.dk-card {
  padding: 16px; border-radius: var(--r-card); cursor: pointer;
  background: var(--c-surface); box-shadow: var(--shadow-card);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.dk-card:active { transform: scale(0.988); }

.dk-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--c-primary); color: var(--c-bg);
}
.dk-salary { font-size: 15px; font-weight: 600; color: var(--c-brand); letter-spacing: -0.01em; }
.dk-title { font-size: 17px; font-weight: 600; line-height: 1.42; margin: 10px 0 9px; color: var(--c-primary); }
.dk-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 7px; font-size: 12px; color: var(--c-secondary); background: var(--c-card);
}
.dk-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 11px; box-shadow: inset 0 1px 0 var(--c-line);
}
.dk-plan { position: relative; }
.dk-locked { position: relative; overflow: hidden; }
.dk-lock-ic {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--c-brand-soft); color: var(--c-brand);
}
.dk-channel {
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--c-card); word-break: break-all; line-height: 1.6;
}

/* ------------------------------ 响应式 ------------------------------ */
/* 手机壳与索引侧栏只对「鼠标设备」显示，它们是给电脑用户预览手机版用的展示道具。
   触摸设备（iPad / 安卓平板 / 折叠屏）无论多宽都全屏 —— 真实设备用户不该看到
   一个浮在中间的假手机模型，折叠屏展开跨过 900px 时也不该突然冒出手机壳。
   判断依据是「指针能力」而不是设备名：以后每出一种新设备都不用再补规则。 */
@media (max-width: 1080px), (pointer: coarse), (any-pointer: coarse) {
  .mp-side { display: none; }
}
@media (max-width: 900px), (pointer: coarse), (any-pointer: coarse) {
  .mp-stage { padding: 0; gap: 0; display: block; }
  .device {
    width: 100%; height: calc(100vh - var(--toweb-h, 0px)); height: calc(100dvh - var(--toweb-h, 0px));
    padding: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .device::after { display: none; }
  .screen { border-radius: 0; }
  .notch { display: none; }
  .status-bar { display: none; }
  .mp-nav { padding-top: var(--safe-t, 0); height: auto; min-height: var(--navbar-h); }
}

/* --------- 偏宽的"手机版"：600–767px 不再把单列拉满整屏（折叠屏展开） --------- */
/* 折叠屏展开（Galaxy Z Fold 一类）的逻辑宽度约 600~767，仍归手机版，
   但手机版的内容区原本是"吃满宽度"的：一列被拉到 600+ 宽、字号还是手机字号，
   看起来就是"手机版被撑开了"—— 这正是本次要修的那个观感。
   这里把内容限宽 560 并居中，行长回到和 390 手机接近的舒适区间。
   两条实现细节：
     1) 选择器排除桌面版（body 内含 .web-main 的即是桌面版），
        不给 /web/ 添乱；旧浏览器不支持 :has() 时整条规则自动失效，安全降级。
     2) 只缩 .mp-body（滚动内容区），顶栏与底部 tabbar 仍是整宽 —— 
        顶栏背景色通栏、内容居中，视觉上才不像是"两边漏了白"。 */
@media (min-width: 600px) and (max-width: 767px) {
  body:not(:has(.web-main)) .mp-body {
    padding-left: calc((100% - 560px) / 2);
    padding-right: calc((100% - 560px) / 2);
  }
}

/* ------------------------- 电脑版入口（只在 ≥768px 出现） ------------------------- */
/* 宽度已够用电脑版时（折叠屏展开横屏、平板、窄窗口电脑），给手机版一个明确的出口。
   门槛与门户分流的分界线是同一根 768px，避免出现"门户把人送走、手机版又不给出口"的空档。
   另加高度条件 > 500px：手机横过来是 780~932 宽、却只有 360~430 高，
   那终究还是手机，不该催它换电脑版（门户对这种尺寸也是按手机处理的）。
   --toweb-h 同时用于让手机壳高度自动减去横幅高度，所以两者不会挤出一条滚动条。
   真手机（≤767px）与手机横屏永远看不到这条。 */
body { --toweb-h: 0px; }
.mp-toweb { display: none; }
@media (min-width: 768px) and (min-height: 501px) {
  html:not([data-toweb="off"]) body { --toweb-h: 46px; }
  html:not([data-toweb="off"]) .mp-toweb:not([hidden]) {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; white-space: nowrap;
    min-height: var(--toweb-h); padding: 8px 48px 8px 16px;
    position: relative; z-index: 30;
    background: var(--c-surface);
    box-shadow: inset 0 -1px 0 var(--c-line);
    font-size: 13px; color: var(--c-secondary);
  }
  .mp-toweb-go { color: var(--c-brand); font-weight: 600; text-decoration: none; }
  .mp-toweb-x {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: 0; border-radius: 8px;
    background: none; color: var(--c-tertiary);
    font-size: 18px; line-height: 1; cursor: pointer;
    transition: background-color .16s var(--ease), color .16s var(--ease);
  }
  .mp-toweb-x:hover { background: var(--c-fill-hover); color: var(--c-primary); }
}

/* --------------------------------------------------------------------------
   页首 hero + 广告语轮播（第 12 期自荐墙 / 第 13 期方法论共用，2026-09-26）
   说明区不包卡片（无填充）；三句文案在**同一位置**轮播——
   纯 CSS 实现（grid 叠放 + 透明度关键帧，9s 一轮、每句 3s，淡出淡入），
   不用 JS 定时器 ⇒ 视图重渲染不会重复挂计时器；容器高度取三句中最长一句，
   轮换时不跳动。关键词 <em> 用品牌蓝。系统开了「减弱动态效果」时只显示第一句。
   -------------------------------------------------------------------------- */
.wall-hero { padding: 6px 0 4px; margin-bottom: 16px; }
/* 照参考图：hero 的主按钮用品牌蓝（全站 btn-primary 是近黑，这里只覆盖这一颗，
   范围锁在 .wall-hero 内，不影响其他页面的按钮；方法论页只读、无按钮）。 */
.wall-hero .btn-primary { background: var(--c-brand); color: #fff; }
.wall-hero .btn-primary:hover { filter: brightness(1.06); opacity: 1; }
.wall-slogan { display: grid; margin-top: 10px; }
.wall-slogan-line {
  grid-area: 1 / 1;
  font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em;
  opacity: 0; animation: wallSlogan 9s infinite;
}
.wall-slogan-line:nth-child(2) { animation-delay: 3s; }
.wall-slogan-line:nth-child(3) { animation-delay: 6s; }
/* 第 14 期：方法论轮播只留一句 ⇒ 单句不走轮播关键帧
   （关键帧 0% 是透明，单句会周期性消失；:only-child 直接常显）。 */
.wall-slogan-line:only-child { animation: none; opacity: 1; }
.wall-slogan-line em { font-style: normal; color: var(--c-brand); }
@keyframes wallSlogan {
  0% { opacity: 0; }
  6% { opacity: 1; }
  30% { opacity: 1; }
  38% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-slogan-line { animation: none; opacity: 1; }
  .wall-slogan-line:nth-child(n+2) { display: none; }
}

/* --------------------------------------------------------------------------
   发现页发布入口（2026-09-22 新增；第 7 期照参考图重排）
   上行：左侧方框笑脸图标 + 短引导语「有什么好玩的吗？」，整条点开默认面板。
   下行：五个纯图标（提及 / 图片 / 动图 / 链接 / 引用）+ 右侧实心「发帖」药丸。
   只做视觉 —— 点击行为走 app.js 既有的 [data-compose] 与 [data-cs-inline] 委托，
   不新增事件通道。
   -------------------------------------------------------------------------- */
/* 2026-09-26 磊哥：入口条不再另外填充颜色，与页面背景保持一致
   （去掉卡片底色与圆角，保留内边距做布局间距；分隔线/图标行不变）。 */
.publish-bar {
  background: none;
  border-radius: 0;
  padding: 14px;
  margin-bottom: 14px;
}
.publish-top { display: flex; align-items: center; gap: 10px; }
/* 第 5 期：整条都是发布入口（原来只有右侧那根提示条能点） */
.publish-open { cursor: pointer; border-radius: var(--r-card); }
.publish-open:focus-visible { outline: 2px solid var(--c-brand-line); outline-offset: 3px; }
/* 第 7 期：左侧方框笑脸图标（原来放头像） */
.publish-lead {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--c-secondary);
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: color .16s var(--ease), box-shadow .16s var(--ease);
}
.publish-hint {
  display: flex; align-items: center;
  flex: 1 1 auto; min-width: 0;
  height: 34px; padding: 0 2px;
  color: var(--c-tertiary);
  font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .16s var(--ease);
}
.publish-open:hover .publish-hint { color: var(--c-secondary); }
.publish-open:hover .publish-lead { color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand-line); }
.publish-quick {
  display: flex; align-items: center; gap: 2px;
  margin-top: 12px; padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.publish-quick-item {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 34px; height: 34px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--c-secondary);
  font-family: inherit; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.publish-quick-item:hover { background: var(--c-surface); color: var(--c-brand); }
/* 右侧「发帖」药丸（参考图同款：实心品牌蓝 + 胶囊圆角） */
.publish-submit {
  flex: 0 0 auto;
  margin-left: auto; height: 32px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--c-brand); color: #fff;
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: filter .16s var(--ease);
}
.publish-submit:hover { filter: brightness(1.06); }

/* --------------------------------------------------------------------------
   第 9 期 · 首页四按钮行（推荐 / 最新 / 社区精选 / 关注）
   第 42 期起这份 HTML 只渲染顶栏一处（.nav-home-tabs）：
   桌面显示（web.css），手机端隐藏 —— 同功能入口是顶栏左上「推荐 ˅」抽屉。
   -------------------------------------------------------------------------- */
.nav-home-tabs { display: none; }

/* ==========================================================================
 * 第 5 期 · 极简发布面板（磊哥 2026-09-26 定稿，参考图改造）
 * 结构：顶栏（分区下拉 + ⋯ + ×）/ 正文大输入 / 附件区 / 业务折叠块 / ⋯ 抽屉 / 底栏
 * 只作用于 .sheet-modal.is-compose —— 其它弹层（分享 / 职位 / 筛选…）完全不受影响。
 * ========================================================================== */
.sheet-modal.is-compose { max-height: 92vh; }
.sheet-modal.is-compose .sheet-body { display: flex; }

.cp { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 60vh; position: relative; }

/* 顶栏：左「分区」下拉、右「⋯」与关闭 */
.cp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.cp-seg {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border: 0; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-line);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.cp-seg:hover { box-shadow: inset 0 0 0 1px var(--c-brand-line); }
/* 第 33 期：默认不选中任何分类时，下拉按钮显示占位提示（灰度、非主色） */
.cp-seg.is-empty { color: var(--c-secondary); font-weight: 500; }
.cp-top-r { display: flex; align-items: center; gap: 8px; }
.cp-ic {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--c-secondary);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.cp-ic:hover { background: var(--c-fill-hover); color: var(--c-primary); }

/* 分区菜单：面板内联（不是新弹层 —— 弹层里再叠一层会一次点击处理两次） */
.cp-segmenu {
  position: absolute; left: 0; top: 40px; z-index: 5;
  min-width: 172px; padding: 6px;
  background: var(--c-bg); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 2px;
}
.cp-segmenu[hidden] { display: none; }
.cp-segitem {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 38px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--c-primary);
  font-size: 13.5px; font-family: inherit; text-align: left; cursor: pointer;
}
.cp-segitem:hover { background: var(--c-card); }
.cp-segitem.is-on { color: var(--c-brand); font-weight: 600; }

/* 正文大输入：无边框，像一页纸 */
.cp-main { flex: 1 1 auto; display: flex; padding: 12px 0 10px; }
.cp-input {
  flex: 1 1 auto; width: 100%; min-height: 128px;
  border: 0; outline: 0; resize: none; background: transparent;
  color: var(--c-primary); font-family: inherit;
  font-size: 15.5px; line-height: 1.72;
}
.cp-input::placeholder { color: var(--c-tertiary); }

/* 附件区 */
.cp-attach[hidden] { display: none; }
.cp-attach:not([hidden]) { margin-bottom: 10px; }

/* 业务信息折叠块（原生 details，零 JS） */
.cp-extra { border-radius: var(--r-card); background: var(--c-card); margin-bottom: 10px; }
.cp-extra > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 13px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--c-secondary);
}
.cp-extra > summary::-webkit-details-marker { display: none; }
.cp-extra > summary::after { content: '▾'; margin-left: auto; color: var(--c-tertiary); font-size: 12px; }
.cp-extra[open] > summary::after { content: '▴'; }
.cp-hint { color: var(--c-tertiary); }
.cp-extra-body { display: flex; flex-direction: column; gap: 12px; padding: 0 13px 13px; }

/* ⋯ 抽屉：标题 / 封面 / 标签 / 分类 / 审核说明 */
.cp-more {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 44vh; overflow-y: auto;
  padding-top: 13px; margin-bottom: 10px;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.cp-more[hidden] { display: none; }

/* 底栏：左图标工具条、右「↑ 发布」 */
.cp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 11px;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.cp-tools { display: flex; align-items: center; gap: 2px; }
.cp-tool {
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--c-secondary);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.cp-tool:hover { background: var(--c-fill-hover); color: var(--c-primary); }
.cp-tool.is-on { background: var(--c-brand-soft); color: var(--c-brand); }
.cp-pub {
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: var(--c-brand); color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: opacity .16s var(--ease);
}
.cp-pub:hover { opacity: .88; }
.cp-pub[disabled] { opacity: .45; cursor: default; }

/* 版 A 首页顶部「社区热门讨论」横条 —— 深色，标题自动取热榜第一名，整条可点进社区精选 */
.hot-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 12px;
  border-radius: 16px;
  background: linear-gradient(100deg, #1c0f38 0%, #241046 58%, #14224a 100%);
  color: #fff; cursor: pointer; isolation: isolate;
  box-shadow: var(--shadow-pop);
  transition: transform .14s var(--ease);
}
.hot-strip:active { transform: scale(.99); }
.hot-strip:focus-visible { outline: 2px solid var(--c-brand-line); outline-offset: 3px; }
.hot-strip-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.hot-strip-kicker {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #b794f6; opacity: .92;
}
.hot-strip-title {
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hot-strip-r { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.hot-strip-avs { display: flex; }
.hot-strip-avs > * {
  width: 23px; height: 23px; border-radius: 50%;
  border: 2px solid #241046; margin-left: -9px;
}
.hot-strip-avs > *:first-child { margin-left: 0; }
.hot-strip-count { font-size: 13px; font-weight: 700; color: #e7c9ff; }


/* ==========================================================================
 * V2 方向③ · 编辑巨字（关于页 / 法务页 hero）
 * 纯文字、超大字号、发丝线分隔，内容页的编辑式开场。
 * ========================================================================== */
.ed-hero { padding: 4px 2px 22px; border-bottom: 1px solid var(--c-line); margin-bottom: 18px; }
.ed-kicker {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-secondary);
}
.ed-title {
  font-size: clamp(34px, 9vw, 58px); line-height: 1.02; font-weight: 800;
  letter-spacing: -.02em; margin: 10px 0 14px; color: var(--c-text);
}
.ed-lead { font-size: 15px; line-height: 1.78; color: var(--c-text-soft); max-width: 34em; }

/* ==========================================================================
 * C 端信息架构重构 · 第 2 期：自荐墙 / 方法论（2026-09-26）
 * 新增四处样式：正文里的 @提及、方法卡、方法论详情里的「问题锚点」。
 * 全部走 CSS 变量 ⇒ 深浅色主题自动跟随，不需要第二套规则。
 * ========================================================================== */

/* @提及：看着像文字、点着像按钮 —— 不抢正文节奏，但一眼能看出可点。
   （磊哥定稿：@ 到的人 / 企业能看能点；被 @ 的通知提醒并入第 4 期消息模块。） */
.mention {
  display: inline; padding: 0 2px; margin: 0 1px;
  background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--c-brand); font-weight: 600;
  border-radius: 3px;
  transition: background var(--dur-1) var(--ease);
}
.mention:hover { background: var(--c-brand-soft); }

/* 方法卡：短、以问题开头、底部一行「谁聊过」。整卡可点开弹层。 */
.method-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: 15px 15px 12px;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.method-card:hover { border-color: var(--c-brand-line); box-shadow: var(--shadow-xs); }
.method-q {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 15.5px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em;
  color: var(--c-primary);
}
.method-q svg { flex: 0 0 auto; margin-top: 3px; color: var(--c-brand); }
.method-a { margin-top: 9px; font-size: 14px; line-height: 1.75; color: var(--c-secondary); }
.method-foot {
  margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--c-line);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: var(--c-tertiary);
}

/* 方法论详情：以「问题」为锚点 —— 字号大一档，左侧一道品牌色竖线。 */
.method-detail-q {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r-card);
  background: var(--c-brand-soft); border-left: 3px solid var(--c-brand);
  font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em;
  color: var(--c-primary);
}
.method-detail-q svg { flex: 0 0 auto; margin-top: 3px; color: var(--c-brand); }

/* 第 4 期：卡片上的「起叔推荐」小标 —— 起叔给这篇写了推荐语时才出现。
   刻意做得比 .tag 更轻（无底色、品牌色文字 + 图标），只作为一处线索，
   不跟标题抢视觉重量。 */
.method-note-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
  font-size: var(--f-micro); font-weight: 600; letter-spacing: .02em;
  color: var(--c-brand);
}
.cmt-empty { padding: 14px 0 4px; text-align: center; }

/* ==================== 第 18 期：团队地图照 bonjour jobs-mapping 重做 ==================== */
/* hero：居中大标题 + 新闻胶囊 + 手写批注 + 四周漂浮 emoji。
   ⚠️ overflow:hidden 必须留 —— 漂浮 emoji 用百分比定位，窄屏时会探出页面边缘。 */
.jm-hero { position: relative; text-align: center; padding: 18px 6px 4px; overflow: hidden; }
.jm-news {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-surface);
  font-size: 11.5px; font-weight: 500; color: var(--c-secondary);
  animation: jmBreath 3.4s ease-in-out infinite;
}
@keyframes jmBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 107, 255, 0); }
  50% { box-shadow: 0 0 0 5px var(--c-brand-soft); }
}
.jm-title {
  position: relative;
  margin-top: 14px;
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.32;
  color: var(--c-primary);
}
.jm-emoji { font-size: 0.86em; }
/* 手写批注：bonjour 的「Its V2.1!」同款位置 —— 标题右上角、微微斜。
   字体栈取系统手写体，取不到就退化成斜体衬线，不引外部字体。 */
.jm-script {
  position: absolute; right: 4%; top: -14px;
  font-family: 'Snell Roundhand', 'Savoye LET', 'Brush Script MT', cursive;
  font-style: italic; font-size: 15px; color: #e0464b;
  transform: rotate(-7deg); pointer-events: none;
}
.jm-sub { margin-top: 10px; font-size: 13px; color: var(--c-secondary); }
.jm-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 8px; vertical-align: 1px;
  border: 1px solid var(--c-line); background: var(--c-card);
  font-size: 12px; font-weight: 600; color: var(--c-primary);
}
.jm-criteria { margin-top: 8px; font-size: 11.5px; color: var(--c-tertiary); }
.jm-float { position: absolute; pointer-events: none; opacity: .92; animation: jmFloat 6s ease-in-out infinite; }
.jm-f1 { left: 5%; top: 14%; font-size: 21px; }
.jm-f2 { right: 6%; top: 44%; font-size: 17px; animation-delay: -2s; }
.jm-f3 { left: 11%; bottom: 2%; font-size: 15px; animation-delay: -4s; }
.jm-f4 { right: 11%; top: 5%; font-size: 18px; animation-delay: -1s; }
@keyframes jmFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
}

/* 工具条：团队|职位 药丸 + 搜索 + 筛选开关 */
.jm-toolbar { display: flex; gap: 8px; align-items: center; margin: 16px 0 12px; }
.jm-seg {
  display: inline-flex; flex: 0 0 auto; padding: 3px;
  background: var(--c-card); border-radius: 999px;
}
.jm-seg button {
  border: 0; background: transparent; padding: 6px 15px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--c-secondary); transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.jm-seg button.is-on {
  background: var(--c-surface); color: var(--c-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
}
.jm-search { flex: 1 1 auto; min-width: 0; }
.jm-filter-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--c-line); background: var(--c-surface);
  border-radius: 999px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 500; color: var(--c-secondary);
}
.jm-filter-row {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 13px; margin-bottom: 12px;
  border: 1px solid var(--c-line); border-radius: var(--r-card, 14px);
  background: var(--c-card);
}
.jm-fgroup { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.jm-fk { flex: 0 0 auto; width: 34px; font-size: 11px; color: var(--c-tertiary); }
.jm-fchip {
  border: 1px solid var(--c-line); background: var(--c-surface);
  border-radius: 999px; padding: 4px 11px;
  font-size: 12px; color: var(--c-secondary);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.jm-fchip.is-on {
  background: var(--c-brand-soft); color: var(--c-brand);
  border-color: var(--c-brand-line); font-weight: 600;
}

/* 卡片墙通用（团队卡与推荐卡共用）：bonjour 式 —— 顶部 logo+箭头、
   名称、一句话介绍、chip 行、媒体列表、贴底的联系人行。 */
.jm-card { position: relative; padding: 14px; display: flex; flex-direction: column; }
.jm-card:hover { transform: translateY(-2px); }
.jm-team-top { display: flex; justify-content: space-between; align-items: flex-start; }
.jm-logo { box-shadow: none; }   /* 不骑封面边界了，白环描边去掉 */
/* 补8p（2026-10-01 磊哥定）：企业真 logo 铺满头像块 —— 字块垫底，图加载成功即盖住；
   加载失败（如云端企业没配图）露出字块兜底，绝不出空白头像。 */
.jm-logo { position: relative; overflow: hidden; }
.jm-logo .jm-logo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.jm-arrow {
  color: var(--c-quaternary); line-height: 1;
  transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.jm-card:hover .jm-arrow { color: var(--c-brand); transform: translate(1px, -1px); }
.jm-team-name { display: flex; align-items: center; gap: 5px; margin-top: 11px; min-width: 0; }
.jm-team-name .t-card { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-intro {
  margin-top: 6px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.jm-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--c-secondary); }
.jm-meta span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.jm-news-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.jm-news-item { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--c-secondary); line-height: 1.5; }
.jm-news-item svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-tertiary); }
.jm-news-t { min-width: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.jm-team-foot {
  margin-top: auto; padding-top: 11px;
  box-shadow: inset 0 1px 0 var(--c-line);
  display: flex; align-items: center; gap: 8px;
}
.jm-foot-n { font-size: 12px; font-weight: 600; color: var(--c-primary); }
.jm-foot-t { font-size: 10.5px; color: var(--c-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-jobs { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; color: var(--c-tertiary); }
.jm-empty { display: none; padding: 26px 0 8px; text-align: center; font-size: 12.5px; color: var(--c-tertiary); }
.jm-empty.is-on { display: block; }

/* 推荐卡 */
.jm-reco-t { font-size: 14px; font-weight: 600; }
.jm-reco-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.jm-reco-k { flex: 0 0 auto; width: 52px; font-size: 11px; color: var(--c-tertiary); line-height: 27px; }
.jm-reco-vs { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.jm-reco-cta { margin-top: auto; padding-top: 14px; }
.jm-reco-link {
  display: block; margin-top: 9px; text-align: center;
  font-size: 12px; color: var(--c-tertiary);
}
.jm-reco-link:hover { color: var(--c-brand); }

/* ==================== 第 8 期（2026-09-26）：暗岗卡片 UI 精修 ====================
   磊哥要求：原有内容全保留，禁用红色，只用蓝 / 黑 / 白 / 灰；B 端简约商务风。
   做法：全部收拢在 .jm-dark 作用域内（只影响暗岗卡，不碰职位卡 / 团队卡的 .jm-job-sal 红色）。 */

/* ① 薪资：红 → 主题蓝。卡片是白底，直接上品牌蓝即达 AA 对比度（5.2:1）。
   ② 头像与标签行同一行、整组垂直居中（logo 52px 为行高基准，标签行在右、垂直居中）。 */
.jm-dark-top { display: flex; align-items: center; gap: 12px; }
.jm-dark-head {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
.jm-dark-head .jm-dark-tags { flex: 0 1 auto; min-width: 0; }
.jm-dark .jm-sh-sal {
  color: var(--c-brand);
  margin: 16px 0 15px;          /* ③ 蓝色薪资块上下留白（16 上 / 15 下，与岗位名间距视觉等距） */
}
/* ③ 岗位名称放大加粗、公司名弱化浅灰、行业标签统一尺寸 */
.jm-dark .jm-team-name { margin-top: 0; }
.jm-dark .jm-team-name .t-card { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.jm-dark .jm-team-co { margin-top: 6px; color: var(--c-tertiary); }
.jm-dark .jm-meta { margin-top: 13px; gap: 8px; }
.jm-dark .dk-chip {
  height: 24px; padding: 0 10px;
  font-size: 12px; line-height: 1; font-weight: 400;
  white-space: nowrap; color: var(--c-secondary); background: var(--c-card);
}

/* ② 三个标签统一高度基线 + 拉开间距 */
.jm-dark-tags { gap: 9px; }
.jm-dark-tags .dk-tag,
.jm-dark-tags .tag { height: 22px; padding: 0 9px; font-size: 11px; font-weight: 600; line-height: 1; }
.jm-dark-tags .tag { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-secondary); }

/* ④ 要点列表：圆圈与文字居中对齐、加大行高、顶部浅灰细线 */
.jm-dark .jm-news-list {
  margin-top: 16px; padding-top: 14px; gap: 11px;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.jm-dark .jm-news-item { align-items: center; font-size: 12.5px; line-height: 1.7; }
.jm-dark .jm-news-dot { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--c-brand); }
.jm-dark .jm-news-dot svg { display: block; }
.jm-dark .jm-news-t { -webkit-line-clamp: 2; }

/* ⑤ 底部栏两端对齐：左边「解锁状态」、右边「意向人数」，中间撑开。
   浅灰细线由基础 .jm-team-foot 的 inset 0 1px 0 --c-line 提供。 */
.jm-dark .jm-team-foot { justify-content: space-between; padding-top: 13px; }
.jm-dark .jm-foot-t { margin-top: 0; line-height: 1.4; }
.jm-dark .jm-jobs { font-size: 11px; line-height: 1.4; }

/* ==================== 暗岗卡片权限蒙版（简历完成率 < 70% 或未注册「我的」） ====================
   仅蓝 / 黑 / 白 / 灰：灰化 + 模糊其余信息，保留岗位名称与薪酬常显；点击整卡弹完善简历提示。 */
.jm-dark.is-locked { cursor: pointer; }
.jm-dark.is-locked .jm-sh-sal { margin-bottom: 12px; }
.jm-dark.is-locked .jm-team-name { margin-top: 0; }
.jm-dark-mask {
  position: relative;
  margin-top: 14px;
  filter: grayscale(1) blur(4px);
  opacity: .6;
  border-radius: var(--r-card);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.jm-dark-mask-ov {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(244, 246, 249, .42);
  color: var(--c-secondary); text-align: center; padding: 12px;
}
.jm-dark-lock { color: var(--c-brand); display: inline-flex; }
.jm-dark-mask-t { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }

/* ==================== 第 20 期：职位列表 / 暗岗地图照 18/19 期改造 ==================== */
/* 稳重版 hero（暗岗页）：骨架与 jm-hero 同源，去装饰（无漂浮 emoji / 无手写批注）。
   磊哥拍板：高阶保密岗位不要活泼装饰 —— 胶囊用盾形图标，标题不带 script。
   第 51 期（2026-10-01）：② 标题上提 ⇒ 徽章行已移除，收掉首行留白（原本给 .jm-news 的位置）。
   第 52 期（2026-10-01 磊哥）：③ hero 按钮由黑改蓝 —— 全局 `.btn-primary` 用的是 `--c-primary`(#1a1a1a 黑)，
   这里照 .wall-hero 的先例覆写成 `--c-brand`（蓝）。 */
.jm-hero-quiet { padding-top: 2px; }
.jm-hero-quiet .jm-title { margin-top: 0; }
.jm-hero-cta { display: inline-flex; margin-top: 18px; }
.jm-hero .jm-hero-cta.btn-primary { background: var(--c-brand); color: #fff; }
.jm-hero .jm-hero-cta.btn-primary:hover { filter: brightness(1.06); opacity: 1; }

/* 「关于「暗岗」」纯文字块（第 52 期 磊哥：去掉灰色底块 `.card.card-fill`）。
   只保留文字层级与呼吸感，不要背景 / 圆角 / 阴影 / 内边距。 */
.dk-about { margin-bottom: 16px; }

/* ==================== 第 53 期（2026-10-01 磊哥）：暗岗三级渐进解锁 ====================
   ① 访客（tier 0）：岗位名 / 年包 / 职级 / 省份 / 行业 / 意向人数 可见；
                     企业名打码、核心要求模糊 + 蒙版。
   ② 登录（tier 1）：+ 真实企业名 + 岗位职责首段。
   ③ 补齐 4 项（tier 2）：+ 任职要求 + 完整 JD + 投递路径。
   配色红线：只用蓝 / 黑 / 白 / 灰，禁红。 */

/* 访客态企业 logo：把真实简称换成「?」，灰底保留位置感。 */
.jm-dark .jm-logo.is-masked {
  background: var(--c-card);
  color: var(--c-tertiary);
  font-size: 17px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.jm-sheet .jm-logo.is-masked { background: var(--c-card); color: var(--c-tertiary); }

/* 访客态核心要求：文字保留、模糊处理（不灰化 —— 灰化会看不出有内容）。 */
.jm-dark .jm-news-list.is-blur .jm-news-t { filter: blur(3.6px); user-select: none; }
.jm-dark .jm-news-list.is-blur { pointer-events: none; }

/* 访客蒙版（沿用 .jm-dark-mask 的框架，只调蒙版文字与遮罩浓度）。 */
.jm-dark.is-visitor .jm-dark-mask-ov { background: rgba(244, 246, 249, .55); }

/* 登录态卡片上的「岗位职责」首段块（tier 1 独有）。 */
.dk-jdhead {
  margin-top: 14px; padding: 11px 12px;
  background: var(--c-card); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.dk-jdhead-t {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--c-secondary); margin-bottom: 6px;
}
.dk-jdhead-t svg { display: block; }
.dk-jdhead-b { font-size: 12.5px; line-height: 1.75; color: var(--c-secondary); }
.dk-jdhead-lk {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px; padding-top: 8px;
  box-shadow: inset 0 1px 0 var(--c-line);
  font-size: 11px; color: var(--c-tertiary);
}
.dk-jdhead-lk svg { display: block; }

/* 浮窗内「待解锁」提示行（tier 1 的 JD tab 底部）。 */
.dk-tab-lock {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  box-shadow: inset 0 1px 0 var(--c-line);
  font-size: 12px; color: var(--c-tertiary);
}
.dk-tab-lock svg { display: block; flex: 0 0 auto; }

/* 浮窗头部访客态企业名（打码）。 */
.jm-sh-co-mask { color: var(--c-tertiary); }

/* 卡片上的薪资行（职位卡 / 暗岗卡 / 暗岗浮窗头部共用）。
   沿用旧 .job-salary 的红色系数字风格，但字号更大 —— bonjour 卡片的价格是视觉锚点。 */
.jm-job-sal { margin-top: 6px; font-size: 16px; font-weight: 700; color: #d94848; font-family: var(--font-num); letter-spacing: -0.02em; }
.jm-sh-sal { font-size: 17px; font-weight: 700; color: #d94848; font-family: var(--font-num); letter-spacing: -0.02em; }

/* 暗岗卡 / 暗岗浮窗头部的标签行：暗岗(锁) + 已核验 + 紧急。
   ⚠️ 间距 / 居中 / 高度基线等视觉细化统一由上方「第 8 期」规则块负责，
      这里只保留骨架声明，不要再写 gap / align-items（会覆盖上方规则）。 */
.jm-dark-tags { display: flex; flex-wrap: wrap; }

/* 职位浮窗里的公司行：点了开团队浮窗（Mask 单例，先收本层再开）。 */
.jm-sh-co {
  display: flex; align-items: center; gap: 6px;
  margin-top: 11px; padding: 9px 11px;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-card);
  transition: border-color var(--dur-1) var(--ease);
}
.jm-sh-co:hover { border-color: var(--c-brand-line); }

/* 暗岗浮窗的 logo 用深灰底（稳重，区别于团队/职位浮窗的品牌蓝）。 */
.jm-logo-quiet { background: #3a3f4a; color: #fff; }

/* ==================== 来信（双向私信聊天）· 简约 B 端风（仅蓝/黑/白/灰） ==================== */
/* 2026-09-27 磊哥定稿：原「消息」改名为「来信」并成为私信聊天模块。
   配色严格限制为品牌蓝(--c-brand) / 黑(--c-primary) / 白(--c-bg) / 灰阶；红色一律不用。 */

/* —— 子导航「来信 / 通知」蓝角标（与 .utab-dot 互斥，由 JS 二选一渲染） —— */
.nav-badge {
  position: absolute; top: 3px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--c-brand); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  font-family: var(--font-num);
  pointer-events: none;
}

/* —— 来信顶部「互动 / 通知」分段切换（B 端胶囊，蓝黑白灰） —— */
.lt-seg { display: flex; gap: 6px; padding: 0 var(--pad-page) 12px; }
.lt-seg-btn {
  flex: 1 1 0; height: 38px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--c-card); color: var(--c-secondary);
  font-size: 14px; font-weight: 600; font-family: inherit;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lt-seg-btn.is-on { background: var(--c-brand); color: #fff; }
.lt-seg-btn:active { opacity: .85; }

/* —— 来信首页：会话列表 —— */
.lt-list { display: flex; flex-direction: column; padding-top: 4px; }
.lt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.lt-row + .lt-row { box-shadow: inset 0 1px 0 var(--c-line); }
.lt-row:active { background: var(--c-fill-hover); }
.lt-ava { position: relative; flex: 0 0 auto; }
.lt-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--c-brand); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 17px; text-align: center;
  font-family: var(--font-num);
  box-shadow: 0 0 0 2px var(--c-bg);
  pointer-events: none;
}
.lt-main { flex: 1 1 auto; min-width: 0; }
.lt-name { font-size: 15px; font-weight: 600; color: var(--c-primary); }
.lt-time { font-size: 11px; color: var(--c-tertiary); flex: 0 0 auto; margin-left: 8px; }
.lt-text { font-size: 13px; color: var(--c-secondary); margin-top: 2px; }
.lt-row.is-unread .lt-text { color: var(--c-primary); }
.lt-tag {
  flex: 0 0 auto;
  height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  background: var(--c-card); color: var(--c-secondary);
  display: inline-flex; align-items: center; white-space: nowrap;
}

/* —— 聊天页（bare 整页，撑满 .mp-body 并内部滚动） —— */
.lt-chat {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--c-bg);
}
.lt-chat-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 6px;
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 var(--c-line);
}
.lt-chat-peer { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lt-chat-name { font-size: 15px; font-weight: 600; color: var(--c-primary); line-height: 1.2; }
.lt-chat-tag { font-size: 11px; color: var(--c-tertiary); line-height: 1.2; }
.lt-chat-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--c-quaternary) transparent;
  padding: 14px 14px 18px;
  background: var(--c-bg);
}
.lt-chat-body::-webkit-scrollbar { width: 4px; }
.lt-chat-body::-webkit-scrollbar-thumb { background: var(--c-quaternary); border-radius: 99px; }
.lt-bubbles { display: flex; flex-direction: column; gap: 12px; }
.lt-bubble-row { display: flex; align-items: flex-end; gap: 8px; }
.lt-bubble-row.is-mine { flex-direction: row-reverse; }
.lt-bubble-ava { flex: 0 0 auto; }
.lt-bubble-wrap { display: flex; flex-direction: column; max-width: 74%; }
.lt-bubble-row.is-mine .lt-bubble-wrap { align-items: flex-end; }
.lt-bubble {
  padding: 9px 13px; border-radius: 18px;
  font-size: 14px; line-height: 1.45; color: var(--c-primary);
  background: var(--c-card);
  word-break: break-word; white-space: pre-wrap;
}
.lt-bubble-row.is-peer .lt-bubble { border-bottom-left-radius: 6px; }
.lt-bubble-row.is-mine .lt-bubble {
  background: var(--c-brand); color: #fff;
  border-bottom-right-radius: 6px;
}
.lt-bubble-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 0 2px;
  font-size: 10px; color: var(--c-tertiary);
  font-family: var(--font-num);
}
.lt-bubble-row.is-mine .lt-bubble-meta { flex-direction: row-reverse; }
.lt-read { color: var(--c-brand); }
.lt-chat-input {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px calc(9px + var(--safe-b, 0px));
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 var(--c-line);
}
.lt-input {
  flex: 1 1 auto; min-width: 0;
  height: 38px; padding: 0 14px;
  border: none; outline: none; border-radius: 999px;
  background: var(--c-card); color: var(--c-primary);
  font-size: 14px;
}
.lt-input::placeholder { color: var(--c-tertiary); }
.lt-chat-input .lt-send {
  flex: 0 0 auto;
  height: 38px; padding: 0 18px; border: none; border-radius: 999px;
  background: var(--c-brand); color: #fff;
  font-size: 14px; font-weight: 600;
}
.lt-chat-input .lt-send:active { transform: scale(0.97); }

/* —— 招工会话的岗位卡片预览（复用暗岗权限闸门，薪资走品牌蓝） —— */
.lt-jobcard {
  margin-bottom: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--c-card);
  box-shadow: inset 0 0 0 1px var(--c-line);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.lt-jobcard:active { transform: scale(0.99); }
.lt-jobcard-empty {
  color: var(--c-tertiary); font-size: 13px; text-align: center;
  box-shadow: none; cursor: default; padding: 18px;
}
.lt-jobcard-empty:active { transform: none; }
.lt-jobcard-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lt-jobcard-title { font-size: 15px; font-weight: 600; color: var(--c-primary); line-height: 1.4; }
.lt-jobcard-co { margin-top: 4px; }
.lt-jobcard-sal { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--c-brand); letter-spacing: -0.01em; }
.lt-jobcard-hint { margin-top: 8px; }

/* —— 来信页（第 27 期 磊哥定稿）：点「来信」自右侧滑入 + 互动/通知两栏同页切换 —— */
/* 内容区横向裁剪：滑入动画期间不出横向滚动条 */
.mp-body { overflow-x: hidden; }
.lt-page.lt-enter { animation: lt-slide-in .32s cubic-bezier(.32, .72, .3, 1) both; }
@keyframes lt-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
/* 两栏同页共存：隐藏非当前栏；切换时新栏自右轻推淡入（不重画、不跳路由） */
.lt-pane { display: none; }
.lt-pane.is-active { display: block; animation: lt-pane-in .24s cubic-bezier(.32, .72, .3, 1) both; }
@keyframes lt-pane-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-page.lt-enter, .lt-pane.is-active { animation: none; }
}

/* ======================================================================
   来信 · 左侧滑出对话面板（一级面板；第 30 期左侧停靠 + 最大化三态）
   第 31 期起：本面板为「三级结构」的第 2 层 —— 功能栏 → 本面板(一级) → .lt-drawer-2(二级)
   约束：不弹框、不跳转；滑入 300ms ease-out / 收回 250ms ease-in；
        最大化 250ms ease-in-out / 恢复 200ms ease-in-out。
   🔴 三种状态（桌面端，左侧功能栏宽 --d-aside-w）：
      ① 对话态：left = --d-aside-w（贴功能栏右边框），宽 400px
      ② 收回  ：整体向左移出，translateX(-100%) ⇒ 左边界落到 (--d-aside-w - 400)，
                即从功能栏右边框处滑入功能栏背后→不可见；不越过功能栏继续往最左滑
      ③ 最大化：left = --d-aside-w，right = 0（铺满工作区），功能栏仍可见
   移动端（<768px）：功能栏不存在 ⇒ 贴屏幕左缘，宽 85%，不做最大化（按钮隐藏）；
                    二级面板亦不存在（点内容仍在本面板内切换 is-detail）。
   🔴 「融为一体」= 无投影、无圆角，仅一道极浅分隔线（--c-line）。
   配色仅用品牌蓝(--c-brand) / 黑(--c-primary) / 白(--c-bg) / 灰阶，红色不用。
   ====================================================================== */
.lt-drawer {
  position: fixed;
  top: var(--navbar-h);
  left: 0;                                /* 移动端贴屏幕左缘；桌面端见下方断点覆写 */
  bottom: 0;                              /* 移动端在下方留白给底部标签栏 */
  width: 85%;
  max-width: 85%;
  z-index: 70;                            /* 高于底部 tabbar(60)，低于搜索浮层/弹层 */
  background: var(--c-bg);
  display: flex; flex-direction: column;
  box-shadow: none;                       /* 去掉投影 ⇒ 与背景融为一体 */
  border-right: 1px solid var(--c-line);  /* 仅留一道极浅分隔线 */
  transform: translateX(-100%);           /* 收起：整体向左移出（桌面端即滑入功能栏背后） */
  transition: transform 250ms ease-in;    /* 收回 timing */
  will-change: transform;
}
.lt-drawer.is-open {
  transform: translateX(0);
  transition: transform 300ms ease-out;   /* 滑入 timing */
}
/* 移动端：底部为标签栏，面板不覆盖它 */
@media (max-width: 767px) {
  .lt-drawer { bottom: calc(var(--tabbar-h) + var(--safe-b, 0px)); }
  .lt-drawer-max { display: none; }       /* 移动端无「左侧功能栏」，不做最大化 */
}
/* 桌面端：贴「左侧功能栏右边框」停靠，宽 400px */
@media (min-width: 768px) {
  .lt-drawer {
    width: 400px; max-width: 400px;
    left: var(--d-aside-w, 0);
    border-right: 1px solid var(--c-line);
  }
  /* ③ 最大化：铺满整个工作区（左贴功能栏右边框、右到窗口最右），功能栏仍可见 */
  .lt-drawer.is-max {
    width: auto; max-width: none;
    right: 0;
    transition: width 250ms ease-in-out, max-width 250ms ease-in-out, transform 250ms ease-in-out;
  }
  /* 从最大化恢复原宽度：200ms ease-in-out */
  .lt-drawer.lt-unmax {
    transition: width 200ms ease-in-out, max-width 200ms ease-in-out, transform 200ms ease-in-out;
  }
}
/* 尊重「减少动态效果」：直接显隐，不做位移动画 */
@media (prefers-reduced-motion: reduce) {
  .lt-drawer, .lt-drawer.is-open { transition: none; }
  .lt-drawer.is-max { transition: none; }
}

.lt-drawer-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 10px 0 var(--pad-page);
  box-shadow: inset 0 -1px 0 var(--c-line);
}
.lt-drawer-title { font-size: 17px; font-weight: 700; color: var(--c-primary); }
/* 最大化按钮紧跟在标题后（把右侧两个按钮一起推到行尾） */
.lt-drawer-max { margin-left: auto; }
.lt-drawer-close { margin-left: 2px; }

/* 抽屉内的「互动 / 通知」分段（复用 .lt-seg 胶囊，但去掉底部留白，贴着表头下方） */
.lt-drawer .lt-seg { padding-top: 10px; padding-bottom: 10px; }

/* —— 共用的滚动容器：两栏切换都在这里完成，切换时滚动位置重置顶部 —— */
.lt-drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 1;
  transition: opacity 150ms ease;        /* 切栏 150ms 淡入淡出 */
}
.lt-drawer-scroll.lt-fade { opacity: 0; }

/* —— 详情层：聊天 / 通知详情，覆盖在滚动容器之上 —— */
.lt-drawer-detail {
  display: none;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.lt-drawer.is-detail .lt-drawer-scroll { display: none; }
.lt-drawer.is-detail .lt-drawer-detail { display: block; }

/* ======================================================================
   来信 · 二级面板（第 31 期：一级面板右侧并排的详情面板）
   三层结构（桌面端）：功能栏 → 一级面板(.lt-drawer) → 二级面板(.lt-drawer-2)
   🔴 铁律：二级面板「不覆盖」一级面板 —— 左缘贴一级面板右边框，右缘贴工作区右缘。
      尺寸 = 工作区总宽 − 功能栏宽 − 一级面板宽（本例 1280-228-400 = 652）。
      两级面板始终并排可见，一个像素都不重叠。
   🔴 动效与「来信」一致：滑入 300ms ease-out / 收回 250ms ease-in。
      收回方向为「向右」：整体右移自身宽度，translateX(0)→translateX(100%)，
      终点 = 左缘正好落到「一级面板右边框」处（那一刻即完全移出工作区右侧）。
   仅桌面端存在（<768px 无左侧功能栏、窄屏放不下两级并排 ⇒ 仍走原「抽屉内切换」）。
   ====================================================================== */
.lt-drawer-2 {
  position: fixed;
  top: var(--navbar-h);
  bottom: 0;
  /* 左缘 = 功能栏宽 + 一级面板宽；右缘贴工作区右缘 */
  left: calc(var(--d-aside-w, 0px) + 400px);
  right: 0;
  z-index: 69;                            /* 紧邻一级面板(70) 之下，同色相接、无浮起感 */
  background: var(--c-bg);
  display: flex; flex-direction: column;
  box-shadow: none;
  border-left: 1px solid var(--c-line);   /* 与一级面板之间仅一道极浅分隔线 */
  transform: translateX(100%);            /* 收起：整体右移自身宽度 ⇒ 移出工作区右侧 */
  transition: transform 250ms ease-in;    /* 收回 timing */
  will-change: transform;
}
.lt-drawer-2.is-open {
  transform: translateX(0);
  transition: transform 300ms ease-out;   /* 滑入 timing */
}
/* 移动端 / 窄屏：二级面板不独立存在（走一级面板内的详情切换） */
@media (max-width: 767px) {
  .lt-drawer-2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-drawer-2, .lt-drawer-2.is-open { transition: none; }
}

.lt-drawer-2-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  height: 52px; padding: 0 10px 0 var(--pad-page);
  box-shadow: inset 0 -1px 0 var(--c-line);
}
/* 二级面板标题：整块可点 ⇒ 向右收回（终点=一级面板右边框） */
.lt-drawer-2-title {
  font-size: 17px; font-weight: 700; color: var(--c-primary);
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 8px; padding: 4px 6px; margin-left: -6px;
}
.lt-drawer-2-title:hover { background: var(--c-card); }
.lt-drawer-2-title .lt-2-hint { font-size: 12px; font-weight: 600; color: var(--c-secondary); }
/* 二级面板不设「最大化」按钮（按需求仅一级面板有） */
.lt-drawer-2 > .lt-drawer-2-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lt-drawer-2-body > .lt-drawer-detail { display: block; }

/* —— 左滑手势行：前层可拖动，后层露出「标记已读 / 删除」 —— */
.lt-swipe { position: relative; overflow: hidden; }
.lt-swipe-back {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 148px; display: flex; align-items: stretch;
  background: var(--c-card);
}
.lt-swipe-act {
  flex: 1 1 0; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #fff;
}
.lt-swipe-read { background: var(--c-brand); }
.lt-swipe-del { background: var(--c-secondary); }   /* 灰阶，不用红 */
.lt-swipe-front {
  position: relative; z-index: 1;
  background: var(--c-bg);
}
.lt-swipe.lt-anim .lt-swipe-front { transition: transform 250ms cubic-bezier(.32, .72, .3, 1); }

/* —— 通知详情（抽屉内） —— */
.lt-detail { display: flex; flex-direction: column; height: 100%; }
.lt-detail-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  padding: 8px 6px 8px 4px; box-shadow: inset 0 -1px 0 var(--c-line);
}
.lt-detail-body { flex: 1 1 auto; overflow-y: auto; padding: var(--pad-page); }
.lt-detail-title { font-size: 17px; font-weight: 700; color: var(--c-primary); line-height: 1.35; }
.lt-detail-time { margin-top: 4px; }
.lt-detail-text { margin-top: 12px; line-height: 1.65; color: var(--c-secondary); white-space: pre-wrap; }

/* 抽屉里的聊天页继承 .lt-chat（原整页样式），仅在抽屉容器里撑满 */
.lt-drawer-detail .lt-chat { height: 100%; }


/* ══════════ 第 35 期：名片页「左信息 + 右补充/Block」两栏 ══════════
   断点只写在这里（JS 不按宽度切形态 —— 本项目铁律）：
   手机 / 平板（<1024）上下堆叠；桌面（≥1024）左自适应 / 右 280px 并排。 */
/* 第 41 期·补（2026-09-28 磊哥反馈「两侧空白太大，要铺满」）：
   第 39 期的「整块收窄居中（max-width 720px）」**已退役** —— 那是当时的判断，
   与磊哥「自适应铺满、随时好看」的要求冲突。
   现在：手机/平板（<1024）跟随容器宽度；桌面（≥1024）交给容器给多少就用多少。
   ⚠️ 上限不再写在这里 —— 超宽屏的统一收口点由 web.css 的容器规则负责（见 web.css §十七）。 */
.pf2 { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 100%; }
@media (min-width: 1024px) {
  /* 第 40 期·调：左列加宽到 50%（保底 320px、上限 600px），两栏间距拉到 56px（呼吸感） */
  .pf2 { grid-template-columns: minmax(320px, min(50%, 600px)) 1fr; gap: 56px; align-items: start; }
}
/* 第 40 期：左列模块间距 32px（呼吸感优先）；资料块 / 动态块内部用小节奏 */
.pf-left { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.pf-right { min-width: 0; }
.pf-info { display: flex; flex-direction: column; gap: 14px; }
.pf-feed { display: flex; flex-direction: column; gap: 16px; }

/* ① 头像 + 右下角换头像的加号
   第 41 期·补5（磊哥定）：加号按钮**不填充颜色** —— 原来是品牌蓝实心圆 + 白加号，
   现改成「淡色玻璃底 + 深色加号」，靠 1px 细边和投影与头像分开；hover 才泛品牌蓝。 */
.pf-ava-wrap { position: relative; display: inline-block; }
.pf-ava-plus {
  position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--c-bg); color: var(--c-secondary);
  border: 1px solid var(--c-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
  padding: 0; transition: color .14s, border-color .14s;
}
.pf-ava-plus:hover { color: var(--c-brand); border-color: var(--c-brand); }
/* ② 名字 + 「✏️ 编辑」文字链接（第 39 期：名字行两端对齐，编辑靠右） */
.pf-name-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 14px; }
.pf-name { font-size: 21px; font-weight: 700; color: var(--c-primary); }
.pf-edit-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--c-tertiary); transition: color .14s;
}
.pf-edit-link:hover { color: var(--c-brand); }
/* ③ 简介 */
.pf-bio { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--c-secondary); }
/* ④ 标签：横排可换行，行距 8px 不堆叠（第 40 期：浅灰底 #F5F6F8 / 深灰字 #333 / 全圆 / 12×6 / 13px / hover 加深）
   第 41 期·补4（磊哥定）：**按类合并** —— 同类只有一个胶囊、只留一个 emoji（详见 app.js cardTagsMerged）。 */
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-tag {
  padding: 6px 12px; border-radius: 999px; font-size: 13px; line-height: 1.4;
  background: #F5F6F8; color: #333; transition: background-color .14s;
}
.pf-tag:hover { background: #E9EAEE; }
/* 类内 emoji：与文本同基线，右侧留 1 个空格宽度的间隔 */
.pf-tag-em { margin-right: 1px; }
/* 「等 N 项」尾注：比正文浅一档，弱化但不抢眼 */
.pf-tag-more { color: var(--c-tertiary); }
/* ⑤ 关注数据：数字品牌蓝、文字灰色（第 39 期：数字改蓝，照截图） */
.pf-stats { display: flex; gap: 18px; margin-top: 12px; }
.pf-stat { display: flex; align-items: baseline; gap: 4px; font-size: 12.5px; color: var(--c-tertiary); }
.pf-stat b { font-size: 14px; font-weight: 600; color: var(--c-brand); }
/* ⑦ 内容标签（第 40 期：胶囊式，与筛选栏 / 排序统一 .pf-pill 体系） */
.pf-pane { min-width: 0; }
/* 第 40 期：内容标签 + 筛选栏 + 排序 统一胶囊（浅灰底 #F5F6F8 / 深灰字 #333 / 全圆 / 12×6 / 13px / 选中品牌色白字） */
.pf-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1.4;
  background: #F5F6F8; color: #333; white-space: nowrap;
  transition: background-color .14s, color .14s;
}
.pf-pill:hover { background: #E9EAEE; }
.pf-pill.is-on { background: var(--c-brand); color: #fff; }
.pf-pill.is-on:hover { background: var(--c-brand-dark, #2A5BE0); }
/* ⑧ 页内切换标签「动态 | 收藏」（第 41 期·补3 改版 · 磊哥定）：
   点击选中时**不填充底色**，只用**底部蓝色粗线**表示选中；两枚间距拉开到 60px。
   二者是**纯文字页签**（无胶囊底、无边框），与上方筛选栏 / 排序的 .pf-pill 胶囊区分开，
   故不再复用 .pf-pill（避免把通用胶囊的灰底圆角带进来）。 */
.pf-tabs { display: flex; gap: 60px; }
.pf-tabx {
  position: relative; display: inline-block;
  padding: 6px 0 10px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1.4;
  color: var(--c-secondary); white-space: nowrap;
  transition: color .14s;
}
.pf-tabx:hover { color: var(--c-primary); }
.pf-tabx.is-on { color: var(--c-brand); font-weight: 600; }
/* 选中标识：底部蓝色粗线（3px）。用伪元素做，不占布局、可居中可控宽。 */
.pf-tabx::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px; background: transparent;
  transition: background-color .14s;
}
.pf-tabx.is-on::after { background: var(--c-brand); }
.pf-filter, .pf-sort { font-weight: 500; }
.pf-empty {
  padding: 30px 12px; text-align: center; font-size: 13px; color: var(--c-tertiary);
  background: var(--c-card); border-radius: var(--r-card);
}
/* ⑧ 联系方式（第 35 期·编辑页重做同步）：**只显示已填的**。
   第 39 期：去掉「联系方式」标题（照即刻排版直接一排胶囊），
   .pf-contact-h / .pf-contact-tip 随标题一并退役。 */
/* 第 40 期：联系方式沉到左列最末，间距由 .pf-left 的 gap 接管 */
.pf-contact { min-width: 0; }
.pf-contact-list { display: flex; flex-direction: column; gap: 8px; }
.pf-contact-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--c-card); border-radius: var(--r-card); min-width: 0;
}
.pf-contact-n { font-size: 12.5px; color: var(--c-secondary); flex: 0 0 auto; }
.pf-contact-row .pf-contact-v {
  margin-left: auto; font-size: 12.5px; color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 第 38 期：文字类联系方式（邮箱/QQ/Discord/Telegram/电话）直接显示内容行 */
.pf-ct-list { display: flex; flex-direction: column; gap: 8px; }
.pf-ct-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--c-card); border-radius: var(--r-card); min-width: 0;
  text-decoration: none; color: inherit; cursor: default;
}
a.pf-ct-row { cursor: pointer; }
a.pf-ct-row:hover { background: var(--c-brand-soft); }
.pf-ct-name { font-size: 12.5px; color: var(--c-secondary); flex: 0 0 auto; }
.pf-ct-val {
  margin-left: auto; font-size: 12.5px; color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%;
}
a.pf-ct-val { color: var(--c-brand); }

/* 品牌图标：真 logo 优先，加载失败露「品牌色方块 + 首字」兜底 */
.blk-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.blk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.blk-fb {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  border-radius: 6px; color: #fff; font-size: 11px; font-weight: 600;
}
.blk-img.is-bad { display: none; }
.blk-img.is-bad + .blk-fb { display: flex; }
/* 🔴 联系方式（名片页行 / 编辑页按钮）里的兜底**只留色块、不显示首字**：
   旁边已经写着「微信 / 邮箱」，再露一个「微 / 邮」读起来像「微微信」（2026-09-27 实测）。
   Block 卡片不在此列 —— 那里首字是唯一的标识，必须留。 */
.pf-contact-row .blk-fb, .et-ctb .blk-fb { font-size: 0; }
.pf-contact-row .blk-fb::before, .et-ctb .blk-fb::before { content: ''; }

/* ══════════════════════════════════════════════════════════════════════════
   第 36 期（2026-09-28 磊哥定稿）：联系方式 = 只传二维码
   · 名片页：标签下方只显示通讯工具 logo，点击弹二维码大图
   · 编辑页：点工具按钮 → 上传二维码（不再填号码）
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 名片页：一排胶囊按钮（第 39 期：横向胶囊 icon+名字，浅底圆角 999px）── */
.pf-qr-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-qr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--c-bg-soft); cursor: pointer; font-family: inherit;
  transition: background-color .14s;
}
.pf-qr-btn:hover { background: var(--c-brand-soft); }
.pf-qr-n { font-size: 12.5px; line-height: 1.3; color: var(--c-primary); white-space: nowrap; }
/* 🔴 兜底色块的首字**必须隐藏**：按钮下方已经有「微信 / 邮箱 / QQ」，
   色块再露一个「微 / 邮 / Q」会读成「微微信 / 邮邮箱 / QQQ」（2026-09-28 实测截到）。
   与上面 .pf-contact-row / .et-ctb 同一条口径 —— 名字已经写在旁边，色块只负责色。 */
.pf-qr-btn .blk-fb { font-size: 0; }
.pf-qr-btn .blk-fb::before { content: ''; }
/* 图标正常加载时，兜底色块本来就被 .blk-img 盖住；仅图标失败时才露出来（=纯色块）。 */

/* 「点图标看二维码」提示：第 39 期随「联系方式」标题一并退役（规则已删） */

/* ══════════ 第 40 期：动态 / 收藏 页内内容区（可扩展方案）══════════
   内容装在一张圆角卡里（卡片内边距 24px）：顶部发帖框 + 筛选/排序栏 + 固定高 480px 滚动区。 */
.pf-pane-card {
  background: var(--c-card); border: 0.5px solid var(--c-line);
  border-radius: var(--r-card); overflow: hidden; padding: 24px;
}
.pf-composer {
  display: flex; align-items: center; gap: 10px; padding-bottom: 14px;
  border-bottom: 0.5px solid var(--c-line); cursor: pointer;
}
.pf-composer-ava {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: #E3E3E8; flex: none; display: block;
}
.pf-composer-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-composer-ava svg { width: 100%; height: 100%; display: block; }
.pf-composer-ph { flex: 1; min-width: 0; font-size: 13px; color: var(--c-tertiary); }
.pf-composer-btn {
  flex: none; padding: 7px 16px; border: 0; border-radius: 999px;
  background: var(--c-brand); color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pf-composer-btn:active { opacity: .85; }
/* 收藏页仍用滚动列表（沿用第 39/40 期口径） */
.pf-pane-scroll {
  max-height: 480px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -24px; padding: 0 24px;
}
.pf-pane-list { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.pf-pane-empty { padding: 32px 0; text-align: center; font-size: 13px; color: var(--c-tertiary); }
.pf-pane-pub {
  display: inline-block; margin-top: 14px; padding: 8px 20px; border: 0; border-radius: 999px;
  background: var(--c-brand); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pf-pane-pub:active { opacity: .85; }

/* ══════════ 第 40 期·调2：动态区「年份-月份折叠 + 紧凑行」（面向成百上千条）══════════ */

/* 年份切换条 */
.pf-years { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 0 2px; }
.pf-yr {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 12.5px;
  background: #F5F6F8; color: #333; transition: background-color .14s, color .14s;
}
.pf-yr:hover { background: #E9EAEE; }
.pf-yr.is-on { background: var(--c-brand); color: #fff; }
.pf-yr-n { font-size: 10.5px; opacity: .7; }

/* 工具栏：类型 / 排序（下拉）+ 搜索 */
.pf-feedtools { display: flex; align-items: center; gap: 8px; padding: 10px 0 12px; }
.pf-tools-sp { flex: 1 1 auto; min-width: 8px; }
.pf-tool {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
  border: 0.5px solid var(--c-line); border-radius: 999px; background: var(--c-card);
  color: var(--c-primary); font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.pf-tool:hover { background: var(--c-fill-hover); }
.pf-menu-wrap { position: relative; }
.pf-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 148px;
  background: var(--c-card); border: 0.5px solid var(--c-line); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 5px; display: none;
}
.pf-menu-wrap.is-open .pf-menu { display: block; }
.pf-menu-i {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: none;
  font-family: inherit; font-size: 13px; color: var(--c-primary); text-align: left; cursor: pointer;
}
.pf-menu-i:hover { background: var(--c-fill-hover); }
.pf-menu-i.is-on { color: var(--c-brand); font-weight: 600; }

/* 搜索框 */
.pf-search {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border: 0.5px solid var(--c-line); border-radius: 999px; background: var(--c-card);
  color: var(--c-tertiary); min-width: 150px; max-width: 220px;
}
.pf-search-in {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: inherit;
  font-size: 12.5px; color: var(--c-primary);
}
.pf-search-in::placeholder { color: var(--c-tertiary); }

/* 月份分组 */
.pf-mgroups { padding: 4px 0 2px; }
.pf-mgroup { border-top: 0.5px solid var(--c-line); }
.pf-mgroup:first-child { border-top: 0; }
.pf-mgroup-h {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 2px;
  border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left;
}
.pf-mgroup-h:hover .pf-mgroup-t { color: var(--c-brand); }
.pf-mcaret { display: inline-flex; color: var(--c-tertiary); flex: none; }
.pf-mgroup-t { font-size: 13.5px; font-weight: 600; color: var(--c-primary); transition: color .14s; }
.pf-mgroup-n { margin-left: auto; font-size: 12px; color: var(--c-tertiary); }

/* 紧凑行（一条帖子） */
.pf-mrows { display: flex; flex-direction: column; padding-bottom: 8px; }
.pf-mrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-radius: 10px; cursor: pointer; transition: background-color .14s;
}
.pf-mrow:hover { background: var(--c-fill-hover); }
.pf-mrow-th {
  flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  background: #E3E3E8; display: block;
}
.pf-mrow-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-mrow-th.is-ph { background: linear-gradient(135deg, #E3E3E8, #D3D1C7); }
.pf-mrow-tx { flex: 1; min-width: 0; }
.pf-mrow-title {
  font-size: 13.5px; font-weight: 600; color: var(--c-primary); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-mrow-sub {
  font-size: 12px; color: var(--c-secondary); line-height: 1.5; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-mrow-meta { font-size: 11px; color: var(--c-tertiary); margin-top: 3px; }
.pf-mrow-stats { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pf-mrow-stat { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--c-tertiary); }

/* 手机端：工具栏换行、搜索占满整行 */
@media (max-width: 767px) {
  .pf-search { max-width: none; flex: 1 1 100%; order: 3; }
  .pf-feedtools { flex-wrap: wrap; }
}

/* ── 二维码大图弹层 ── */
.qr-view-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--c-primary); }
.qr-view-box {
  margin-top: 14px; padding: 14px; border-radius: var(--r-card);
  background: #fff; border: 0.5px solid var(--c-line);
  display: grid; place-items: center;
}
.qr-view-box img { width: 100%; max-width: 260px; height: auto; display: block; }

/* ── 编辑页：上传二维码弹层 ── */
.qr-box {
  display: grid; place-items: center; min-height: 170px; padding: 16px;
  border: 1px dashed var(--c-line); border-radius: var(--r-card); background: var(--c-bg-soft);
}
.qr-box.is-on { border-style: solid; background: #fff; }
.qr-box.is-busy { opacity: .55; }
.qr-img { width: 100%; max-width: 190px; height: auto; display: block; border-radius: 8px; }
.qr-ph { display: grid; place-items: center; gap: 8px; color: var(--c-tertiary); font-size: 12px; }

/* 右列：第 39 期「补充信息」卡（添加图片 / 添加作品简介）—— 常驻邀请位 */
.pf-sups { display: flex; flex-direction: column; gap: 12px; }
.pf-sups + .pf-blocks { margin-top: 16px; }
.pf-sup {
  display: flex; align-items: center; gap: 12px; padding: 20px 24px;
  background: var(--c-card); border: 0.5px solid var(--c-line);
  border-radius: var(--r-card); cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.pf-sup:hover { border-color: var(--c-brand-line); box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.pf-sup-ic {
  width: 34px; height: 34px; border-radius: 10px; background: var(--c-bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-brand); flex: none;
}
.pf-sup-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-sup-t { font-size: 13.5px; font-weight: 600; color: var(--c-primary); }
.pf-sup-s { font-size: 12px; color: var(--c-tertiary); }
.pf-sup-pen { color: var(--c-tertiary); flex: none; display: inline-flex; }

/* 第 41 期·补5：两张补充信息卡的编辑弹框（封面 / 描述 / 链接 / 名称） */
.pf-sup-sheet .field { margin-bottom: 16px; }
.pf-sup-sheet .field:last-of-type { margin-bottom: 4px; }
.sup-f-head .field-label { margin-bottom: 8px; }
.sup-cover {
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px dashed var(--c-line); border-radius: var(--r-card);
  background: var(--c-card); display: flex; align-items: center; justify-content: center;
}
.sup-cover.is-on { border-style: solid; }
.sup-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sup-cover-ph {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--c-tertiary); font-size: 12.5px;
}

/* 右列：已加的 Block 卡片 */
.pf-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.pf-block {
  min-width: 0; padding: 18px 22px; cursor: pointer;
  background: var(--c-bg); border: 0.5px solid var(--c-line); border-radius: var(--r-card);
}
.pf-block-h { display: flex; align-items: center; gap: 8px; }
.pf-block-t {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-block-x { width: 24px; height: 24px; flex: none; }
.pf-block-link { display: block; margin-top: 6px; font-size: 12px; color: var(--c-brand); word-break: break-all; }
.pf-block-text { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--c-secondary); }
/* 第 41 期·补5：块封面图 / 经历类的时间行 */
.pf-block-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 8px; margin-bottom: 8px; }
.pf-block-time { margin-top: 6px; font-size: 12px; color: var(--c-tertiary); }

/* 「添加 Block !」面板 */
.blk-panel-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; box-shadow: inset 0 -1px 0 var(--c-line);
}
.blk-panel-t { font-size: 15px; font-weight: 600; color: var(--c-primary); }
.blk-group { padding: 14px 16px; }
.blk-group-t { font-size: 13px; font-weight: 600; color: var(--c-secondary); margin-bottom: 10px; }
.blk-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.blk-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border: 0.5px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-bg); cursor: pointer; font-family: inherit;
}
.blk-item-n { font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--c-secondary); }
/* 第 41 期·补5：面板按钮上的 emoji（磊哥要求每类都有 emoji） */
.blk-item-em { margin-right: 3px; }

/* 「已添加」清单（面板上半）：每行一块，右侧小叉可删 */
.blk-group-mine { background: var(--c-card); }
.blk-mine-list { display: flex; flex-direction: column; gap: 6px; }
.blk-mine {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--c-bg); border-radius: var(--r-card);
}
.blk-mine-n {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blk-mine-x { width: 26px; height: 26px; flex: none; color: var(--c-tertiary); }
.blk-mine-x:hover { color: var(--c-error); }

/* 右下角浮动按钮「+ 添加 Block」 */
.pf-fab {
  position: fixed; right: 16px; bottom: 78px; z-index: 60;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
  border: 0; border-radius: 999px; background: var(--c-brand); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ══════════ 第 37/39/41 期 ═══════════════════════════════════
   ① 铺满方案（.pf-flush）第 39 期退役（改为 max-width 居中）；
      **第 41 期·补 又改回「跟随容器铺满」** —— 磊哥 2026-09-28 反馈「两侧空白太大」，
      上限统一交给 web.css 的容器层（§十七），.pf2 自身不再设窄上限。
   ② 头像 = iOS 默认人形剪影 / 上传图片；第 39 期照截图改 80px 圆角方形。
   ③ 编辑弹框底部操作栏。 ═══════════════════════════════════ */

/* ② 头像：图片或 iOS 人形剪影，统一 80px 圆角方形（radius 24px ≈ 30%） */
.pf-ava-img, .pf-ava-ios {
  width: 80px; height: 80px; border-radius: 24px; display: block;
  object-fit: cover; background: #E3E3E8;
}
.pf-ava-ios { overflow: hidden; }
.pf-ava-ios svg { width: 100%; height: 100%; display: block; }
.pf-ava-ios img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 换头像弹框：预览 + 选择 */
.ava-up-box {
  display: grid; place-items: center; min-height: 158px; padding: 14px;
  border: 1px dashed var(--c-line); border-radius: var(--r-card); background: var(--c-bg-soft);
}
.ava-up-box.is-busy { opacity: .55; }
.ava-up-img { width: 100%; max-width: 148px; height: auto; border-radius: 50%; display: block; }
.ava-up-ph { display: grid; place-items: center; gap: 8px; color: var(--c-tertiary); font-size: 12px; }
.ava-up-ph svg { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #E3E3E8; }
.ava-up-ph img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: #E3E3E8; display: block; }

/* ③ 编辑弹框底部「取消 / 保存」 */
.et-edit-foot {
  display: flex; gap: 10px; padding: 14px 16px;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.et-edit-foot .btn { flex: 1 1 0; }

/* ══════════════════════════════════════════════════════════════════════════
   编辑名片（第 35 期重做，2026-09-27 磊哥定稿）
   四段式：顶部栏 / 头像 / 姓名+简介 / 标签 / 联系方式（+底部栏）
   ⚠️ 本页路由设了 bare:true ⇒ 无外壳顶栏、无底部 tabbar，顶栏与底栏都由这里画。
   ══════════════════════════════════════════════════════════════════════════ */

/* ① 顶部导航栏：左返回 / 中标题 / 右保存 */
.et-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--c-bg);
  box-shadow: inset 0 -1px 0 var(--c-line);
}
.et-tb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 34px; padding: 0 8px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--c-primary); font-family: inherit; font-size: 14px;
  cursor: pointer;
}
.et-tb-btn:active { background: var(--c-line-soft, var(--c-bg-soft)); }
.et-tb-title { flex: 1; text-align: center; font-size: 15.5px; font-weight: 600; color: var(--c-primary); }
.et-tb-save { font-weight: 600; color: var(--c-brand); margin-left: auto; }

/* ② 头像：圆形 + 右下角「＋」 */
.et-body { padding-top: 18px; }
.et-ava-wrap { position: relative; width: 76px; margin: 0 auto 18px; }
.et-ava-plus {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--c-bg); background: var(--c-brand); color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}

/* ③④ 字段（姓名 / 性别 / 简介） */
.et-field { margin-top: 18px; }
.et-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-secondary); margin-bottom: 7px; }
.et-count { float: right; font-weight: 400; color: var(--c-tertiary); font-size: 11.5px; }
.et-body .input, .et-body .textarea { width: 100%; }
.et-bio { min-height: 68px; line-height: 1.6; resize: vertical; }

/* 第 50 期：性别分段控件（男 / 女 / 不公开）—— 只驱动默认头像 */
.et-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--c-fill); }
.et-segb {
  appearance: none; border: 0; cursor: pointer;
  padding: 7px 18px; border-radius: 8px;
  font-size: 13px; font-family: inherit;
  color: var(--c-secondary); background: transparent;
  transition: background .15s, color .15s, box-shadow .15s;
}
.et-segb.is-on {
  background: var(--c-card); color: var(--c-brand);
  font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}
.et-segb:active { opacity: .82; }

/* ⑤ 标签：五类分组，组内平铺 */
.et-taggroup { margin-top: 12px; }
.et-taggroup-h { font-size: 12px; color: var(--c-tertiary); margin-bottom: 6px; }
.et-tagrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.et-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 12px; border-radius: 999px; font-size: 12px; line-height: 1.4;
  background: var(--c-brand-soft); color: var(--c-brand);
}
.et-tag-x {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border: 0; border-radius: 50%; background: transparent; color: var(--c-brand);
  cursor: pointer; padding: 0; opacity: .65;
}
.et-tag-x:active { opacity: 1; }
.et-tag-add {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; line-height: 1.4;
  border: 1px dashed var(--c-brand-line, var(--c-line)); background: transparent;
  color: var(--c-brand); font-family: inherit; cursor: pointer;
}
.et-tag-em { font-size: 12px; color: var(--c-tertiary); opacity: .7; }
/* 第 38 期：点「添加」就地展开的内联胶囊输入框（替代原生 prompt） */
.et-tag-input {
  width: 132px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; line-height: 1.4; font-family: inherit;
  background: var(--c-bg-soft); color: var(--c-primary);
  border: 1px solid var(--c-brand-line, var(--c-line)); outline: none;
}
.et-tag-input::placeholder { color: var(--c-tertiary); }
.et-tag-input:focus { border-color: var(--c-brand); }

/* 第 38 期：统一联系方式弹框里的文字输入框 */
.ct-text-box { margin: 4px 0 2px; }
.ct-text-input { width: 100%; }

/* ⑥ 联系方式：标题行（含公开开关）+ 10 按钮网格 */
.et-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.et-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.et-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.et-switch-t {
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: var(--c-line); transition: background .18s;
}
.et-switch-t::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.et-switch input:checked + .et-switch-t { background: var(--c-brand); }
.et-switch input:checked + .et-switch-t::after { transform: translateX(16px); }
.et-switch-l { font-size: 12px; color: var(--c-secondary); }

.et-ctgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.et-ctb {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border: 0.5px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-bg); cursor: pointer; font-family: inherit; min-width: 0;
}
.et-ctb.is-on { border-color: var(--c-brand-line); background: var(--c-brand-soft); }
/* 第 36 期：不可传二维码的工具（电话号码）—— 灰化 + 不响应指针 */
.et-ctb.is-off { opacity: .5; cursor: not-allowed; }
.et-ctb.is-off:hover { border-color: var(--c-line); }
.et-ctb-n { font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--c-secondary); }
/* 第 36 期：按钮上的状态小字（传二维码 / 已传二维码 / 无需二维码）*/
.et-ctb-s { font-size: 10px; line-height: 1.25; color: var(--c-tertiary); text-align: center; }
.et-ctb.is-on .et-ctb-s { color: var(--c-brand); font-weight: 600; }
/* 旧版遗留：号码时代的「已填值」小字，已不再渲染，样式留着不再引用（避免误用）。 */
.et-ctb-v {
  font-size: 10.5px; color: var(--c-tertiary); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ⑦ 底部操作栏：取消 / 保存 */
.et-footbar {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; padding: 12px 16px;
  background: var(--c-bg); box-shadow: inset 0 1px 0 var(--c-line);
}
.et-footbar .btn { flex: 1; }

/* 桌面端：两栏留白更舒展，底部栏不贴满 */
@media (min-width: 768px) {
  .et-topbar { padding: 12px 22px; }
  .et-footbar { padding: 14px 22px; }
  .et-ctgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}