@charset "UTF-8";
/* ==========================================================================
   Moment Social — 前台社交功能样式
   --------------------------------------------------------------------------
   刻意复用主题的 CSS 变量（--bg / --text / --border / --accent …），
   这样能跟 X 风格的配色体系无缝融在一起；变量缺失时下面都有兜底值，
   换成别的主题也不会花掉。
   ========================================================================== */

/*
 * ⚠ 定义在根元素上，**不要**改成挂某个具体容器（.ms-auth / .ms-profile …）。
 *
 * 之前它们只挂在几个页面容器上，而投稿页的容器是 .ms-submit —— 不在名单里，
 * 于是投稿页上所有 var(--ms-soft, #536471) 全退回了浅色兜底值：
 * 深色背景上配深灰字，几乎看不清。挂根元素就没有"漏一个容器"这回事了。
 */
:root {
	--ms-accent: var(--accent, #1d9bf0);
	--ms-border: var(--border, #eff3f4);
	--ms-text: var(--text, #0f1419);
	--ms-soft: var(--text-soft, #536471);
	--ms-faint: var(--text-faint, #8b98a5);
	--ms-bg: var(--bg, #ffffff);
	--ms-bg-soft: var(--bg-soft, #eff3f4);
	--ms-hover: var(--bg-hover, #f7f9f9);
	--ms-radius: 16px;
}

/* 深色模式下换一组兜底值（主题重新定义了 --bg-soft 时这里其实用不到，
   留着是为了主题变量缺失时也能给出合理的深色默认） */
html[data-theme="dark"] {
	--ms-bg-soft: var(--bg-soft, #16181c);
	--ms-hover: var(--bg-hover, #080808);
	--ms-border: var(--border, #2f3336);
	--ms-text: var(--text, #e7e9ea);
	--ms-soft: var(--text-soft, #71767b);
	--ms-faint: var(--text-faint, #565a5f);
	--ms-bg: var(--bg, #000000);
}


/* ==========================================================================
   通用控件
   ========================================================================== */

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 18px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 999px;
	background: transparent;
	color: var(--ms-text, #0f1419);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s, opacity .2s;
}

.ms-btn:hover { background: var(--ms-bg-soft, #eff3f4); }

.ms-btn--primary {
	border-color: transparent;
	background: var(--ms-accent, #1d9bf0);
	color: #fff;
}

.ms-btn--primary:hover { background: color-mix(in srgb, var(--ms-accent, #1d9bf0) 88%, #000); }

.ms-btn--sm { padding: 6px 14px; font-size: 14px; }

.ms-btn:disabled { opacity: .55; cursor: default; }

.ms-link {
	color: var(--ms-accent, #1d9bf0);
	font-size: 14px;
	text-decoration: none;
}

.ms-link:hover { text-decoration: underline; }

.ms-empty {
	padding: 28px 0;
	color: var(--ms-soft, #536471);
	font-size: 15px;
	text-align: center;
}

.ms-avatar {
	display: grid;
	place-items: center;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ms-bg-soft, #eff3f4);
	color: #fff;
	font-weight: 700;
	line-height: 1;
	user-select: none;
}

.ms-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ms-avatar--anon { background: var(--ms-bg-soft, #eff3f4); }


/* ==========================================================================
   表单
   ========================================================================== */

/*
 * ⚠ 这条必须有，而且必须带 !important。
 *
 * HTML 的 hidden 属性只是浏览器默认样式里的 display:none，优先级 (0,1,0)；
 * 而下面 .ms-form 的 display:block 也是 (0,1,0)，作者样式又排在默认样式之后 ——
 * 结果 display:block 赢，hidden 完全失效。表现就是：一打开个人主页，
 * 「编辑资料」面板直接摊开在那里，用户根本不想改也得看着。
 */
[hidden] { display: none !important; }

.ms-form { display: block; }

.ms-field { margin-bottom: 16px; }

.ms-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--ms-soft, #536471);
	font-size: 14px;
	font-weight: 600;
}

.ms-field input[type="text"],
.ms-field input[type="email"],
.ms-field input[type="password"],
.ms-field input[type="url"],
.ms-field textarea {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 8px;
	background: transparent;
	color: var(--ms-text, #0f1419);
	font-family: inherit;
	font-size: 15px;
	line-height: 22px;
	transition: border-color .2s, box-shadow .2s;
}

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

.ms-field input:focus,
.ms-field textarea:focus {
	outline: none;
	border-color: var(--ms-accent, #1d9bf0);
	box-shadow: 0 0 0 1px var(--ms-accent, #1d9bf0);
}

.ms-hint {
	display: block;
	margin-top: 4px;
	color: var(--ms-faint, #8b98a5);
	font-size: 13px;
}

.ms-form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}

.ms-form-msg {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
}

.ms-form-msg--error {
	background: color-mix(in srgb, #f4212e 14%, transparent);
	color: #f4212e;
}

.ms-form-msg--ok {
	background: color-mix(in srgb, #00ba7c 16%, transparent);
	color: #00ba7c;
}


/* ==========================================================================
   登录 / 注册页
   ========================================================================== */

.ms-auth {
	max-width: 420px;
	margin: 0 auto;
	padding: 12px 0 32px;
}

.ms-auth-title {
	margin: 0 0 8px;
	font-size: 23px;
	font-weight: 800;
	line-height: 28px;
}

.ms-auth-desc {
	margin: 0 0 24px;
	color: var(--ms-soft, #536471);
	font-size: 15px;
	line-height: 20px;
}


/* ==========================================================================
   评论区
   ========================================================================== */

.ms-comments { border-top: 1px solid var(--ms-border, #eff3f4); }

.ms-comments-title {
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
	font-size: 20px;
	font-weight: 800;
	line-height: 24px;
}

.ms-comments-total {
	color: var(--ms-soft, #536471);
	font-size: 15px;
	font-weight: 400;
}

.ms-login-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 16px;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
}

.ms-login-prompt-text {
	margin: 0;
	color: var(--ms-soft, #536471);
	font-size: 15px;
}

.ms-login-prompt-actions { display: flex; gap: 8px; }

.ms-comment-form {
	padding: 16px;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
}

.ms-comment-form-row { display: flex; gap: 12px; align-items: flex-start; }

.ms-comment-input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 16px;
	background: transparent;
	color: var(--ms-text, #0f1419);
	font-family: inherit;
	font-size: 17px;
	line-height: 24px;
	resize: vertical;
}

.ms-comment-input:focus {
	outline: none;
	border-color: var(--ms-accent, #1d9bf0);
	box-shadow: 0 0 0 1px var(--ms-accent, #1d9bf0);
}

.ms-comment-form-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 12px;
	padding-left: 52px;
}

.ms-comment-counter {
	margin-right: auto;
	color: var(--ms-faint, #8b98a5);
	font-size: 13px;
}

.ms-comment-counter.is-warning { color: #ffd400; }
.ms-comment-counter.is-danger { color: #f4212e; }

.ms-comment-list,
.ms-comment-children {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 子回复**不再逐层缩进**。
 * 之前每深一层就多缩 52px，三层以后正文被挤得只剩一小条，
 * 而且看不出到底是"回复"还是"回复的回复"。
 * 现在所有层级左对齐，用左侧一条竖线表示"这是某条回复下面的"。
 */
.ms-comment-children {
	padding-left: 0;
	border-left: 0;
}

/*
 * 子回复不再画竖线 —— 改为在正文前标 @用户名（见 .ms-comment-mention）。
 * 竖线在多条并列回复时看不出"回的是谁"，@ 是明确的。
 */
.ms-comment-children .ms-comment {
	position: relative;
	margin-left: 28px;
	padding-left: 18px;
}

/*
 * 每条回复都有下分割线 —— 包括嵌套的。
 * 之前子回复没有 border-bottom，连排几条时会糊成一片。
 */
.ms-comment,
.ms-comment-children .ms-comment {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
	transition: background .15s;
}

.ms-comment:hover { background: var(--ms-hover, #f7f9f9); }

.ms-comment--child { padding-left: 0; }

.ms-comment-main { flex: 1; min-width: 0; }

.ms-comment-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 15px;
	line-height: 20px;
}

.ms-comment-name { font-weight: 700; color: var(--ms-text, #0f1419); }

.ms-comment-name:hover { text-decoration: underline; }

.ms-comment-handle,
.ms-comment-time,
.ms-comment-dot { color: var(--ms-soft, #536471); font-weight: 400; }

.ms-comment-delete {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-left: auto;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ms-faint, #8b98a5);
	cursor: pointer;
	transition: background .2s, color .2s;
}

.ms-comment-delete:hover {
	background: color-mix(in srgb, #f4212e 14%, transparent);
	color: #f4212e;
}

.ms-comment-delete .icon { width: 16px; height: 16px; }

.ms-comment-body {
	margin-top: 4px;
	color: var(--ms-text, #0f1419);
	font-size: 15px;
	line-height: 22px;
	overflow-wrap: anywhere;
}

.ms-comment-reply {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 5px 10px 5px 6px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--ms-soft, #536471);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.ms-comment-reply:hover {
	background: color-mix(in srgb, var(--ms-accent, #1d9bf0) 12%, transparent);
	color: var(--ms-accent, #1d9bf0);
}

.ms-comment-reply .icon { width: 16px; height: 16px; }

/* 行内回复框 */
.ms-reply-box {
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--ms-border, #eff3f4);
	border-radius: var(--ms-radius, 16px);
	background: var(--ms-bg-soft, #eff3f4);
}

.ms-reply-box-replying {
	margin: 0 0 8px;
	color: var(--ms-soft, #536471);
	font-size: 13px;
}


/* ==========================================================================
   个人主页
   ========================================================================== */

.ms-profile { padding: 20px 16px 8px; }

.ms-profile-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ms-profile-id { flex: 1; min-width: 0; }

.ms-profile-name {
	margin: 0;
	font-size: 23px;
	font-weight: 800;
	line-height: 28px;
	overflow-wrap: anywhere;
}

.ms-profile-handle { color: var(--ms-soft, #536471); font-size: 15px; }

.ms-profile-bio {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 22px;
	overflow-wrap: anywhere;
}

.ms-profile-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 16px;
	color: var(--ms-soft, #536471);
	font-size: 14px;
}

.ms-profile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ms-profile-meta b { color: var(--ms-text, #0f1419); }
.ms-profile-meta .icon { width: 16px; height: 16px; }
.ms-profile-meta a { color: var(--ms-accent, #1d9bf0); text-decoration: none; }
.ms-profile-meta a:hover { text-decoration: underline; }

.ms-form--panel {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--ms-border, #eff3f4);
	border-radius: var(--ms-radius, 16px);
	background: var(--ms-bg-soft, #eff3f4);
}

.ms-profile-section { margin-top: 28px; }

.ms-section-title {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
	font-size: 17px;
	font-weight: 800;
}

.ms-profile-comments,
.ms-liked-list { margin: 0; padding: 0; list-style: none; }

.ms-profile-comment {
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
}

.ms-profile-comment-link {
	color: var(--ms-accent, #1d9bf0);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ms-profile-comment-link:hover { text-decoration: underline; }

.ms-profile-comment-body {
	margin-top: 4px;
	font-size: 15px;
	line-height: 21px;
	overflow-wrap: anywhere;
}

.ms-profile-comment-time { color: var(--ms-faint, #8b98a5); font-size: 13px; }

.ms-liked-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
}

.ms-liked-list a {
	color: var(--ms-text, #0f1419);
	font-size: 15px;
	text-decoration: none;
}

.ms-liked-list a:hover { color: var(--ms-accent, #1d9bf0); text-decoration: underline; }

.ms-liked-list time { color: var(--ms-faint, #8b98a5); font-size: 13px; white-space: nowrap; }


/* ==========================================================================
   成员列表
   ========================================================================== */

.ms-members { padding: 20px 16px 8px; }

.ms-member-list { margin: 12px 0 0; padding: 0; list-style: none; }

.ms-member {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
}

.ms-member-main { flex: 1; min-width: 0; }

.ms-member-name {
	color: var(--ms-text, #0f1419);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.ms-member-name:hover { text-decoration: underline; }

.ms-member-handle { color: var(--ms-soft, #536471); font-size: 15px; }

.ms-member-bio {
	margin: 4px 0 0;
	color: var(--ms-soft, #536471);
	font-size: 14px;
	line-height: 20px;
	overflow-wrap: anywhere;
}


/* ==========================================================================
   侧栏账号卡片 / 成员卡片
   ========================================================================== */

.ms-account { margin-bottom: 16px; }

.ms-account-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	transition: background .2s;
}

.ms-account-user:hover { background: var(--ms-bg-soft, #eff3f4); }

.ms-account-text { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }

.ms-account-name {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-account-handle {
	color: var(--ms-soft, #536471);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-account-btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-left: auto;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ms-soft, #536471);
	cursor: pointer;
	transition: background .2s, color .2s;
}

.ms-account-btn:hover {
	background: color-mix(in srgb, #f4212e 14%, transparent);
	color: #f4212e;
}

.ms-account-btn .icon { width: 18px; height: 18px; }

.ms-account-guest {
	padding: 16px;
	border: 1px solid var(--ms-border, #eff3f4);
	border-radius: var(--ms-radius, 16px);
}

.ms-account-guest-text {
	margin: 0 0 12px;
	color: var(--ms-soft, #536471);
	font-size: 14px;
	line-height: 20px;
}

.ms-account-guest-actions { display: flex; gap: 8px; }

.ms-card-list { padding: 4px 0 8px; }

.ms-card-member {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	color: inherit;
	text-decoration: none;
	transition: background .15s;
}

.ms-card-member:hover { background: color-mix(in srgb, var(--ms-text, #0f1419) 6%, transparent); }

.ms-card-member-text { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }

.ms-card-member-name {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-card-member-handle {
	color: var(--ms-soft, #536471);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ==========================================================================
   左侧栏底部的账号区
   ========================================================================== */

.ms-rail { width: 100%; }

/* 登录者本人 */
.ms-rail-user {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 8px 8px 10px;
	border-radius: 999px;
	transition: background .2s;
}

.ms-rail-user:hover { background: var(--ms-bg-soft); }

.ms-rail-user-link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.ms-rail-user-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 18px;
}

.ms-rail-user-name {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-rail-user-handle {
	font-size: 14px;
	color: var(--ms-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-rail-logout {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ms-soft);
	cursor: pointer;
	transition: background .2s, color .2s;
}

.ms-rail-logout:hover {
	background: color-mix(in srgb, #f4212e 14%, transparent);
	color: #f4212e;
}

.ms-rail-logout .icon { width: 18px; height: 18px; }

/* 未登录 */
.ms-rail-guest { padding: 8px 10px 10px; }

.ms-rail-guest-text {
	margin: 0 0 10px;
	color: var(--ms-soft);
	font-size: 14px;
	line-height: 20px;
}

.ms-rail-guest-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 站点信息（mode=site 或 both 时） */
.ms-rail-site {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
}

.ms-rail-site-mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ms-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.ms-rail-site-logo {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.ms-rail-site-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 18px;
}

.ms-rail-site-name {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-rail-site-handle {
	font-size: 14px;
	color: var(--ms-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* both 模式下两块之间留点缝 */
.ms-rail > * + * { margin-top: 6px; }


/* ==========================================================================
   投稿
   ========================================================================== */

.ms-submit { padding-bottom: 8px; }

.ms-submit-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ms-submit .ms-field textarea { min-height: 240px; font-family: var(--font-mono, monospace); }

.ms-submission-list { margin: 12px 0 0; padding: 0; list-style: none; }

.ms-submission {
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-submission-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ms-submission-title { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

.ms-submission-time { color: var(--ms-faint); font-size: 13px; }

.ms-submission-note {
	margin: 6px 0 0;
	padding: 8px 12px;
	border-left: 3px solid #f4212e;
	border-radius: 0 6px 6px 0;
	background: color-mix(in srgb, #f4212e 8%, transparent);
	color: var(--ms-soft);
	font-size: 14px;
	line-height: 20px;
}

.ms-submission-link {
	display: inline-block;
	margin-top: 6px;
	color: var(--ms-accent);
	font-size: 14px;
	text-decoration: none;
}

.ms-submission-link:hover { text-decoration: underline; }

.ms-status {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
}

.ms-status.is-pending {
	background: color-mix(in srgb, #ffd400 22%, transparent);
	color: #8a6d00;
}

.ms-status.is-published {
	background: color-mix(in srgb, #00ba7c 18%, transparent);
	color: #00795a;
}

.ms-status.is-rejected {
	background: color-mix(in srgb, #f4212e 14%, transparent);
	color: #d01824;
}

html[data-theme="dark"] .ms-status.is-pending { color: #ffd400; }
html[data-theme="dark"] .ms-status.is-published { color: #00ba7c; }
html[data-theme="dark"] .ms-status.is-rejected { color: #f4212e; }

@media (max-width: 560px) {
	.ms-submit-row { grid-template-columns: 1fr; }
}

/* 投稿页的分类下拉 */
.ms-submit select {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 8px;
	background: transparent;
	color: var(--ms-text, #0f1419);
	font-family: inherit;
	font-size: 15px;
}


/* 后台的下拉框宽度。
   原生 select 会按最长选项撑开，这里只保证：
     - 有个最小宽度，别太窄
     - 不超出容器，长文本交给浏览器自己截断（同时 title 里能看到全文）
   之前写死 max-width:280px，把 23 个汉字的选项截得看不清。 */
.ms-select {
	width: auto;
	min-width: 220px;
	max-width: 100%;
}

/* ================= Markdown 编辑器 ================= */

.ms-md {
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ms-bg, #fff);
}

.ms-md-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--ms-border, #cfd9de);
	background: var(--ms-bg-soft, #f7f9f9);
}

.ms-md-btn {
	min-width: 32px;
	height: 30px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--ms-soft, #536471);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.ms-md-btn:hover {
	background: var(--ms-hover, #eff3f4);
	color: var(--ms-text, #0f1419);
}

.ms-md-btn--preview {
	margin-left: 0;
	font-weight: 600;
	font-size: 13px;
	padding: 0 12px;
	color: var(--ms-accent, #1d9bf0);
}

.ms-md-btn--preview.is-on {
	background: var(--ms-accent, #1d9bf0);
	color: #fff;
}

.ms-md-spacer { flex: 1; }

/* 富文本编辑区（默认模式）：所见即所得 */
.ms-md-rich {
	display: block;
	width: 100%;
	min-height: 180px;
	max-height: 60vh;
	overflow-y: auto;
	padding: 12px 14px;
	outline: 0;
	background: transparent;
	color: var(--ms-text, #0f1419);
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.ms-md-rich:empty::before {
	content: attr(data-placeholder);
	color: var(--ms-soft, #536471);
	opacity: .75;
	pointer-events: none;
}

.ms-md-rich > :first-child { margin-top: 0; }
.ms-md-rich > :last-child { margin-bottom: 0; }
.ms-md-rich p { margin: 0 0 12px; }
.ms-md-rich h1, .ms-md-rich h2, .ms-md-rich h3 { line-height: 1.3; margin: 16px 0 8px; }
.ms-md-rich ul, .ms-md-rich ol { margin: 0 0 12px; padding-left: 24px; }
.ms-md-rich blockquote {
	margin: 0 0 12px;
	padding: 4px 0 4px 12px;
	border-left: 3px solid var(--ms-border, #cfd9de);
	color: var(--ms-soft, #536471);
}
.ms-md-rich code {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--ms-bg-soft, #eff3f4);
	font-size: .9em;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ms-md-rich img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px 0;
	border-radius: 10px;
}
.ms-md-rich a { color: var(--ms-accent, #1d9bf0); }

/* 富文本 / MD 切换按钮 */
.ms-md-btn--mode {
	font-size: 12px;
	font-weight: 600;
	padding: 0 10px;
}

.ms-md-btn--mode.is-on {
	background: var(--ms-accent, #1d9bf0);
	color: #fff;
}

.ms-md-btn--mode.is-on:hover {
	background: var(--ms-accent, #1d9bf0);
	color: #fff;
}

.ms-md-input {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	outline: 0;
	resize: vertical;
	background: transparent;
	color: var(--ms-text, #0f1419);
	font-size: 15px;
	line-height: 1.65;
	font-family: inherit;
	min-height: 180px;
	tab-size: 2;
}

.ms-md-input::placeholder { color: var(--ms-soft, #536471); opacity: .8; }

.ms-md-preview {
	padding: 12px 14px;
	min-height: 180px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ms-text, #0f1419);
	overflow-wrap: anywhere;
}

.ms-md-preview > :first-child { margin-top: 0; }
.ms-md-preview > :last-child { margin-bottom: 0; }
.ms-md-preview h1, .ms-md-preview h2, .ms-md-preview h3 { line-height: 1.3; margin: 16px 0 8px; }
.ms-md-preview p { margin: 0 0 12px; }
.ms-md-preview ul, .ms-md-preview ol { margin: 0 0 12px; padding-left: 24px; }
.ms-md-preview blockquote {
	margin: 0 0 12px;
	padding: 4px 0 4px 12px;
	border-left: 3px solid var(--ms-border, #cfd9de);
	color: var(--ms-soft, #536471);
}
.ms-md-preview code {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--ms-bg-soft, #eff3f4);
	font-size: .9em;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ms-md-preview pre {
	margin: 0 0 12px;
	padding: 12px;
	border-radius: 8px;
	background: var(--ms-bg-soft, #eff3f4);
	overflow-x: auto;
}
.ms-md-preview pre code { padding: 0; background: none; }
.ms-md-preview a { color: var(--ms-accent, #1d9bf0); }
.ms-md-preview table { border-collapse: collapse; margin: 0 0 12px; }
.ms-md-preview th, .ms-md-preview td { padding: 6px 10px; border: 1px solid var(--ms-border, #cfd9de); }

.ms-md-foot {
	display: flex;
	justify-content: flex-end;
	padding: 4px 12px 8px;
	color: var(--ms-soft, #536471);
	font-size: 12px;
}

/* 回复框里的插图按钮 */
.ms-comment-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.ms-comment-image-btn {
	width: 32px;
	height: 32px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 8px;
	background: transparent;
	color: var(--ms-soft, #536471);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ms-comment-image-btn:hover { background: var(--ms-hover, #eff3f4); color: var(--ms-accent, #1d9bf0); }
.ms-comment-image-btn:disabled { opacity: .5; cursor: default; }

.ms-comment-tools-hint { font-size: 12px; color: var(--ms-soft, #536471); }

/* 个人主页：TA 的文章列表 */
.ms-count-badge {
	display: inline-block;
	min-width: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--ms-bg-soft, #eff3f4);
	color: var(--ms-soft, #536471);
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
}

.ms-post-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-post-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-border, #eff3f4);
}

.ms-post-item:last-child { border-bottom: 0; }

.ms-post-title {
	display: block;
	color: var(--ms-text, #0f1419);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ms-post-title:hover { text-decoration: underline; }

.ms-post-desc {
	margin: 4px 0 0;
	color: var(--ms-soft, #536471);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.ms-post-date {
	display: block;
	margin-top: 4px;
	color: var(--ms-faint, #8b98a5);
	font-size: 12px;
}

/* 评论配图的缩略图预览 */
.ms-comment-media {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.ms-comment-media-item {
	position: relative;
	display: inline-block;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--ms-border, #eff3f4);
	line-height: 0;
}

.ms-comment-media-item img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.ms-comment-media-del {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* 回复里插入的图片 */
.ms-comment-img {
	display: block;
	max-width: 100%;
	max-height: 320px;
	width: auto;
	height: auto;
	margin: 6px 0 2px;
	border: 1px solid var(--ms-border, #eff3f4);
	border-radius: 10px;
	object-fit: contain;
}

/* ================= 移动端兼容 ================= */

/*
 * 视觉隐藏，但**不是 display:none**。
 * 手机浏览器（iOS Safari、部分安卓）不会为 display:none 的
 * <input type=file> 打开选择器，导致"点了没反应"。
 */
.ms-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 头像那个框本来就要看得见，保持原样 */
.ms-file-input-visible { }

/*
 * 去掉移动端 300ms 双击缩放延迟 —— 表现就是"按钮要点两次"。
 * touch-action: manipulation 让浏览器不再等待第二次点击。
 */
.ms-btn,
.ms-comment-like,
.ms-comment-reply,
.ms-comment-delete,
.ms-comment-image-btn,
.ms-md-btn,
.ms-modal-ok,
.ms-modal-cancel,
.ms-follow-btn,
.ms-rail-logout,
[data-ms-menu-toggle],
[data-comment-image],
[data-md-image],
[data-theme-toggle] {
	touch-action: manipulation;
}

/* ================= 网页内弹窗 ================= */

.ms-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 20px;
}

.ms-modal-mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(2px);
}

.ms-modal-card {
	position: relative;
	width: min(360px, 100%);
	padding: 20px;
	border-radius: 16px;
	background: var(--ms-bg, #fff);
	color: var(--ms-text, #0f1419);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	animation: msModalIn .16s ease;
}

.ms-modal.is-closing .ms-modal-card { animation: msModalOut .12s ease forwards; }

@keyframes msModalIn {
	from { opacity: 0; transform: scale(.96) translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@keyframes msModalOut {
	to { opacity: 0; transform: scale(.97); }
}

.ms-modal-text {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ms-modal-input {
	display: block;
	width: 100%;
	margin-bottom: 16px;
	padding: 10px 12px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 10px;
	background: var(--ms-bg-soft, #f7f9f9);
	color: var(--ms-text, #0f1419);
	font-family: inherit;
	font-size: 14px;
}

.ms-modal-input:focus {
	outline: 2px solid var(--ms-accent, #1d9bf0);
	outline-offset: 1px;
}

.ms-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.ms-modal-actions .ms-btn { min-width: 76px; }

@media (prefers-reduced-motion: reduce) {
	.ms-modal-card { animation: none; }
}

/* 子回复正文前的「@谁」 */
.ms-comment-mention {
	color: var(--ms-accent, #1d9bf0);
	font-weight: 600;
	text-decoration: none;
}

.ms-comment-mention:hover { text-decoration: underline; }

/* 回复底部那一排操作（点赞 / 回复 / 删除） */
.ms-comment-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.ms-comment-like {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ms-soft, #536471);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ms-comment-like:hover { background: var(--ms-hover, #eff3f4); color: #f91880; }

.ms-comment-like .icon { width: 15px; height: 15px; }

.ms-comment-like.is-liked { color: #f91880; }

.ms-comment-like.is-liked .icon { fill: currentColor; }

.ms-comment-like:disabled { opacity: .6; cursor: default; }

/* 头像编辑（前后台共用）：左边预览，右边上传/URL */
.ms-avatar-edit {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.ms-avatar-edit .ms-avatar { flex: none; }

.ms-avatar-edit-fields {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ms-avatar-edit-fields input[type="text"],
.ms-avatar-edit-fields input[type="file"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 8px;
	background: var(--ms-bg, #fff);
	color: var(--ms-text, #0f1419);
	font-size: 14px;
}

.ms-avatar-clear {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--ms-soft, #536471);
	cursor: pointer;
}

.ms-avatar-preview {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	display: grid;
	place-items: center;
	background: #e7e9ea;
	color: #536471;
	font-weight: 700;
	font-size: 18px;
}

/* 成员资料编辑面板（后台，<details> 折叠） */
.ms-member-edit > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--ms-accent, #1d9bf0);
	user-select: none;
}

.ms-member-edit > summary:hover { text-decoration: underline; }

.ms-member-edit-body {
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 10px;
	background: var(--ms-bg-soft, #f7f9f9);
	max-width: 420px;
}

.ms-member-edit-body label {
	display: block;
	margin: 8px 0 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ms-soft, #536471);
}

.ms-member-edit-body label:first-child { margin-top: 0; }

/* UID 徽标 —— 个人主页、成员列表、关注列表都用得上 */
.ms-profile-uid,
.ms-member-uid {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--ms-bg-soft);
	color: var(--ms-soft);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	vertical-align: middle;
	white-space: nowrap;
}

/* 关注按钮 */
.ms-btn--follow {
	border: 1px solid var(--ms-accent);
	background: transparent;
	color: var(--ms-accent);
	font-weight: 700;
	border-radius: 999px;
	padding: 7px 18px;
	white-space: nowrap;
	transition: background .18s, color .18s, border-color .18s;
}

.ms-btn--follow:hover {
	background: color-mix(in srgb, var(--ms-accent) 12%, transparent);
}

/* 已关注：低调一点，悬停才提示"会取关" */
.ms-btn--follow.is-following {
	border-color: var(--ms-border);
	background: transparent;
	color: var(--ms-text);
}

.ms-btn--follow.is-following:hover {
	border-color: #f4212e;
	background: rgba(244, 33, 46, .08);
	color: #f4212e;
}

.ms-btn--follow.is-following:hover::after {
	content: "";
}

.ms-btn--follow.is-busy { opacity: .6; pointer-events: none; }

/* 关注/粉丝列表比成员总表紧凑些 */
.ms-member-list--compact .ms-member { padding: 10px 0; }
.ms-member-list--compact .ms-member-main { margin-right: auto; }

/* 登录方式切换 */
.ms-auth-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	padding: 4px;
	border-radius: 999px;
	background: var(--ms-bg-soft);
}

.ms-auth-tab {
	flex: 1;
	padding: 9px 16px;
	border-radius: 999px;
	color: var(--ms-soft);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.ms-auth-tab:hover { color: var(--ms-text); }

.ms-auth-tab.is-active {
	background: var(--ms-bg, #fff);
	color: var(--ms-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ==========================================================================
   验证码 / 蜜罐
   ========================================================================== */

/* 蜜罐：真人看不见，机器人会填。
   用"移出屏幕"而不是 display:none —— 一部分爬虫会跳过 display:none 的字段。 */
.ms-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.ms-captcha-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ms-captcha-row input[name="captcha"] {
	width: 130px;
	flex: none;
	letter-spacing: .32em;
	text-transform: uppercase;
	font-size: 17px;
	font-weight: 700;
}

.ms-captcha-img {
	display: block;
	border: 1px solid var(--ms-border, #cfd9de);
	border-radius: 8px;
	background: #f7f9f9;
	flex: none;
}

html[data-theme="dark"] .ms-captcha-img { filter: invert(.92) hue-rotate(180deg); }

.ms-captcha-row .ms-btn { flex: none; }

/* 后台成员管理表格里的邮箱列容易撑破布局 */
.ms-members-table td { vertical-align: middle; }


/* ==========================================================================
   点赞按钮的即时反馈
   ========================================================================== */

.action--like.is-busy { opacity: .5; pointer-events: none; }

.action--like.ms-pop .icon { animation: ms-pop .38s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes ms-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* 匿名访客点赞后的提示条 */
.ms-toast {
	position: fixed;
	left: 50%;
	bottom: 84px;
	z-index: 200;
	padding: 12px 20px;
	border-radius: 8px;
	background: var(--ms-accent, #1d9bf0);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: opacity .25s, transform .25s, visibility .25s;
}

.ms-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.ms-toast--error { background: #f4212e; }


/* ==========================================================================
   窄屏
   ========================================================================== */

@media (max-width: 720px) {
	.ms-comments-title,
	.ms-comment-form,
	.ms-comment,
	.ms-login-prompt { padding-left: 14px; padding-right: 14px; }

	.ms-comment-children .ms-comment { margin-left: 16px; padding-left: 12px; }
	.ms-comment-form-foot { padding-left: 0; }
	.ms-auth { padding-left: 14px; padding-right: 14px; }
	.ms-profile, .ms-members { padding-left: 14px; padding-right: 14px; }
	.ms-profile-head { flex-wrap: wrap; }
	.ms-profile-head .ms-btn { width: 100%; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.action--like.ms-pop .icon { animation: none; }
}