/* 数创号 · 会员前台样式
沿用站点设计 token：正文 #1d1d1f / 次要 #6e6e73 / 提示 #86868b / 分区底 #f5f5f7 / 强调 #0071e3
圆角 28（大块）/ 22（卡片）/ 12（控件）；不加投影。
这里只补会员页需要的控件样式，其余沿用全站 style.css。 */
/* ---------- 控件补充（前台公共样式里没有的部分） ---------- */
.ipt, .txt {
width: 100%; box-sizing: border-box;
padding: 13px 16px; border: 1px solid #d2d2d7; border-radius: 12px;
font: inherit; font-size: 15px; color: #1d1d1f; background: #fff;
-webkit-appearance: none; appearance: none;
}
.ipt:focus, .txt:focus { outline: none; border-color: #0071e3; }
.ipt::placeholder, .txt::placeholder { color: #86868b; }
.txt { line-height: 1.7; resize: vertical; }
.btn--sm { padding: 7px 14px; font-size: 13px; border-radius: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* ---------- 会员导航条 ---------- */
.mb-nav { background: #f5f5f7; border-bottom: 1px solid #e8e8ed; }
.mb-nav-in { display: flex; align-items: center; gap: 28px; height: 58px; }
.mb-nav-me { font-size: 15px; font-weight: 600; color: #1d1d1f; white-space: nowrap; }
.mb-nav-me span { display: block; font-size: 12px; font-weight: 400; color: #6e6e73; }
.mb-nav-links { display: flex; gap: 22px; margin-left: auto; }
.mb-nav-links a { position: relative; font-size: 14px; color: #6e6e73; text-decoration: none; }
.mb-nav-links a:hover { color: #1d1d1f; }
.mb-nav-links a.on { color: #1d1d1f; font-weight: 600; }
.mb-nav-out {
border: 0; background: none; font: inherit; font-size: 13px;
color: #86868b; cursor: pointer; padding: 0;
}
.mb-nav-out:hover { color: #1d1d1f; }
/* 未读红点 */
/* 未读角标的样式统一收在 style.css（页头「会员中心」按钮也用同一个类，而前台各页只加载 style.css）；
这里只留会员中心内部用的 .mb-dot 计数标。 */
.mb-dot {
display: inline-block; min-width: 17px; height: 17px; padding: 0 5px;
margin-left: 5px; box-sizing: border-box;
border-radius: 9px; background: #d70015; color: #fff;
font-style: normal; font-size: 11px; line-height: 17px; text-align: center; vertical-align: middle;
}
.mb-dot--off { background: #86868b; }
.mb-navbtn { display: inline-flex; align-items: center; }
/* 导航上的资料状态小点（待审 / 被退回） */
.mb-navtag {
display: inline-block; width: 6px; height: 6px; margin-left: 5px;
border-radius: 3px; background: #d70015; vertical-align: 2px;
}
/* ---------- 资料设置 ---------- */
.mb-block { padding: 26px 28px; margin-top: 22px; }
.mb-block .mb-h2 { margin-bottom: 14px; }
.mb-block .mb-note { margin: 0; }
.mb-tag {
display: inline-block; margin-left: 8px; padding: 2px 9px;
border-radius: 980px; background: #fff5f5; color: #d70015;
font-style: normal; font-size: 11px; font-weight: 400; vertical-align: 2px;
}
.mb-kv { display: grid; gap: 10px; }
.mb-kv-row {
display: flex; gap: 16px; align-items: baseline;
font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f4;
}
.mb-kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-kv-row span { width: 88px; flex: none; color: #86868b; font-size: 13px; }
.mb-kv-row b { font-weight: 500; color: #1d1d1f; word-break: break-all; }
.mb-inline-link { margin-left: 10px; color: #0071e3; text-decoration: none; white-space: nowrap; }
/* ---------- 我的文章 · 状态分栏 ---------- */
.mb-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.mb-tab {
display: inline-flex; align-items: center;
border: 1px solid #e8e8ed; background: #fff; border-radius: 980px;
padding: 8px 16px; font: inherit; font-size: 14px; color: #6e6e73; cursor: pointer;
}
.mb-tab:hover { color: #1d1d1f; border-color: #d2d2d7; }
.mb-tab.on { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }
.mb-tab .mb-dot { margin-left: 7px; }
.mb-tab.on .mb-dot--off { background: rgba(255, 255, 255, .3); }
.mb-list[hidden] { display: none; }
/* ---------- 登录 / 注册 ---------- */
.mb-auth { max-width: 460px; padding: 56px 22px 80px; }
.mb-card--auth { padding: 34px 34px 30px; }
.mb-h1 { font-size: 30px; font-weight: 600; letter-spacing: 0; color: #1d1d1f; margin: 0; }
.mb-h2 {
font-size: 19px; font-weight: 600; letter-spacing: 0; color: #1d1d1f;
margin: 0 0 16px; display: flex; align-items: center;
}
.mb-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #6e6e73; }
/* 被挡回登录页时的原因说明（账号已下线 / 已停用 / 申请未通过） */
.mb-note { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: #fff7e8; border-left: 3px solid #ff9500; font-size: 14px; line-height: 1.7; color: #1d1d1f; }
.mb-card { background: #fff; border: 1px solid #e8e8ed; border-radius: 22px; }
.mb-form { margin-top: 24px; display: grid; gap: 16px; }
.mb-field { display: block; }
.mb-field > span {
display: block; margin-bottom: 7px; font-size: 13px; color: #6e6e73;
}
.mb-field > span b { color: #d70015; margin-left: 3px; font-weight: 400; }
/* 字段旁小标签：标出「对外显示 / 仅编辑沟通可见」，资料设置页用 */
.mb-field > span .mb-hint {
display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 8px;
background: #f5f5f7; color: #86868b; font-style: normal; font-size: 11px; line-height: 1.6;
}
.mb-btn { width: 100%; }
.mb-tip { min-height: 19px; margin: 0; font-size: 13px; color: #d70015; }
/* 注册页：账号 / 手机号查重结论（就地提示，不用等提交） */
.mb-chk { display: block; margin-top: 6px; min-height: 17px; font-size: 12px; font-style: normal; color: #86868b; }
.mb-chk.good { color: #1d8a4e; }
.mb-chk.bad { color: #d70015; }
/* 账号「已存在但有条路可走」（待审 / 未通过）——不是错，是提示，用橙色区分于红色拦截 */
.mb-chk.warn { color: #c26a00; }
/* 找回密码页：四步流程条 */
.mb-steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
margin-top: 18px; padding: 12px 14px; background: #f5f5f7; border-radius: 12px;
}
.mb-steps > div { font-size: 12px; line-height: 1.5; color: #6e6e73; }
.mb-foot-link { margin-top: 22px; padding-top: 20px; border-top: 1px solid #f0f0f4; font-size: 14px; color: #6e6e73; }
.mb-foot-link a { color: #0071e3; text-decoration: none; }
.mb-foot-link .mb-sep { color: #d2d2d7; margin: 0 9px; }
/* 退出登录做成文字按钮，与旁边的链接并排（修改申请资料页用） */
.mb-linkout { border: 0; padding: 0; background: none; font: inherit; color: #0071e3; cursor: pointer; }
/* 修改申请资料页：把「没通过 + 原因 + 下一步」摊开说清楚，不能只是灰字一行 */
.mb-card--auth .mb-note--bad {
font-size: 13.5px; line-height: 1.75; color: #1d1d1f;
background: #fff5f5; border-left-color: #d70015;
}
.mb-card--auth .mb-note--bad b { color: #c0392b; }
.mb-card--auth .mb-note, .mb-card--auth .mb-note--bad { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; }
.mb-tip--soft { margin-top: 10px; color: #86868b; }
.mb-back { margin-top: 26px; font-size: 14px; }
.mb-back a { color: #6e6e73; text-decoration: none; }
/* ---------- 会员中心 头部 ---------- */
.mb-head {
display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
padding: 44px 22px 30px;
}
.mb-me { flex: 1; min-width: 260px; }
.mb-me-org { margin: 8px 0 0; font-size: 15px; color: #6e6e73; }
.mb-me-intro { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: #86868b; max-width: 620px; }
.mb-me-meta { margin-top: 14px; display: flex; gap: 18px; align-items: center; font-size: 13px; color: #86868b; }
.mb-me-link { color: #0071e3; text-decoration: none; }
.mb-acts { text-align: right; }
.mb-acts .mb-btn { width: auto; padding: 12px 30px; }
.mb-acts-tip { margin: 8px 0 0; font-size: 12px; color: #86868b; }
/* ---------- 分区与列表 ---------- */
.mb-sec { padding: 0 22px 34px; }
.mb-list {
border: 1px solid #e8e8ed; border-radius: 22px; overflow: hidden; background: #fff;
}
.mb-row {
display: flex; align-items: center; gap: 16px;
padding: 16px 22px; border-top: 1px solid #f0f0f4;
}
.mb-row:first-child { border-top: 0; }
.mb-row-main { flex: 1; min-width: 0; }
.mb-row-title { font-size: 15px; color: #1d1d1f; font-weight: 500; }
.mb-row-title a { color: #1d1d1f; text-decoration: none; }
.mb-row-title a:hover { color: #0071e3; }
.mb-row-sub { margin-top: 5px; font-size: 12px; color: #86868b; }
.mb-row-side { width: 96px; flex: none; text-align: right; }
.mb-row-num { width: 56px; flex: none; text-align: center; font-size: 13px; color: #86868b; }
.mb-row-ops { flex: none; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 320px; }
.mb-reason {
margin-top: 10px; padding: 10px 14px; background: #f5f5f7; border-radius: 12px;
font-size: 13px; line-height: 1.7; color: #6e6e73;
}
.mb-reason span { display: block; font-size: 11px; color: #86868b; margin-bottom: 3px; }
.mb-note { font-size: 12px; color: #86868b; }
.mb-empty { padding: 40px 22px; text-align: center; font-size: 14px; color: #86868b; }
/* ---------- 写稿页 ---------- */
.mb-write { max-width: 780px; padding: 40px 22px 80px; }
.mb-form--write { gap: 22px; }
.mb-ipt-lg { font-size: 20px; font-weight: 600; padding: 15px 18px; }
.mb-alert {
margin: 18px 0 0; padding: 14px 18px; border-radius: 12px;
background: #f5f5f7; font-size: 13px; line-height: 1.75; color: #6e6e73;
}
.mb-alert b { color: #1d1d1f; font-weight: 600; }
.mb-alert--off { background: #fff5f5; color: #6e6e73; }
.mb-cover { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 封面预览框：与前台一致走「整幅不裁 + 同图模糊补底」，
所以缩略图外面多一层 .mb-covbox 用来放模糊补底（.covbg），img 只负责整幅显示 */
.mb-covbox {
display: block; width: 132px; aspect-ratio: 16/9; flex: 0 0 auto;
border-radius: 12px; overflow: hidden; background: #f5f5f7;
}
.mb-covbox img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mb-cover-ops { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 精简编辑器 */
.mb-rtebar {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
padding: 8px; background: #f5f5f7; border-radius: 12px;
}
.mb-rtebar button {
border: 0; background: #fff; border-radius: 8px; padding: 6px 12px;
font: inherit; font-size: 13px; color: #1d1d1f; cursor: pointer;
}
.mb-rtebar button:hover { color: #0071e3; }
.mb-rte {
min-height: 340px; padding: 20px 22px;
border: 1px solid #d2d2d7; border-radius: 12px; background: #fff;
font-size: 16px; line-height: 1.85; color: #1d1d1f;
}
.mb-rte:focus { outline: none; border-color: #0071e3; }
.mb-rte h3 { font-size: 18px; font-weight: 600; margin: 22px 0 10px; letter-spacing: 0; }
.mb-rte p { margin: 0 0 14px; }
.mb-rte ul { margin: 0 0 14px; padding-left: 22px; }
.mb-rte blockquote {
margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid #0071e3;
background: #f5f5f7; color: #6e6e73;
}
.mb-rte img { max-width: 100%; height: auto; border-radius: 12px; margin: 14px 0; }
.mb-rte:empty::before {
content: attr(data-ph); color: #86868b;
}
.mb-form-ops { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mb-cancel { font-size: 14px; color: #86868b; text-decoration: none; }
/* ---------- 站内信 ---------- */
.mb-chat {
margin-top: 26px; padding: 22px; background: #f5f5f7; border-radius: 22px;
display: grid; gap: 14px; max-height: calc(60vh / var(--pz, 1)); overflow-y: auto;
}
.mb-bubble {
max-width: 76%; padding: 14px 18px; background: #fff;
border-radius: 18px 18px 18px 4px;
}
.mb-bubble--mine { margin-left: auto; background: #0071e3; color: #fff; border-radius: 18px 18px 4px 18px; }
.mb-bubble--sys { max-width: 100%; background: #fff; border-left: 3px solid #0071e3; border-radius: 4px 18px 18px 4px; }
.mb-bubble-head { display: flex; gap: 10px; font-size: 12px; opacity: .75; margin-bottom: 6px; }
.mb-bubble-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.mb-bubble-body { font-size: 14px; line-height: 1.75; }
.mb-reply { margin-top: 20px; display: grid; gap: 12px; justify-items: start; }
/* ---------- 作者主页 ---------- */
.mb-author { padding: 48px 22px 80px; }
.mb-author-head {
display: flex; gap: 22px; align-items: center;
padding-bottom: 30px; border-bottom: 1px solid #f0f0f4; margin-bottom: 30px;
}
.mb-author-av {
width: 76px; height: 76px; flex: none; border-radius: 38px; background: #f5f5f7;
display: grid; place-items: center; font-size: 30px; font-weight: 600; color: #0071e3;
}
.mb-author-org { margin: 8px 0 0; font-size: 15px; color: #6e6e73; }
.mb-author-intro { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: #86868b; }
.mb-author-stat { margin: 12px 0 0; font-size: 14px; color: #86868b; }
.mb-author-stat b { color: #1d1d1f; font-size: 17px; }
.mb-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mb-acard {
display: block; background: #fff; border: 1px solid #e8e8ed; border-radius: 22px;
overflow: hidden; text-decoration: none; color: inherit;
}
.mb-acard:hover { border-color: #d2d2d7; }
.mb-acard-cov { aspect-ratio: 16/9; background: #f5f5f7; }
.mb-acard-cov img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mb-acard-b { padding: 18px 20px 22px; }
.mb-acard-t { font-size: 15px; font-weight: 600; color: #1d1d1f; line-height: 1.5; }
.mb-acard-s { margin-top: 8px; font-size: 13px; line-height: 1.7; color: #6e6e73; }
.mb-acard-d { margin-top: 12px; font-size: 12px; color: #86868b; }
/* 文章详情页：会员稿的来源可点 */
.byline-src { color: #0071e3; text-decoration: none; }
.byline-src:hover { text-decoration: underline; }
@media (max-width: 860px) {
.mb-agrid { grid-template-columns: 1fr 1fr; }
.mb-row { flex-wrap: wrap; }
.mb-row-ops { max-width: 100%; justify-content: flex-start; }
.mb-row-side, .mb-row-num { width: auto; }
}
@media (max-width: 560px) {
.mb-agrid { grid-template-columns: 1fr; }
.mb-nav-in { gap: 14px; height: auto; padding: 12px 0; flex-wrap: wrap; }
.mb-nav-links { margin-left: 0; gap: 16px; }
}
/* ---------- 修改申请资料页：编辑部通知（只读） ----------
退回原因、下一步怎么办都在站内信里，这一页必须看得到，
否则「先通过审核才读得到通知」——顺序反了。 */
.mb-inbox { margin-top: 26px; padding-top: 20px; border-top: 1px solid #f0f0f4; }
.mb-inbox-t { font-size: 13px; font-weight: 600; color: #6e6e73; margin-bottom: 12px; }
.mb-inbox-i { padding: 11px 14px; border-radius: 12px; background: #f5f5f7; margin-bottom: 9px; }
.mb-inbox-h { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #86868b; margin-bottom: 5px; }
.mb-inbox-b { font-size: 13.5px; line-height: 1.75; color: #1d1d1f; }
/* ---------- 字段说明与提示（2026-10-13） ----------
注册页的邮箱、找回页的时效说明，都是「填之前先看一眼」的关键信息，
跟字段贴紧一点，别让人以为是页脚。 */
.mb-note--field { margin-top: -4px; margin-bottom: 14px; padding: 10px 13px; border-radius: 10px; background: #f5f5f7; }
.mb-linkout { background: none; border: 0; padding: 0; margin-left: 10px; color: #0071e3; font-size: 13px; cursor: pointer; }
/* ---------- 封面：整幅不裁 + 同图模糊补底（与前台 public/assets/style.css 同一套） ----------
会员端的投稿封面同样大多是公众号 2.35:1 的超宽首图，cover 会把两侧字裁掉。
结构：<… class="cov" style="--cov:url(图)">![]()
层叠只靠文档顺序（补底在前、图片在后），不要给图片 z-index。 */
.cov { position: relative; overflow: hidden; }
.covbg {
position: absolute; inset: -8%; z-index: 0;
background-image: var(--cov); background-size: cover; background-position: center; background-repeat: no-repeat;
filter: blur(26px) brightness(.9) saturate(1.05);
}
.covfg {
position: absolute; inset: 0;
background-image: var(--cov); background-size: contain; background-position: center; background-repeat: no-repeat;
}
.cov > img { position: relative; object-fit: contain; }