/**
 * 社区模块 · 专属样式（Neobrutalism 机能风，对齐帮助中心视觉）
 *
 * 设计语言：
 *   - 主色：#0f172a (slate-900) 黑色硬边框 + 硬阴影
 *   - 强调色：#facc15 (yellow-400) CTA / 高亮
 *   - 警示色：#ef4444 (red-500) 热门 / 当前页指示
 *   - 圆角：rounded-md (0.375rem)，不要 rounded-2xl/3xl
 *   - 字体：font-black italic（黑体斜体）
 *   - 阴影：box-shadow: Npx Npx 0 #0f172a（硬偏移阴影）
 *   - 装饰：// CAT-01 终端注释代号 / [ 查看更多 ] 方括号 / 黄黑警示带
 *
 * 作用域：所有 class 加 yk-cmt 前缀，并尽量限定在 .yk-cmt-page 下，避免污染主站。
 *
 * @package Youcang
 */

/* ==============================================================
 * 1. 容器：覆盖主站背景装饰，给社区一块独立的米色 + 网格底
 * ============================================================== */
.yk-cmt-page {
	position: relative;
	z-index: 10;
	background: #f1f5f9; /* slate-100 */
	min-height: 60vh;
	padding: 5rem 0 2.5rem;
	color: #0f172a;
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
	             "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 1024px) {
	.yk-cmt-page { padding-top: 6rem; }
}
.yk-cmt-page * { box-sizing: border-box; }

/* 盖住主站 dot-pattern 等装饰 */
.yk-cmt-page::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(#f1f5f9, #f1f5f9),
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 39px,
			rgba(15, 23, 42, 0.04) 39px,
			rgba(15, 23, 42, 0.04) 40px
		);
	background-blend-mode: multiply;
	z-index: -1;
	pointer-events: none;
}

.yk-cmt-page a { color: inherit; }
.yk-cmt-page a.no-underline,
.yk-cmt-page a.no-underline:hover { text-decoration: none !important; }

/* 主站某些 dot-pattern body 装饰在社区页面隐藏 */
body.post-type-archive-community_post .bg-dot-pattern,
body.tax-community_category .bg-dot-pattern,
body.tax-community_tag .bg-dot-pattern,
body.single-community_post .bg-dot-pattern,
body.page-template-page-community-editor .bg-dot-pattern { background-image: none !important; }

/* ==============================================================
 * 2. 基础卡片 + 按压效果
 * ============================================================== */
.yk-cmt-card {
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 4px 4px 0 #0f172a;
}
.yk-cmt-card-sm {
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 0 #0f172a;
}

/* 按压：小幅 */
.yk-cmt-press {
	transition: transform .15s, box-shadow .15s, background-color .15s;
}
.yk-cmt-press:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
}

/* 按压：大幅 + 红色彩阴 */
.yk-cmt-press-lg {
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 4px 4px 0 #0f172a;
	transition: transform .15s, box-shadow .15s;
}
.yk-cmt-press-lg:hover {
	transform: translate(-4px, -4px);
	box-shadow: 6px 6px 0 #ef4444;
}

/* ==============================================================
 * 3. 按钮
 * ============================================================== */
.yk-cmt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	font-weight: 700;
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.25;
	border-radius: 0.5rem;
	border: 2px solid #0f172a;
	box-shadow: 2px 2px 0 #0f172a;
	transition: transform .15s, box-shadow .15s, background-color .15s;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	text-shadow: none;
}
.yk-cmt-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-cmt-btn:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}
.yk-cmt-btn-primary { background: #facc15; color: #0f172a; }
.yk-cmt-btn-primary:hover { background: #eab308; }
.yk-cmt-btn-secondary { background: #fff; color: #0f172a; }
.yk-cmt-btn-secondary:hover { background: #fefce8; }
.yk-cmt-btn-dark { background: #0f172a; color: #facc15; }
.yk-cmt-btn-dark:hover { background: #1e293b; color: #fde047; }
.yk-cmt-btn-danger { background: #ef4444; color: #fff; }
.yk-cmt-btn-danger:hover { background: #dc2626; }

/* ----- 点赞按钮（独立设计：未点赞=白底，已点赞=红底，心形 icon 已点赞时填充） ----- */
.yk-like-btn {
	background: #fff;
	color: #0f172a;
}
.yk-like-btn:hover {
	background: #fef2f2;
	color: #ef4444;
}
.yk-like-btn.is-liked {
	background: #ef4444;
	color: #fff;
}
.yk-like-btn.is-liked:hover {
	background: #dc2626;
	color: #fff;
}
/* 已点赞时心形填充（lucide 渲染前是 [data-lucide]，渲染后是 .lucide-heart） */
.yk-like-btn.is-liked [data-lucide="heart"],
.yk-like-btn.is-liked .lucide-heart {
	fill: currentColor;
}
.yk-like-count {
	margin-left: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ----- 关注按钮状态兜底（与现有 yk-cmt-btn-primary/dark 配合） ----- */
.yk-cmt-btn.is-following,
.yk-follow.is-following {
	background: #0f172a;
	color: #facc15;
}
.yk-cmt-btn.is-following:hover,
.yk-follow.is-following:hover {
	background: #1e293b;
	color: #fde047;
}

/* 大尺寸按钮（hero / 详情页 CTA） */
.yk-cmt-btn-lg {
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
}

/* ==============================================================
 * 4. 徽章（HOT / 置顶 / 精华 / 官方 / 新手 / 排名）
 * ============================================================== */
.yk-cmt-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 900;
	font-style: italic;
	border: 2px solid #0f172a;
	border-radius: 0.25rem;
	box-shadow: 2px 2px 0 #0f172a;
	line-height: 1.1;
	white-space: nowrap;
}
.yk-cmt-badge-hot      { background: #ef4444; color: #fff; }
.yk-cmt-badge-pinned   { background: #ef4444; color: #fff; }
.yk-cmt-badge-featured { background: #facc15; color: #0f172a; }
.yk-cmt-badge-official { background: #3b82f6; color: #fff; }
.yk-cmt-badge-newbie   { background: #22c55e; color: #fff; }

/* 排名徽标（前 3 名特殊配色） */
.yk-cmt-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 22px;
	font-size: 10px;
	font-weight: 900;
	font-style: italic;
	border-radius: 0.25rem;
	line-height: 1;
	flex-shrink: 0;
}
.yk-cmt-rank-1 { background: #ef4444; color: #fff;     border: 2px solid #0f172a; }
.yk-cmt-rank-2 { background: #f97316; color: #fff;     border: 2px solid #0f172a; }
.yk-cmt-rank-3 { background: #facc15; color: #0f172a;  border: 2px solid #0f172a; }
.yk-cmt-rank-n { background: #f1f5f9; color: #64748b;  border: 1px solid #cbd5e1; }

/* ==============================================================
 * 5. Tab 按钮（机能风胶囊）
 * ============================================================== */
.yk-cmt-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 900;
	font-style: italic;
	white-space: nowrap;
	border: 2px solid #0f172a !important;
	border-radius: 0.5rem !important;
	box-shadow: 2px 2px 0 #0f172a !important;
	background: #ffffff !important;
	color: #475569 !important;
	transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
	cursor: pointer;
}
.yk-cmt-tab:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a !important;
	background: #f8fafc !important;
}
.yk-cmt-tab.is-active,
.yk-cmt-tab.is-active:hover,
button.yk-cmt-tab.is-active,
.yk-cmt-tab[data-active="true"],
.yk-cmt-tab[data-active="true"]:hover,
a.yk-cmt-tab[data-active="true"],
button.yk-cmt-tab[data-active="true"] {
	background: #facc15 !important;
	background-color: #facc15 !important;
	color: #0f172a !important;
}

/* ==============================================================
 * 6. 面包屑（黑底 + 黄字 + 红色硬阴影）
 * ============================================================== */
.yk-cmt-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 12px;
	background: #0f172a;
	color: #fff;
	border: 2px solid #0f172a;
	box-shadow: 4px 4px 0 #ef4444;
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.02em;
	border-radius: 0.5rem;
}
.yk-cmt-breadcrumb a {
	color: #fff;
	transition: color .15s;
	text-decoration: none;
	white-space: nowrap;
}
.yk-cmt-breadcrumb a:hover { color: #facc15; }
.yk-cmt-breadcrumb .yk-cmt-bc-icon { color: #facc15; width: 16px; height: 16px; flex-shrink: 0; }
.yk-cmt-breadcrumb .yk-cmt-bc-sep  { color: #ef4444; flex-shrink: 0; }
.yk-cmt-breadcrumb .yk-cmt-bc-current {
	color: #facc15;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 40ch;
}

/* ==============================================================
 * 7. 黄黑警示带（施工 / 警戒线风）
 * ============================================================== */
.yk-cmt-stripe {
	height: 12px;
	background: repeating-linear-gradient(
		45deg,
		#facc15 0,
		#facc15 14px,
		#0f172a 14px,
		#0f172a 28px
	);
	border-top: 2px solid #0f172a;
	border-bottom: 2px solid #0f172a;
}

/* ==============================================================
 * 8. 标题装饰：终端代号小字（// CAT-01 / // HOT.LIST）
 * ============================================================== */
.yk-cmt-mono {
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-style: italic;
	font-weight: 900;
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* ==============================================================
 * 9. 标签胶囊（话题 / 热门搜索词）
 * ============================================================== */
.yk-cmt-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	border: 2px solid #0f172a;
	border-radius: 0.375rem;
	box-shadow: 2px 2px 0 #0f172a;
	background: #fff;
	color: #0f172a;
	transition: transform .15s, box-shadow .15s, background-color .15s;
	text-decoration: none;
}
.yk-cmt-tag:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
	background: #facc15;
}

/* ==============================================================
 * 10. 文字阴影（带背景图卡片上的白字保证可读）
 * ============================================================== */
.yk-cmt-text-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.yk-cmt-hero-title-shadow { text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5); }

/* ==============================================================
 * 11. 背景图通用样式
 * ============================================================== */
.yk-cmt-bg-cover {
	background-size: cover;
	background-position: center;
}

/* ==============================================================
 * 12. Hero 蒙板（亮色：左白渐右透 / 暗色：左黑渐右透）
 * ============================================================== */
.yk-cmt-mask-light {
	background: linear-gradient(
		90deg,
		rgba(241, 245, 249, 0.97) 0%,
		rgba(241, 245, 249, 0.85) 35%,
		rgba(241, 245, 249, 0.25) 65%,
		rgba(241, 245, 249, 0) 100%
	);
}
.yk-cmt-mask-dark {
	background: linear-gradient(
		90deg,
		rgba(15, 23, 42, 0.85) 0%,
		rgba(15, 23, 42, 0.6) 40%,
		rgba(15, 23, 42, 0.15) 75%,
		rgba(15, 23, 42, 0) 100%
	);
}

/* ==============================================================
 * 13. Hero 斜切（保留旧 class，向后兼容）
 * ============================================================== */
.yk-cmt-hero-clip {
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

/* ==============================================================
 * 14. 版块筛选下拉显隐（JS 切换 .is-open）
 * ============================================================== */
.yk-cmt-cat-menu { display: none; }
#yk-cmt-cat-dropdown.is-open .yk-cmt-cat-menu { display: block; }

/* ==============================================================
 * 15. sticky 侧栏滚动条美化
 * ============================================================== */
.yk-cmt-sticky {
	scrollbar-width: thin;
	scrollbar-color: rgba(15, 23, 42, 0) transparent;
	transition: scrollbar-color 0.2s ease;
}
.yk-cmt-sticky:hover { scrollbar-color: rgba(15, 23, 42, 0.4) transparent; }
.yk-cmt-sticky::-webkit-scrollbar { width: 6px; }
.yk-cmt-sticky::-webkit-scrollbar-track { background: transparent; }
.yk-cmt-sticky::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
	transition: background 0.2s ease;
}
.yk-cmt-sticky:hover::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.4); }
.yk-cmt-sticky:hover::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.7); }

/* ==============================================================
 * 16. 加载器
 * ============================================================== */
.yk-cmt-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #e2e8f0;
	border-top-color: #0f172a;
	border-radius: 50%;
	animation: yk-cmt-spin 0.8s linear infinite;
	vertical-align: -3px;
	margin-right: 6px;
}
@keyframes yk-cmt-spin { to { transform: rotate(360deg); } }

/* ==============================================================
 * 17. line-clamp 兜底
 * ============================================================== */
.yk-cmt-page .line-clamp-1,
.yk-cmt-page .line-clamp-2,
.yk-cmt-page .line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.yk-cmt-page .line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.yk-cmt-page .line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.yk-cmt-page .line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ==============================================================
 * 18. 帖子流分隔（虚线）
 * ============================================================== */
.yk-cmt-divider-dashed {
	border-bottom: 2px dashed #cbd5e1;
}
.yk-cmt-divider-dashed:last-child { border-bottom: 0; }

/* ==============================================================
 * 19. 详情页 entry-content 排版
 * ============================================================== */
.yk-cmt-page .entry-content {
	font-size: 15px;
	line-height: 1.85;
	color: #1e293b;
}
.yk-cmt-page .entry-content p { margin: 0 0 16px; }
.yk-cmt-page .entry-content h2 {
	font-size: 22px;
	font-weight: 900;
	font-style: italic;
	margin: 28px 0 14px;
	color: #0f172a;
	border-left: 4px solid #facc15;
	padding-left: 10px;
}
.yk-cmt-page .entry-content h3 {
	font-size: 18px;
	font-weight: 900;
	font-style: italic;
	margin: 22px 0 10px;
	color: #0f172a;
}
.yk-cmt-page .entry-content img {
	max-width: 100%;
	height: auto;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 4px 4px 0 #0f172a;
	margin: 16px 0;
}
.yk-cmt-page .entry-content a {
	color: #ef4444;
	text-decoration: underline;
	font-weight: 700;
}
.yk-cmt-page .entry-content a:hover { color: #dc2626; }
.yk-cmt-page .entry-content blockquote {
	border-left: 4px solid #facc15;
	padding: 12px 18px;
	background: #fefce8;
	color: #475569;
	margin: 18px 0;
	border-radius: 0 0.5rem 0.5rem 0;
}
.yk-cmt-page .entry-content code {
	background: #0f172a;
	color: #facc15;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 13px;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.yk-cmt-page .entry-content pre {
	background: #0f172a;
	color: #f8fafc;
	padding: 16px;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 4px 4px 0 #facc15;
	overflow-x: auto;
	margin: 18px 0;
}
.yk-cmt-page .entry-content pre code {
	background: none;
	color: inherit;
	padding: 0;
}

/* ==============================================================
 * 20. 评论区（机能风覆盖默认）
 * ============================================================== */
.yk-cmt-page #comments,
.yk-cmt-page .comments-area {
	background: #fff;
	border: 2px solid #0f172a !important;
	border-radius: 0.5rem;
	box-shadow: 4px 4px 0 #0f172a;
	padding: 24px;
	margin-top: 24px;
}
.yk-cmt-page #comments .comment,
.yk-cmt-page .comments-area .comment {
	padding: 12px 0;
	border-bottom: 2px dashed #cbd5e1;
	box-shadow: none !important;
}
.yk-cmt-page #comments textarea,
.yk-cmt-page .comments-area textarea {
	width: 100%;
	border: 2px solid #0f172a !important;
	border-radius: 0.5rem !important;
	padding: 12px 14px;
	font-size: 14px;
	min-height: 100px;
	resize: vertical;
	font-family: inherit;
	color: #0f172a;
	box-shadow: 2px 2px 0 #0f172a !important;
	background: #fff;
}
.yk-cmt-page #comments textarea:focus,
.yk-cmt-page .comments-area textarea:focus {
	outline: none;
	box-shadow: 3px 3px 0 #facc15 !important;
	transform: translate(-1px, -1px);
}
.yk-cmt-page #comments input[type="text"],
.yk-cmt-page #comments input[type="email"],
.yk-cmt-page #comments input[type="url"],
.yk-cmt-page .comments-area input[type="text"],
.yk-cmt-page .comments-area input[type="email"],
.yk-cmt-page .comments-area input[type="url"] {
	border: 2px solid #0f172a !important;
	border-radius: 0.5rem !important;
	padding: 9px 12px;
	font-size: 14px;
	box-shadow: 2px 2px 0 #0f172a !important;
	background: #fff;
}
.yk-cmt-page #comments input[type="submit"],
.yk-cmt-page .comments-area input[type="submit"] {
	background: #facc15 !important;
	color: #0f172a !important;
	border: 2px solid #0f172a !important;
	border-radius: 0.5rem !important;
	padding: 10px 24px !important;
	font-size: 14px;
	font-weight: 900;
	font-style: italic;
	cursor: pointer;
	box-shadow: 2px 2px 0 #0f172a !important;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
	letter-spacing: normal !important;
}
.yk-cmt-page #comments input[type="submit"]:hover,
.yk-cmt-page .comments-area input[type="submit"]:hover {
	background: #eab308 !important;
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a !important;
}

/* ==============================================================
 * 21. 发帖编辑器（机能风）
 * ============================================================== */
.yk-cmt-editor-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px;
}
.yk-cmt-editor {
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 6px 6px 0 #0f172a;
	padding: 28px;
}
.yk-cmt-editor-title {
	width: 100%;
	font-size: 22px;
	font-weight: 900;
	font-style: italic;
	border: none;
	border-bottom: 3px solid #0f172a;
	padding: 12px 0;
	outline: none;
	background: transparent;
	color: #0f172a;
	box-shadow: none;
}
.yk-cmt-editor-title:focus { border-bottom-color: #facc15; }
.yk-cmt-editor-title::placeholder { color: #94a3b8; font-style: italic; font-weight: 900; }
.yk-cmt-editor-body {
	width: 100%;
	min-height: 320px;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	padding: 16px;
	font-size: 14px;
	line-height: 1.75;
	font-family: inherit;
	resize: vertical;
	margin-top: 16px;
	background: #fff;
	color: #0f172a;
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-cmt-editor-body:focus {
	outline: none;
	box-shadow: 4px 4px 0 #facc15;
	transform: translate(-1px, -1px);
}
.yk-cmt-editor-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}
.yk-cmt-editor-meta select,
.yk-cmt-editor-meta input[type="text"],
.yk-cmt-editor-meta input[type="number"] {
	flex: 1;
	min-width: 200px;
	padding: 10px 14px;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	font-size: 14px;
	background: #fff;
	color: #0f172a;
	box-shadow: 2px 2px 0 #0f172a;
	font-weight: 700;
}
.yk-cmt-editor-meta select:focus,
.yk-cmt-editor-meta input:focus {
	outline: none;
	box-shadow: 3px 3px 0 #facc15;
	transform: translate(-1px, -1px);
}
.yk-cmt-editor-thumb {
	margin-top: 16px;
	padding: 16px;
	border: 3px dashed #0f172a;
	border-radius: 0.5rem;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s;
	background: #f8fafc;
}
.yk-cmt-editor-thumb:hover { background: #fefce8; border-color: #facc15; }
.yk-cmt-editor-thumb img {
	max-width: 240px;
	max-height: 160px;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 0 #0f172a;
	margin: 0 auto;
	display: block;
}

/* ==============================================================
 * 版块归档页 · 紫色渐变 Hero（创意工坊等）
 * ============================================================== */
.yk-cmt-category-hero {
	position: relative;
	border: 2px solid #0f172a;
	border-radius: 1rem;
	box-shadow: 4px 4px 0 #0f172a;
	background:
		radial-gradient(ellipse at top left, rgba(255,255,255,0.15) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(253,224,71,0.1) 0%, transparent 50%),
		linear-gradient(135deg, #a78bfa 0%, #c4b5fd 40%, #ddd6fe 70%, #e9d5ff 100%);
	overflow: hidden;
	padding: 28px 32px;
	color: #fff;
}
/* 上传了封面图：用 inline background-image，叠加蒙版保证文字可读 */
.yk-cmt-category-hero.has-cover {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.yk-cmt-ch-cover-mask {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, rgba(124, 58, 237, 0.78) 0%, rgba(139, 92, 246, 0.62) 50%, rgba(15, 23, 42, 0.55) 100%);
}
.yk-cmt-ch-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

/* 装饰光点 */
.yk-cmt-ch-dot {
	position: absolute;
	border-radius: 50%;
	z-index: 1;
	pointer-events: none;
	filter: blur(1px);
}
.yk-cmt-ch-dot-1 { width: 10px; height: 10px; top: 18%; left: 12%; background: #fde047; box-shadow: 0 0 12px #fde047; }
.yk-cmt-ch-dot-2 { width: 6px;  height: 6px;  top: 72%; left: 8%;  background: #fff;    box-shadow: 0 0 10px #fff; }
.yk-cmt-ch-dot-3 { width: 8px;  height: 8px;  top: 28%; right: 38%; background: #f0abfc; box-shadow: 0 0 10px #f0abfc; }
.yk-cmt-ch-dot-4 { width: 5px;  height: 5px;  top: 80%; right: 45%; background: #fde047; box-shadow: 0 0 8px #fde047; }
.yk-cmt-ch-sparkle {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	color: #fde047;
	filter: drop-shadow(0 0 6px rgba(253,224,71,0.6));
}
.yk-cmt-ch-sparkle-1 { top: 22%; left: 52%; animation: yk-cmt-twinkle 2.4s ease-in-out infinite; }
.yk-cmt-ch-sparkle-2 { bottom: 20%; right: 38%; color: #fff; animation: yk-cmt-twinkle 3s ease-in-out infinite .8s; }
@keyframes yk-cmt-twinkle {
	0%,100% { opacity: 0.3; transform: scale(0.9); }
	50%     { opacity: 1;   transform: scale(1.15); }
}

/* 左：内容区 */
.yk-cmt-ch-content {
	flex: 1 1 360px;
	min-width: 0;
}
.yk-cmt-ch-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(255,255,255,0.25);
	backdrop-filter: blur(6px);
	border: 1.5px solid rgba(255,255,255,0.4);
	border-radius: 999px;
	color: #6d28d9;
	font-size: 11px;
	font-weight: 900;
	font-style: italic;
	margin-bottom: 10px;
}
.yk-cmt-ch-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 900;
	font-style: italic;
	color: #fff;
	margin: 0 0 6px 0;
	text-shadow: 2px 2px 0 rgba(15,23,42,0.2);
	letter-spacing: -0.5px;
}
.yk-cmt-ch-title-deco {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fde047;
	filter: drop-shadow(0 0 8px rgba(253,224,71,0.7));
	animation: yk-cmt-twinkle 2s ease-in-out infinite .3s;
}
.yk-cmt-ch-subtitle {
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,0.92);
	margin: 0 0 14px 0;
}

/* 版块内搜索 */
.yk-cmt-ch-search {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 440px;
	padding: 4px 4px 4px 14px;
	background: rgba(255,255,255,0.95);
	border: 2px solid #0f172a;
	border-radius: 0.75rem;
	box-shadow: 2px 2px 0 #0f172a;
	margin-bottom: 14px;
	transition: box-shadow .15s, transform .15s;
}
.yk-cmt-ch-search:focus-within {
	box-shadow: 3px 3px 0 #0f172a;
	transform: translate(-1px,-1px);
}
.yk-cmt-ch-search-icon {
	width: 16px;
	height: 16px;
	color: #64748b;
	flex-shrink: 0;
}
.yk-cmt-ch-search-input {
	flex: 1 1 auto;
	min-width: 160px;
	border: none;
	outline: none;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	padding: 8px 0;
}
.yk-cmt-ch-search-input::placeholder {
	color: #94a3b8;
	font-style: italic;
}
.yk-cmt-ch-search-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	transition: background .15s, color .15s;
	flex-shrink: 0;
}
.yk-cmt-ch-search-clear:hover {
	background: #ef4444;
	color: #fff;
}
.yk-cmt-ch-search-btn {
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	background: #facc15;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color .15s, transform .15s;
}
.yk-cmt-ch-search-btn:hover { background: #fde047; }
.yk-cmt-ch-search-btn:active { transform: translate(1px,1px); }

.yk-cmt-ch-search-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(15,23,42,0.85);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border-radius: 0.5rem;
	margin-bottom: 14px;
	max-width: 100%;
}
.yk-cmt-ch-search-hint strong { color: #fde047; font-weight: 900; }

/* Stats 三个 badge（双层） */
.yk-cmt-ch-stats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.yk-cmt-ch-stat {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 14px;
	border: 2px solid #0f172a;
	border-radius: 0.6rem;
	box-shadow: 2px 2px 0 #0f172a;
	background: #fff;
	min-width: 100px;
	transition: transform .15s, box-shadow .15s;
}
.yk-cmt-ch-stat:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-cmt-ch-stat-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	white-space: nowrap;
}
.yk-cmt-ch-stat-top strong { font-weight: 900; }
.yk-cmt-ch-stat-sub {
	font-size: 10px;
	font-weight: 700;
	color: #64748b;
	letter-spacing: 0.3px;
}
.yk-cmt-ch-stat-yellow { background: #fef9c3; }
.yk-cmt-ch-stat-yellow .yk-cmt-ch-stat-top { color: #713f12; }
.yk-cmt-ch-stat-violet { background: #ede9fe; }
.yk-cmt-ch-stat-violet .yk-cmt-ch-stat-top { color: #5b21b6; }
.yk-cmt-ch-stat-link   { background: #fff; }
.yk-cmt-ch-stat-link .yk-cmt-ch-stat-top { color: #475569; }
.yk-cmt-ch-stat-link:hover .yk-cmt-ch-stat-top { color: #ef4444; }

/* 右：装饰 + CTA */
.yk-cmt-ch-right {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
}
.yk-cmt-ch-deco {
	position: relative;
	width: 130px;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.yk-cmt-ch-deco-cube {
	width: 90px;
	height: 90px;
	background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
	border: 2.5px solid #0f172a;
	border-radius: 14px;
	box-shadow: 4px 4px 0 rgba(15,23,42,0.35), inset -8px -8px 0 rgba(15,23,42,0.15), inset 8px 8px 0 rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transform: rotate(-8deg);
	filter: drop-shadow(0 6px 12px rgba(139,92,246,0.4));
	overflow: hidden;
}
/* 上传了头像：图片填满立方体，去掉渐变和内阴影 */
.yk-cmt-ch-deco-cube.has-avatar {
	background: #fff;
	box-shadow: 4px 4px 0 rgba(15,23,42,0.35);
}
.yk-cmt-ch-deco-cube.has-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.yk-cmt-ch-deco-pen {
	position: absolute;
	right: 6px;
	bottom: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fde047;
	border: 2px solid #0f172a;
	color: #0f172a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0 #0f172a;
	transform: rotate(12deg);
}
.yk-cmt-ch-deco-star {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #0f172a;
	color: #facc15;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-cmt-ch-deco-sphere-1 {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff, #c4b5fd);
	border: 1.5px solid rgba(15,23,42,0.4);
}
.yk-cmt-ch-deco-sphere-2 {
	position: absolute;
	bottom: 2px;
	left: 8px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff, #f0abfc);
	border: 1.5px solid rgba(15,23,42,0.4);
}

/* 加入圈子 · 大按钮 */
.yk-cmt-ch-join-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 900;
	font-style: italic;
	white-space: nowrap;
	border: 2.5px solid #0f172a;
	border-radius: 0.75rem;
	box-shadow: 3px 3px 0 #0f172a;
	background: #facc15;
	color: #0f172a;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background-color .15s;
}
.yk-cmt-ch-join-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 #0f172a;
	background: #fde047;
}
.yk-cmt-ch-join-btn:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-cmt-ch-join-btn.is-joined {
	background: #0f172a;
	color: #fff;
}
.yk-cmt-ch-join-btn.is-joined:hover {
	background: #334155;
}
.yk-cmt-ch-join-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* 响应式：窄屏叠成竖排 */
@media (max-width: 720px) {
	.yk-cmt-category-hero { padding: 20px; }
	.yk-cmt-ch-title { font-size: 26px; }
	.yk-cmt-ch-right { align-items: stretch; width: 100%; }
	.yk-cmt-ch-deco { align-self: center; }
	.yk-cmt-ch-join-btn { justify-content: center; }
}

/* ==============================================================
 * 15. 社区详情页右侧栏（作者卡 + 返回按钮）
 *    基调：和主站一致的 Neobrutalism（2px 黑边 + 4px/2px 硬偏移阴影 + 小圆角 + italic）
 *    装饰：保留紫粉渐变 header + 波浪 + 黄星角标 + 黄/紫双色 stats
 *    不依赖 Tailwind JIT，全部手写避免预编译 CSS 缺 class
 * ============================================================== */

/* ---------- 返回社区首页按钮 ---------- */
.yk-author-back {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 4px 4px 0 #0f172a;
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s;
}
.yk-author-back:hover {
	transform: translate(1px, 1px);
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-author-back-icon {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	background: #facc15;
	border: 2px solid #0f172a;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0f172a;
}
.yk-author-back-text {
	flex: 1;
	min-width: 0;
}
.yk-author-back-title {
	font-size: 14px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	line-height: 1.2;
}
.yk-author-back-sub {
	font-size: 11px;
	color: #64748b;
	margin-top: 2px;
	font-weight: 600;
}
.yk-author-back-arrow {
	color: #0f172a;
	transition: transform 0.15s;
}
.yk-author-back:hover .yk-author-back-arrow {
	transform: translateX(2px);
}

/* ---------- 作者卡 ---------- */
.yk-author-card {
	position: relative;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 4px 4px 0 #0f172a;
}

/* 头部渐变（图 2 的灵魂保留） */
.yk-author-header {
	position: relative;
	height: 100px;
	background: linear-gradient(135deg, #e9d5ff 0%, #fce7f3 50%, #e9d5ff 100%);
	overflow: hidden;
}

/* 装饰圆点 */
.yk-author-dot {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
}
.yk-author-dot-1 { top: 18px; right: 60px; width: 6px; height: 6px; }
.yk-author-dot-2 { top: 40px; right: 30px; width: 4px; height: 4px; opacity: 0.6; }
.yk-author-dot-3 { top: 12px; right: 110px; width: 4px; height: 4px; }
.yk-author-dot-4 { bottom: 30px; left: 26px; width: 6px; height: 6px; opacity: 0.5; }

/* 左上"作者"胶囊（Neobrutalism 黑边版） */
.yk-author-chip {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 999px;
	box-shadow: 2px 2px 0 #0f172a;
	font-size: 11px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	line-height: 1.2;
}
.yk-author-chip svg,
.yk-author-chip i {
	width: 12px;
	height: 12px;
	color: #a855f7;
}

/* 波浪底边 */
.yk-author-wave {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 20px;
	color: #fff;
	display: block;
}

/* 头像容器 */
.yk-author-avatar-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: -34px;
	margin-bottom: 8px;
}

/* 头像本体（inline-block 关键：让 absolute 角标贴在头像右下） */
.yk-author-avatar {
	position: relative;
	display: inline-block;
	text-decoration: none !important;
	line-height: 0;
}
.yk-author-avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 3px solid #0f172a;
	object-fit: cover;
	box-shadow: 3px 3px 0 #0f172a;
	display: block;
}
/* 头像右下星星角标 */
.yk-author-avatar-badge {
	position: absolute;
	bottom: -3px;
	right: -3px;
	width: 24px;
	height: 24px;
	background: #facc15;
	border: 2px solid #0f172a;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0f172a;
}
.yk-author-avatar-badge svg,
.yk-author-avatar-badge i { width: 12px; height: 12px; }

/* body */
.yk-author-body {
	padding: 0 14px 14px;
}
.yk-author-name {
	margin: 0;
	font-size: 17px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	text-align: center;
	line-height: 1.3;
}
.yk-author-tag {
	display: flex;
	justify-content: center;
	margin-top: 8px;
	margin-bottom: 14px;
}
.yk-author-tag-inner {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	background: #faf5ff;
	border: 2px solid #0f172a;
	border-radius: 999px;
	box-shadow: 2px 2px 0 #0f172a;
	font-size: 11px;
	font-weight: 900;
	font-style: italic;
	color: #7c3aed;
}
.yk-author-tag-inner svg,
.yk-author-tag-inner i { width: 12px; height: 12px; color: #a855f7; }

/* stats */
.yk-author-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}
.yk-author-stat {
	position: relative;
	border: 2px solid #0f172a;
	border-radius: 0.375rem;
	box-shadow: 2px 2px 0 #0f172a;
	padding: 10px;
	overflow: hidden;
}
.yk-author-stat-yellow { background: #fefce8; }
.yk-author-stat-purple { background: #faf5ff; }

.yk-author-stat-head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.yk-author-stat-icon {
	width: 32px;
	height: 32px;
	border: 2px solid #0f172a;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.yk-author-stat-yellow .yk-author-stat-icon { background: #fef08a; color: #854d0e; }
.yk-author-stat-purple .yk-author-stat-icon { background: #e9d5ff; color: #6b21a8; }
.yk-author-stat-icon svg,
.yk-author-stat-icon i { width: 14px; height: 14px; }

.yk-author-stat-num {
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	line-height: 1;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.yk-author-stat-label {
	font-size: 11px;
	color: #475569;
	margin-top: 3px;
	font-weight: 700;
}
.yk-author-stat-desc {
	font-size: 10px;
	color: #94a3b8;
	text-align: center;
	margin-top: 8px;
	font-weight: 600;
}
.yk-author-stat-bar {
	position: absolute;
	bottom: 0;
	left: 10px;
	right: 10px;
	height: 3px;
}
.yk-author-stat-yellow .yk-author-stat-bar { background: #facc15; }
.yk-author-stat-purple .yk-author-stat-bar { background: #a855f7; }

/* ==============================================================
 * 16. 圈子中心页 /community/circles/  v2 紫色温柔风
 *    （独立命名空间 .yk-circles-* / .yk-* ；不再使用 Neobrutalism 黑边硬阴影）
 * ============================================================== */

/* 全局变量（仅本页生效，注入到 .yk-circles-page 作用域）
 *
 *   保留 header.php 里的 WASD 全站水印 —— 不做遮罩。
 *   卡片本身用白色实底背景，文字仍然清晰可读。
 */
.yk-circles-page {
	--yk-purple-50:  #faf5ff;
	--yk-purple-100: #f3e8ff;
	--yk-purple-200: #e9d5ff;
	--yk-purple-400: #a78bfa;
	--yk-purple-500: #8b7ae8;
	--yk-purple-600: #7c5cff;
	--yk-purple-700: #6d28d9;
	--yk-pink-100:   #fce7f3;
	--yk-pink-300:   #f9a8d4;
	--yk-blue-100:   #dbeafe;
	--yk-blue-500:   #3b82f6;
	--yk-orange-100: #ffedd5;
	--yk-orange-500: #f97316;
	--yk-green-100:  #d1fae5;
	--yk-green-500:  #10b981;
	--yk-yellow-100: #fef3c7;
	--yk-yellow-500: #f59e0b;
	--yk-text-1:     #1f2937;
	--yk-text-2:     #4b5563;
	--yk-text-3:     #9ca3af;
	--yk-bg-page:    #fafbfc;
	--yk-radius-lg:  16px;
	--yk-radius-md:  12px;
	--yk-shadow-sm:  0 2px 8px rgba(124, 92, 255, 0.06);
	--yk-shadow-md:  0 4px 20px rgba(124, 92, 255, 0.10);
	--yk-shadow-lg:  0 12px 32px rgba(124, 92, 255, 0.14);

	position: relative;
	min-height: 60vh;
	padding: 5rem 0 2.5rem; /* 与 .yk-cmt-page 一致：留出 fixed header 空间 */
}
@media (min-width: 1024px) {
	.yk-circles-page { padding-top: 6rem; }
}

/* 圈子中心页面包屑：与 hero 间距 */
.yk-circles-container > .yk-cmt-breadcrumb { margin-bottom: 16px; }

.yk-circles-container {
	position: relative;
	z-index: 1;
	max-width: 1440px; /* 对齐 archive-community_post.php / 社区列表归档 */
	margin: 0 auto;
	padding: 0 24px;
}
@media (max-width: 1023px) {
	.yk-circles-container { padding: 0 16px; }
}

/* ---------------- Hero（Neobrutalism 紫色渐变） ---------------- */
.yk-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 36px 40px;
	margin-bottom: 20px;
	background:
		radial-gradient(ellipse at top left, rgba(255,255,255,0.18) 0%, transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(253,224,71,0.12) 0%, transparent 55%),
		linear-gradient(135deg, #a78bfa 0%, #c4b5fd 40%, #ddd6fe 70%, #e9d5ff 100%);
	border: 2px solid #0f172a;
	border-radius: 1rem;
	box-shadow: 4px 4px 0 #0f172a;
	overflow: hidden;
	color: #fff;
}
/* Hero 装饰光点 */
.yk-hero::before,
.yk-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(1px);
}
.yk-hero::before {
	width: 10px; height: 10px;
	top: 22%; left: 14%;
	background: #fde047;
	box-shadow: 0 0 12px #fde047;
}
.yk-hero::after {
	width: 6px; height: 6px;
	bottom: 26%; left: 6%;
	background: #fff;
	box-shadow: 0 0 10px #fff;
}

/* 后台上传 Hero 背景图：图片铺满 + 深色蒙版保证文字可读 */
.yk-hero.has-bg {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
.yk-hero.has-bg .yk-hero-text,
.yk-hero.has-bg .yk-hero-art {
	position: relative;
	z-index: 2;
}
/* 文字区域上方叠一层左→右半透明黑色蒙版（左侧文字区暗，右侧装饰区淡） */
.yk-hero.has-bg .yk-hero-text::before {
	content: '';
	position: absolute;
	inset: -36px -40px -36px -40px;
	background: linear-gradient(90deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.35) 60%, rgba(15, 23, 42, 0) 100%);
	z-index: -1;
	pointer-events: none;
}
.yk-hero.has-bg .yk-hero-stat {
	background: rgba(255, 255, 255, 0.95);
}
/* 上传图片时，原本的所有 CSS 装饰（光点 + 行星 + 气泡）全部隐藏 */
.yk-hero.has-bg::before,
.yk-hero.has-bg::after,
.yk-hero.has-bg .yk-hero-art { display: none; }
/* 文字区独占整个 hero 宽度，图片靠右展示 */
.yk-hero.has-bg .yk-hero-text { max-width: 60%; }
@media (max-width: 720px) {
	.yk-hero.has-bg .yk-hero-text { max-width: 100%; }
}
.yk-hero-text { flex: 1; min-width: 240px; position: relative; z-index: 2; }
.yk-hero-title {
	margin: 0 0 10px;
	font-size: 32px;
	font-weight: 900;
	font-style: italic;
	color: #fff;
	line-height: 1.15;
	letter-spacing: -0.5px;
	text-shadow: 2px 2px 0 rgba(15, 23, 42, 0.22);
}
.yk-hero-desc {
	margin: 0 0 22px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.94);
	font-weight: 600;
	line-height: 1.6;
	max-width: 460px;
}
.yk-hero-stats {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.yk-hero-stat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-hero-stat-icon {
	width: 18px;
	height: 18px;
	color: var(--yk-purple-600);
}
.yk-hero-stat-num {
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	line-height: 1.1;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.yk-hero-stat-label {
	font-size: 11px;
	color: #475569;
	font-weight: 700;
	margin-top: 2px;
}

/* Hero 装饰行星 */
.yk-hero-art {
	position: relative;
	width: 280px;
	height: 200px;
	flex-shrink: 0;
}
.yk-hero-planet {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 160px;
	height: 160px;
}
.yk-hero-planet-core {
	position: absolute;
	inset: 16px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #c4b5fd 0%, #8b5cf6 40%, #6d28d9 100%);
	box-shadow: 0 12px 32px rgba(124, 92, 255, 0.4), inset -10px -10px 30px rgba(0, 0, 0, 0.2);
}
.yk-hero-planet-ring {
	position: absolute;
	left: -16px;
	top: 50%;
	width: 192px;
	height: 32px;
	transform: translateY(-50%) rotate(-18deg);
	border: 4px solid rgba(167, 139, 250, 0.55);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(124, 92, 255, 0.2);
}
.yk-hero-bubble {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 4px 12px rgba(124, 92, 255, 0.18);
	color: var(--yk-purple-600);
}
.yk-hero-bubble-1 {
	left: 10px; top: 30px;
	width: 44px; height: 44px;
}
.yk-hero-bubble-1 svg,
.yk-hero-bubble-1 i { width: 22px; height: 22px; }
.yk-hero-bubble-2 {
	right: 0; bottom: 10px;
	width: 28px; height: 28px;
	background: rgba(249, 168, 212, 0.7);
}

/* ---------------- 主区栅格 ---------------- */
.yk-circles-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 20px;
	align-items: start;
}

/* ---------------- 通用 Section（标题 italic + 黄下划线） ---------------- */
.yk-section { margin-bottom: 20px; }
.yk-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.yk-section-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-bottom: 4px;
	font-size: 18px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	border-bottom: 3px solid #fde047;
}
.yk-section-title svg,
.yk-section-title i {
	width: 18px;
	height: 18px;
	color: var(--yk-purple-600);
}

/* ---------------- Tabs（Neobrutalism 黄黑黑边胶囊） ---------------- */
.yk-circles-tabs {
	display: inline-flex;
	gap: 8px;
}
.yk-circles-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 3px 3px 0 #0f172a;
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.yk-circles-tab:hover {
	background: #fefce8;
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-circles-tab.is-active {
	background: #0f172a;
	color: #fde047;
	box-shadow: 3px 3px 0 #ef4444;
}
.yk-circles-tab.is-active:hover {
	background: #1e293b;
	transform: none;
	box-shadow: 3px 3px 0 #ef4444;
}
.yk-circles-tab.is-active svg,
.yk-circles-tab.is-active i { color: #fde047; }
.yk-circles-tab svg,
.yk-circles-tab i { width: 14px; height: 14px; }
.yk-circles-tab-count {
	display: inline-block;
	min-width: 20px;
	padding: 0 7px;
	background: #fde047;
	border: 2px solid #0f172a;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
	font-style: normal;
	color: #0f172a;
	text-align: center;
	line-height: 18px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.yk-circles-tab.is-active .yk-circles-tab-count {
	background: #ef4444;
	color: #fff;
	border-color: #fff;
}

/* ---------------- 圈子卡片网格（垂直 / 居中 / 大 icon 风格） ---------------- */
.yk-circle-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
}
.yk-circle-card {
	position: relative;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.75rem;
	box-shadow: 4px 4px 0 #0f172a;
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s;
}
.yk-circle-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #ef4444;
}
.yk-circle-card.is-joined {
	background: linear-gradient(180deg, #fef9c3 0%, #fff 60%);
}
.yk-circle-card-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 16px 18px;
	text-align: center;
	text-decoration: none !important;
	color: inherit;
}

/* 已加入徽章（右上角 黄黑黑边） */
.yk-circle-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border: 2px solid #0f172a;
	border-radius: 50%;
	background: #fde047;
	color: #0f172a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0 #0f172a;
	z-index: 2;
}
.yk-circle-badge svg,
.yk-circle-badge i { width: 14px; height: 14px; stroke-width: 3; }

/* 渐变彩色大 icon 盒（顶部居中 黑边硬阴影） */
.yk-circle-icon {
	width: 64px;
	height: 64px;
	border: 2px solid #0f172a;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 3px 3px 0 #0f172a;
	margin-bottom: 4px;
	transition: transform 0.2s, box-shadow 0.2s;
}
.yk-circle-card:hover .yk-circle-icon {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 #0f172a;
}
.yk-circle-icon svg,
.yk-circle-icon i { width: 30px; height: 30px; stroke-width: 2.4; }

/* 上传了头像：用图片填满整个 icon 盒 */
.yk-circle-icon.has-avatar {
	background: #fff;
	padding: 0;
	overflow: hidden;
}
.yk-circle-icon.has-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* color → 渐变（柔和带 highlight） */
.yk-circle-icon-purple { background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 70%, #7c3aed 100%); }
.yk-circle-icon-blue   { background: linear-gradient(135deg, #bfdbfe 0%, #60a5fa 70%, #3b82f6 100%); }
.yk-circle-icon-green  { background: linear-gradient(135deg, #a7f3d0 0%, #34d399 70%, #10b981 100%); }
.yk-circle-icon-orange { background: linear-gradient(135deg, #fed7aa 0%, #fb923c 70%, #f97316 100%); }
.yk-circle-icon-pink   { background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 70%, #ec4899 100%); }
.yk-circle-icon-red    { background: linear-gradient(135deg, #fecaca 0%, #f87171 70%, #ef4444 100%); }
.yk-circle-icon-yellow { background: linear-gradient(135deg, #fde68a 0%, #fbbf24 70%, #f59e0b 100%); }
.yk-circle-icon-gray   { background: linear-gradient(135deg, #e5e7eb 0%, #94a3b8 70%, #64748b 100%); }

.yk-circle-name {
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	line-height: 1.3;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.yk-circle-desc {
	margin: 0 0 6px;
	font-size: 12px;
	color: #475569;
	font-weight: 500;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
}
.yk-circle-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 3px 10px;
	background: #fefce8;
	border: 1.5px solid #0f172a;
	border-radius: 999px;
	font-size: 11px;
	color: #0f172a;
	font-weight: 700;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.yk-circle-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
.yk-circle-meta-item svg,
.yk-circle-meta-item i { width: 11px; height: 11px; }
.yk-circle-meta-dot { color: #d1d5db; }

/* 浮动加入按钮（黄色黑边硬阴影，hover 卡片时浮现） */
.yk-circle-join-float {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translate(-50%, 12px);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	background: #fde047;
	color: #0f172a;
	border: 2px solid #0f172a;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900;
	font-style: italic;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 3px 3px 0 #0f172a;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
	z-index: 2;
}
.yk-circle-card:hover .yk-circle-join-float {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.yk-circle-join-float svg,
.yk-circle-join-float i { width: 12px; height: 12px; stroke-width: 3; }
.yk-circle-join-float.is-joined {
	background: #0f172a;
	color: #fde047;
	box-shadow: 3px 3px 0 #ef4444;
}
.yk-circle-join-float:hover { transform: translate(-51%, -2px); box-shadow: 4px 4px 0 #0f172a; }
.yk-circle-join-float.is-joined:hover { box-shadow: 4px 4px 0 #ef4444; }

/* 触屏：直接显示按钮，不依赖 hover */
@media (hover: none) {
	.yk-circle-join-float {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, 0);
		bottom: 12px;
	}
	.yk-circle-card-link { padding-bottom: 50px; }
}

/* ---------------- 探索更多（3 张大卡） ---------------- */
.yk-explore-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.yk-explore-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 2px solid #0f172a;
	border-radius: 0.75rem;
	overflow: hidden;
	text-decoration: none !important;
	color: #0f172a;
	transition: transform 0.15s, box-shadow 0.15s;
	box-shadow: 4px 4px 0 #0f172a;
}
.yk-explore-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #0f172a;
}
.yk-explore-card-purple {
	background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
}
.yk-explore-card-blue {
	background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}
.yk-explore-card-orange {
	background: linear-gradient(135deg, #ffedd5 0%, #fef3c7 100%);
}
.yk-explore-card-art {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border: 2px solid #0f172a;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--yk-purple-600);
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-explore-card-blue .yk-explore-card-art { color: var(--yk-blue-500); }
.yk-explore-card-orange .yk-explore-card-art { color: var(--yk-orange-500); }
.yk-explore-card-art svg,
.yk-explore-card-art i { width: 28px; height: 28px; }
.yk-explore-card-text { flex: 1; min-width: 0; }
.yk-explore-card-text h3 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
}
.yk-explore-card-text p {
	margin: 0 0 8px;
	font-size: 12px;
	color: #475569;
	font-weight: 500;
	line-height: 1.4;
}
.yk-explore-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 12px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
	font-style: italic;
	color: var(--yk-purple-600);
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-explore-card-blue .yk-explore-card-btn { color: var(--yk-blue-500); }
.yk-explore-card-orange .yk-explore-card-btn { color: var(--yk-orange-500); }

/* ---------------- 为什么加入圈子？（4 列特性） ---------------- */
.yk-section-features .yk-section-title svg,
.yk-section-features .yk-section-title i { color: var(--yk-purple-600); }
.yk-features-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 22px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.75rem;
	box-shadow: 4px 4px 0 #0f172a;
}
.yk-feature {
	display: flex;
	align-items: center;
	gap: 12px;
}
.yk-feature h4 {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
}
.yk-feature p {
	margin: 0;
	font-size: 11px;
	color: #475569;
	font-weight: 500;
	line-height: 1.4;
}
.yk-feature-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-feature-icon svg,
.yk-feature-icon i { width: 20px; height: 20px; }
.yk-feature-icon-purple { background: var(--yk-purple-100); color: var(--yk-purple-600); }
.yk-feature-icon-green  { background: var(--yk-green-100);  color: var(--yk-green-500); }
.yk-feature-icon-pink   { background: #fce7f3;              color: #ec4899; }
.yk-feature-icon-orange { background: var(--yk-orange-100); color: var(--yk-orange-500); }

/* ---------------- 侧栏卡 ---------------- */
.yk-circles-side { display: flex; flex-direction: column; gap: 20px; }
.yk-side-card {
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.75rem;
	padding: 18px;
	box-shadow: 4px 4px 0 #0f172a;
}
.yk-side-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.yk-side-card-head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
}
.yk-side-badge {
	padding: 2px 8px;
	background: #fde047;
	border: 2px solid #0f172a;
	color: #0f172a;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.04em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-side-empty {
	margin: 0;
	padding: 22px 0;
	text-align: center;
	color: var(--yk-text-3);
	font-size: 12px;
}
.yk-side-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 12px;
	padding: 8px 0;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 0 #0f172a;
	font-size: 12px;
	font-weight: 900;
	font-style: italic;
	color: var(--yk-purple-600);
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.yk-side-more:hover {
	background: #fefce8;
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-side-more svg,
.yk-side-more i { width: 12px; height: 12px; stroke-width: 3; }

/* 快捷入口 4 列 */
.yk-quick-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.yk-quick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 4px;
	border-radius: 0.5rem;
	font-size: 11px;
	font-weight: 700;
	color: #475569;
	text-align: center;
	text-decoration: none !important;
	transition: background 0.15s, color 0.15s;
	/* button 元素 reset，让 <a> 和 <button> 视觉一致 */
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-style: italic;
}
.yk-quick:hover { background: #fefce8; color: #0f172a; }
.yk-quick-icon {
	width: 40px;
	height: 40px;
	border: 2px solid #0f172a;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0 #0f172a;
	transition: transform 0.15s, box-shadow 0.15s;
}
.yk-quick:hover .yk-quick-icon {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-quick-icon svg,
.yk-quick-icon i { width: 16px; height: 16px; }
.yk-quick-icon-purple { background: var(--yk-purple-100); color: var(--yk-purple-600); }
.yk-quick-icon-yellow { background: var(--yk-yellow-100); color: var(--yk-yellow-500); }
.yk-quick-icon-blue   { background: var(--yk-blue-100);   color: var(--yk-blue-500); }
.yk-quick-icon-green  { background: var(--yk-green-100);  color: var(--yk-green-500); }

/* CTA 创建你的圈子 */
.yk-cta-card {
	background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 60%, #8b5cf6 100%);
	color: #fff;
	display: flex;
	gap: 14px;
	align-items: center;
	overflow: hidden;
	position: relative;
	border: 2px solid #0f172a;
	box-shadow: 4px 4px 0 #0f172a;
}
.yk-cta-text { flex: 1; min-width: 0; }
.yk-cta-text h3 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 900;
	font-style: italic;
	color: #fff;
	text-shadow: 1px 1px 0 rgba(15, 23, 42, 0.25);
}
.yk-cta-text p {
	margin: 0 0 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.4;
}
.yk-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	background: #fde047;
	border: 2px solid #0f172a;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	box-shadow: 2px 2px 0 #0f172a;
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s;
}
.yk-cta-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-cta-btn svg,
.yk-cta-btn i { width: 12px; height: 12px; }
.yk-cta-art {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border: 2px solid #0f172a;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--yk-purple-600);
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-cta-art svg,
.yk-cta-art i { width: 36px; height: 36px; }

/* 活跃贡献榜 */
.yk-rank-list { list-style: none; margin: 0; padding: 0; }
.yk-rank-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f3f4f6;
}
.yk-rank-item:last-child { border-bottom: 0; }
.yk-rank-num {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 2px solid #0f172a;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 900;
	background: #f3f4f6;
	color: #0f172a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-rank-num-1 { background: #fde047; color: #0f172a; }
.yk-rank-num-2 { background: #cbd5e1; color: #0f172a; }
.yk-rank-num-3 { background: #fed7aa; color: #0f172a; }
.yk-rank-user {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	text-decoration: none !important;
	color: inherit;
}
.yk-rank-user img {
	width: 28px;
	height: 28px;
	border: 1.5px solid #0f172a;
	border-radius: 50%;
	object-fit: cover;
}
.yk-rank-name {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.yk-rank-score {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 900;
	color: #f59e0b;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.yk-rank-score svg,
.yk-rank-score i { width: 12px; height: 12px; }

/* 热门话题 */
.yk-topic-list { list-style: none; margin: 0; padding: 0; }
.yk-topic-list li { border-bottom: 1px solid #f3f4f6; }
.yk-topic-list li:last-child { border-bottom: 0; }
.yk-topic {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	color: var(--yk-text-1);
	text-decoration: none !important;
	font-size: 13px;
}
.yk-topic-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--yk-orange-500);
}
.yk-topic-name {
	flex: 1;
	min-width: 0;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.yk-topic-count {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--yk-text-3);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.yk-topic-arrow {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	color: #d1d5db;
	transition: transform 0.15s, color 0.15s;
}
.yk-topic:hover { color: var(--yk-purple-600); }
.yk-topic:hover .yk-topic-arrow {
	color: var(--yk-purple-600);
	transform: translateX(2px);
}

/* ---------------- 空态（通用 Neobrutalism） ---------------- */
.yk-empty {
	padding: 56px 20px;
	background: #fff;
	border: 2px dashed #0f172a;
	border-radius: 0.75rem;
	text-align: center;
}
.yk-empty svg,
.yk-empty i {
	display: block;
	margin: 0 auto 12px;
	color: var(--yk-purple-200);
}
.yk-empty-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
}
.yk-empty-desc {
	margin: 0 0 16px;
	font-size: 13px;
	color: #475569;
	font-weight: 500;
}
.yk-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 3px 3px 0 #0f172a;
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s;
	cursor: pointer;
}
.yk-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 #0f172a;
}
.yk-btn-primary {
	background: #fde047;
	color: #0f172a;
}
.yk-btn-ghost {
	background: #fff;
	color: #475569;
}
.yk-btn svg,
.yk-btn i { width: 14px; height: 14px; stroke-width: 3; }

/* ==============================================================
 * 创建圈子 · 右抽屉
 * ============================================================== */
.yk-drawer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	visibility: hidden;
	pointer-events: none;
}
.yk-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.yk-drawer-mask {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.yk-drawer.is-open .yk-drawer-mask { opacity: 1; }

.yk-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100vh;
	width: 480px;
	max-width: 92vw;
	background: #fff;
	border-left: 2px solid #0f172a;
	box-shadow: -8px 0 0 #0f172a, -12px 12px 32px rgba(15, 23, 42, 0.18);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.3, 1);
}
.yk-drawer.is-open .yk-drawer-panel { transform: translateX(0); }

/* 抽屉头 */
.yk-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 60%, #fce7f3 100%);
	border-bottom: 2px solid #0f172a;
}
.yk-drawer-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 18px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
}
.yk-drawer-title svg,
.yk-drawer-title i { width: 18px; height: 18px; color: var(--yk-purple-600); }
.yk-drawer-close {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 0 #0f172a;
	color: #0f172a;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.yk-drawer-close:hover {
	background: #fefce8;
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-drawer-close svg,
.yk-drawer-close i { width: 16px; height: 16px; stroke-width: 3; }

/* 抽屉体 */
.yk-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* 字段 */
.yk-field { display: flex; flex-direction: column; gap: 6px; }
.yk-field > label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
}
.yk-field > label em {
	color: #ef4444;
	font-style: normal;
	font-weight: 900;
}
.yk-field-counter {
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	color: #94a3b8;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.yk-field input[type="text"],
.yk-field textarea {
	width: 100%;
	padding: 10px 12px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 0 #0f172a;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	transition: box-shadow 0.15s, transform 0.15s;
	resize: vertical;
}
.yk-field input[type="text"]:focus,
.yk-field textarea:focus {
	outline: none;
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--yk-purple-600);
	border-color: var(--yk-purple-600);
}
.yk-field-hint {
	margin: 0;
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}

/* 图片上传 · 通用预览框 */
.yk-upload {
	position: relative;
	cursor: pointer;
}
.yk-upload-preview {
	position: relative;
	background: #fff;
	border: 2px dashed #cbd5e1;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 0 #0f172a;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	color: #94a3b8;
	transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s, box-shadow 0.15s;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
.yk-upload:hover .yk-upload-preview {
	border-color: var(--yk-purple-600);
	color: var(--yk-purple-600);
	background-color: #faf5ff;
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-upload-preview svg,
.yk-upload-preview i { width: 22px; height: 22px; stroke-width: 2; }
.yk-upload-tip {
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
}
.yk-upload-preview.has-image {
	border-style: solid;
	border-color: #0f172a;
	background-color: transparent;
	color: transparent;
}
.yk-upload-preview.has-image svg,
.yk-upload-preview.has-image i,
.yk-upload-preview.has-image .yk-upload-tip { opacity: 0; }

/* 封面图：宽矩形 */
.yk-upload-cover .yk-upload-preview {
	height: 110px;
	width: 100%;
}

/* 头像：圆形 + 旁边的说明文字 */
.yk-upload-avatar {
	display: flex;
	align-items: center;
	gap: 14px;
}
.yk-upload-avatar .yk-upload-preview {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	flex-shrink: 0;
}
.yk-upload-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	line-height: 1.4;
}
.yk-upload-meta strong {
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
}
.yk-upload-meta span { color: #94a3b8; }

/* × 移除按钮 */
.yk-upload-clear {
	position: absolute;
	top: -8px;
	left: 68px; /* 头像 76 - 8 */
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ef4444;
	border: 2px solid #0f172a;
	border-radius: 50%;
	box-shadow: 2px 2px 0 #0f172a;
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
	padding: 0;
	z-index: 2;
}
.yk-upload-clear:hover {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-upload-clear svg,
.yk-upload-clear i { width: 12px; height: 12px; stroke-width: 3; }
.yk-upload-cover .yk-upload-clear {
	top: -8px;
	right: -8px;
	left: auto;
}

/* 图标选择 */
.yk-icon-picker {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}
.yk-icon-opt input { position: absolute; opacity: 0; pointer-events: none; }
.yk-icon-opt-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 0 #0f172a;
	color: #0f172a;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.yk-icon-opt-box svg,
.yk-icon-opt-box i { width: 18px; height: 18px; }
.yk-icon-opt:hover .yk-icon-opt-box {
	background: #fefce8;
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-icon-opt input:checked + .yk-icon-opt-box {
	background: #0f172a;
	color: #fde047;
	box-shadow: 2px 2px 0 #ef4444;
	transform: none;
}

/* 颜色选择 */
.yk-color-picker {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.yk-color-opt {
	position: relative;
	cursor: pointer;
}
.yk-color-opt input { position: absolute; opacity: 0; pointer-events: none; }
.yk-color-opt-dot {
	display: block;
	width: 32px;
	height: 32px;
	background: var(--c, #64748b);
	border: 2px solid #0f172a;
	border-radius: 50%;
	box-shadow: 2px 2px 0 #0f172a;
	transition: transform 0.15s, box-shadow 0.15s;
}
.yk-color-opt:hover .yk-color-opt-dot {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 #0f172a;
}
.yk-color-opt input:checked + .yk-color-opt-dot {
	box-shadow: 2px 2px 0 #ef4444;
	outline: 2px solid #fff;
	outline-offset: -6px;
}

/* 错误 / 成功提示 */
.yk-create-msg {
	padding: 10px 14px;
	border: 2px solid #0f172a;
	border-radius: 0.5rem;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 2px 2px 0 #0f172a;
}
.yk-create-msg-error {
	background: #fef2f2;
	color: #b91c1c;
}
.yk-create-msg-success {
	background: #ecfdf5;
	color: #047857;
}

/* 抽屉脚 */
.yk-drawer-foot {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 14px 20px;
	background: #fafbfc;
	border-top: 2px solid #0f172a;
}

@media (max-width: 540px) {
	.yk-drawer-panel { width: 100vw; }
	.yk-icon-picker { grid-template-columns: repeat(5, 1fr); }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
	.yk-circles-grid { grid-template-columns: 1fr; }
	.yk-circles-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.yk-explore-cards { grid-template-columns: 1fr; }
	.yk-features-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.yk-hero {
		padding: 24px;
		flex-direction: column;
		align-items: stretch;
	}
	.yk-hero-title { font-size: 22px; }
	.yk-hero-art { width: 100%; height: 140px; }
	.yk-circles-side { grid-template-columns: 1fr; }
	.yk-features-row { grid-template-columns: 1fr; }
	.yk-circle-cards { grid-template-columns: 1fr; }
}

/* ==============================================================
 * 旧的 17. (原 16.) CTA "查看主页"  ↓↓↓
 * ============================================================== */
.yk-author-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 14px;
	background: #fff;
	border: 2px solid #0f172a;
	border-radius: 0.375rem;
	box-shadow: 2px 2px 0 #0f172a;
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	color: #0f172a;
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.yk-author-cta:hover {
	background: #fefce8;
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #0f172a;
}
.yk-author-cta svg,
.yk-author-cta i { width: 14px; height: 14px; }

/* ==============================================================
 * 28. 发帖 / 编辑页（page-community-editor.php）· 紫色双栏 UI
 *     fallback 样式：当 Tailwind 未 rebuild 时，arbitrary class 失效，
 *     这里给关键尺寸 / 颜色 / 阴影兜底，保证布局不崩。
 *     已 npm run build 后这些 class 会被 Tailwind 编译，本节无副作用。
 * ============================================================== */
.yk-editor-page { background: #f8f9fc; }
.yk-editor-page .text-\[15px\]    { font-size: 15px; }
.yk-editor-page .text-\[14px\]    { font-size: 14px; }
.yk-editor-page .text-\[13px\]    { font-size: 13px; }
.yk-editor-page .text-\[11px\]    { font-size: 11px; }
.yk-editor-page .text-\[10px\]    { font-size: 10px; }

.yk-editor-page .max-w-\[1240px\] { max-width: 1240px; }
.yk-editor-page .min-h-\[300px\]  { min-height: 300px; }
.yk-editor-page .w-\[100px\]      { width: 100px; }
.yk-editor-page .h-\[110px\]      { height: 110px; }
.yk-editor-page .w-\[160px\]      { width: 160px; }
.yk-editor-page .h-\[120px\]      { height: 120px; }
.yk-editor-page .w-\[1px\]        { width: 1px; }
.yk-editor-page .min-w-\[220px\]  { min-width: 220px; }

@media (min-width: 1024px) {
	.yk-editor-page .lg\:w-\[600px\] { width: 600px; }
}

.yk-editor-page .bg-\[\#f8f9fa\]  { background-color: #f8f9fa; }
.yk-editor-page .bg-\[\#fcfdff\]  { background-color: #fcfdff; }
.yk-editor-page .bg-\[\#f5f7fa\]  { background-color: #f5f7fa; }

.yk-editor-page .shadow-\[0_4px_20px_-4px_rgba\(0\,0\,0\,0\.05\)\]  { box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05); }
.yk-editor-page .shadow-\[0_2px_10px_-4px_rgba\(0\,0\,0\,0\.05\)\]  { box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.05); }
.yk-editor-page .shadow-\[0_4px_14px_0_rgba\(99\,102\,241\,0\.39\)\]  { box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.39); }
.yk-editor-page .hover\:shadow-\[0_6px_20px_rgba\(99\,102\,241\,0\.23\)\]:hover { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.23); }
.yk-editor-page .shadow-\[0_0_40px_rgba\(167\,139\,250\,0\.4\)\]      { box-shadow: 0 0 40px rgba(167, 139, 250, 0.4); }

.yk-editor-page .hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }

.yk-editor-page .rounded-\[2rem\]    { border-radius: 2rem; }
.yk-editor-page .rounded-\[2\.5rem\] { border-radius: 2.5rem; }
.yk-editor-page .rounded-\[100\%\]   { border-radius: 100%; }

.yk-editor-page .from-purple-100\/50 { --tw-gradient-from: rgba(243, 232, 255, 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(243, 232, 255, 0)); }
.yk-editor-page .bg-purple-200\/30   { background-color: rgba(233, 213, 255, 0.3); }
.yk-editor-page .bg-indigo-200\/40   { background-color: rgba(199, 210, 254, 0.4); }
.yk-editor-page .bg-indigo-50\/30    { background-color: rgba(238, 242, 255, 0.3); }
.yk-editor-page .bg-indigo-50\/60    { background-color: rgba(238, 242, 255, 0.6); }
.yk-editor-page .hover\:bg-indigo-50\/50:hover { background-color: rgba(238, 242, 255, 0.5); }
.yk-editor-page .border-indigo-100\/50 { border-color: rgba(224, 231, 255, 0.5); }
.yk-editor-page .border-gray-100\/50   { border-color: rgba(243, 244, 246, 0.5); }

/* 链接装饰统一去掉（防主题全局 a 下划线干扰） */
.yk-editor-page a.no-underline { text-decoration: none !important; }

/* 让侧栏卡片在窄屏依然紧凑 */
@media (max-width: 1023px) {
	.yk-editor-page aside.lg\:w-\[600px\] { width: 100%; }
}

/* WordPress 编辑器（wp_editor / TinyMCE）容器适配 */
.yk-editor-page .yk-cmt-wp-editor { background: #fff; }
.yk-editor-page .yk-cmt-wp-editor .wp-editor-wrap { border: none; box-shadow: none; }
.yk-editor-page .yk-cmt-wp-editor .wp-editor-tools {
	background: #f8f9fa;
	border-bottom: 1px solid #e5e7eb;
	padding: 6px 8px;
	margin: 0;
}
.yk-editor-page .yk-cmt-wp-editor .wp-media-buttons .button {
	border-radius: 8px;
	border-color: #e5e7eb;
	color: #6366f1;
	background: #fff;
}
.yk-editor-page .yk-cmt-wp-editor .wp-media-buttons .button:hover {
	background: #eef2ff;
	border-color: #c7d2fe;
	color: #4f46e5;
}
.yk-editor-page .yk-cmt-wp-editor .wp-switch-editor {
	border-radius: 6px 6px 0 0;
	border-color: #e5e7eb;
	background: #fff;
}
.yk-editor-page .yk-cmt-wp-editor .switch-tmce.wp-switch-editor,
.yk-editor-page .yk-cmt-wp-editor .switch-html.wp-switch-editor {
	font-size: 13px;
}
.yk-editor-page .yk-cmt-wp-editor .tab-active .wp-switch-editor,
.yk-editor-page .yk-cmt-wp-editor .wp-switch-editor:focus {
	color: #6366f1;
	box-shadow: none;
}
.yk-editor-page .yk-cmt-wp-editor div.mce-toolbar-grp {
	background: #f8f9fa;
	border-bottom-color: #e5e7eb;
}
.yk-editor-page .yk-cmt-wp-editor .mce-tinymce,
.yk-editor-page .yk-cmt-wp-editor .wp-editor-container {
	border: none !important;
	box-shadow: none !important;
}
.yk-editor-page .yk-cmt-wp-editor:focus-within {
	border-color: #a5b4fc;
	box-shadow: 0 0 0 4px rgba(238, 242, 255, 0.7);
}
.yk-editor-page .yk-cmt-wp-editor .quicktags-toolbar {
	background: #f8f9fa;
	border-bottom: 1px solid #e5e7eb;
}
.yk-editor-page .yk-cmt-wp-editor .wp-editor-area {
	border: none !important;
	box-shadow: none !important;
	font-family: inherit;
}

/* 上传中 loading spinner */
.yk-editor-page .yk-loading,
.yk-loading {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(99, 102, 241, 0.25);
	border-top-color: #6366f1;
	border-radius: 50%;
	animation: yk-loading-spin 0.7s linear infinite;
	vertical-align: middle;
}
@keyframes yk-loading-spin {
	to { transform: rotate(360deg); }
}