/**
 * Hui 社区模块样式
 *
 * 三栏布局：左侧导航 + 中间内容 + 右侧热门
 *
 * @package    Hui
 * @subpackage Community
 * @since      1.5.0
 */

/* ============================================================================
   重置父主题布局
   ============================================================================ */

.hui-community-page .xun-layout-wrapper,
.hui-community-page .xun-layout-content {
	display: block !important;
	max-width: none !important;
	padding: 0 !important;
}

/* 隐藏父主题的所有侧边栏和社区布局 */
.hui-community-page .xun-layout-sidebar-cell,
.hui-community-page .xun-layout-sidebar,
.hui-community-page .xun-community-sidebar,
.hui-community-page .xun-community-layout.xun-community-forum,
.hui-community-page .xun-bbs-sidebar,
.hui-community-page .xun-sidebar,
.hui-community-page .sidebar-community-left,
.hui-community-page [class*="xun-community-sidebar"],
.hui-community-page [class*="xun-bbs-sidebar"],
.hui-community-page .xun-community-cats,
.hui-community-page .xun-community-stats,
.hui-community-page .xun-community-discover,
.hui-community-page .xun-community-active-authors,
.hui-community-page .xun-community-board-card,
.hui-community-page .xun-forum-list-header,
.hui-community-page .xun-forum-list,
.hui-community-page .xun-forum-post-card,
.hui-community-page .xun-no-posts,
.hui-community-page .xun-community-follow-empty,
.hui-community-page .xun-community-cats-header,
.hui-community-page .xun-community-cats-nav,
.hui-community-page .xun-subcat-item,
.hui-community-page .xun-community-create-board-widget {
	display: none !important;
}

/* 隐藏父主题社区页面的原始内容区域 */
.hui-community-page .xun-community-main,
.hui-community-page .xun-bbs-main {
	display: none !important;
}

/* 隐藏父主题的分页 */
.hui-community-page > .xun-pagination {
	display: none !important;
}

/* 隐藏父主题的面包屑 */
.hui-community-page .xun-breadcrumb {
	display: none !important;
}

/* 隐藏父主题的社区轮播 */
.hui-community-page .xun-community-slider {
	display: none !important;
}

/* 隐藏父主题社区页面的整个布局容器 */
.hui-community-page .xun-community-layout {
	display: none !important;
}

/* 隐藏父主题 archive.php 中的侧边栏（包含小工具区域） */
.hui-community-page .site-main > .xun-layout-wrapper > .xun-layout-sidebar-cell {
	display: none !important;
}

/* 确保子主题的布局正常显示 */
.hui-community-page .hui-community-layout {
	display: grid !important;
}

/* 确保子主题的容器正确显示 */
.hui-community-page .hui-community-wrapper {
	display: block !important;
	width: 100% !important;
}

/* ============================================================================
   主容器
   ============================================================================ */

.hui-community-wrapper {
	background: var(--color-bg-layout);
	min-height: calc(100vh - var(--xun-header-height, 60px));
}

.hui-community-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 1.5rem 1rem;
}

/* ============================================================================
   三栏布局
   ============================================================================ */

.hui-community-layout {
	display: grid;
	grid-template-columns: 200px 1fr 280px;
	gap: 1.5rem;
	align-items: start;
}

/* 确保子主题布局正常显示 */
.hui-community-page .hui-community-layout {
	display: grid !important;
}

/* ============================================================================
   左侧边栏
   ============================================================================ */

.hui-community-sidebar-left {
	position: sticky;
	top: calc(var(--xun-header-height, 60px) + 1rem);
	width: 100%;
	min-width: 0;
}

.hui-nav-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	width: 100%;
}

/* 导航列表 */
.hui-nav-list {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0;
	width: 100%;
}

.hui-nav-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
	transition: all 0.2s var(--ease-smooth);
	border-left: 3px solid transparent;
}

.hui-nav-item:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-nav-item.is-active {
	background: var(--color-fill-tertiary);
	color: var(--xun-secondary, var(--color-secondary));
	border-left-color: var(--xun-secondary, var(--color-secondary));
	font-weight: 600;
}

.hui-nav-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: inherit;
}

.hui-nav-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-nav-count {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-text-quaternary);
	font-weight: 500;
}

.hui-nav-item.is-active .hui-nav-count {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 分隔线 */
.hui-nav-divider {
	height: 1px;
	background: var(--color-border-secondary);
	margin: 0.5rem 1rem;
}

/* 圈子区域 */
.hui-nav-section {
	padding: 0.5rem 0;
}

.hui-nav-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 1rem;
}

.hui-nav-section-title {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hui-nav-list--circles {
	padding: 0;
}

.hui-nav-item--circle {
	padding: 0.625rem 1rem;
}

.hui-nav-circle-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--color-fill-tertiary);
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
}

.hui-nav-item--circle.is-active .hui-nav-circle-icon {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-nav-empty {
	padding: 1rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* 创建圈子按钮 - 简洁的 + 图标按钮 */
.hui-nav-card .hui-nav-footer {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--color-border-secondary);
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.hui-nav-card .hui-nav-create-circle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-nav-card .hui-nav-create-circle-btn:hover {
	background: var(--color-fill-tertiary);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-nav-card .hui-nav-create-circle-btn:active {
	transform: scale(0.95);
}

.hui-nav-card .hui-nav-create-circle-btn svg {
	flex-shrink: 0;
}

/* ============================================================================
   中间内容区
   ============================================================================ */

.hui-community-main {
	min-width: 0;
}

/* 发帖框 */
.hui-post-form-card {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 1rem;
}

.hui-post-form-collapsed {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	cursor: pointer;
}

.hui-post-form-avatar img {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
}

.hui-post-form-input-fake {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-collapsed:hover .hui-post-form-input-fake {
	background: var(--color-fill-tertiary);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-placeholder {
	color: var(--color-text-tertiary);
	font-size: 0.875rem;
}

.hui-post-form-camera {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-camera:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
	transform: scale(1.05);
}

/* 发帖框 - 展开状态 */
.hui-post-form-card {
	position: relative;
}

.hui-post-form-card.is-expanded .hui-post-form-collapsed {
	display: none;
}

.hui-post-form-expanded {
	display: none;
	padding: 1rem;
}

.hui-post-form-card.is-expanded .hui-post-form-expanded {
	display: block;
}

/* 标题输入行 */
.hui-post-form-title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	padding-right: 2.5rem; /* 为关闭按钮留出空间 */
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-post-form-title-input {
	flex: 1;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-text);
	outline: none;
}

.hui-post-form-title-input::placeholder {
	color: var(--color-text-quaternary);
	font-weight: 400;
}

.hui-post-form-title-count {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-text-quaternary);
}

/* 内容输入区 */
.hui-post-form-content-row {
	margin-bottom: 0.75rem;
}

.hui-post-form-content-input {
	width: 100%;
	min-height: 100px;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 0.9375rem;
	color: var(--color-text);
	line-height: 1.6;
	resize: none;
	outline: none;
}

.hui-post-form-content-input::placeholder {
	color: var(--color-text-quaternary);
}

/* 工具栏 */
.hui-post-form-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-post-form-tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-wrap: wrap;
}

.hui-post-form-tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-tool-btn:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-post-form-tool-btn.is-active {
	background: var(--color-primary-bg);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-tool-btn svg {
	flex-shrink: 0;
}

/* 圈子选择器 */
.hui-post-form-circle-selector {
	position: relative;
}

/* 圈子必选标记 */
.hui-post-form-circle-required {
	color: var(--color-error, #ef4444);
	font-size: 0.75rem;
	margin-left: 0.125rem;
}

/* 圈子选择器错误状态 */
.hui-post-form-circle-selector.is-error .hui-post-form-tool-btn {
	border-color: var(--color-error, #ef4444);
	background: var(--color-error-bg, #fef2f2);
	animation: hui-shake 0.5s ease-in-out;
}

@keyframes hui-shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
	20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* 新版圈子下拉菜单 - 带分类标签 */
.hui-post-form-circle-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 380px;
	max-height: 400px;
	margin-top: 0.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-dropdown);
	overflow: hidden;
	display: none;
	z-index: 1000;
}

.hui-post-form-circle-selector.is-open .hui-post-form-circle-dropdown {
	display: flex;
	flex-direction: column;
}

/* 搜索框 */
.hui-circle-dropdown-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: var(--color-fill-quaternary);
	margin: 0.5rem;
	border-radius: var(--radius-md, 8px);
}

.hui-circle-dropdown-search svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-text-tertiary);
}

.hui-circle-dropdown-search-input {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	font-size: 0.8125rem;
	color: var(--color-text);
}

.hui-circle-dropdown-search-input::placeholder {
	color: var(--color-text-tertiary);
}

/* 分类标签 */
.hui-circle-dropdown-tabs {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0 0.75rem 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hui-circle-dropdown-tabs::-webkit-scrollbar {
	display: none;
}

.hui-circle-dropdown-tab {
	flex-shrink: 0;
	padding: 0.25rem 0.625rem;
	background: var(--color-fill-quaternary);
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	white-space: nowrap;
}

.hui-circle-dropdown-tab:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-circle-dropdown-tab.is-active {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

/* 圈子列表 */
.hui-circle-dropdown-list {
	flex: 1;
	overflow-y: auto;
	max-height: 280px;
	border-top: 1px solid var(--color-border-secondary);
}

/* 圈子面板 */
.hui-circle-dropdown-panel {
	display: none;
	padding: 0.5rem;
}

.hui-circle-dropdown-panel.is-active {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.375rem;
}

/* 圈子项 - 卡片样式 */
.hui-circle-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem;
	background: var(--color-fill-quaternary);
	border: 1px solid transparent;
	border-radius: var(--radius-md, 8px);
	text-align: left;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-dropdown-item:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border-secondary);
}

.hui-circle-dropdown-item.is-selected {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	border-color: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

.hui-circle-dropdown-item.is-selected .hui-circle-dropdown-item-name {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 圈子图标 */
.hui-circle-dropdown-item-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-bg-container);
	border-radius: var(--radius-sm, 6px);
	overflow: hidden;
	color: var(--color-text-quaternary);
}

.hui-circle-dropdown-item-icon svg {
	width: 16px;
	height: 16px;
}

.hui-circle-dropdown-item-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 圈子首字母（无头像时显示） */
.hui-circle-dropdown-item-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-bg-container);
	background: linear-gradient(135deg, var(--xun-secondary, var(--color-secondary)) 0%, var(--xun-primary, var(--color-primary)) 100%);
	border-radius: inherit;
}

/* 圈子信息 */
.hui-circle-dropdown-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hui-circle-dropdown-item-name {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

.hui-circle-dropdown-item-stats {
	font-size: 0.6875rem;
	color: var(--color-text-tertiary);
	line-height: 1.3;
}

/* 空状态 */
.hui-circle-dropdown-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 1.5rem 1rem;
	color: var(--color-text-tertiary);
}

.hui-circle-dropdown-empty svg {
	width: 28px;
	height: 28px;
	opacity: 0.4;
}

.hui-circle-dropdown-empty span {
	font-size: 0.75rem;
}

/* 搜索结果高亮 */
.hui-circle-dropdown-item.is-hidden {
	display: none !important;
}

/* 响应式 - 圈子选择器 */
@media (max-width: 768px) {
	.hui-post-form-circle-dropdown {
		width: 320px;
		left: auto;
		right: 0;
	}
	
	.hui-circle-dropdown-panel.is-active {
		grid-template-columns: 1fr;
	}
	
	.hui-circle-dropdown-item-icon {
		width: 28px;
		height: 28px;
	}
}

/* 操作按钮区 */
.hui-post-form-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.hui-post-form-visibility-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-visibility-btn:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-post-form-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.5rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-submit-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
	transform: translateY(-1px);
}

.hui-post-form-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* 关闭按钮 */
.hui-post-form-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

/* 响应式 - 发帖表单 */
@media (max-width: 768px) {
	.hui-post-form-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.hui-post-form-tools {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.5rem 0;
	}

	.hui-post-form-tool-btn {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0.625rem 0.25rem;
		gap: 0.25rem;
	}

	.hui-post-form-tool-btn span {
		font-size: 0.75rem;
	}

	.hui-post-form-tool-btn svg {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}

	.hui-post-form-actions {
		justify-content: flex-end;
	}

	.hui-post-form-images-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 排序栏 */
.hui-posts-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.375rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-sm, 6px);
}

.hui-posts-sort {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

.hui-posts-sort-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	border-radius: var(--xun-radius-sm, 6px);
	text-decoration: none;
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
	font-weight: 500;
	transition: all 0.2s var(--ease-smooth);
}

.hui-posts-sort-item:hover {
	color: var(--color-text);
	background: var(--color-fill-quaternary);
}

.hui-posts-sort-item.is-active {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-posts-sort-item svg {
	flex-shrink: 0;
}

/* 搜索框 */
.hui-posts-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.hui-posts-search-input {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: none;
	border-radius: var(--xun-radius-sm, 6px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-posts-search-input:focus-within {
	background: var(--color-fill-tertiary);
	box-shadow: 0 0 0 2px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.15);
}

.hui-posts-search-input svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-posts-search-input input {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	font-size: 0.8125rem;
	color: var(--color-text);
}

.hui-posts-search-input input::placeholder {
	color: var(--color-text-tertiary);
}

.hui-posts-search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	background: var(--color-fill-secondary);
	border: none;
	border-radius: 50%;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
}

.hui-posts-search-clear:hover {
	background: var(--color-fill);
	color: var(--color-text-secondary);
}

.hui-posts-search-input.has-value .hui-posts-search-clear {
	display: flex;
}

/* ============================================================================
   帖子卡片
   ============================================================================ */

/* 瀑布流容器 - 使用 Flexbox 实现真正的瀑布流 */
.hui-posts-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* 瀑布流列 */
.hui-posts-column {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* 默认双栏 */
.hui-posts-list .hui-posts-column {
	width: calc(50% - 0.5rem);
	max-width: calc(50% - 0.5rem);
}

/* 三栏布局 */
.hui-posts-columns--3 .hui-posts-list .hui-posts-column {
	width: calc(33.333% - 0.667rem);
	max-width: calc(33.333% - 0.667rem);
}

/* 单栏布局 */
.hui-posts-columns--1 .hui-posts-list .hui-posts-column {
	width: 100%;
	max-width: 100%;
}

/* 回退：如果 JS 未初始化，使用 CSS Grid 布局（从左到右排列） */
.hui-posts-list:not(.hui-posts-list--masonry) {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.hui-posts-columns--3 .hui-posts-list:not(.hui-posts-list--masonry) {
	grid-template-columns: repeat(3, 1fr);
}

.hui-posts-columns--1 .hui-posts-list:not(.hui-posts-list--masonry) {
	grid-template-columns: 1fr;
}

/* 社区页面帖子卡片 - 限定在 .hui-posts-list 容器内，避免影响首页模块 */
.hui-posts-list .hui-post-card {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary);
	overflow: hidden;
	padding: 1rem;
}

/* JS 瀑布流模式下，卡片不需要 margin-bottom */
.hui-posts-list--masonry .hui-post-card {
	margin-bottom: 0;
}

/* 帖子头部 */
.hui-post-card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.hui-post-card-avatar img {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
	display: block;
}

.hui-post-card-author {
	flex: 1;
	min-width: 0;
}

.hui-post-card-author-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.hui-post-card-author-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
}

.hui-post-card-author-name:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 用户等级徽章 - 继承父主题样式，不覆盖背景 */
.hui-post-card-level {
	display: inline-flex;
	align-items: center;
}

/* 等级徽章图标模式 - 透明背景 */
.hui-post-card-level.xun-level-badge--icon {
	background: transparent;
	border: none;
	padding: 0;
}

.hui-post-card-level.xun-level-badge--icon .xun-level-icon {
	object-fit: contain;
	width: auto;
	height: 18px;
	max-height: 20px;
	display: block;
}

/* 等级徽章文字模式 - 使用等级配置的颜色 */
.hui-post-card-level.xun-level-badge--text {
	color: var(--level-color, var(--color-text-tertiary));
	background: var(--level-bg-color, var(--color-fill-quaternary));
	padding: 0.125rem 0.375rem;
	font-size: 0.625rem;
	border-radius: var(--radius-sm, 4px);
	font-weight: 500;
}

.hui-post-card-meta {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.hui-post-card-from {
	color: var(--color-text-tertiary);
}

/* 头部操作区域 */
.hui-post-card-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* 私信按钮 */
.hui-post-card-message-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-fill-quaternary);
	border-radius: 50%;
	color: var(--color-text-secondary);
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-message-btn:hover {
	background: var(--color-fill-tertiary);
	color: var(--xun-secondary, var(--color-secondary));
}

/* 关注按钮 */
.hui-post-card-follow {
	flex-shrink: 0;
	padding: 0.375rem 1rem;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-follow:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-follow.is-following {
	background: var(--color-fill-quaternary);
	border-color: transparent;
	color: var(--color-text-tertiary);
}

.hui-post-card-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
	font-size: 0.6875rem;
	border-radius: var(--radius-sm, 4px);
	font-weight: 500;
}

/* 等级徽章图标模式 - 透明背景 */
.hui-post-card-badge.xun-level-badge--icon {
	background: transparent;
	border: none;
	padding: 0;
}

.hui-post-card-badge.xun-level-badge--icon .xun-level-icon {
	object-fit: contain;
	width: auto;
	height: 18px;
	max-height: 20px;
	display: block;
}

/* 等级徽章文字模式 - 使用等级配置的颜色 */
.hui-post-card-badge.xun-level-badge--text {
	color: var(--level-color, var(--color-text-tertiary));
	background: var(--level-bg-color, var(--color-fill-quaternary));
}

/* 三点按钮容器 */
.hui-post-card-more-wrapper {
	position: relative;
	flex-shrink: 0;
}

.hui-post-card-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-more:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

/* 下拉菜单 */
.hui-post-card-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 120px;
	margin-top: 0.25rem;
	padding: 0.375rem 0;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s var(--ease-smooth);
	z-index: 100;
}

.hui-post-card-more-wrapper.is-open .hui-post-card-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hui-post-card-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem 0.875rem;
	background: transparent;
	border: none;
	font-size: 0.8125rem;
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s var(--ease-smooth);
}

.hui-post-card-dropdown-item:hover {
	background: var(--color-fill-quaternary);
}

.hui-post-card-dropdown-item svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-post-card-dropdown-item--danger {
	color: var(--color-error);
}

.hui-post-card-dropdown-item--danger svg {
	color: var(--color-error);
}

.hui-post-card-dropdown-item--danger:hover {
	background: var(--color-error-bg);
}

/* 下拉菜单项激活状态（置顶/加精） */
.hui-post-card-dropdown-item.is-active {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-dropdown-item.is-active svg {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 帖子内容 */
.hui-post-card-content {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hui-post-card-badges {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.5rem;
}

.hui-post-card-badges .hui-post-card-badge {
	padding: 0.25rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
}

.hui-post-card-badge--featured {
	background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
	color: #fff;
}

.hui-post-card-badge--pinned {
	background: var(--color-error-bg);
	color: var(--color-error);
}

.hui-post-card-badge--official {
	background: var(--color-info);
	color: #fff;
}

/* 权限徽章 - 使用动态颜色 */
.hui-post-card-badge--permission {
	background: oklch(from var(--badge-color, var(--color-text-tertiary)) l c h / 0.15);
	color: var(--badge-color, var(--color-text-tertiary));
	border: 1px solid oklch(from var(--badge-color, var(--color-text-tertiary)) l c h / 0.3);
}

.hui-post-card-title {
	margin: 0 0 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 标题内联徽章 */
.hui-post-card-title .hui-post-card-badge {
	display: inline-flex;
	vertical-align: middle;
	margin-right: 0.375rem;
}

.hui-post-card-content:hover .hui-post-card-title {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-excerpt {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 锁定内容提示（未加入圈子时显示） - 紧凑水平条设计 */
.hui-post-card-locked {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	padding: 0.75rem 1rem;
	margin: 0.5rem 0;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%);
	border: 1px dashed rgba(245, 158, 11, 0.3);
	border-radius: var(--radius-md, 8px);
}

.hui-post-card-locked-text {
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.hui-post-card-locked-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: var(--radius-full, 9999px);
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.hui-post-card-locked-btn:hover {
	filter: brightness(1.1);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-post-card-locked {
		background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
		border-color: rgba(245, 158, 11, 0.25);
	}
}

.dark .hui-post-card-locked {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
	border-color: rgba(245, 158, 11, 0.25);
}

/* 图片网格 */
.hui-post-card-images {
	display: grid;
	gap: 0.375rem;
	margin-top: 0.75rem;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	max-width: 100%;
}

.hui-post-card-images--single {
	grid-template-columns: 1fr;
	max-width: 280px;
}

.hui-post-card-images--single .hui-post-card-image {
	aspect-ratio: auto;
}

.hui-post-card-images--single .hui-post-card-image img {
	max-height: 280px;
	width: auto;
	object-fit: contain;
	background: var(--color-fill-quaternary);
}

.hui-post-card-images--grid-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 360px;
}

.hui-post-card-images--grid-3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 100%;
}

.hui-post-card-images--grid-4 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 360px;
}

.hui-post-card-images--grid {
	grid-template-columns: repeat(3, 1fr);
	max-width: 100%;
}

.hui-post-card-image {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-md, 6px);
}

.hui-post-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-post-card-image-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
}

/* 图片灯箱链接样式 */
a.hui-post-card-image {
	display: block;
	cursor: zoom-in;
}

a.hui-post-card-image img {
	transition: transform 0.3s var(--ease-smooth);
}

a.hui-post-card-image:hover img {
	transform: scale(1.05);
}

/* 帖子底部 */
.hui-post-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.625rem 0.875rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-post-card-tags {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	min-width: 0;
	margin-top: 0.75rem;
}

.hui-post-card-stats {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.hui-post-card-stat {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-post-card-stat svg {
	flex-shrink: 0;
	color: var(--color-text-quaternary);
	width: 14px;
	height: 14px;
}

/* ============================================================================
   右侧边栏
   ============================================================================ */

.hui-community-sidebar-right {
	position: sticky;
	top: calc(var(--xun-header-height, 60px) + 1rem);
}

.hui-sidebar-widgets {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing, 0.25rem) * 3); /* 使用父主题间距变量，相当于 space-y-3 = 0.75rem */
}

/* .hui-widget 样式已移至 community-widgets.css */

.hui-widget-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-widget-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--xun-secondary, var(--color-secondary));
	border-radius: var(--radius-md, 6px);
	color: #fff;
}

.hui-widget-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-widget-body {
	padding: 0.5rem 0;
}

/* 圈子列表 */
.hui-circle-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hui-circle-item {
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-circle-item:last-child {
	border-bottom: none;
}

.hui-circle-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	transition: background 0.2s var(--ease-smooth);
}

.hui-circle-link:hover {
	background: var(--color-fill-quaternary);
}

.hui-circle-avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, 
		var(--xun-secondary, var(--color-secondary)) 0%, 
		var(--xun-primary, var(--color-primary)) 100%
	);
	border-radius: var(--radius-md, 6px);
	color: #fff;
}

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

.hui-circle-name {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-circle-stats {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 话题列表 */
.hui-topic-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hui-topic-item {
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-topic-item:last-child {
	border-bottom: none;
}

.hui-topic-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	transition: background 0.2s var(--ease-smooth);
}

.hui-topic-link:hover {
	background: var(--color-fill-quaternary);
}

.hui-topic-hash {
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-topic-name {
	flex: 1;
	min-width: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-topic-stats {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* ============================================================================
   分页
   ============================================================================ */

.hui-posts-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: 1.5rem;
	padding: 1rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
}

.hui-posts-pagination a,
.hui-posts-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-posts-pagination a:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-posts-pagination .current {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-posts-pagination .prev,
.hui-posts-pagination .next {
	padding: 0;
}

/* ============================================================================
   无限滚动加载指示器
   ============================================================================ */

.hui-infinite-scroll-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem 1rem;
	margin-top: 1rem;
	/* 在瀑布流布局中占据整行 */
	width: 100%;
	flex-basis: 100%;
}

.hui-infinite-scroll-loader.is-loading .hui-infinite-scroll-spinner svg {
	animation: hui-spin 1s linear infinite;
}

.hui-infinite-scroll-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-infinite-scroll-spinner svg {
	opacity: 0.6;
}

.hui-infinite-scroll-text {
	font-size: 0.875rem;
	color: var(--color-text-tertiary);
}

.hui-infinite-scroll-end {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	margin-top: 1rem;
	/* 在瀑布流布局中占据整行 */
	width: 100%;
	flex-basis: 100%;
}

.hui-infinite-scroll-end span {
	font-size: 0.875rem;
	color: var(--color-text-quaternary);
	position: relative;
	padding: 0 1.5rem;
}

.hui-infinite-scroll-end span::before,
.hui-infinite-scroll-end span::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 40px;
	height: 1px;
	background: var(--color-border-secondary);
}

.hui-infinite-scroll-end span::before {
	right: 100%;
}

.hui-infinite-scroll-end span::after {
	left: 100%;
}

@keyframes hui-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================================
   空状态
   ============================================================================ */

.hui-posts-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5rem 2rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	text-align: center;
	min-height: 400px;
}

.hui-posts-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, var(--color-fill-tertiary), var(--color-fill-quaternary));
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-quaternary);
	margin-bottom: 1.5rem;
}

.hui-posts-empty-icon svg {
	width: 48px;
	height: 48px;
	opacity: 0.6;
}

.hui-posts-empty-title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-posts-empty-text {
	margin: 0 0 2rem;
	font-size: 0.9375rem;
	color: var(--color-text-tertiary);
	max-width: 280px;
	line-height: 1.6;
}

.hui-posts-empty .btn {
	padding: 0.75rem 2rem;
	font-size: 0.9375rem;
	border-radius: var(--radius-full, 9999px);
}

/* ============================================================================
   响应式设计
   ============================================================================ */

/* 中大屏幕：缩小侧边栏宽度 */
@media (max-width: 1400px) {
	.hui-community-layout {
		grid-template-columns: 180px 1fr 260px;
		gap: 1.25rem;
	}
}

/* 中等屏幕：隐藏右侧边栏，变成两栏布局 */
@media (max-width: 1280px) {
	.hui-community-layout {
		grid-template-columns: 180px 1fr;
		gap: 1rem;
	}

	.hui-community-sidebar-right {
		display: none;
	}
}

/* 小屏幕：隐藏左侧边栏，变成单栏布局 */
@media (max-width: 1024px) {
	/* 移动端使用顶部筛选导航，隐藏左右侧边栏 */
	.hui-community-sidebar-left,
	.hui-community-sidebar-right {
		display: none;
	}

	/* 单列布局 */
	.hui-community-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* 容器无内边距 */
	.hui-community-container {
		padding: 0;
	}

	/* 发帖框移动端样式 */
	.hui-post-form-card {
		border-radius: 0;
		border-left: none;
		border-right: none;
		border-top: none;
		margin-bottom: 0;
	}

	/* 隐藏排序栏（移动端使用顶部筛选导航） */
	.hui-posts-header {
		display: none;
	}
}

/* 注意：移动端帖子列表样式已移至文件末尾的统一移动端样式块 */

/* ============================================================================
   右侧边栏小工具
   ============================================================================ */

.hui-community-sidebar-right .widget {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	margin-bottom: 1rem;
}

.hui-community-sidebar-right .widget:last-child {
	margin-bottom: 0;
}

.hui-community-sidebar-right .widget-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border-secondary);
}

/* 空状态提示 */
.hui-widget--empty {
	background: var(--color-bg-container);
	border: 1px dashed var(--color-border);
	border-radius: var(--xun-radius, 8px);
}

.hui-widget--empty .hui-widget-body {
	padding: 2rem 1rem;
	text-align: center;
}

.hui-widget-empty-text {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	line-height: 1.6;
}

/* ============================================================================
   社区帖子卡片头像认证徽章修复
   ============================================================================ */

/* 头像容器 - 确保认证徽章容器正确显示 */
.hui-post-card-avatar {
	position: relative;
	flex-shrink: 0;
}

.hui-post-card-avatar .xun-avatar-verified-wrap {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 48px;
}

.hui-post-card-avatar .xun-avatar-verified-wrap > img:first-child {
	width: 48px !important;
	height: 48px !important;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
	display: block;
}

/* 认证徽章尺寸和位置 */
.hui-post-card-avatar .xun-avatar-verified-badge {
	position: absolute;
	width: 16px;
	height: 16px;
	bottom: -2px;
	right: -2px;
}

.hui-post-card-avatar .xun-avatar-verified-badge img,
.hui-post-card-avatar .xun-avatar-verified-badge svg {
	width: 12px;
	height: 12px;
}

/* 发帖表单头像认证徽章 */
.hui-post-form-avatar {
	position: relative;
	flex-shrink: 0;
}

.hui-post-form-avatar .xun-avatar-verified-wrap {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
}

.hui-post-form-avatar .xun-avatar-verified-wrap > img:first-child {
	width: 40px !important;
	height: 40px !important;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
	display: block;
}

.hui-post-form-avatar .xun-avatar-verified-badge {
	position: absolute;
	width: 16px;
	height: 16px;
	bottom: -2px;
	right: -2px;
}

.hui-post-form-avatar .xun-avatar-verified-badge img,
.hui-post-form-avatar .xun-avatar-verified-badge svg {
	width: 12px;
	height: 12px;
}

/* 注意：移动端头像认证徽章样式已移至文件末尾的统一移动端样式块 */

/* ============================================================================
   深色模式
   ============================================================================ */

@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-nav-card,
	:root:not(.light) .hui-post-form-card,
	:root:not(.light) .hui-posts-list .hui-post-card,
	:root:not(.light) .hui-widget,
	:root:not(.light) .hui-posts-pagination,
	:root:not(.light) .hui-posts-empty {
		background: var(--color-bg-container);
		border-color: var(--color-border-secondary);
	}
}

.dark .hui-nav-card,
.dark .hui-post-form-card,
.dark .hui-posts-list .hui-post-card,
.dark .hui-widget,
.dark .hui-posts-pagination,
.dark .hui-posts-empty {
	background: var(--color-bg-container);
	border-color: var(--color-border-secondary);
}

/* ============================================================================
   创建圈子弹窗
   ============================================================================ */
/* ============================================================================
   创建圈子抽屉
   ============================================================================ */

.hui-create-board-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	pointer-events: none;
}

.hui-create-board-drawer.is-active {
	visibility: visible;
	pointer-events: auto;
}

/* 遮罩层 */
.hui-create-board-drawer-overlay {
	position: absolute;
	inset: 0;
	background: var(--color-bg-mask);
	opacity: 0;
	transition: opacity 0.3s var(--ease-smooth);
	cursor: pointer;
}

.hui-create-board-drawer.is-active .hui-create-board-drawer-overlay {
	opacity: 1;
}

/* 抽屉内容 */
.hui-create-board-drawer-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 420px;
	height: 100%;
	background: var(--color-bg-container);
	box-shadow: var(--shadow-modal);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s var(--ease-smooth);
}

.hui-create-board-drawer.is-active .hui-create-board-drawer-content {
	transform: translateX(0);
}

/* 抽屉头部 */
.hui-create-board-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
	flex-shrink: 0;
}

.hui-create-board-drawer-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-create-board-drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-drawer-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

/* 抽屉主体 */
.hui-create-board-drawer-body {
	flex: 1;
	padding: 1rem;
	overflow-y: auto;
	background: var(--color-bg-layout);
}

/* 圈子封面和头像区域 */
.hui-create-board-cover-section {
	position: relative;
	margin-bottom: 2.5rem;
}

/* 背景图上传 */
.hui-create-board-cover {
	position: relative;
	width: 100%;
	height: 120px;
	background: var(--color-fill-tertiary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	overflow: hidden;
}

.hui-create-board-cover-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.hui-create-board-cover-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--color-text-tertiary);
	font-size: 0.8125rem;
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-cover:hover .hui-create-board-cover-placeholder {
	color: var(--color-text-secondary);
	background: var(--color-fill-secondary);
}

.hui-create-board-cover-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-create-board-cover-remove {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: #fff;
	cursor: pointer;
	z-index: 3;
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-cover-remove:hover {
	background: rgba(0, 0, 0, 0.7);
}

/* 头像上传 - 悬浮在封面左下角 */
.hui-create-board-avatar {
	position: absolute;
	left: 1rem;
	bottom: -32px;
	width: 72px;
	height: 72px;
	background: var(--color-bg-container);
	border: 3px solid var(--color-bg-container);
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 4;
}

.hui-create-board-avatar-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.hui-create-board-avatar-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-container);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-avatar:hover .hui-create-board-avatar-placeholder {
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--color-text-secondary);
}

.hui-create-board-avatar-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 表单卡片区域 - 参考图2的设计 */
.hui-create-board-form-card {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	padding: 1rem;
}

/* 表单样式 */
.hui-create-board-form-group {
	margin-bottom: 1rem;
}

.hui-create-board-form-group:first-of-type {
	padding-top: 0;
}

.hui-create-board-form-group:last-child {
	margin-bottom: 0;
	padding-bottom: 1.25rem;
}

.hui-create-board-form-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-create-board-form-label .required {
	color: var(--color-error);
	margin-left: 0.25rem;
}

.hui-create-board-form-input,
.hui-create-board-form-textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	color: var(--color-text);
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-form-input:focus,
.hui-create-board-form-textarea:focus {
	outline: none;
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-create-board-form-textarea {
	min-height: 120px;
	resize: vertical;
}

.hui-create-board-form-hint {
	margin: 0.375rem 0 0;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-create-board-form-hint--top {
	margin: 0 0 0.75rem;
}

/* 圈子分类选择 */
.hui-create-board-category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hui-create-board-category-item {
	display: block;
	cursor: pointer;
}

.hui-create-board-category-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hui-create-board-category-content {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-category-content:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border);
	color: var(--color-text);
}

.hui-create-board-category-radio:checked + .hui-create-board-category-content {
	background: var(--xun-secondary, var(--color-secondary));
	border-color: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-create-board-category-icon {
	font-size: 0.875rem;
}

.hui-create-board-category-name {
	font-weight: 500;
}

/* 复选框样式 */
.hui-create-board-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
}

.hui-create-board-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--xun-secondary, var(--color-secondary));
	cursor: pointer;
}

.hui-create-board-checkbox-text {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text);
}

/* 圈子类型选择器 */
.hui-create-board-type-selector {
	position: relative;
}

.hui-create-board-type-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-type-trigger:hover {
	border-color: var(--color-border);
	background: var(--color-fill-tertiary);
}

.hui-create-board-type-trigger svg {
	color: var(--color-text-tertiary);
	transition: transform 0.2s var(--ease-smooth);
}

.hui-create-board-type-selector.is-open .hui-create-board-type-trigger svg {
	transform: rotate(90deg);
}

.hui-create-board-type-value {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-create-board-type-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-type-selector.is-open .hui-create-board-type-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hui-create-board-type-option {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	transition: background 0.15s var(--ease-smooth);
}

.hui-create-board-type-option:first-child {
	border-radius: var(--xun-radius, 8px) var(--xun-radius, 8px) 0 0;
}

.hui-create-board-type-option:last-child {
	border-radius: 0 0 var(--xun-radius, 8px) var(--xun-radius, 8px);
}

.hui-create-board-type-option:hover {
	background: var(--color-fill-quaternary);
}

.hui-create-board-type-option.is-selected {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-create-board-type-option.is-selected .hui-create-board-type-option-name {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-create-board-type-option-name {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-create-board-type-option-desc {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 付费金额输入 */
.hui-create-board-price-input {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-create-board-price-symbol {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.hui-create-board-price-input .hui-create-board-form-input {
	flex: 1;
}

/* 专属等级列表 */
.hui-create-board-exclusive-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hui-create-board-exclusive-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-exclusive-item:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border);
}

.hui-create-board-exclusive-item:has(input:checked) {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-create-board-exclusive-checkbox {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--xun-secondary, var(--color-secondary));
}

.hui-create-board-exclusive-name {
	font-size: 0.8125rem;
	color: var(--color-text);
}

.hui-create-board-exclusive-item:has(input:checked) .hui-create-board-exclusive-name {
	color: var(--xun-secondary, var(--color-secondary));
	font-weight: 500;
}

/* 抽屉底部 */
.hui-create-board-drawer-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
	background: var(--color-bg-container);
	flex-shrink: 0;
}

/* 抽屉按钮样式 */
.hui-create-board-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 1.25rem;
	font-size: 0.9375rem;
	font-weight: 500;
	border-radius: var(--xun-radius, 8px);
	border: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-create-board-btn--cancel {
	background: transparent;
	color: var(--color-text-secondary);
}

.hui-create-board-btn--cancel:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-create-board-btn--submit {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	min-width: 100px;
}

.hui-create-board-btn--submit:hover {
	background: var(--xun-secondary-hover, oklch(from var(--xun-secondary, var(--color-secondary)) calc(l - 0.05) c h));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

.hui-create-board-btn--submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 移动端适配 */
@media (max-width: 480px) {
	.hui-create-board-drawer-content {
		max-width: 100%;
	}
	
	.hui-create-board-drawer-footer {
		padding: 0.875rem 1rem;
	}
	
	.hui-create-board-btn {
		height: 38px;
		padding: 0 1rem;
		font-size: 0.875rem;
	}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-create-board-drawer-content {
		background: var(--color-bg-container);
	}
}

.dark .hui-create-board-drawer-content {
	background: var(--color-bg-container);
}


/* ============================================================================
   圈子列表页面 V2
   ============================================================================ */

.hui-circles-page {
	background: transparent;
}

/* 我加入的圈子 */
.hui-circles-joined {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 1rem;
	overflow: hidden;
}

.hui-circles-joined-header {
	padding: 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-circles-joined-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-circles-joined-title svg {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-circles-joined-list {
	display: flex;
	gap: 0.75rem;
	padding: 1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hui-circles-joined-list::-webkit-scrollbar {
	display: none;
}

.hui-circles-joined-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.875rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-full, 9999px);
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
	max-width: 200px;
}

.hui-circles-joined-item:hover {
	background: var(--color-fill-tertiary);
}

.hui-circles-joined-avatar {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	background: linear-gradient(135deg, var(--xun-secondary, var(--color-secondary)) 0%, var(--xun-primary, var(--color-primary)) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hui-circles-joined-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circles-joined-avatar-text {
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.hui-circles-joined-info {
	flex: 1;
	min-width: 0;
}

.hui-circles-joined-name {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hui-circles-joined-meta {
	display: block;
	font-size: 0.6875rem;
	color: var(--color-text-tertiary);
	white-space: nowrap;
}

.hui-circles-joined-arrow {
	flex-shrink: 0;
	color: var(--color-text-quaternary);
}

/* 圈子广场 */
.hui-circles-plaza {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
}

.hui-circles-plaza-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-circles-plaza-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-circles-plaza-title svg {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 搜索框 */
.hui-circles-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid transparent;
	border-radius: var(--radius-full, 9999px);
	transition: all 0.2s var(--ease-smooth);
	min-width: 180px;
}

.hui-circles-search:focus-within {
	background: var(--color-bg-container);
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-circles-search svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-circles-search-input {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	font-size: 0.8125rem;
	color: var(--color-text);
}

.hui-circles-search-input::placeholder {
	color: var(--color-text-tertiary);
}

/* 分类筛选 */
.hui-circles-filter {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hui-circles-filter::-webkit-scrollbar {
	display: none;
}

.hui-circles-filter-item {
	flex-shrink: 0;
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-sm, 4px);
	transition: all 0.2s var(--ease-smooth);
	white-space: nowrap;
}

.hui-circles-filter-item:hover {
	color: var(--color-text);
	background: var(--color-fill-quaternary);
}

.hui-circles-filter-item.is-active {
	color: var(--xun-secondary, var(--color-secondary));
	font-weight: 600;
}

.hui-circles-filter-item.is-active::after {
	content: '';
	display: block;
	height: 2px;
	background: var(--xun-secondary, var(--color-secondary));
	margin-top: 0.25rem;
	border-radius: 1px;
}

/* 圈子列表 - 三栏网格 */
.hui-circles-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 1rem;
}

/* 圈子卡片 V2 */
.hui-circle-card-v2 {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	padding: 1rem;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-card-v2:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: var(--shadow-card);
}

.hui-circle-card-v2-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.hui-circle-card-v2-avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	background: linear-gradient(135deg, var(--xun-secondary, var(--color-secondary)) 0%, var(--xun-primary, var(--color-primary)) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hui-circle-card-v2-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-card-v2-avatar-text {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
}

.hui-circle-card-v2-info {
	flex: 1;
	min-width: 0;
}

.hui-circle-card-v2-title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.hui-circle-card-v2-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-circle-card-v2-name:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-circle-card-v2-type {
	flex-shrink: 0;
	padding: 0.125rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: var(--radius-sm, 4px);
}

.hui-circle-card-v2-type--free {
	background: var(--color-success-bg, #ecfdf5);
	color: var(--color-success, #10b981);
}

.hui-circle-card-v2-type--paid {
	background: var(--color-warning-bg, #fffbeb);
	color: var(--color-warning, #f59e0b);
}

.hui-circle-card-v2-type--exclusive {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
}

.hui-circle-card-v2-type--password {
	background: var(--color-error-bg, #fef2f2);
	color: var(--color-error, #ef4444);
}

.hui-circle-card-v2-creator {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-circle-card-v2-creator span {
	color: var(--color-text-secondary);
}

.hui-circle-card-v2-desc {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hui-circle-card-v2-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-circle-card-v2-members {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-circle-card-v2-avatars {
	display: flex;
	align-items: center;
}

.hui-circle-card-v2-avatars img {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full, 9999px);
	border: 2px solid var(--color-bg-container);
	margin-left: -8px;
	object-fit: cover;
}

.hui-circle-card-v2-avatars img:first-child {
	margin-left: 0;
}

.hui-circle-card-v2-count {
	font-size: 0.75rem;
	color: var(--color-text-secondary);
}

.hui-circle-card-v2-stats {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.hui-circle-card-v2-stat {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-circle-card-v2-stat svg {
	flex-shrink: 0;
}

/* 待审核圈子样式 */
.hui-circle-card-v2--pending {
	position: relative;
	opacity: 0.8;
	border-style: dashed;
}

.hui-circle-card-v2-pending-badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background: var(--color-warning-bg, #fffbeb);
	color: var(--color-warning, #f59e0b);
	font-size: 0.6875rem;
	font-weight: 500;
	border-radius: var(--radius-sm, 4px);
}

.hui-circle-card-v2-pending-badge svg {
	flex-shrink: 0;
}

/* 加载更多 */
.hui-circles-load-more {
	padding: 1.5rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* 空状态 */
.hui-circles-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
}

.hui-circles-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-quaternary);
	margin-bottom: 1rem;
}

.hui-circles-empty-text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-tertiary);
}

/* 响应式 - 圈子列表 */
@media (max-width: 1200px) {
	.hui-circles-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.hui-circles-list {
		grid-template-columns: 1fr;
	}

	.hui-circles-plaza-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.hui-circles-search {
		min-width: 0;
	}

	.hui-circle-card-v2-footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.hui-circle-card-v2-stats {
		width: 100%;
		justify-content: flex-start;
	}
}

/* 深色模式 - 圈子列表 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-circles-joined,
	:root:not(.light) .hui-circles-plaza,
	:root:not(.light) .hui-circle-card-v2 {
		background: var(--color-bg-container);
		border-color: var(--color-border-secondary);
	}
}

.dark .hui-circles-joined,
.dark .hui-circles-plaza,
.dark .hui-circle-card-v2 {
	background: var(--color-bg-container);
	border-color: var(--color-border-secondary);
}

/* ============================================================================
   图片添加按钮
   ============================================================================ */

.hui-post-form-image-add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: var(--color-fill-quaternary);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-image-add:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--xun-secondary, var(--color-secondary));
}

/* 上传区域关闭按钮 */
.hui-post-form-section-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--color-fill-secondary);
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	z-index: 10;
}

.hui-post-form-section-close:hover {
	background: var(--color-fill);
	color: var(--color-text);
}

/* 图片预览区默认隐藏，点击图片按钮后显示 */
.hui-post-form-images {
	position: relative;
	display: none;
	margin-bottom: 0.75rem;
	padding: 0.75rem;
	padding-top: 2rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
}

.hui-post-form-images.is-visible {
	display: block !important;
}

/* 图片预览网格 */
.hui-post-form-images-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hui-post-form-image-item {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	background: var(--color-fill-quaternary);
}

.hui-post-form-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-post-form-image-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}

.hui-post-form-image-remove:hover {
	background: rgba(0, 0, 0, 0.8);
}

/* ============================================================================
   图片选择弹窗
   ============================================================================ */

.hui-image-picker-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-mask);
	padding: 1rem;
}

.hui-image-picker-modal.is-active {
	display: flex;
}

.hui-image-picker-modal-content {
	width: 100%;
	max-width: 520px;
	max-height: 80vh;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hui-image-picker-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
	flex-shrink: 0;
}

.hui-image-picker-modal-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-image-picker-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-image-picker-modal-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-image-picker-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
}

.hui-image-picker-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

/* 上传按钮 */
.hui-image-picker-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	aspect-ratio: 1;
	background: var(--color-fill-quaternary);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-image-picker-upload:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-image-picker-upload span {
	font-size: 0.6875rem;
}

/* 图片项 */
.hui-image-picker-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s var(--ease-smooth);
}

.hui-image-picker-item:hover {
	border-color: var(--color-border);
}

.hui-image-picker-item.is-selected {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-image-picker-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-image-picker-item-check {
	position: absolute;
	top: 4px;
	right: 4px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--xun-secondary, var(--color-secondary));
	border-radius: var(--radius-full, 9999px);
	color: #fff;
}

.hui-image-picker-item.is-selected .hui-image-picker-item-check {
	display: flex;
}

/* 加载和空状态 */
.hui-image-picker-loading,
.hui-image-picker-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	color: var(--color-text-tertiary);
	font-size: 0.875rem;
}

/* 底部确认按钮 */
.hui-image-picker-modal-footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
	flex-shrink: 0;
}

.hui-image-picker-confirm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.75rem 1.5rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-image-picker-confirm-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-image-picker-confirm-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 响应式 */
@media (max-width: 480px) {
	.hui-image-picker-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hui-post-form-image-add,
	.hui-post-form-image-item {
		width: 70px;
		height: 70px;
	}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-image-picker-modal-content {
		background: var(--color-bg-container);
	}
}

.dark .hui-image-picker-modal-content {
	background: var(--color-bg-container);
}


/* ============================================================================
   表情选择器
   ============================================================================ */

.hui-emoji-picker {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.5rem;
	width: 320px;
	max-height: 320px;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	z-index: 100;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hui-emoji-picker-header {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
	flex-shrink: 0;
}

.hui-emoji-picker-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-emoji-picker-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem;
}

.hui-emoji-picker-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
}

.hui-emoji-picker-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 22px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
	padding: 0;
	line-height: 1;
}

.hui-emoji-picker-item:hover {
	background: var(--color-fill-tertiary);
	transform: scale(1.15);
}

.hui-emoji-picker-item:active {
	transform: scale(1.05);
}

/* 滚动条样式 */
.hui-emoji-picker-body::-webkit-scrollbar {
	width: 6px;
}

.hui-emoji-picker-body::-webkit-scrollbar-track {
	background: var(--color-fill-quaternary);
	border-radius: 3px;
}

.hui-emoji-picker-body::-webkit-scrollbar-thumb {
	background: var(--color-fill-secondary);
	border-radius: 3px;
}

.hui-emoji-picker-body::-webkit-scrollbar-thumb:hover {
	background: var(--color-fill);
}

/* 响应式 */
@media (max-width: 480px) {
	.hui-emoji-picker {
		width: 280px;
		max-height: 280px;
	}

	.hui-emoji-picker-grid {
		grid-template-columns: repeat(7, 1fr);
	}

	.hui-emoji-picker-item {
		width: 32px;
		height: 32px;
		font-size: 20px;
	}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-emoji-picker {
		background: var(--color-bg-container);
		border-color: var(--color-border-secondary);
	}
}

.dark .hui-emoji-picker {
	background: var(--color-bg-container);
	border-color: var(--color-border-secondary);
}


/* ============================================================================
   视频上传区域
   ============================================================================ */

.hui-post-form-video {
	position: relative;
	display: none;
	margin-bottom: 0.75rem;
	padding: 1rem;
	padding-top: 2.5rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
}

.hui-post-form-video.is-visible {
	display: block;
}

/* 上传区域 */
.hui-post-form-video-upload {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hui-post-form-video-upload-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 2rem;
	background: var(--color-bg-container);
	border: 2px dashed var(--color-border);
	border-radius: var(--xun-radius, 8px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-video-upload-btn:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-video-upload-btn span {
	font-size: 0.875rem;
}

.hui-post-form-video-hint {
	font-size: 0.75rem !important;
	color: var(--color-text-quaternary) !important;
}

/* 视频预览 */
.hui-post-form-video-preview {
	display: none;
}

.hui-post-form-video-player {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary);
}

.hui-post-form-video-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--xun-secondary, var(--color-secondary));
	border-radius: var(--radius-md, 6px);
	color: #fff;
}

.hui-post-form-video-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hui-post-form-video-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-post-form-video-progress {
	font-size: 0.75rem;
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-video-progress.is-complete {
	color: var(--color-success);
}

.hui-post-form-video-progress.is-error {
	color: var(--color-error);
}

.hui-post-form-video-retry,
.hui-post-form-video-remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-video-retry:hover {
	background: var(--color-fill-tertiary);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-video-remove:hover {
	background: var(--color-error-bg);
	color: var(--color-error);
}

/* 封面选择 */
.hui-post-form-video-covers {
	margin-top: 1rem;
}

.hui-post-form-video-covers-header {
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-post-form-video-covers-grid {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hui-post-form-video-covers-grid::-webkit-scrollbar {
	display: none;
}

.hui-post-form-video-cover-item {
	position: relative;
	flex-shrink: 0;
	width: 120px;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-video-cover-item:hover {
	border-color: var(--color-border);
}

.hui-post-form-video-cover-item.is-selected {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-video-cover-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-post-form-video-cover-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.375rem 0.5rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	font-size: 0.625rem;
	color: #fff;
	text-align: center;
}

/* 响应式 */
@media (max-width: 480px) {
	.hui-post-form-video-upload-btn {
		padding: 1.5rem;
	}

	.hui-post-form-video-cover-item {
		width: 100px;
	}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-post-form-video {
		background: var(--color-fill-quaternary);
	}

	:root:not(.light) .hui-post-form-video-upload-btn,
	:root:not(.light) .hui-post-form-video-player {
		background: var(--color-bg-container);
		border-color: var(--color-border-secondary);
	}
}

.dark .hui-post-form-video {
	background: var(--color-fill-quaternary);
}

.dark .hui-post-form-video-upload-btn,
.dark .hui-post-form-video-player {
	background: var(--color-bg-container);
	border-color: var(--color-border-secondary);
}


/* ============================================================================
   帖子卡片视频播放器
   ============================================================================ */

.hui-post-card-video {
	position: relative;
	margin: 0.75rem 0;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
}

/* 视频封面 - 左对齐，按原始比例显示 */
.hui-post-card-video-cover {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.hui-post-card-video-cover img {
	display: block;
	max-width: 100%;
	max-height: 400px;
	border-radius: var(--xun-radius, 8px);
}

.hui-post-card-video-cover:hover .hui-post-card-video-play {
	transform: translate(-50%, -50%) scale(1.1);
	background: rgba(0, 0, 0, 0.8);
}

/* 播放按钮 */
.hui-post-card-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-video-play svg {
	margin-left: 4px;
}

/* 视频时长 */
.hui-post-card-video-duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 2px 6px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 4px;
	font-size: 12px;
	color: #fff;
}

/* 视频播放器 - 左对齐，按原始比例显示 */
.hui-post-card-video-player {
	display: block;
	max-width: 100%;
	max-height: 400px;
	border-radius: var(--xun-radius, 8px);
}

/* 响应式 */
@media (max-width: 768px) {
	.hui-post-card-video {
		margin: 0.5rem 0;
	}

	.hui-post-card-video-cover img,
	.hui-post-card-video-player {
		max-height: 300px;
		border-radius: var(--radius-md, 6px);
	}

	.hui-post-card-video-play {
		width: 56px;
		height: 56px;
	}

	.hui-post-card-video-play svg {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 480px) {
	.hui-post-card-video {
		margin: 0.5rem 0;
	}

	.hui-post-card-video-cover img,
	.hui-post-card-video-player {
		max-height: 240px;
	}

	.hui-post-card-video-play {
		width: 48px;
		height: 48px;
	}

	.hui-post-card-video-play svg {
		width: 32px;
		height: 32px;
	}
}

/* ============================================================================
   发帖表单 - 文件上传区域
   ============================================================================ */

.hui-post-form-file {
	position: relative;
	display: none;
	margin-bottom: 0.75rem;
	padding: 0.75rem;
	padding-top: 2.5rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
}

.hui-post-form-file.is-visible {
	display: block;
}

/* 文件上传区域 */
.hui-post-form-file-upload {
	display: flex;
}

.hui-post-form-file-upload-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1.5rem;
	background: var(--color-bg-container);
	border: 2px dashed var(--color-border);
	border-radius: var(--xun-radius, 8px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-file-upload-btn:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-file-upload-btn svg {
	color: var(--color-text-quaternary);
}

.hui-post-form-file-upload-btn:hover svg {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-file-hint {
	font-size: 0.75rem;
	color: var(--color-text-quaternary);
}

/* 文件类型选择标签 */
.hui-post-form-file-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-post-form-file-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid transparent;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-file-tab:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-post-form-file-tab.is-active {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-post-form-file-tab svg {
	width: 14px;
	height: 14px;
}

/* 文件面板 */
.hui-post-form-file-panel {
	display: none;
}

.hui-post-form-file-panel.is-active {
	display: block;
}

/* 网盘链接区域 */
.hui-post-form-file-link {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
}

.hui-post-form-file-link-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.hui-post-form-file-link-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
}

.hui-post-form-file-link-label .required {
	color: var(--color-error);
}

.hui-post-form-file-link-input {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	color: var(--color-text);
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-file-link-input:focus {
	outline: none;
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-post-form-file-link-input::placeholder {
	color: var(--color-text-quaternary);
}

.hui-post-form-file-link-input--short {
	max-width: 120px;
}

.hui-post-form-file-link-confirm {
	align-self: flex-start;
	padding: 0.5rem 1.25rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-file-link-confirm:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-post-form-file-link-confirm:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 文件图标 - 网盘链接样式 */
.hui-post-form-file-icon--link {
	background: var(--color-info-bg);
	color: var(--color-info);
}

/* 文件预览 */
.hui-post-form-file-preview {
	display: none;
}

.hui-post-form-file-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
}

.hui-post-form-file-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-primary-bg);
	border-radius: var(--radius-md, 6px);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-file-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hui-post-form-file-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-post-form-file-size {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-post-form-file-remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-file-remove:hover {
	background: var(--color-error-bg);
	color: var(--color-error);
}

/* 发帖表单 - 文件权限设置 */
.hui-post-form-file .hui-post-form-file-permission {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-post-form-file .hui-post-form-file-permission-dropdown {
	z-index: 1000;
}

/* ============================================================================
   帖子卡片 - 文件附件
   ============================================================================ */

.hui-post-card-file {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-file:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-file-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-primary-bg);
	border-radius: var(--radius-md, 6px);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-file-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hui-post-card-file-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-post-card-file-size {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-post-card-file-download {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-file-download:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

/* 响应式 */
@media (max-width: 768px) {
	.hui-post-card-file {
		margin: 0.5rem 0;
		padding: 0.625rem 0.75rem;
	}

	.hui-post-card-file-icon {
		width: 40px;
		height: 40px;
	}

	.hui-post-card-file-download {
		padding: 0.375rem 0.75rem;
		font-size: 0.75rem;
	}

	.hui-post-card-file-download span {
		display: none;
	}
}

@media (max-width: 480px) {
	.hui-post-card-file {
		margin: 0.5rem 0;
	}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-post-form-file {
		background: var(--color-fill-quaternary);
	}

	:root:not(.light) .hui-post-form-file-upload-btn,
	:root:not(.light) .hui-post-form-file-item {
		background: var(--color-bg-container);
		border-color: var(--color-border-secondary);
	}

	:root:not(.light) .hui-post-card-file {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border-secondary);
	}
}

.dark .hui-post-form-file {
	background: var(--color-fill-quaternary);
}

.dark .hui-post-form-file-upload-btn,
.dark .hui-post-form-file-item {
	background: var(--color-bg-container);
	border-color: var(--color-border-secondary);
}

.dark .hui-post-card-file {
	background: var(--color-fill-quaternary);
	border-color: var(--color-border-secondary);
}

/* 网盘链接文件样式 */
.hui-post-card-file--external .hui-post-card-file-icon {
	background: var(--color-info-bg, oklch(97% .02 255));
	color: var(--color-info, oklch(56.5% .22 260));
}

.hui-post-card-file--external:hover {
	border-color: var(--color-info, oklch(56.5% .22 260));
}

.hui-post-card-file-download--external {
	background: var(--color-info, oklch(56.5% .22 260));
}

.hui-post-card-file-download--external:hover {
	background: var(--color-info-hover, oklch(50% .22 260));
}

/* 文件权限徽章 */
.hui-post-card-file-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	background: oklch(from var(--badge-color, var(--color-text-tertiary)) l c h / 0.15);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--badge-color, var(--color-text-tertiary));
	white-space: nowrap;
}

/* 文件下载锁定按钮 */
.hui-post-card-file-download--locked {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-file-download--locked:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

/* 锁定按钮 - 按钮样式 */
button.hui-post-card-file-download--locked {
	border: none;
}

/* 响应式 - 文件权限徽章和锁定按钮 */
@media (max-width: 768px) {
	.hui-post-card-file-badge {
		padding: 0.1875rem 0.375rem;
		font-size: 0.625rem;
	}

	.hui-post-card-file-download--locked {
		padding: 0.375rem 0.75rem;
		font-size: 0.75rem;
	}

	.hui-post-card-file-download--locked span {
		display: none;
	}
}

/* 深色模式 - 文件权限徽章 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-post-card-file-badge {
		background: oklch(from var(--badge-color, var(--color-text-tertiary)) l c h / 0.2);
	}
}

.dark .hui-post-card-file-badge {
	background: oklch(from var(--badge-color, var(--color-text-tertiary)) l c h / 0.2);
}


/* ============================================================================
   话题选择器
   ============================================================================ */

.hui-post-form-topic-selector {
	position: relative;
}

.hui-post-form-topic-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 280px;
	max-height: 400px;
	margin-top: 0.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	overflow: hidden;
	display: none;
	z-index: 1000;
}

.hui-post-form-topic-selector.is-open .hui-post-form-topic-dropdown {
	display: block;
}

/* 话题下拉框头部 */
.hui-post-form-topic-dropdown-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-post-form-topic-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
}

.hui-post-form-topic-search svg {
	flex-shrink: 0;
	color: var(--color-text-quaternary);
}

.hui-post-form-topic-search-input {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 0.8125rem;
	color: var(--color-text);
	outline: none;
}

.hui-post-form-topic-search-input::placeholder {
	color: var(--color-text-quaternary);
}

.hui-post-form-topic-create-btn {
	flex-shrink: 0;
	padding: 0.5rem 1rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-topic-create-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

/* 话题列表 */
.hui-post-form-topic-dropdown-list {
	max-height: 320px;
	overflow-y: auto;
}

.hui-post-form-topic-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	transition: background 0.2s var(--ease-smooth);
}

.hui-post-form-topic-item:hover {
	background: var(--color-fill-quaternary);
}

.hui-post-form-topic-item-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md, 6px);
	object-fit: cover;
}

.hui-post-form-topic-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hui-post-form-topic-item-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-post-form-topic-item-count {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 话题加载和空状态 */
.hui-post-form-topic-loading,
.hui-post-form-topic-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* ============================================================================
   创建话题弹窗
   ============================================================================ */

.hui-topic-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-mask);
	z-index: 1000;
}

.hui-topic-modal.is-active {
	display: flex;
}

.hui-topic-modal-content {
	width: 100%;
	max-width: 420px;
	margin: 1rem;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	overflow: hidden;
}

.hui-topic-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-topic-modal-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-topic-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-topic-modal-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-topic-modal-body {
	padding: 1.25rem;
}

.hui-topic-form-group {
	margin-bottom: 1rem;
}

.hui-topic-form-group:last-child {
	margin-bottom: 0;
}

.hui-topic-form-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
}

.hui-topic-form-input,
.hui-topic-form-textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	color: var(--color-text);
	outline: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-topic-form-input:focus,
.hui-topic-form-textarea:focus {
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-topic-form-input::placeholder,
.hui-topic-form-textarea::placeholder {
	color: var(--color-text-quaternary);
}

.hui-topic-form-textarea {
	resize: vertical;
	min-height: 80px;
}

/* 话题图标上传 */
.hui-topic-icon-upload {
	display: inline-block;
	cursor: pointer;
}

.hui-topic-icon-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--color-fill-quaternary);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-quaternary);
	transition: all 0.2s var(--ease-smooth);
}

.hui-topic-icon-upload:hover .hui-topic-icon-preview {
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-topic-icon-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-sm, 4px);
}

.hui-topic-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-topic-modal-cancel {
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-topic-modal-cancel:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-topic-modal-submit {
	padding: 0.5rem 1.25rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-topic-modal-submit:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-topic-modal-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-post-form-topic-dropdown {
		background: var(--color-bg-container);
		border-color: var(--color-border-secondary);
	}

	:root:not(.light) .hui-topic-modal-content {
		background: var(--color-bg-container);
	}

	:root:not(.light) .hui-topic-form-input,
	:root:not(.light) .hui-topic-form-textarea {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border-secondary);
	}
}

.dark .hui-post-form-topic-dropdown {
	background: var(--color-bg-container);
	border-color: var(--color-border-secondary);
}

.dark .hui-topic-modal-content {
	background: var(--color-bg-container);
}

.dark .hui-topic-form-input,
.dark .hui-topic-form-textarea {
	background: var(--color-fill-quaternary);
	border-color: var(--color-border-secondary);
}

/* 响应式 */
@media (max-width: 480px) {
	.hui-post-form-topic-dropdown {
		width: 260px;
	}

	.hui-topic-modal-content {
		max-width: 100%;
		margin: 0.5rem;
	}
}


/* ============================================================================
   帖子卡片 - 圈子和话题标签（新样式）
   ============================================================================ */

.hui-post-card-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
	white-space: nowrap;
}

.hui-post-card-tag:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

/* 圈子标签 */
.hui-post-card-tag--circle {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.08);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-tag--circle:hover {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.15);
}

.hui-post-card-tag-icon {
	width: 14px;
	height: 14px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
	flex-shrink: 0;
}

.hui-post-card-tag-icon--default {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-tag-icon--default svg {
	width: 12px;
	height: 12px;
}

/* 话题标签 */
.hui-post-card-tag--topic {
	background: var(--color-fill-quaternary);
	color: var(--color-text-secondary);
}

.hui-post-card-tag--topic:hover {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-tag-hash {
	font-weight: 600;
	color: var(--xun-secondary, var(--color-secondary));
}

/* 话题标签圆点 */
.hui-post-card-tag-dot {
	width: 6px;
	height: 6px;
	background: var(--color-text-quaternary);
	border-radius: var(--radius-full, 9999px);
	flex-shrink: 0;
}

.hui-post-card-tag--topic:hover .hui-post-card-tag-dot {
	background: var(--xun-secondary, var(--color-secondary));
}

/* ============================================================================
   帖子卡片 - 话题标签（蓝色 #话题）
   ============================================================================ */

.hui-post-card-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.hui-post-card-topic {
	font-size: 0.8125rem;
	color: #1d9bf0;
	font-weight: 500;
}

/* ============================================================================
   帖子卡片 - 时间/位置/浏览信息行
   ============================================================================ */

.hui-post-card-info {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-post-card-info-sep {
	color: var(--color-text-quaternary);
}

.hui-post-card-date,
.hui-post-card-location,
.hui-post-card-views {
	white-space: nowrap;
}

/* ============================================================================
   帖子卡片 - 评论预览
   ============================================================================ */

.hui-post-card-comments-preview {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-md, 6px);
}

.hui-post-card-comment-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.hui-post-card-comment-item + .hui-post-card-comment-item {
	margin-top: 0.5rem;
}

.hui-post-card-comment-item img {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
	flex-shrink: 0;
}

.hui-post-card-comment-author {
	font-weight: 600;
	color: var(--color-text);
	flex-shrink: 0;
}

.hui-post-card-comment-text {
	color: var(--color-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================================
   帖子卡片 - 底部操作栏
   ============================================================================ */

.hui-post-card-actions {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-post-card-action {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-action:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-post-card-action.is-active {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-action.is-active svg {
	fill: var(--xun-secondary, var(--color-secondary));
	stroke: var(--xun-secondary, var(--color-secondary));
}

.hui-post-card-action svg {
	flex-shrink: 0;
}

.hui-post-card-action span {
	font-weight: 500;
}

/* ============================================================================
   帖子卡片 - 图片网格（大图模式）
   ============================================================================ */

.hui-post-card-images--grid-6 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 100%;
}

.hui-post-card-images--grid-6 .hui-post-card-image {
	aspect-ratio: 1;
}

.hui-post-card-images--grid-9 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 100%;
}

.hui-post-card-images--grid-9 .hui-post-card-image {
	aspect-ratio: 1;
}

/* ============================================================================
   话题归档页面
   ============================================================================ */

/* 话题头部 */
.hui-topic-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	margin-bottom: 1rem;
}

.hui-topic-header-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	min-width: 0;
}

.hui-topic-header-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	background: var(--color-fill-quaternary);
}

.hui-topic-header-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-topic-header-content {
	flex: 1;
	min-width: 0;
}

.hui-topic-header-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-topic-header-hash {
	color: var(--xun-secondary, var(--color-secondary));
	font-weight: 700;
}

.hui-topic-header-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	background: linear-gradient(135deg, #ff6b6b, #ffa500);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.6875rem;
	font-weight: 500;
	color: #fff;
}

.hui-topic-header-stats {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.hui-topic-header-stat {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--color-text-tertiary);
}

.hui-topic-header-stat strong {
	font-weight: 600;
	color: var(--color-text);
}

.hui-topic-header-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hui-topic-header-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

/* 话题描述 */
.hui-topic-description {
	padding: 1rem 1.5rem;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* 排序标签页 */
.hui-posts-tabs {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hui-posts-tab {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md, 6px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-posts-tab:hover {
	color: var(--color-text);
	background: var(--color-fill-quaternary);
}

.hui-posts-tab.is-active {
	color: var(--xun-secondary, var(--color-secondary));
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-posts-sort-dropdown {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	border-radius: var(--radius-md, 6px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-posts-sort-dropdown:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text-secondary);
}

.hui-posts-sort-dropdown-btn {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	background: transparent;
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-posts-sort-dropdown-btn:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text-secondary);
	border-color: var(--color-border);
}

.hui-posts-sort-dropdown.is-open .hui-posts-sort-dropdown-btn {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-posts-sort-dropdown-arrow {
	transition: transform 0.2s var(--ease-smooth);
}

.hui-posts-sort-dropdown.is-open .hui-posts-sort-dropdown-arrow {
	transform: rotate(180deg);
}

.hui-posts-sort-dropdown-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 100;
	min-width: 160px;
	padding: 0.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-posts-sort-dropdown.is-open .hui-posts-sort-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hui-posts-sort-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md, 6px);
	transition: all 0.15s var(--ease-smooth);
}

.hui-posts-sort-dropdown-item:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-posts-sort-dropdown-item.is-active {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-posts-sort-dropdown-item svg {
	flex-shrink: 0;
}

.hui-posts-sort-dropdown-check {
	margin-left: auto;
	color: var(--xun-secondary, var(--color-secondary));
}

/* 热门话题列表（右侧边栏） */
.hui-hot-topics-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hui-hot-topic-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--radius-md, 6px);
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-hot-topic-item:hover {
	background: var(--color-fill-quaternary);
}

.hui-hot-topic-item.is-current {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.08);
}

.hui-hot-topic-rank {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: var(--radius-sm, 4px);
}

.hui-hot-topic-rank--top {
	background: linear-gradient(135deg, #ff6b6b, #ffa500);
	color: #fff;
}

.hui-hot-topic-rank--normal {
	background: var(--color-fill-tertiary);
	color: var(--color-text-tertiary);
}

.hui-hot-topic-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-md, 6px);
	object-fit: cover;
}

.hui-hot-topic-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.hui-hot-topic-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-hot-topic-item.is-current .hui-hot-topic-name {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-hot-topic-count {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 侧边栏卡片 */
.hui-sidebar-card {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	overflow: hidden;
	margin-bottom: 1rem;
}

.hui-sidebar-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1rem 0.75rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-sidebar-card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-sidebar-card-title svg {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-sidebar-card-body {
	padding: 0.75rem;
}

.hui-sidebar-empty {
	padding: 1.5rem;
	text-align: center;
	font-size: 0.875rem;
	color: var(--color-text-tertiary);
}

/* 响应式 */
@media (max-width: 768px) {
	.hui-topic-header {
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;
	}

	.hui-topic-header-icon {
		width: 48px;
		height: 48px;
	}

	.hui-topic-header-title {
		font-size: 1.125rem;
	}

	.hui-topic-header-stats {
		gap: 1rem;
	}

	.hui-topic-header-actions {
		width: 100%;
	}

	.hui-topic-header-btn {
		flex: 1;
		justify-content: center;
	}

	.hui-posts-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.hui-posts-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.hui-posts-sort-dropdown {
		align-self: flex-end;
	}
}

/* ============================================================================
   发帖页面样式 - Hui 子主题版本
   ============================================================================ */

/* 重置父主题的发布页面样式 */
.xun-submit-page {
	min-height: auto !important;
	padding: 0 !important;
	background: transparent !important;
}

.xun-submit-page .xun-submit-container {
	max-width: none !important;
	padding: 0 !important;
}

.xun-submit-page .xun-submit-content {
	padding: 0 !important;
}

.hui-publish-page {
	min-height: calc(100vh - var(--xun-header-height, 60px));
	background: var(--color-bg-layout);
	padding: 2.5rem 1rem;
}

.hui-publish-container {
	max-width: 900px;
	margin: 0 auto;
}

/* 页面标题 */
.hui-publish-header {
	text-align: center;
	margin-bottom: 2rem;
}

.hui-publish-title {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-text);
}

.hui-publish-hint {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-tertiary);
}

/* 发帖卡片 */
.hui-publish-card {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-card);
}

.hui-publish-form {
	padding: 1.75rem 2rem;
}

/* 标题输入行 */
.hui-publish-title-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-publish-title-input {
	flex: 1;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text);
	outline: none;
}

.hui-publish-title-input::placeholder {
	color: var(--color-text-quaternary);
	font-weight: 400;
}

.hui-publish-title-count {
	flex-shrink: 0;
	font-size: 0.8125rem;
	color: var(--color-text-quaternary);
}

/* 内容输入区 */
.hui-publish-content-row {
	margin-bottom: 1.5rem;
}

.hui-publish-content-input {
	width: 100%;
	min-height: 320px;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 1.0625rem;
	color: var(--color-text);
	line-height: 1.8;
	resize: none;
	outline: none;
}

.hui-publish-content-input::placeholder {
	color: var(--color-text-quaternary);
}

/* 图片预览区 */
.hui-publish-images {
	display: none;
	margin-bottom: 1.5rem;
	position: relative;
	padding-top: 2rem;
}

.hui-publish-images.is-visible {
	display: block;
}

.hui-publish-images-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

.hui-publish-image-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	background: var(--color-fill-quaternary);
}

.hui-publish-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-publish-image-remove {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
}

.hui-publish-image-item:hover .hui-publish-image-remove {
	opacity: 1;
}

.hui-publish-image-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: var(--color-fill-quaternary);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-publish-image-add:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--xun-secondary, var(--color-secondary));
	color: var(--xun-secondary, var(--color-secondary));
}

/* 视频预览区 */
.hui-publish-video {
	display: none;
	margin-bottom: 1rem;
	position: relative;
	padding-top: 2rem;
}

.hui-publish-video.is-visible {
	display: block;
}

.hui-publish-video-upload {
	padding: 2rem;
	background: var(--color-fill-quaternary);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-md, 6px);
	text-align: center;
}

.hui-publish-video-upload-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: color 0.2s;
}

.hui-publish-video-upload-btn:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-publish-video-hint {
	font-size: 0.75rem;
	color: var(--color-text-quaternary);
}

.hui-publish-video-preview {
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
}

.hui-publish-video-player {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
}

.hui-publish-video-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--xun-secondary, var(--color-secondary));
	border-radius: var(--radius-md, 6px);
	color: #fff;
}

.hui-publish-video-info {
	flex: 1;
	min-width: 0;
}

.hui-publish-video-name {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-publish-video-progress {
	display: block;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	margin-top: 0.25rem;
}

.hui-publish-video-progress.is-complete {
	color: var(--color-success);
}

.hui-publish-video-progress.is-error {
	color: var(--color-error);
}

.hui-publish-video-remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s;
}

.hui-publish-video-remove:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-error);
}

.hui-publish-video-covers {
	padding: 1rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-publish-video-covers-header {
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.hui-publish-video-covers-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
}

/* 视频封面选项 */
.hui-video-cover-item {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm, 4px);
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s var(--ease-smooth);
}

.hui-video-cover-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-video-cover-item:hover {
	border-color: var(--color-border);
}

.hui-video-cover-item.is-selected {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-video-cover-item.is-selected::after {
	content: '';
	position: absolute;
	top: 4px;
	right: 4px;
	width: 16px;
	height: 16px;
	background: var(--xun-secondary, var(--color-secondary));
	border-radius: var(--radius-full, 9999px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat;
}

/* 文件预览区 */
.hui-publish-file {
	display: none;
	margin-bottom: 1rem;
	position: relative;
	padding-top: 2rem;
}

.hui-publish-file.is-visible {
	display: block;
}

.hui-publish-file-upload {
	padding: 1.5rem;
	background: var(--color-fill-quaternary);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-md, 6px);
	text-align: center;
}

.hui-publish-file-upload-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: color 0.2s;
}

.hui-publish-file-upload-btn:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-publish-file-hint {
	font-size: 0.75rem;
	color: var(--color-text-quaternary);
}

.hui-publish-file-preview {
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-md, 6px);
}

.hui-publish-file-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
}

.hui-publish-file-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-info-bg);
	border-radius: var(--radius-md, 6px);
	color: var(--color-info);
}

.hui-publish-file-info {
	flex: 1;
	min-width: 0;
}

.hui-publish-file-name {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-publish-file-size {
	display: block;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	margin-top: 0.25rem;
}

.hui-publish-file-remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s;
}

.hui-publish-file-remove:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-error);
}

/* 网盘链接图标样式 */
.hui-publish-file-icon--link {
	background: var(--color-info-bg, oklch(97% .02 255));
	color: var(--color-info, oklch(56.5% .22 260));
}

.hui-publish-file-item--external .hui-publish-file-icon {
	background: var(--color-info-bg, oklch(97% .02 255));
	color: var(--color-info, oklch(56.5% .22 260));
}

/* 发布页面 - 文件权限设置 */
.hui-publish-file .hui-post-form-file-permission {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-publish-file .hui-post-form-file-permission-dropdown {
	z-index: 1000;
}

/* 工具栏 */
.hui-publish-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-publish-tools {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-wrap: wrap;
}

.hui-publish-tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-publish-tool-btn:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-publish-tool-btn.is-active {
	background: var(--color-primary-bg);
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-publish-tool-btn svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* 圈子选择器 */
.hui-publish-circle-selector {
	position: relative;
}

/* 圈子必选标记 */
.hui-publish-circle-required {
	color: var(--color-error, #ef4444);
	font-size: 0.75rem;
	margin-left: 0.125rem;
}

/* 圈子选择器错误状态 */
.hui-publish-circle-selector.is-error .hui-publish-tool-btn {
	border-color: var(--color-error, #ef4444);
	background: var(--color-error-bg, #fef2f2);
	animation: hui-shake 0.5s ease-in-out;
}

/* 新版圈子下拉菜单 - 发帖页面 */
.hui-publish-circle-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 380px;
	max-height: 400px;
	margin-top: 0.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-dropdown);
	overflow: hidden;
	display: none;
	z-index: 1000;
}

.hui-publish-circle-selector.is-open .hui-publish-circle-dropdown {
	display: flex;
	flex-direction: column;
}

/* 发布页面圈子下拉菜单复用首页样式 */
.hui-publish-circle-dropdown .hui-circle-dropdown-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: var(--color-fill-quaternary);
	margin: 0.5rem;
	border-radius: var(--radius-md, 8px);
}

.hui-publish-circle-dropdown .hui-circle-dropdown-tabs {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0 0.75rem 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hui-publish-circle-dropdown .hui-circle-dropdown-list {
	flex: 1;
	overflow-y: auto;
	max-height: 280px;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-publish-circle-dropdown .hui-circle-dropdown-panel.is-active {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.375rem;
	padding: 0.5rem;
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem;
	background: var(--color-fill-quaternary);
	border: 1px solid transparent;
	border-radius: var(--radius-md, 8px);
	text-align: left;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border-secondary);
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item.is-selected {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	border-color: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-bg-container);
	border-radius: var(--radius-sm, 6px);
	overflow: hidden;
	color: var(--color-text-quaternary);
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item-icon svg {
	width: 16px;
	height: 16px;
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item-name {
	font-size: 0.8125rem;
	line-height: 1.3;
}

.hui-publish-circle-dropdown .hui-circle-dropdown-item-stats {
	font-size: 0.6875rem;
	line-height: 1.3;
}

.hui-publish-circle-dropdown .hui-circle-dropdown-empty {
	grid-column: 1 / -1;
	padding: 1.5rem 1rem;
}

/* 话题选择器 */
.hui-publish-topic-selector {
	position: relative;
}

.hui-publish-topic-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 280px;
	max-height: 360px;
	margin-top: 0.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	overflow: hidden;
	display: none;
	z-index: 1000;
}

.hui-publish-topic-selector.is-open .hui-publish-topic-dropdown {
	display: block;
}

.hui-publish-topic-dropdown-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-publish-topic-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-full, 9999px);
}

.hui-publish-topic-search svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-publish-topic-search-input {
	flex: 1;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 0.8125rem;
	color: var(--color-text);
	outline: none;
}

.hui-publish-topic-search-input::placeholder {
	color: var(--color-text-quaternary);
}

.hui-publish-topic-create-btn {
	flex-shrink: 0;
	padding: 0.5rem 0.75rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}

.hui-publish-topic-create-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-publish-topic-dropdown-list {
	max-height: 280px;
	overflow-y: auto;
}

.hui-publish-topic-loading,
.hui-publish-topic-empty {
	padding: 2rem 1rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.hui-publish-topic-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}

.hui-publish-topic-option:hover {
	background: var(--color-fill-quaternary);
}

.hui-publish-topic-hash {
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-publish-topic-name {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-publish-topic-count {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 操作按钮区 */
.hui-publish-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.hui-publish-visibility-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-publish-visibility-btn:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-publish-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 2.5rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-publish-submit-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

.hui-publish-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 发帖页面 - 可见性设置容器 */
.hui-publish-page .hui-post-form-visibility {
	position: relative;
}

/* 发帖页面 - 可见性下拉菜单 */
.hui-publish-page .hui-post-form-visibility-dropdown {
	position: absolute;
	top: 100%;
	bottom: auto;
	right: 0;
	min-width: 160px;
	margin-top: 0.5rem;
	padding: 0.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-lg, 0.75rem);
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s var(--ease-smooth);
	z-index: 1000;
}

.hui-publish-page .hui-post-form-visibility.is-open .hui-post-form-visibility-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hui-publish-page .hui-post-form-visibility-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	color: var(--color-text);
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 0.5rem);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
	text-align: left;
}

.hui-publish-page .hui-post-form-visibility-option:hover {
	background: var(--color-fill-tertiary);
}

.hui-publish-page .hui-post-form-visibility-option.is-selected {
	color: var(--xun-secondary, var(--color-secondary));
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-publish-page .hui-post-form-visibility-option svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-publish-page .hui-post-form-visibility-option.is-selected svg {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 发帖页面 - 隐藏内容区域 */
.hui-publish-page .hui-post-form-hidden-content {
	margin: 1rem 0;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
}

.hui-publish-page .hui-post-form-hidden-content-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-publish-page .hui-post-form-hidden-content-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #fff;
	background: var(--badge-color, var(--xun-secondary, var(--color-secondary)));
	border-radius: var(--radius-full, 9999px);
	white-space: nowrap;
}

.hui-publish-page .hui-post-form-hidden-content-badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hui-publish-page .hui-post-form-hidden-content-badge-icon svg {
	width: 14px;
	height: 14px;
}

.hui-publish-page .hui-post-form-hidden-content-settings {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-publish-page .hui-post-form-hidden-setting {
	display: none;
	align-items: center;
	gap: 0.25rem;
}

.hui-publish-page .hui-post-form-hidden-setting-input {
	width: 100px;
	padding: 0.375rem 0.5rem;
	font-size: 0.8125rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 0.5rem);
	outline: none;
	transition: border-color 0.2s var(--ease-smooth);
}

.hui-publish-page .hui-post-form-hidden-setting-input:focus {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-publish-page .hui-post-form-hidden-setting-input::placeholder {
	color: var(--color-text-quaternary);
}

.hui-publish-page .hui-post-form-hidden-setting-suffix {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* 发帖页面 - 等级选择 */
.hui-publish-page .hui-post-form-hidden-setting--levels {
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.hui-publish-page .hui-post-form-hidden-level-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.hui-publish-page .hui-post-form-hidden-level-group-title {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-tertiary);
}

.hui-publish-page .hui-post-form-hidden-level-items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hui-publish-page .hui-post-form-hidden-level-item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 0.5rem);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
}

.hui-publish-page .hui-post-form-hidden-level-item:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-publish-page .hui-post-form-hidden-level-item:has(input:checked) {
	color: var(--xun-secondary, var(--color-secondary));
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-publish-page .hui-post-form-hidden-level-item input {
	display: none;
}

/* 发帖页面 - 移除按钮 */
.hui-publish-page .hui-post-form-hidden-content-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: auto;
	color: var(--color-text-tertiary);
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
}

.hui-publish-page .hui-post-form-hidden-content-remove:hover {
	color: var(--color-error);
	background: oklch(from var(--color-error) l c h / 0.1);
}

/* 发帖页面 - 隐藏内容输入框 */
.hui-publish-page .hui-post-form-hidden-content-input {
	width: 100%;
	min-height: 100px;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
	background: transparent;
	border: none;
	outline: none;
	resize: vertical;
}

.hui-publish-page .hui-post-form-hidden-content-input::placeholder {
	color: var(--xun-secondary, var(--color-secondary));
	opacity: 0.6;
}

/* 响应式 - 发帖页面 */
@media (max-width: 768px) {
	.hui-publish-page {
		padding: 1rem 0.75rem;
	}

	.hui-publish-header {
		margin-bottom: 1.25rem;
	}

	.hui-publish-title {
		font-size: 1.375rem;
	}

	.hui-publish-form {
		padding: 1.25rem;
	}

	.hui-publish-title-input {
		font-size: 1.125rem;
	}

	.hui-publish-content-input {
		min-height: 200px;
		font-size: 1rem;
	}

	.hui-publish-images-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hui-publish-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.hui-publish-tools {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.5rem 0;
	}

	.hui-publish-tool-btn {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0.625rem 0.25rem;
		gap: 0.25rem;
		font-size: 0.8125rem;
	}

	.hui-publish-tool-btn svg {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}

	.hui-publish-actions {
		justify-content: flex-end;
	}

	.hui-publish-circle-dropdown,
	.hui-publish-topic-dropdown {
		position: fixed;
		bottom: auto;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin-bottom: 0;
		width: calc(100% - 2rem);
		max-width: 360px;
	}
	
	.hui-publish-circle-dropdown .hui-circle-dropdown-panel.is-active {
		grid-template-columns: 1fr;
	}

	.hui-publish-video-covers-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ============================================================================
   移动端完整适配 - 参考七等社区风格
   ============================================================================ */

@media (max-width: 768px) {
	/* ========================================
	   移动端发帖入口 - 顶部固定样式
	   ======================================== */
	.hui-post-form-collapsed {
		padding: 0.75rem 1rem;
		gap: 0.625rem;
	}

	.hui-post-form-avatar img,
	.hui-post-form-avatar .xun-avatar-verified-wrap > img:first-child {
		width: 36px !important;
		height: 36px !important;
	}

	.hui-post-form-avatar .xun-avatar-verified-wrap {
		position: relative;
		display: inline-block;
		width: 36px !important;
		height: 36px !important;
	}

	.hui-post-form-avatar .xun-avatar-verified-badge {
		position: absolute;
		bottom: -1px !important;
		right: -1px !important;
		width: 14px;
		height: 14px;
	}

	.hui-post-form-avatar .xun-avatar-verified-badge img,
	.hui-post-form-avatar .xun-avatar-verified-badge svg {
		width: 10px;
		height: 10px;
	}

	.hui-post-form-input-fake {
		padding: 0.625rem 1rem;
		font-size: 0.875rem;
		background: var(--color-fill-tertiary);
	}

	.hui-post-form-placeholder {
		font-size: 0.8125rem;
	}

	.hui-post-form-camera {
		width: 36px;
		height: 36px;
	}

	.hui-post-form-camera svg {
		width: 18px;
		height: 18px;
	}

	/* ========================================
	   移动端帖子列表 - 单列卡片
	   ======================================== */
	.hui-posts-list:not(.hui-posts-list--masonry) {
		grid-template-columns: 1fr;
		padding: 0;
	}
	
	/* JS 瀑布流模式下，移动端单列 */
	.hui-posts-list--masonry {
		flex-direction: column;
	}
	
	.hui-posts-list--masonry .hui-posts-column {
		width: 100% !important;
		max-width: 100% !important;
	}

	.hui-posts-list .hui-post-card {
		border-radius: 0;
		border-left: none;
		border-right: none;
		border-top: none;
		border-bottom: 1px solid var(--color-border-secondary);
		box-shadow: none;
	}

	/* 帖子头部 */
	.hui-posts-list .hui-post-card-header {
		padding: 1rem 1rem 0;
		gap: 0.75rem;
	}

	.hui-posts-list .hui-post-card-avatar img,
	.hui-posts-list .hui-post-card-avatar .xun-avatar-verified-wrap > img:first-child {
		width: 40px !important;
		height: 40px !important;
	}

	.hui-post-card-avatar .xun-avatar-verified-wrap {
		position: relative;
		display: inline-block;
		width: 40px !important;
		height: 40px !important;
	}

	.hui-post-card-avatar .xun-avatar-verified-badge {
		position: absolute;
		bottom: -2px !important;
		right: -2px !important;
		width: 16px;
		height: 16px;
	}

	.hui-post-card-avatar .xun-avatar-verified-badge img,
	.hui-post-card-avatar .xun-avatar-verified-badge svg {
		width: 12px;
		height: 12px;
	}

	.hui-post-card-author-name {
		font-size: 0.9375rem;
	}

	.hui-post-card-meta {
		font-size: 0.8125rem;
	}

	/* 帖子内容 */
	.hui-post-card-content {
		padding: 0;
	}

	.hui-post-card-title {
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 0.5rem;
		-webkit-line-clamp: 2;
	}

	.hui-post-card-excerpt {
		font-size: 0.875rem;
		-webkit-line-clamp: 4;
		line-height: 1.7;
	}

	/* 图片网格 - 移动端优化 */
	.hui-post-card-images {
		margin-top: 0.75rem;
	}

	.hui-post-card-images--single {
		max-width: 100%;
	}

	.hui-post-card-images--single .hui-post-card-image img {
		max-height: 240px;
		width: 100%;
		object-fit: cover;
	}

	.hui-post-card-images--grid-2,
	.hui-post-card-images--grid-3,
	.hui-post-card-images--grid-4,
	.hui-post-card-images--grid,
	.hui-post-card-images--grid-6,
	.hui-post-card-images--grid-9 {
		max-width: 100%;
	}

	/* 视频 */
	.hui-post-card-video {
		margin: 0.75rem 0;
		border-radius: var(--radius-md, 6px);
	}

	/* 文件 */
	.hui-post-card-file {
		margin: 0.75rem 0;
	}

	/* 帖子底部标签 */
	.hui-post-card-tags {
		margin-top: 0.75rem;
	}

	.hui-post-card-tag {
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 帖子信息行 */
	.hui-post-card-info {
		margin-top: 0.5rem;
	}

	/* 评论预览 */
	.hui-post-card-comments-preview {
		margin-top: 0.5rem;
	}

	/* 操作栏 */
	.hui-post-card-actions {
		margin-top: 0.5rem;
		padding-top: 0.5rem;
	}

	.hui-post-card-action {
		padding: 0.375rem 0.5rem;
		font-size: 0.75rem;
	}

	/* ========================================
	   移动端分页
	   ======================================== */
	.hui-posts-pagination {
		margin: 0;
		padding: 1rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	/* ========================================
	   移动端空状态
	   ======================================== */
	.hui-posts-empty {
		border-radius: 0;
		border-left: none;
		border-right: none;
		padding: 3rem 1.5rem;
		min-height: 300px;
	}

	.hui-posts-empty-icon {
		width: 80px;
		height: 80px;
	}

	.hui-posts-empty-icon svg {
		width: 40px;
		height: 40px;
	}

	.hui-posts-empty-title {
		font-size: 1rem;
	}

	.hui-posts-empty-text {
		font-size: 0.875rem;
		margin-bottom: 1.5rem;
	}

	/* ========================================
	   移动端三点菜单下拉
	   ======================================== */
	.hui-post-card-dropdown {
		min-width: 140px;
	}

	.hui-post-card-dropdown-item {
		padding: 0.625rem 1rem;
		font-size: 0.875rem;
	}
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
	.hui-post-form-collapsed {
		padding: 0.625rem 0.875rem;
	}

	.hui-posts-sort-item {
		padding: 0.75rem 0.875rem;
		font-size: 0.875rem;
	}

	.hui-post-card-header {
		padding: 0.875rem 0.875rem 0;
	}

	.hui-post-card-content {
		padding: 0.625rem 0.875rem;
	}

	.hui-post-card-footer {
		padding: 0.625rem 0.875rem;
	}

	.hui-post-card-video {
		margin: 0.625rem 0;
	}

	.hui-post-card-file {
		margin: 0.625rem 0;
	}

	.hui-post-card-images--grid-3,
	.hui-post-card-images--grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ============================================================================
   移动端筛选导航栏
   ============================================================================ */

.hui-mobile-filter-nav {
	display: none;
	position: sticky;
	top: var(--xun-header-height, 60px);
	z-index: 90;
	background: var(--color-bg-container);
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-mobile-filter-scroll {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hui-mobile-filter-scroll::-webkit-scrollbar {
	display: none;
}

.hui-mobile-filter-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: all 0.2s var(--ease-smooth);
	white-space: nowrap;
}

.hui-mobile-filter-item:hover {
	color: var(--color-text);
}

.hui-mobile-filter-item.is-active {
	color: var(--xun-secondary, var(--color-secondary));
	border-bottom-color: var(--xun-secondary, var(--color-secondary));
	font-weight: 600;
}

/* 移动端显示筛选导航 */
@media (max-width: 1024px) {
	.hui-mobile-filter-nav {
		display: block;
	}
}

/* 小屏幕优化 */
@media (max-width: 768px) {
	.hui-mobile-filter-scroll {
		padding: 0 0.75rem;
	}

	.hui-mobile-filter-item {
		padding: 0.75rem 0.875rem;
		font-size: 0.875rem;
	}
}

/* 超小屏幕 */
@media (max-width: 480px) {
	.hui-mobile-filter-scroll {
		padding: 0 0.5rem;
	}

	.hui-mobile-filter-item {
		padding: 0.625rem 0.75rem;
	}
}


/* ============================================================================
   话题详情页移动端适配
   ============================================================================ */

@media (max-width: 1024px) {
	/* 话题详情页也隐藏左右侧边栏 */
	.hui-topic-archive .hui-community-sidebar-left,
	.hui-topic-archive .hui-community-sidebar-right {
		display: none !important;
	}

	/* 话题头部移动端样式 */
	.hui-topic-header {
		padding: 1rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.hui-topic-header-info {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.hui-topic-header-title {
		font-size: 1.25rem;
	}

	.hui-topic-header-actions {
		width: 100%;
		margin-top: 0.75rem;
	}

	.hui-topic-header-btn {
		width: 100%;
		justify-content: center;
	}

	.hui-topic-description {
		padding: 0.75rem 1rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	/* 话题详情页的排序栏在移动端显示 */
	.hui-topic-archive .hui-posts-header {
		display: flex !important;
		padding: 0 1rem;
		margin-bottom: 0;
		background: var(--color-bg-container);
		border-bottom: 1px solid var(--color-border-secondary);
		position: sticky;
		top: var(--xun-header-height, 60px);
		z-index: 50;
	}

	.hui-posts-tabs {
		display: flex;
		align-items: center;
		gap: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hui-posts-tabs::-webkit-scrollbar {
		display: none;
	}

	.hui-posts-tab {
		flex-shrink: 0;
		padding: 0.875rem 1rem;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--color-text-secondary);
		text-decoration: none;
		border-bottom: 2px solid transparent;
		transition: all 0.2s var(--ease-smooth);
	}

	.hui-posts-tab:hover {
		color: var(--color-text);
	}

	.hui-posts-tab.is-active {
		color: var(--xun-secondary, var(--color-secondary));
		border-bottom-color: var(--xun-secondary, var(--color-secondary));
	}

	.hui-posts-sort-dropdown {
		display: none;
	}
}

/* ============================================================================
   移动端认证徽章位置修复 - 最高优先级
   ============================================================================ */

@media (max-width: 768px) {
	/* 帖子卡片头像认证徽章 - 强制覆盖 */
	.hui-post-card-avatar .xun-avatar-verified-wrap {
		position: relative !important;
		display: inline-block !important;
		width: 40px !important;
		height: 40px !important;
	}

	.hui-post-card-avatar .xun-avatar-verified-badge {
		position: absolute !important;
		bottom: -2px !important;
		right: -2px !important;
		width: 16px !important;
		height: 16px !important;
		z-index: 2 !important;
	}

	.hui-post-card-avatar .xun-avatar-verified-badge img,
	.hui-post-card-avatar .xun-avatar-verified-badge svg {
		width: 12px !important;
		height: 12px !important;
	}

	/* 发帖表单头像认证徽章 - 强制覆盖 */
	.hui-post-form-avatar .xun-avatar-verified-wrap {
		position: relative !important;
		display: inline-block !important;
		width: 36px !important;
		height: 36px !important;
	}

	.hui-post-form-avatar .xun-avatar-verified-badge {
		position: absolute !important;
		bottom: -1px !important;
		right: -1px !important;
		width: 14px !important;
		height: 14px !important;
		z-index: 2 !important;
	}

	.hui-post-form-avatar .xun-avatar-verified-badge img,
	.hui-post-form-avatar .xun-avatar-verified-badge svg {
		width: 10px !important;
		height: 10px !important;
	}
}


/* ============================================================================
   圈子详情页 Hero 区域
   ============================================================================ */

.hui-circle-hero {
	position: relative;
	background: linear-gradient(135deg, 
		oklch(from var(--xun-primary, var(--color-primary)) l c h / 0.8) 0%,
		oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.6) 100%
	);
	border-radius: var(--xun-radius-lg, 12px);
	overflow: hidden;
	margin-bottom: 1rem;
}

.hui-circle-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hui-circle-hero-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
}

.hui-circle-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, 
		oklch(from var(--xun-primary, var(--color-primary)) l c h / 0.7) 0%,
		oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.5) 100%
	);
}

.hui-circle-hero-content {
	position: relative;
	z-index: 1;
	padding: 1.5rem;
}

.hui-circle-hero-main {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

/* 圈子头像 */
.hui-circle-hero-avatar {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: var(--xun-radius-lg, 12px);
	overflow: hidden;
	background: var(--color-bg-container);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hui-circle-hero-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-hero-avatar-default {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, 
		var(--xun-primary, var(--color-primary)) 0%,
		var(--xun-secondary, var(--color-secondary)) 100%
	);
	color: #fff;
}

/* 圈子信息 */
.hui-circle-hero-info {
	flex: 1;
	min-width: 0;
}

.hui-circle-hero-title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}

.hui-circle-hero-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hui-circle-hero-arrow {
	opacity: 0.7;
}

.hui-circle-hero-meta {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0.625rem;
}

.hui-circle-hero-meta-sep {
	opacity: 0.5;
}

.hui-circle-hero-stat {
	font-weight: 500;
}

/* 标签 */
.hui-circle-hero-tags {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.625rem;
}

.hui-circle-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
}

.hui-circle-tag--official {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.hui-circle-tag--hot {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* 创建者 */
.hui-circle-hero-creator {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5rem 0.25rem 0.25rem;
	background: rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-full, 9999px);
	text-decoration: none;
	transition: background 0.2s var(--ease-smooth);
}

.hui-circle-hero-creator:hover {
	background: rgba(255, 255, 255, 0.25);
}

.hui-circle-hero-creator-avatar {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
}

.hui-circle-hero-creator-name {
	font-size: 0.75rem;
	font-weight: 500;
	color: #fff;
}

.hui-circle-hero-creator-label {
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, 0.7);
}

/* 描述 */
.hui-circle-hero-desc {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 加入按钮 */
.hui-circle-hero-actions {
	flex-shrink: 0;
	align-self: center;
}

.hui-circle-join-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 1.5rem;
	background: #fff;
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--xun-secondary, var(--color-secondary));
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	text-decoration: none;
}

.hui-circle-join-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hui-circle-join-btn--joined {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.hui-circle-join-btn--joined:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* 响应式 - 圈子 Hero */
@media (max-width: 768px) {
	.hui-circle-hero {
		border-radius: 0;
		margin-bottom: 0;
	}

	.hui-circle-hero-content {
		padding: 1rem;
	}

	.hui-circle-hero-main {
		flex-wrap: wrap;
	}

	.hui-circle-hero-avatar {
		width: 56px;
		height: 56px;
	}

	.hui-circle-hero-info {
		flex: 1;
		min-width: calc(100% - 72px);
	}

	.hui-circle-hero-title {
		font-size: 1.125rem;
	}

	.hui-circle-hero-meta {
		font-size: 0.8125rem;
	}

	.hui-circle-hero-actions {
		width: 100%;
		margin-top: 0.75rem;
	}

	.hui-circle-join-btn {
		width: 100%;
	}
}


/* ============================================================================
   圈子信息卡片（右侧边栏）
   ============================================================================ */

.hui-circle-info-card {
	padding: 1rem;
}

.hui-circle-info-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.hui-circle-info-avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	background: var(--color-fill-quaternary);
}

.hui-circle-info-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-info-avatar-default {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, 
		var(--xun-primary, var(--color-primary)) 0%,
		var(--xun-secondary, var(--color-secondary)) 100%
	);
	color: #fff;
}

.hui-circle-info-title-wrap {
	flex: 1;
	min-width: 0;
}

.hui-circle-info-title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.hui-circle-info-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm, 4px);
	font-size: 0.6875rem;
	font-weight: 600;
}

.hui-circle-info-badge--official {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
}

.hui-circle-info-creator {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	text-decoration: none;
	transition: color 0.2s var(--ease-smooth);
}

.hui-circle-info-creator:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-circle-info-creator-avatar {
	width: 16px;
	height: 16px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
}

.hui-circle-info-creator-label {
	color: var(--color-text-quaternary);
}

.hui-circle-info-desc {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.hui-circle-info-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-circle-info-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.hui-circle-info-stat svg {
	color: var(--color-text-tertiary);
}

.hui-circle-info-stat-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-circle-info-stat-label {
	font-size: 0.6875rem;
	color: var(--color-text-tertiary);
}


/* ============================================================================
   圈子信息卡片 - 主内容区（上下布局：封面在上+内容在下）
   ============================================================================ */

.hui-circle-info-card {
	position: relative;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-lg, 12px);
	overflow: hidden;
	margin-bottom: 1rem;
}

/* 封面图区域（上方） */
.hui-circle-info-card-cover {
	position: relative;
	width: 100%;
	height: 100px;
	background: linear-gradient(135deg, 
		oklch(from var(--xun-primary, var(--color-primary)) l c h / 0.2) 0%,
		oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.15) 100%
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--xun-radius-lg, 12px) var(--xun-radius-lg, 12px) 0 0;
}

/* 有封面图时 */
.hui-circle-info-card.has-cover .hui-circle-info-card-cover {
	height: 120px;
}

.hui-circle-info-card.has-cover .hui-circle-info-card-cover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, 
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.15) 100%
	);
	border-radius: var(--xun-radius-lg, 12px) var(--xun-radius-lg, 12px) 0 0;
}

/* 内容区域（下方） */
.hui-circle-info-card-body {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem 1rem;
	position: relative;
}

/* 头像 - 覆盖在封面底部 */
.hui-circle-info-card-avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	background: var(--color-bg-container);
	border: 3px solid var(--color-bg-container);
	box-shadow: var(--shadow-md);
	margin-top: -28px;
	position: relative;
	z-index: 2;
}

.hui-circle-info-card-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-info-card-avatar-default {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, 
		var(--xun-primary, var(--color-primary)) 0%,
		var(--xun-secondary, var(--color-secondary)) 100%
	);
	color: #fff;
}

/* 信息区 */
.hui-circle-info-card-info {
	flex: 1;
	min-width: 0;
}

/* 标题行（名称+分类标签） */
.hui-circle-info-card-title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.125rem;
}

.hui-circle-info-card-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 分类标签 - 参考图片样式（蓝色边框+浅蓝背景+图标） */
.hui-circle-info-card-category {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1875rem 0.5rem;
	background: oklch(from var(--xun-secondary, #3b82f6) l c h / 0.1);
	border: 1.5px solid var(--xun-secondary, #3b82f6);
	border-radius: var(--xun-radius-sm, 6px);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--xun-secondary, #3b82f6);
	white-space: nowrap;
	flex-shrink: 0;
}

.hui-circle-info-card-category i {
	font-size: 0.625rem;
}

/* 官方分类特殊样式 */
.hui-circle-info-card-category[data-category="official"] {
	background: oklch(from #3b82f6 l c h / 0.1);
	border-color: #3b82f6;
	color: #3b82f6;
}

/* 游戏分类 - 橙色 */
.hui-circle-info-card-category[data-category="game"] {
	background: oklch(from #f97316 l c h / 0.1);
	border-color: #f97316;
	color: #f97316;
}

/* 交友分类 - 粉色 */
.hui-circle-info-card-category[data-category="social"] {
	background: oklch(from #ec4899 l c h / 0.1);
	border-color: #ec4899;
	color: #ec4899;
}

/* 反馈分类 - 绿色 */
.hui-circle-info-card-category[data-category="feedback"] {
	background: oklch(from #22c55e l c h / 0.1);
	border-color: #22c55e;
	color: #22c55e;
}

/* 动漫分类 - 紫色 */
.hui-circle-info-card-category[data-category="anime"] {
	background: oklch(from #a855f7 l c h / 0.1);
	border-color: #a855f7;
	color: #a855f7;
}

/* 描述 */
.hui-circle-info-card-desc {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-circle-info-card-desc--empty {
	color: var(--color-text-tertiary);
	font-style: italic;
}

/* 操作区 */
.hui-circle-info-card-action {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* 加入按钮 - 深色圆角风格 */
.hui-circle-info-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 1.25rem;
	background: var(--color-text);
	color: var(--color-bg-container);
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	text-decoration: none;
}

.hui-circle-info-card-btn svg {
	flex-shrink: 0;
}

.hui-circle-info-card-btn:hover {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

/* 已加入状态 */
.hui-circle-info-card-btn--joined {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
}

.hui-circle-info-card-btn--joined:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
	transform: none;
	box-shadow: none;
}

/* 响应式 - 圈子信息卡片 */
@media (max-width: 768px) {
	.hui-circle-info-card {
		border-radius: 0;
		border-left: none;
		border-right: none;
		margin-bottom: 0;
	}

	.hui-circle-info-card-cover {
		height: 80px;
		border-radius: 0;
	}

	.hui-circle-info-card.has-cover .hui-circle-info-card-cover {
		height: 100px;
	}

	.hui-circle-info-card.has-cover .hui-circle-info-card-cover::after {
		border-radius: 0;
	}

	.hui-circle-info-card-body {
		padding: 0.75rem 1rem 1rem;
	}

	.hui-circle-info-card-avatar {
		width: 48px;
		height: 48px;
		margin-top: -24px;
	}

	.hui-circle-info-card-title-row {
		flex-wrap: wrap;
		gap: 0.375rem;
	}

	.hui-circle-info-card-name {
		font-size: 0.9375rem;
	}

	.hui-circle-info-card-category {
		padding: 0.125rem 0.375rem;
		font-size: 0.625rem;
	}

	.hui-circle-info-card-desc {
		font-size: 0.75rem;
	}

	.hui-circle-info-card-btn {
		padding: 0.4375rem 1rem;
		font-size: 0.75rem;
	}
}

/* 动漫分类 - 紫色 */
.hui-circle-card-category[data-category="anime"] {
	background: oklch(from #a855f7 l c h / 0.1);
	border-color: #a855f7;
	color: #a855f7;
}

.hui-circle-card-desc {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-circle-card-desc--empty {
	color: var(--color-text-tertiary);
	font-style: italic;
}

/* 操作区 */
.hui-circle-card-action {
	flex-shrink: 0;
}

/* 加入按钮 - 深色圆角风格 */
.hui-circle-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 1.25rem;
	background: var(--color-text);
	color: var(--color-bg-container);
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	text-decoration: none;
}

.hui-circle-card-btn svg {
	flex-shrink: 0;
}

.hui-circle-card-btn:hover {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

/* 已加入状态 */
.hui-circle-card-btn--joined {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
}

.hui-circle-card-btn--joined:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
	transform: none;
	box-shadow: none;
}

/* ============================================================================
   圈子信息卡片 - 右侧边栏（简洁版）
   ============================================================================ */

.hui-circle-sidebar-card {
	padding: 1rem;
}

.hui-circle-sidebar-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.hui-circle-sidebar-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	background: var(--color-fill-quaternary);
}

.hui-circle-sidebar-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-sidebar-avatar-default {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, 
		var(--xun-primary, var(--color-primary)) 0%,
		var(--xun-secondary, var(--color-secondary)) 100%
	);
	color: #fff;
}

.hui-circle-sidebar-title-wrap {
	flex: 1;
	min-width: 0;
}

.hui-circle-sidebar-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.hui-circle-sidebar-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm, 4px);
	font-size: 0.625rem;
	font-weight: 600;
}

.hui-circle-sidebar-badge--official {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
}

.hui-circle-sidebar-desc {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.hui-circle-sidebar-stats {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-circle-sidebar-stat {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.hui-circle-sidebar-stat svg {
	color: var(--color-text-tertiary);
	flex-shrink: 0;
}

.hui-circle-sidebar-stat-value {
	font-weight: 600;
	color: var(--color-text);
}

.hui-circle-sidebar-stat-label {
	color: var(--color-text-tertiary);
}


/* ============================================================================
   移动端搜索框和排序栏
   ============================================================================ */

@media (max-width: 768px) {
	/* 在社区首页显示搜索框 */
	.hui-community-page .hui-posts-header {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
		margin-bottom: 0;
		background: var(--color-bg-container);
		border-bottom: 1px solid var(--color-border-secondary);
		border-radius: 0;
		border-left: none;
		border-right: none;
		border-top: none;
	}

	/* 隐藏快捷排序按钮，只显示搜索框和下拉菜单 */
	.hui-community-page .hui-posts-sort {
		display: none;
	}

	/* 搜索框占满剩余空间 */
	.hui-community-page .hui-posts-search {
		flex: 1;
	}

	/* 搜索框去掉圆角，和上下模块连在一起 */
	.hui-community-page .hui-posts-search-input {
		background: var(--color-fill-quaternary);
		border-radius: var(--xun-radius-sm, 6px);
		padding: 0.5rem 0.75rem;
	}

	.hui-community-page .hui-posts-search-input input {
		font-size: 0.875rem;
	}

	/* 显示排序下拉菜单 */
	.hui-community-page .hui-posts-sort-dropdown {
		display: flex !important;
		flex-shrink: 0;
	}

	.hui-community-page .hui-posts-sort-dropdown-btn {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
		border-radius: var(--xun-radius-sm, 6px);
	}

	.hui-community-page .hui-posts-sort-dropdown-btn span {
		display: none;
	}

	.hui-community-page .hui-posts-sort-dropdown-btn svg:first-child {
		margin-right: 0;
	}

	.hui-community-page .hui-posts-sort-dropdown-arrow {
		display: none;
	}

	/* 下拉菜单位置调整 */
	.hui-community-page .hui-posts-sort-dropdown-menu {
		right: 0;
		left: auto;
		min-width: 140px;
	}
}


/* ============================================================================
   圈子管理抽屉
   ============================================================================ */

.hui-circle-manage-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	pointer-events: none;
}

.hui-circle-manage-drawer.is-active {
	visibility: visible;
	pointer-events: auto;
}

/* 遮罩层 */
.hui-circle-manage-drawer-overlay {
	position: absolute;
	inset: 0;
	background: var(--color-bg-mask);
	opacity: 0;
	transition: opacity 0.3s var(--ease-smooth);
	cursor: pointer;
}

.hui-circle-manage-drawer.is-active .hui-circle-manage-drawer-overlay {
	opacity: 1;
}

/* 抽屉内容 */
.hui-circle-manage-drawer-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 680px;
	height: 100%;
	background: var(--color-bg-container);
	box-shadow: var(--shadow-modal);
	display: flex;
	transform: translateX(100%);
	transition: transform 0.3s var(--ease-smooth);
}

.hui-circle-manage-drawer.is-active .hui-circle-manage-drawer-content {
	transform: translateX(0);
}

/* 移动端底部导航（桌面端隐藏） */
.hui-circle-manage-mobile-nav {
	display: none;
}

/* 左侧菜单 */
.hui-circle-manage-sidebar {
	width: 180px;
	flex-shrink: 0;
	background: var(--color-bg-layout);
	border-right: 1px solid var(--color-border-secondary);
	padding: 1rem 0;
}

.hui-circle-manage-nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0 0.5rem;
}

.hui-circle-manage-nav-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	background: transparent;
	border: none;
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	text-align: left;
	width: 100%;
}

.hui-circle-manage-nav-item:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-circle-manage-nav-item.is-active {
	background: var(--color-bg-container);
	color: var(--xun-secondary, var(--color-secondary));
	box-shadow: var(--shadow-sm);
}

.hui-circle-manage-nav-item svg {
	flex-shrink: 0;
}

/* 右侧主内容 */
.hui-circle-manage-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* 头部 */
.hui-circle-manage-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
	flex-shrink: 0;
}

.hui-circle-manage-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-circle-manage-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

/* 内容区 */
.hui-circle-manage-body {
	flex: 1;
	padding: 1.25rem;
	overflow-y: auto;
}

/* 面板 */
.hui-circle-manage-panel {
	display: none;
}

.hui-circle-manage-panel.is-active {
	display: block;
}

/* 表单样式 */
.hui-circle-manage-form {
	max-width: 100%;
}

.hui-circle-manage-form-group {
	margin-bottom: 1.25rem;
}

.hui-circle-manage-form-group:last-child {
	margin-bottom: 0;
}

.hui-circle-manage-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-circle-manage-label .required {
	color: var(--color-error);
	margin-left: 0.25rem;
}

.hui-circle-manage-input,
.hui-circle-manage-textarea,
.hui-circle-manage-select {
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	color: var(--color-text);
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-input:focus,
.hui-circle-manage-textarea:focus,
.hui-circle-manage-select:focus {
	outline: none;
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-circle-manage-textarea {
	min-height: 100px;
	resize: vertical;
}

.hui-circle-manage-select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	padding-right: 2.5rem;
}

.hui-circle-manage-hint {
	margin: 0.375rem 0 0;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 头像上传 */
.hui-circle-manage-avatar-section {
	margin-bottom: 1.5rem;
}

.hui-circle-manage-avatar-upload {
	display: flex;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	position: relative;
}

.hui-circle-manage-avatar-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.hui-circle-manage-avatar-preview {
	width: 72px;
	height: 72px;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	background: var(--color-fill-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hui-circle-manage-avatar-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-manage-avatar-placeholder {
	color: var(--color-text-tertiary);
}

.hui-circle-manage-avatar-hint {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.hui-circle-manage-avatar-upload:hover .hui-circle-manage-avatar-hint {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 封面图上传 */
.hui-circle-manage-cover-section {
	margin-bottom: 1.5rem;
}

.hui-circle-manage-cover-upload {
	position: relative;
}

.hui-circle-manage-cover-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.hui-circle-manage-cover-preview {
	width: 100%;
	height: 120px;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	background: var(--color-fill-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	border: 2px dashed var(--color-border);
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-cover-preview:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
	background: var(--color-fill-quaternary);
}

.hui-circle-manage-cover-preview.has-image {
	border-style: solid;
	border-color: transparent;
}

.hui-circle-manage-cover-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-manage-cover-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-text-tertiary);
}

.hui-circle-manage-cover-placeholder span {
	font-size: 0.8125rem;
}

.hui-circle-manage-cover-remove {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full, 9999px);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.2s var(--ease-smooth);
	border: none;
}

.hui-circle-manage-cover-preview:hover .hui-circle-manage-cover-remove {
	opacity: 1;
}

.hui-circle-manage-cover-remove:hover {
	background: var(--color-error);
}

/* 分类标签选择 */
.hui-circle-manage-category-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hui-circle-manage-category-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-category-tab:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border);
	color: var(--color-text);
}

.hui-circle-manage-category-tab.is-active {
	background: var(--xun-secondary, var(--color-secondary));
	border-color: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-circle-manage-category-tab input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hui-circle-manage-category-tab i {
	font-size: 0.875rem;
}

/* 表单操作按钮 */
.hui-circle-manage-form-actions {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-circle-manage-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--xun-radius, 8px);
	border: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-btn--primary {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	min-width: 100px;
}

.hui-circle-manage-btn--primary:hover {
	background: var(--xun-secondary-hover, oklch(from var(--xun-secondary, var(--color-secondary)) calc(l - 0.05) c h));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

.hui-circle-manage-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 开关样式 */
.hui-circle-manage-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
}

.hui-circle-manage-toggle-info {
	flex: 1;
}

.hui-circle-manage-toggle-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 0.25rem;
}

.hui-circle-manage-toggle-desc {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-circle-manage-toggle-link {
	font-size: 0.75rem;
	color: var(--xun-secondary, var(--color-secondary));
	text-decoration: none;
}

.hui-circle-manage-toggle-link:hover {
	text-decoration: underline;
}

.hui-circle-manage-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.hui-circle-manage-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.hui-circle-manage-toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--color-fill-secondary);
	border-radius: var(--radius-full, 9999px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-toggle-slider::before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background: #fff;
	border-radius: var(--radius-full, 9999px);
	transition: all 0.2s var(--ease-smooth);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hui-circle-manage-toggle input:checked + .hui-circle-manage-toggle-slider {
	background: var(--xun-secondary, var(--color-secondary));
}

.hui-circle-manage-toggle input:checked + .hui-circle-manage-toggle-slider::before {
	transform: translateX(20px);
}

/* 圈子类型选择器（管理抽屉） */
.hui-circle-manage-type-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	position: relative;
}

.hui-circle-manage-type-info {
	flex: 1;
}

.hui-circle-manage-type-label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-circle-manage-type-trigger {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-type-trigger:hover {
	border-color: var(--color-border);
	background: var(--color-fill-tertiary);
}

.hui-circle-manage-type-trigger svg {
	color: var(--color-text-tertiary);
	transition: transform 0.2s var(--ease-smooth);
}

[data-hui-manage-type-selector].is-open .hui-circle-manage-type-trigger svg {
	transform: rotate(90deg);
}

.hui-circle-manage-type-value {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-circle-manage-type-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	width: 240px;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s var(--ease-smooth);
}

[data-hui-manage-type-selector].is-open .hui-circle-manage-type-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hui-circle-manage-type-option {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	transition: background 0.15s var(--ease-smooth);
}

.hui-circle-manage-type-option:first-child {
	border-radius: var(--xun-radius, 8px) var(--xun-radius, 8px) 0 0;
}

.hui-circle-manage-type-option:last-child {
	border-radius: 0 0 var(--xun-radius, 8px) var(--xun-radius, 8px);
}

.hui-circle-manage-type-option:hover {
	background: var(--color-fill-quaternary);
}

.hui-circle-manage-type-option.is-selected {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-circle-manage-type-option.is-selected .hui-circle-manage-type-option-name {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-circle-manage-type-option-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-circle-manage-type-option-desc {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 付费金额输入（管理抽屉） */
.hui-circle-manage-price-input {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-circle-manage-price-symbol {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.hui-circle-manage-price-input .hui-circle-manage-input {
	flex: 1;
}

/* 专属等级列表（管理抽屉） */
.hui-circle-manage-exclusive-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hui-circle-manage-exclusive-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-exclusive-item:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border);
}

.hui-circle-manage-exclusive-item:has(input:checked) {
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-circle-manage-exclusive-item input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--xun-secondary, var(--color-secondary));
}

.hui-circle-manage-exclusive-name {
	font-size: 0.8125rem;
	color: var(--color-text);
}

.hui-circle-manage-exclusive-item:has(input:checked) .hui-circle-manage-exclusive-name {
	color: var(--xun-secondary, var(--color-secondary));
	font-weight: 500;
}

/* 成员管理 */
.hui-circle-manage-members-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.hui-circle-manage-members-tabs {
	display: flex;
	gap: 0.25rem;
	background: var(--color-fill-quaternary);
	padding: 0.25rem;
	border-radius: var(--xun-radius, 8px);
}

.hui-circle-manage-members-tab {
	padding: 0.5rem 1rem;
	background: transparent;
	border: none;
	border-radius: var(--xun-radius-sm, 6px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-members-tab:hover {
	color: var(--color-text);
}

.hui-circle-manage-members-tab.is-active {
	background: var(--color-bg-container);
	color: var(--color-text);
	box-shadow: var(--shadow-xs);
}

.hui-circle-manage-members-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	flex: 1;
	max-width: 200px;
}

.hui-circle-manage-members-search svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-circle-manage-members-search input {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	font-size: 0.8125rem;
	color: var(--color-text);
}

.hui-circle-manage-members-search input::placeholder {
	color: var(--color-text-tertiary);
}

.hui-circle-manage-members-list {
	min-height: 200px;
}

.hui-circle-manage-members-loading,
.hui-circle-manage-posts-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 3rem;
	color: var(--color-text-tertiary);
	font-size: 0.875rem;
}

.hui-loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-border-secondary);
	border-top-color: var(--xun-secondary, var(--color-secondary));
	border-radius: 50%;
	animation: hui-spin 0.8s linear infinite;
}

@keyframes hui-spin {
	to { transform: rotate(360deg); }
}

/* 空状态 */
.hui-circle-manage-members-empty,
.hui-circle-manage-posts-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	color: var(--color-text-tertiary);
	font-size: 0.875rem;
}

/* 成员项 */
.hui-circle-manage-member-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 0.5rem;
}

.hui-circle-manage-member-avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full, 9999px);
	overflow: hidden;
	flex-shrink: 0;
}

.hui-circle-manage-member-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-manage-member-info {
	flex: 1;
	min-width: 0;
}

.hui-circle-manage-member-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 0.125rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-wrap: wrap;
}

/* 成员角色标签 */
.hui-circle-manage-member-role {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm, 4px);
	font-size: 0.6875rem;
	font-weight: 500;
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-circle-manage-member-badges {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.hui-circle-manage-member-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	background: var(--color-fill-tertiary);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.6875rem;
	color: var(--color-text-secondary);
}

.hui-circle-manage-member-badge--owner {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
	color: #fff;
}

.hui-circle-manage-member-badge--admin {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-circle-manage-member-date {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-circle-manage-member-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.hui-circle-manage-member-action {
	padding: 0.375rem 0.75rem;
	background: transparent;
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-sm, 6px);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-member-action:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border);
	color: var(--color-text);
}

.hui-circle-manage-member-action--danger {
	color: var(--color-error);
	border-color: var(--color-error-border);
}

.hui-circle-manage-member-action--danger:hover {
	background: var(--color-error-bg);
	border-color: var(--color-error);
}

/* 帖子管理 */
.hui-circle-manage-posts-header {
	margin-bottom: 1rem;
}

.hui-circle-manage-posts-tabs {
	display: flex;
	gap: 0.25rem;
	background: var(--color-fill-quaternary);
	padding: 0.25rem;
	border-radius: var(--xun-radius, 8px);
	width: fit-content;
}

.hui-circle-manage-posts-tab {
	padding: 0.5rem 1rem;
	background: transparent;
	border: none;
	border-radius: var(--xun-radius-sm, 6px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-manage-posts-tab:hover {
	color: var(--color-text);
}

.hui-circle-manage-posts-tab.is-active {
	background: var(--color-bg-container);
	color: var(--color-text);
	box-shadow: var(--shadow-xs);
}

/* 帖子项 */
.hui-circle-manage-post-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 0.5rem;
	position: relative;
	/* 防止 3D 变换影响子元素渲染 */
	-webkit-transform-style: flat;
	transform-style: flat;
}

.hui-circle-manage-post-item:hover {
	background: var(--color-fill-tertiary);
}

.hui-circle-manage-post-thumb {
	width: 60px;
	height: 60px;
	border-radius: var(--xun-radius-sm, 6px);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--color-fill-tertiary);
}

.hui-circle-manage-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-manage-post-info {
	flex: 1;
	min-width: 0;
}

.hui-circle-manage-post-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 0.375rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	overflow: hidden;
}

.hui-circle-manage-post-title-text {
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.hui-circle-manage-post-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
}

.hui-circle-manage-post-status {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	background: var(--color-warning-bg);
	color: var(--color-warning);
	border-radius: 4px;
	font-size: 0.625rem;
	font-weight: 500;
	flex-shrink: 0;
	line-height: 1.2;
}

.hui-circle-manage-post-status--pending {
	background: var(--color-warning-bg);
	color: var(--color-warning);
}

.hui-circle-manage-post-status--rejected {
	background: var(--color-error-bg);
	color: var(--color-error);
}

.hui-circle-manage-post-reject-reason {
	color: var(--color-error);
	font-size: 0.625rem;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: help;
}

.hui-circle-manage-post-stats {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	flex-shrink: 0;
	margin-right: 0.5rem;
}

.hui-circle-manage-post-stat {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hui-circle-manage-post-stat svg {
	width: 14px;
	height: 14px;
}

.hui-circle-manage-post-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	/* 防止 3D 变换影响按钮容器渲染 */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.hui-circle-manage-post-action {
	padding: 0.375rem 0.75rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--xun-radius-sm, 6px);
	font-size: 0.75rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s var(--ease-smooth), filter 0.2s var(--ease-smooth);
	white-space: nowrap;
}

.hui-circle-manage-post-action:hover {
	background: var(--xun-secondary-hover, var(--color-secondary));
	filter: brightness(0.9);
}

.hui-circle-manage-post-action--approve {
	background: var(--color-success);
}

.hui-circle-manage-post-action--approve:hover {
	background: var(--color-success);
	filter: brightness(0.9);
}

.hui-circle-manage-post-action--delete {
	background: var(--color-error);
}

.hui-circle-manage-post-action--delete:hover {
	background: var(--color-error);
	filter: brightness(0.9);
}

.hui-circle-manage-post-action--edit {
	background: var(--color-warning);
}

.hui-circle-manage-post-action--edit:hover {
	background: var(--color-warning);
	filter: brightness(0.9);
}

/* 链接按钮样式 */
a.hui-circle-manage-post-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

a.hui-circle-manage-post-action:hover {
	color: #fff;
	text-decoration: none;
}

/* ============================================================================
   帖子预览编辑弹窗
   ============================================================================ */

.hui-post-review-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.hui-post-review-modal.is-active {
	display: flex;
}

.hui-post-review-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-bg-mask);
	backdrop-filter: blur(4px);
}

.hui-post-review-modal-container {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: hui-modal-in 0.2s var(--ease-smooth);
}

@keyframes hui-modal-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.hui-post-review-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-post-review-modal-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}

.hui-post-review-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-review-modal-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-post-review-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem;
}

.hui-post-review-form-group {
	margin-bottom: 1rem;
}

.hui-post-review-form-group:last-child {
	margin-bottom: 0;
}

.hui-post-review-form-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	margin-bottom: 0.5rem;
}

.hui-post-review-form-input {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	color: var(--color-text);
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-review-form-input:focus {
	outline: none;
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-post-review-form-textarea {
	width: 100%;
	min-height: 200px;
	padding: 0.75rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	color: var(--color-text);
	line-height: 1.6;
	resize: vertical;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-review-form-textarea:focus {
	outline: none;
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

/* 帖子预览信息 */
.hui-post-review-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 1rem;
}

.hui-post-review-info-avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full, 9999px);
	overflow: hidden;
	flex-shrink: 0;
}

.hui-post-review-info-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-post-review-info-content {
	flex: 1;
	min-width: 0;
}

.hui-post-review-info-author {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-post-review-info-meta {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 帖子预览图片 */
.hui-post-review-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-top: 1rem;
}

.hui-post-review-image {
	aspect-ratio: 1;
	border-radius: var(--xun-radius-sm, 6px);
	overflow: hidden;
	background: var(--color-fill-tertiary);
}

.hui-post-review-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 拒绝原因输入框 */
.hui-post-review-reject-reason {
	display: none;
	margin-top: 1rem;
}

.hui-post-review-reject-reason.is-visible {
	display: block;
}

.hui-post-review-reject-reason-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-error);
	margin-bottom: 0.5rem;
}

.hui-post-review-reject-reason-input {
	width: 100%;
	min-height: 80px;
	padding: 0.625rem 0.875rem;
	background: var(--color-error-bg);
	border: 1px solid var(--color-error-border);
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	color: var(--color-text);
	resize: vertical;
}

.hui-post-review-reject-reason-input:focus {
	outline: none;
	border-color: var(--color-error);
}

.hui-post-review-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-post-review-btn {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-review-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.hui-post-review-btn--cancel {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
}

.hui-post-review-btn--cancel:hover:not(:disabled) {
	background: var(--color-fill-secondary);
	color: var(--color-text);
}

.hui-post-review-btn--reject {
	background: var(--color-error-bg);
	color: var(--color-error);
}

.hui-post-review-btn--reject:hover:not(:disabled) {
	background: var(--color-error);
	color: #fff;
}

.hui-post-review-btn--approve {
	background: var(--color-success);
	color: #fff;
}

.hui-post-review-btn--approve:hover:not(:disabled) {
	background: oklch(from var(--color-success) calc(l - 0.05) c h);
}

/* 响应式 */
@media (max-width: 640px) {
	.hui-post-review-modal-container {
		max-height: 100vh;
		border-radius: 0;
	}

	.hui-post-review-images {
		grid-template-columns: repeat(2, 1fr);
	}

	.hui-post-review-modal-footer {
		flex-direction: column;
	}

	.hui-post-review-btn {
		width: 100%;
	}
}

/* 帖子审核弹窗 - 分区样式 */
.hui-post-review-section {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-post-review-section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	margin-bottom: 0.75rem;
}

.hui-post-review-section-title svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

/* 帖子审核弹窗 - 视频预览 */
.hui-post-review-video {
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
	background: var(--color-fill-tertiary);
}

.hui-post-review-video video {
	width: 100%;
	max-height: 300px;
	display: block;
}

/* 帖子审核弹窗 - 文件信息 */
.hui-post-review-file {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
}

.hui-post-review-file-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-sm, 6px);
	color: var(--color-text-tertiary);
}

.hui-post-review-file-info {
	flex: 1;
	min-width: 0;
}

.hui-post-review-file-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	word-break: break-all;
}

.hui-post-review-file-type {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	margin-top: 0.125rem;
}

.hui-post-review-file-url {
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	margin-top: 0.25rem;
	word-break: break-all;
}

.hui-post-review-file-password {
	font-size: 0.75rem;
	color: var(--xun-secondary, var(--color-secondary));
	margin-top: 0.25rem;
}

.hui-post-review-file-size {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	margin-top: 0.25rem;
}

/* 文件权限标签 */
.hui-post-review-file-permission {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
}

.hui-post-review-file-permission-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	background: oklch(from var(--perm-color, #6b7280) l c h / 0.15);
	color: var(--perm-color, #6b7280);
	font-size: 0.6875rem;
	font-weight: 500;
	border-radius: var(--radius-sm, 4px);
}

.hui-post-review-file-permission-detail {
	font-size: 0.6875rem;
	color: var(--color-text-tertiary);
}

/* 帖子权限徽章 */
.hui-post-review-permission-badge {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding: 0.25rem 0.5rem;
	background: oklch(from var(--perm-color, #6b7280) l c h / 0.15);
	color: var(--perm-color, #6b7280);
	font-size: 0.6875rem;
	font-weight: 500;
	border-radius: var(--radius-sm, 4px);
}

/* 隐藏内容预览 */
.hui-post-review-hidden-content {
	padding: 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px dashed var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

/* 管理按钮样式 */
.hui-circle-info-card-btn--manage {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
	margin-right: 0.5rem;
}

.hui-circle-info-card-btn--manage:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
	transform: none;
	box-shadow: none;
}

/* 详情按钮样式 */
.hui-circle-info-card-btn--detail {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
	margin-right: 0.5rem;
}

.hui-circle-info-card-btn--detail:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
	transform: none;
	box-shadow: none;
}

/* 我的帖子按钮样式 */
.hui-circle-info-card-btn--myposts {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
	margin-right: 0.5rem;
}

.hui-circle-info-card-btn--myposts:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
	transform: none;
	box-shadow: none;
}

/* 圈子详情只读样式 */
.hui-circle-detail-section {
	padding: 0;
}

.hui-circle-detail-cover {
	position: relative;
	width: 100%;
	height: 180px;
	border-radius: var(--xun-radius-lg, 12px);
	overflow: hidden;
	margin-bottom: 1.5rem;
	background: var(--color-fill-tertiary);
}

.hui-circle-detail-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-detail-avatar-overlay {
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	border-radius: var(--radius-full, 9999px);
	border: 4px solid var(--color-bg-container);
	overflow: hidden;
	background: var(--color-fill-tertiary);
}

.hui-circle-detail-avatar-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-detail-avatar-only {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-full, 9999px);
	overflow: hidden;
	background: var(--color-fill-tertiary);
	margin: 0 auto 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hui-circle-detail-avatar-only img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-circle-detail-avatar-default {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-text-tertiary);
}

.hui-circle-detail-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 0.75rem;
}

.hui-circle-detail-item-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-sm, 6px);
	color: var(--color-text-secondary);
}

.hui-circle-detail-item-content {
	flex: 1;
	min-width: 0;
}

.hui-circle-detail-item-label {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	margin-bottom: 0.25rem;
}

.hui-circle-detail-item-value {
	font-size: 0.9375rem;
	color: var(--color-text);
	word-break: break-word;
}

.hui-circle-detail-item-link {
	font-size: 0.8125rem;
	color: var(--xun-secondary, var(--color-secondary));
	word-break: break-all;
}

.hui-circle-detail-item-link:hover {
	text-decoration: underline;
}

.hui-circle-detail-category-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.hui-circle-detail-category-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.hui-circle-detail-category-tag.is-active {
	background: var(--xun-secondary, var(--color-secondary));
	border-color: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

/* 空状态 */
.hui-circle-manage-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
	text-align: center;
}

.hui-circle-manage-empty-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-quaternary);
	margin-bottom: 1rem;
}

.hui-circle-manage-empty-text {
	font-size: 0.875rem;
	color: var(--color-text-tertiary);
}

/* 移动端适配 */
@media (max-width: 768px) {
	/* 抽屉全屏显示 */
	.hui-circle-manage-drawer-content {
		max-width: 100%;
		width: 100%;
		height: 100%;
		border-radius: 0;
		flex-direction: column;
	}

	/* 隐藏左侧菜单 */
	.hui-circle-manage-sidebar {
		display: none;
	}

	/* 主内容区域全宽 */
	.hui-circle-manage-main {
		width: 100%;
		max-height: 100%;
	}

	/* 头部样式调整 */
	.hui-circle-manage-header {
		padding: 1rem;
		border-bottom: 1px solid var(--color-border-secondary);
	}

	.hui-circle-manage-title {
		font-size: 1rem;
	}

	/* 内容区域 */
	.hui-circle-manage-body {
		padding: 0;
	}

	.hui-circle-manage-panel {
		padding: 1rem;
	}

	/* 表单样式 */
	.hui-circle-manage-form-group {
		margin-bottom: 1rem;
	}

	.hui-circle-manage-label {
		font-size: 0.8125rem;
		margin-bottom: 0.375rem;
	}

	.hui-circle-manage-input,
	.hui-circle-manage-textarea,
	.hui-circle-manage-select {
		font-size: 0.875rem;
		padding: 0.625rem 0.75rem;
	}

	/* 头像上传区域 */
	.hui-circle-manage-avatar-section {
		margin-bottom: 1.25rem;
	}

	.hui-circle-manage-avatar-preview {
		width: 72px;
		height: 72px;
	}

	/* 封面上传区域 */
	.hui-circle-manage-cover-section {
		margin-bottom: 1.25rem;
	}

	.hui-circle-manage-cover-preview {
		height: 120px;
	}

	/* 分类标签 */
	.hui-circle-manage-category-tabs {
		gap: 0.5rem;
	}

	.hui-circle-manage-category-tab {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
	}

	/* 成员列表头部 */
	.hui-circle-manage-members-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		padding: 1rem;
		border-bottom: 1px solid var(--color-border-secondary);
	}

	.hui-circle-manage-members-tabs {
		gap: 0.5rem;
	}

	.hui-circle-manage-members-tab {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}

	.hui-circle-manage-members-search {
		max-width: none;
	}

	/* 成员列表 */
	.hui-circle-manage-members-list {
		padding: 0;
	}

	.hui-circle-manage-member-item {
		padding: 0.875rem 1rem;
		border-bottom: 1px solid var(--color-border-secondary);
		border-radius: 0;
	}

	.hui-circle-manage-member-item:last-child {
		border-bottom: none;
	}

	.hui-circle-manage-member-avatar {
		width: 40px;
		height: 40px;
	}

	.hui-circle-manage-member-name {
		font-size: 0.875rem;
	}

	.hui-circle-manage-member-role {
		font-size: 0.625rem;
		padding: 0.0625rem 0.25rem;
	}

	.hui-circle-manage-member-actions {
		flex-shrink: 0;
	}

	/* 帖子列表头部 */
	.hui-circle-manage-posts-header {
		padding: 1rem;
		border-bottom: 1px solid var(--color-border-secondary);
	}

	.hui-circle-manage-posts-tabs {
		gap: 0.5rem;
	}

	.hui-circle-manage-posts-tab {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}

	/* 帖子列表 */
	.hui-circle-manage-posts-list {
		padding: 0;
	}

	.hui-circle-manage-post-item {
		padding: 0.875rem 1rem;
		border-bottom: 1px solid var(--color-border-secondary);
		border-radius: 0;
	}

	.hui-circle-manage-post-item:last-child {
		border-bottom: none;
	}

	.hui-circle-manage-post-thumb {
		width: 48px;
		height: 48px;
	}

	.hui-circle-manage-post-title {
		font-size: 0.875rem;
	}

	.hui-circle-manage-post-meta {
		font-size: 0.75rem;
	}

	.hui-circle-manage-post-stats {
		font-size: 0.75rem;
	}

	/* 详情抽屉基础信息 */
	.hui-circle-detail-section {
		padding: 0;
	}

	.hui-circle-detail-cover {
		height: 140px;
		border-radius: 0;
		margin: 0 -1rem;
		width: calc(100% + 2rem);
	}

	.hui-circle-detail-avatar-overlay {
		width: 72px;
		height: 72px;
		bottom: -36px;
		left: 50%;
		transform: translateX(-50%);
	}

	.hui-circle-detail-avatar-only {
		width: 72px;
		height: 72px;
		margin: 0 auto 1rem;
	}

	.hui-circle-detail-item {
		padding: 0.875rem 0;
		border-bottom: 1px solid var(--color-border-secondary);
	}

	.hui-circle-detail-item:last-child {
		border-bottom: none;
	}

	.hui-circle-detail-item-value {
		font-size: 0.875rem;
	}

	.hui-circle-detail-item-link {
		font-size: 0.8125rem;
		word-break: break-all;
	}

	.hui-circle-detail-category-tags {
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.hui-circle-detail-category-tag {
		padding: 0.375rem 0.625rem;
		font-size: 0.8125rem;
	}

	/* 保存按钮 */
	.hui-circle-manage-form-actions {
		padding: 1rem;
		padding-bottom: calc(1rem + var(--hui-tabbar-height, 56px) + var(--hui-tabbar-safe-bottom, env(safe-area-inset-bottom, 0px)));
		margin: 0 -1rem -1rem;
		border-top: 1px solid var(--color-border-secondary);
		background: var(--color-bg-container);
		position: sticky;
		bottom: 0;
	}

	.hui-circle-manage-btn {
		width: 100%;
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
	}

	/* 开关样式 */
	.hui-circle-manage-toggle-row {
		padding: 0.75rem 0;
	}

	.hui-circle-manage-toggle-label {
		font-size: 0.875rem;
	}

	.hui-circle-manage-toggle-desc {
		font-size: 0.75rem;
	}

	/* 空状态 */
	.hui-circle-manage-empty {
		padding: 3rem 1rem;
	}

	.hui-circle-manage-empty-icon svg {
		width: 48px;
		height: 48px;
	}

	.hui-circle-manage-empty-text {
		font-size: 0.875rem;
	}

	/* 加载状态 */
	.hui-circle-manage-members-loading,
	.hui-circle-manage-posts-loading {
		padding: 3rem 1rem;
	}

	/* 移动端顶部导航 */
	.hui-circle-manage-mobile-nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0.5rem 0;
		background: var(--color-bg-container);
		border-bottom: 1px solid var(--color-border-secondary);
		flex-shrink: 0;
	}

	.hui-circle-manage-mobile-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		padding: 0.375rem 0.75rem;
		background: none;
		border: none;
		color: var(--color-text-tertiary);
		font-size: 0.6875rem;
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.hui-circle-manage-mobile-nav-item svg {
		width: 20px;
		height: 20px;
	}

	.hui-circle-manage-mobile-nav-item.is-active {
		color: var(--xun-secondary, var(--color-secondary));
	}

	.hui-circle-manage-mobile-nav-item:active {
		opacity: 0.7;
	}

	/* 抽屉内容布局调整 */
	.hui-circle-manage-drawer-content {
		display: flex;
		flex-direction: column;
	}

	.hui-circle-manage-main {
		flex: 1;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.hui-circle-manage-body {
		flex: 1;
		overflow-y: auto;
		padding-bottom: calc(var(--hui-tabbar-height, 56px) + var(--hui-tabbar-safe-bottom, env(safe-area-inset-bottom, 0px)));
	}

	/* 有顶部导航时调整保存按钮位置 */
	.hui-circle-manage-form-actions {
		bottom: 0;
		margin-bottom: 0;
	}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-circle-manage-drawer-content {
		background: var(--color-bg-container);
	}

	:root:not(.light) .hui-circle-manage-sidebar {
		background: var(--color-bg-layout);
	}
}

.dark .hui-circle-manage-drawer-content {
	background: var(--color-bg-container);
}

.dark .hui-circle-manage-sidebar {
	background: var(--color-bg-layout);
}

/* ============================================================================
   圈子类型弹窗样式
   ============================================================================ */

.hui-circle-type-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.hui-circle-type-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-bg-mask, rgba(0, 0, 0, 0.45));
	backdrop-filter: blur(4px);
}

.hui-circle-type-modal-content {
	position: relative;
	width: 100%;
	max-width: 400px;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	animation: hui-modal-fade-in 0.2s ease-out;
}

@keyframes hui-modal-fade-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.hui-circle-type-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-circle-type-modal-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}

.hui-circle-type-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--color-text-tertiary);
	border-radius: var(--xun-radius-sm, 6px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-type-modal-close:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
}

.hui-circle-type-modal-body {
	padding: 2rem 1.25rem;
	text-align: center;
}

.hui-circle-type-modal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin-bottom: 1rem;
}

.hui-circle-type-modal-icon--paid {
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #fff;
}

.hui-circle-type-modal-icon--exclusive {
	background: linear-gradient(135deg, #a855f7, #7c3aed);
	color: #fff;
}

.hui-circle-type-modal-icon--password {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: #fff;
}

.hui-circle-type-modal-text {
	font-size: 0.9375rem;
	color: var(--color-text);
	margin: 0 0 0.5rem;
}

.hui-circle-type-modal-price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-warning, #f59e0b);
	margin: 0.5rem 0;
}

.hui-circle-type-modal-levels {
	font-size: 1rem;
	font-weight: 600;
	color: var(--xun-secondary, var(--color-secondary));
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	display: inline-block;
}

.hui-circle-type-modal-hint {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	margin: 0.75rem 0 0;
}

.hui-circle-type-modal-input {
	width: 100%;
	height: 44px;
	padding: 0 1rem;
	font-size: 0.9375rem;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	outline: none;
	transition: all 0.2s var(--ease-smooth);
	margin: 1rem 0 0.5rem;
}

.hui-circle-type-modal-input:focus {
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-circle-type-modal-input::placeholder {
	color: var(--color-text-quaternary);
}

.hui-circle-type-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-circle-type-modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--xun-radius, 8px);
	border: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	text-decoration: none;
}

.hui-circle-type-modal-btn--cancel {
	background: var(--color-fill-secondary);
	color: var(--color-text-secondary);
}

.hui-circle-type-modal-btn--cancel:hover {
	background: var(--color-fill);
	color: var(--color-text);
}

.hui-circle-type-modal-btn--primary {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	min-width: 100px;
}

.hui-circle-type-modal-btn--primary:hover {
	background: var(--xun-secondary-hover, oklch(from var(--xun-secondary, var(--color-secondary)) calc(l - 0.05) c h));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

/* 响应式 - 弹窗 */
@media (max-width: 480px) {
	.hui-circle-type-modal-content {
		max-width: none;
		margin: 0 0.5rem;
	}
	
	.hui-circle-type-modal-footer {
		flex-direction: column;
	}
	
	.hui-circle-type-modal-btn {
		width: 100%;
	}
}

/* ============================================================================
   支付弹窗样式
   ============================================================================ */

/* 支付信息 */
.hui-circle-payment-info {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
}

.hui-circle-payment-product {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin-bottom: 0.5rem;
}

.hui-circle-payment-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--xun-secondary, var(--color-secondary));
}

/* 支付方式列表 */
.hui-circle-payment-methods {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hui-circle-payment-method {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 1rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-circle-payment-method:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
	background: var(--color-fill-quaternary);
}

.hui-circle-payment-method:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.hui-circle-payment-method.is-loading {
	position: relative;
	color: transparent;
}

.hui-circle-payment-method.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid var(--color-border);
	border-top-color: var(--xun-secondary, var(--color-secondary));
	border-radius: 50%;
	animation: hui-spin 0.8s linear infinite;
}

.hui-circle-payment-method svg {
	flex-shrink: 0;
	color: var(--color-text-secondary);
}

.hui-circle-payment-method span {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text);
}

/* 二维码弹窗 */
.hui-circle-qrcode-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.hui-circle-qrcode-wrapper img {
	width: 200px;
	height: 200px;
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary);
}

.hui-circle-qrcode-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--xun-secondary, var(--color-secondary));
	margin-bottom: 0.5rem;
}

.hui-circle-qrcode-hint {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

@keyframes hui-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 付费圈子按钮价格显示 */
.hui-circle-info-card-btn--paid {
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #fff;
}

.hui-circle-info-card-btn--paid:hover {
	background: linear-gradient(135deg, #f59e0b, #d97706);
}

.hui-circle-info-card-btn--exclusive {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
	cursor: pointer;
}

.hui-circle-info-card-btn--exclusive:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
}

/* 专属圈子提示 */
.hui-circle-info-card-btn--exclusive[title] {
	position: relative;
}

/* 禁用状态按钮 */
.hui-circle-info-card-btn--disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.hui-circle-info-card-btn--disabled:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text-tertiary);
}

/* 密码圈子按钮 */
.hui-circle-info-card-btn--password {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-circle-info-card-btn--password:hover {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-circle-payment-method {
		background: var(--color-bg-elevated);
	}
	
	:root:not(.light) .hui-circle-qrcode-wrapper img {
		background: #fff;
		padding: 0.5rem;
	}
}

.dark .hui-circle-payment-method {
	background: var(--color-bg-elevated);
}

.dark .hui-circle-qrcode-wrapper img {
	background: #fff;
	padding: 0.5rem;
}


/* ============================================================================
   帖子列表布局选项
   ============================================================================ */

/* 三栏布局 */
.hui-posts-columns--3 .hui-posts-list:not(.hui-posts-list--masonry) {
	grid-template-columns: repeat(3, 1fr);
}

/* 双栏布局（默认） */
.hui-posts-columns--2 .hui-posts-list:not(.hui-posts-list--masonry) {
	grid-template-columns: repeat(2, 1fr);
}

/* 单栏布局 */
.hui-posts-columns--1 .hui-posts-list:not(.hui-posts-list--masonry) {
	grid-template-columns: 1fr;
}

/* 单栏布局下帖子卡片宽度限制 */
.hui-posts-columns--1 .hui-post-card {
	max-width: 100%;
}

/* 响应式适配 - 三栏布局 */
@media (max-width: 1200px) {
	.hui-posts-columns--3 .hui-posts-list:not(.hui-posts-list--masonry) {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.hui-posts-columns--3 .hui-posts-list--masonry .hui-posts-column {
		width: calc(50% - 0.5rem);
		max-width: calc(50% - 0.5rem);
	}
}

/* 响应式适配 - 移动端始终单栏 */
@media (max-width: 1024px) {
	.hui-posts-columns--3 .hui-posts-list:not(.hui-posts-list--masonry),
	.hui-posts-columns--2 .hui-posts-list:not(.hui-posts-list--masonry),
	.hui-posts-columns--1 .hui-posts-list:not(.hui-posts-list--masonry) {
		grid-template-columns: 1fr !important;
	}
	
	.hui-posts-list--masonry .hui-posts-column {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ============================================================================
   帖子详情页样式
   ============================================================================ */

.hui-single-post-wrapper {
	background: var(--color-bg-layout);
	min-height: calc(100vh - var(--xun-header-height, 60px));
	padding: 1.5rem 0;
}

.hui-single-post-container {
	display: grid;
	grid-template-columns: 60px 1fr 280px;
	gap: 1.5rem;
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem;
	align-items: start;
}

/* ============================================================================
   左侧浮动操作栏
   ============================================================================ */

.hui-single-post-actions {
	position: sticky;
	top: calc(var(--xun-header-height, 60px) + 1.5rem);
}

.hui-single-post-actions-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
}

.hui-single-post-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.625rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-action:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-single-post-action.is-active {
	color: var(--color-error);
}

.hui-single-post-action.is-active svg {
	fill: currentColor;
}

.hui-single-post-action-count {
	font-size: 0.6875rem;
	font-weight: 500;
}

/* ============================================================================
   中间内容区
   ============================================================================ */

.hui-single-post-main {
	min-width: 0;
}

.hui-single-post-card {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	padding: 1.5rem;
	margin-bottom: 1rem;
}

/* 作者信息 */
.hui-single-post-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.hui-single-post-author-avatar {
	flex-shrink: 0;
}

.hui-single-post-avatar-img {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
}

.hui-single-post-author-info {
	flex: 1;
	min-width: 0;
}

.hui-single-post-author-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.hui-single-post-author-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
}

.hui-single-post-author-name:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-vip-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: var(--radius-sm, 4px);
}

.hui-single-post-meta {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.hui-single-post-meta-sep {
	color: var(--color-text-quaternary);
}

/* 头部操作按钮容器 */
.hui-single-post-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* 私信按钮 */
.hui-single-post-message-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--color-fill-tertiary);
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-secondary);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-message-btn:hover {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

.hui-single-post-message-btn svg {
	flex-shrink: 0;
}

.hui-single-post-follow-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.375rem 0.875rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-follow-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-single-post-follow-btn.is-following {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
}

.hui-single-post-follow-btn.is-following:hover {
	background: var(--color-fill-secondary);
}

/* 圈子标签和官方标签行 */
.hui-single-post-tags-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

/* 在 tags-row 中的徽章不需要右边距 */
.hui-single-post-tags-row .hui-single-post-badge {
	margin-right: 0;
}

/* 圈子标签 */
.hui-single-post-circle-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-circle-tag:hover {
	background: var(--color-fill-tertiary);
	color: var(--xun-secondary, var(--color-secondary));
}

/* 帖子标题 */
.hui-single-post-title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.4;
}

.hui-single-post-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: var(--radius-sm, 4px);
	margin-right: 0.5rem;
	vertical-align: middle;
}

.hui-single-post-badge--pinned {
	background: var(--color-error-bg);
	color: var(--color-error);
}

.hui-single-post-badge--featured {
	background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
	color: #fff;
}

.hui-single-post-badge--official {
	background: var(--color-info);
	color: #fff;
}

/* 帖子内容 */
.hui-single-post-content {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--color-text);
	margin-bottom: 1rem;
}

.hui-single-post-content p {
	margin-bottom: 1rem;
}

.hui-single-post-content p:last-child {
	margin-bottom: 0;
}

.hui-single-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md, 6px);
}

.hui-single-post-content a {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-content a:hover {
	text-decoration: underline;
}

/* 帖子详情页 - 锁定内容提示 - 紧凑设计 */
.hui-single-post-locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem 1.5rem;
	margin: 1rem 0;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%);
	border: 1px dashed rgba(245, 158, 11, 0.3);
	border-radius: var(--radius-lg, 12px);
	text-align: center;
}

.hui-single-post-locked-emoji {
	font-size: 2.5rem;
	line-height: 1;
}

.hui-single-post-locked-content {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.hui-single-post-locked-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-single-post-locked-text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	max-width: 320px;
}

.hui-single-post-locked-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.5rem;
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--radius-full, 9999px);
	text-decoration: none;
	transition: all 0.2s ease;
}

.hui-single-post-locked-btn:hover {
	filter: brightness(1.1);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
	:root:not(.light) .hui-single-post-locked {
		background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
		border-color: rgba(245, 158, 11, 0.25);
	}
}

.dark .hui-single-post-locked {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
	border-color: rgba(245, 158, 11, 0.25);
}

/* 帖子图片画廊 - 自定义样式 */
.hui-post-gallery {
	margin: 1rem 0;
	gap: 0.5rem !important;
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
}

.hui-post-gallery .xun-gallery-item {
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
}

.hui-post-gallery .xun-gallery-image-wrapper {
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
}

.hui-post-gallery .xun-gallery-image {
	transition: transform 0.3s var(--ease-smooth);
}

.hui-post-gallery .xun-gallery-link:hover .xun-gallery-image {
	transform: scale(1.05);
}

/* 图片画廊 */
.hui-single-post-images {
	margin-bottom: 1rem;
}

.hui-single-post-images-grid {
	display: grid;
	gap: 0.5rem;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
}

.hui-single-post-images--single {
	grid-template-columns: 1fr;
	max-width: 400px;
}

.hui-single-post-images--grid-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 500px;
}

.hui-single-post-images--grid-3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 600px;
}

.hui-single-post-images--grid-4 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 500px;
}

.hui-single-post-images--grid {
	grid-template-columns: repeat(3, 1fr);
	max-width: 600px;
}

.hui-single-post-image {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	cursor: pointer;
	border-radius: var(--radius-sm, 4px);
}

.hui-single-post-images--single .hui-single-post-image {
	aspect-ratio: auto;
}

.hui-single-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s var(--ease-smooth);
}

.hui-single-post-images--single .hui-single-post-image img {
	max-height: 400px;
	object-fit: contain;
	background: var(--color-fill-quaternary);
}

.hui-single-post-image:hover img {
	transform: scale(1.05);
}

/* 视频 */
.hui-single-post-video {
	margin-bottom: 1rem;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	background: #000;
}

.hui-single-post-video video {
	width: 100%;
	max-height: 500px;
	display: block;
}

/* 文件附件 */
.hui-single-post-file {
	margin-bottom: 1rem;
}

.hui-single-post-file-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-file-link:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-file-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--xun-secondary, var(--color-secondary));
	border-radius: var(--radius-md, 6px);
	color: #fff;
}

.hui-single-post-file-icon--link {
	background: var(--color-info);
}

.hui-single-post-file-info {
	flex: 1;
	min-width: 0;
}

.hui-single-post-file-name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-single-post-file-size {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.hui-single-post-file-download {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-single-post-file-link:hover .hui-single-post-file-download {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 话题标签 */
.hui-single-post-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.hui-single-post-topic {
	display: inline-flex;
	padding: 0.375rem 0.75rem;
	background: var(--color-primary-bg);
	border-radius: var(--radius-full, 9999px);
	font-size: 0.8125rem;
	color: var(--xun-secondary, var(--color-secondary));
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-topic:hover {
	background: var(--color-primary-bg-hover);
}

/* 帖子底部 */
.hui-single-post-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-single-post-stats {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hui-single-post-stat {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.hui-single-post-stat svg {
	color: var(--color-text-quaternary);
}

.hui-single-post-date {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

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

.hui-single-post-comments {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	padding: 1.5rem;
}

.hui-single-post-comments-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-single-post-comments-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-single-post-comments-count {
	color: var(--color-text-tertiary);
	font-weight: 400;
}

.hui-single-post-comments-sort {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hui-single-post-comments-sort-btn {
	padding: 0.375rem 0.75rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-comments-sort-btn:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-single-post-comments-sort-btn.is-active {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

/* 评论输入框 */
.hui-single-post-comment-form {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.hui-single-post-comment-avatar img {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full, 9999px);
}

.hui-single-post-comment-input-wrap {
	flex: 1;
	min-width: 0;
}

.hui-single-post-comment-input {
	width: 100%;
	min-height: 80px;
	padding: 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	font-size: 0.9375rem;
	color: var(--color-text);
	resize: none;
	outline: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-comment-input:focus {
	background: var(--color-bg-container);
	border-color: var(--xun-secondary, var(--color-secondary));
	box-shadow: 0 0 0 3px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-single-post-comment-input::placeholder {
	color: var(--color-text-tertiary);
}

.hui-single-post-comment-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.75rem;
}

.hui-single-post-comment-tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hui-single-post-comment-tool {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-comment-tool:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-single-post-comment-submit {
	padding: 0.5rem 1.25rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-comment-submit:hover:not(:disabled) {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-single-post-comment-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 未登录提示 */
.hui-single-post-comment-login {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-md, 6px);
	margin-bottom: 1.5rem;
}

.hui-single-post-comment-login p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.hui-single-post-comment-login-btn {
	padding: 0.5rem 1.25rem;
	background: var(--xun-secondary, var(--color-secondary));
	border-radius: var(--radius-full, 9999px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-comment-login-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

/* 评论列表 */
.hui-single-post-comments-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hui-single-post-comment-item {
	display: flex;
	gap: 0.75rem;
}

.hui-single-post-comment-item-avatar img {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full, 9999px);
}

.hui-single-post-comment-item-content {
	flex: 1;
	min-width: 0;
}

.hui-single-post-comment-item-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}

.hui-single-post-comment-item-author {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-single-post-comment-item-badge {
	display: inline-flex;
	padding: 0.125rem 0.375rem;
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	font-size: 0.625rem;
	font-weight: 600;
	border-radius: var(--radius-sm, 4px);
}

/* 评论者归属地 */
.hui-single-post-comment-item-location {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	padding: 0.125rem 0.375rem;
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
	font-size: 0.625rem;
	border-radius: var(--radius-sm, 4px);
}

.hui-single-post-comment-item-location svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

/* 评论者等级徽章 */
.hui-comment-level-badge {
	display: inline-flex;
	align-items: center;
}

.hui-comment-level-badge.xun-level-badge--icon {
	background: transparent;
	border: none;
	padding: 0;
}

.hui-comment-level-badge.xun-level-badge--icon .xun-level-icon {
	object-fit: contain;
	width: auto;
	height: 16px;
	max-height: 18px;
	display: block;
}

.hui-comment-level-badge.xun-level-badge--text {
	color: var(--level-color, var(--color-text-tertiary));
	background: var(--level-bg-color, var(--color-fill-quaternary));
	padding: 0.125rem 0.375rem;
	font-size: 0.625rem;
	border-radius: var(--radius-sm, 4px);
	font-weight: 500;
}

/* 评论者 VIP */
.hui-single-post-comment-item-vip {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	padding: 0.125rem 0.375rem;
	background: var(--vip-color, linear-gradient(135deg, #ffd700 0%, #ffb347 100%));
	color: #fff;
	font-size: 0.625rem;
	font-weight: 600;
	border-radius: var(--radius-sm, 4px);
}

.hui-single-post-comment-item-vip svg {
	flex-shrink: 0;
}

.hui-single-post-comment-item-time {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-single-post-comment-item-text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
	margin-bottom: 0.5rem;
}

.hui-single-post-comment-item-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hui-single-post-comment-item-action {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: color 0.2s var(--ease-smooth);
}

.hui-single-post-comment-item-action:hover {
	color: var(--color-text);
}

/* 评论点赞按钮激活状态 */
.hui-single-post-comment-item-action.is-active {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-comment-item-action.is-active:hover {
	color: var(--xun-secondary-hover, var(--color-secondary-dark, var(--color-secondary)));
}

/* 评论点赞按钮加载状态 */
.hui-single-post-comment-item-action.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* 评论三点菜单 */
.hui-comment-more-menu {
	position: relative;
	margin-left: auto;
}

.hui-comment-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm, 4px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-comment-more-btn:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
}

.hui-comment-more-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 100;
	min-width: 100px;
	padding: 0.375rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: all 0.2s var(--ease-smooth);
}

.hui-comment-more-menu.is-open .hui-comment-more-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(4px);
}

.hui-comment-more-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm, 4px);
	font-size: 0.8125rem;
	color: var(--color-text);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
	white-space: nowrap;
}

.hui-comment-more-item:hover {
	background: var(--color-fill-secondary);
}

.hui-comment-more-item--danger {
	color: var(--color-error);
}

.hui-comment-more-item--danger:hover {
	background: var(--color-error-bg);
}

/* 子评论三点菜单 */
.hui-comment-more-menu--reply .hui-comment-more-btn {
	width: 20px;
	height: 20px;
}

/* 评论编辑表单 */
.hui-comment-edit-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hui-comment-edit-textarea {
	width: 100%;
	min-height: 60px;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text);
	resize: vertical;
	transition: border-color 0.2s var(--ease-smooth);
}

.hui-comment-edit-textarea:focus {
	outline: none;
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-comment-edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.hui-comment-edit-cancel,
.hui-comment-edit-save {
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-sm, 4px);
	font-size: 0.8125rem;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-comment-edit-cancel {
	background: var(--color-fill-secondary);
	border: none;
	color: var(--color-text-secondary);
}

.hui-comment-edit-cancel:hover {
	background: var(--color-fill);
	color: var(--color-text);
}

.hui-comment-edit-save {
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	color: #fff;
}

.hui-comment-edit-save:hover {
	opacity: 0.9;
}

.hui-comment-edit-save:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 子评论（回复）容器 */
.hui-single-post-comment-replies {
	margin-top: 0.75rem;
	padding-left: 0;
	border-left: 2px solid var(--color-border-secondary);
	margin-left: 0;
	padding-top: 0.5rem;
}

/* 子评论项 */
.hui-single-post-comment-reply {
	display: flex;
	gap: 0.625rem;
	padding: 0.625rem 0 0.625rem 0.75rem;
}

.hui-single-post-comment-reply + .hui-single-post-comment-reply {
	border-top: 1px solid var(--color-border-secondary);
}

.hui-single-post-comment-reply-avatar {
	flex-shrink: 0;
}

.hui-single-post-comment-reply-avatar img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.hui-single-post-comment-reply-content {
	flex: 1;
	min-width: 0;
}

.hui-single-post-comment-reply-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.25rem;
}

.hui-single-post-comment-reply-author {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-single-post-comment-reply-location {
	font-size: 0.6875rem;
	color: var(--color-text-tertiary);
}

.hui-single-post-comment-reply-time {
	font-size: 0.6875rem;
	color: var(--color-text-tertiary);
}

.hui-single-post-comment-reply-text {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text);
	margin-bottom: 0.375rem;
}

/* 回复某人的 @ 标记 */
.hui-single-post-comment-reply-to {
	color: var(--xun-secondary, var(--color-primary));
	font-weight: 500;
	margin-right: 0.25rem;
}

.hui-single-post-comment-reply-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hui-single-post-comment-reply-action {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: color 0.2s var(--ease-smooth);
}

.hui-single-post-comment-reply-action:hover {
	color: var(--color-text);
}

/* 子评论点赞按钮激活状态 */
.hui-single-post-comment-reply-action.is-active {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-comment-reply-action.is-active:hover {
	color: var(--xun-secondary-hover, var(--color-secondary-dark, var(--color-secondary)));
}

/* 子评论点赞按钮加载状态 */
.hui-single-post-comment-reply-action.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* 回复提示 */
.hui-single-post-comment-reply-hint {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-sm, 4px);
	margin-bottom: 0.5rem;
}

.hui-single-post-comment-reply-hint-text {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.hui-single-post-comment-reply-hint-text span {
	color: var(--xun-secondary, var(--color-primary));
	font-weight: 500;
}

.hui-single-post-comment-reply-hint-cancel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	background: transparent;
	border: none;
	color: var(--color-text-tertiary);
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-comment-reply-hint-cancel:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text);
}

/* 评论空状态 */
.hui-single-post-comments-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	text-align: center;
}

.hui-single-post-comments-empty svg {
	color: var(--color-text-quaternary);
	margin-bottom: 1rem;
}

.hui-single-post-comments-empty p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-tertiary);
}

/* ============================================================================
   右侧边栏
   ============================================================================ */

.hui-single-post-sidebar {
	position: sticky;
	top: calc(var(--xun-header-height, 60px) + 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* 作者卡片 */
.hui-single-post-author-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	text-align: center;
}

.hui-single-post-author-card-avatar {
	margin-bottom: 0.75rem;
}

.hui-single-post-author-card-img {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
}

.hui-single-post-author-card-name {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	margin-bottom: 0.375rem;
}

.hui-single-post-author-card-name:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-author-card-vip {
	display: inline-flex;
	padding: 0.125rem 0.5rem;
	background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: var(--radius-sm, 4px);
	margin-bottom: 1rem;
}

.hui-single-post-author-card-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	width: 100%;
	padding: 1rem 0;
	border-top: 1px solid var(--color-border-secondary);
	border-bottom: 1px solid var(--color-border-secondary);
	margin-bottom: 1rem;
}

.hui-single-post-author-card-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.hui-single-post-author-card-stat-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-text);
}

.hui-single-post-author-card-stat-label {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-single-post-author-card-follow {
	width: 100%;
	padding: 0.625rem 1rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-single-post-author-card-follow:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-single-post-author-card-follow.is-following {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary);
}

.hui-single-post-author-card-follow.is-following:hover {
	background: var(--color-fill-secondary);
}

/* 热门话题/圈子小工具 */
.hui-single-post-widget {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	overflow: hidden;
}

.hui-single-post-widget-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-single-post-widget-header svg {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-widget-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-single-post-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hui-single-post-widget-item {
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-single-post-widget-item:last-child {
	border-bottom: none;
}

.hui-single-post-widget-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	transition: background 0.2s var(--ease-smooth);
}

.hui-single-post-widget-link:hover {
	background: var(--color-fill-quaternary);
}

.hui-single-post-widget-hash {
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-single-post-widget-name {
	flex: 1;
	min-width: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-single-post-widget-count {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* 圈子列表 */
.hui-single-post-widget-list--circles .hui-single-post-widget-item {
	padding: 0;
}

.hui-single-post-widget-circle-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	transition: background 0.2s var(--ease-smooth);
}

.hui-single-post-widget-circle-link:hover {
	background: var(--color-fill-quaternary);
}

.hui-single-post-widget-circle-avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, 
		var(--xun-secondary, var(--color-secondary)) 0%, 
		var(--xun-primary, var(--color-primary)) 100%
	);
	border-radius: var(--radius-md, 6px);
	color: #fff;
	overflow: hidden;
}

.hui-single-post-widget-circle-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hui-single-post-widget-circle-info {
	flex: 1;
	min-width: 0;
}

.hui-single-post-widget-circle-name {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hui-single-post-widget-circle-stats {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

/* ============================================================================
   帖子详情页响应式样式
   ============================================================================ */

/* 平板端 */
@media (max-width: 1024px) {
	.hui-single-post-container {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	/* 隐藏左侧操作栏，改为底部固定栏 */
	.hui-single-post-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		z-index: 100;
		padding: 0;
		background: var(--color-bg-container);
		border-top: 1px solid var(--color-border-secondary);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	.hui-single-post-actions-inner {
		flex-direction: row;
		justify-content: space-around;
		padding: 0.5rem 1rem;
		border: none;
		border-radius: 0;
		gap: 0;
	}

	.hui-single-post-action {
		flex-direction: column;
		padding: 0.5rem;
	}

	.hui-single-post-action-count {
		font-size: 0.625rem;
	}

	/* 右侧边栏移到内容下方 */
	.hui-single-post-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.hui-single-post-author-card {
		grid-column: 1 / -1;
	}

	/* 主内容区底部留出空间给固定操作栏 */
	.hui-single-post-main {
		padding-bottom: 80px;
	}
}

/* 移动端 */
@media (max-width: 768px) {
	.hui-single-post-wrapper {
		padding: 1rem 0;
	}

	.hui-single-post-container {
		padding: 0 0.75rem;
	}

	.hui-single-post-card {
		padding: 1rem;
		border-radius: var(--radius-md, 6px);
	}

	/* 作者信息 */
	.hui-single-post-header {
		gap: 0.625rem;
	}

	.hui-single-post-avatar-img {
		width: 40px;
		height: 40px;
	}

	.hui-single-post-author-name {
		font-size: 0.875rem;
	}

	.hui-single-post-meta {
		font-size: 0.75rem;
	}

	/* 头部操作按钮 */
	.hui-single-post-header-actions {
		gap: 0.375rem;
	}

	.hui-single-post-message-btn {
		width: 32px;
		height: 32px;
	}

	.hui-single-post-message-btn svg {
		width: 14px;
		height: 14px;
	}

	.hui-single-post-follow-btn {
		padding: 0.25rem 0.625rem;
		font-size: 0.75rem;
	}

	/* 标题 */
	.hui-single-post-title {
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
	}

	.hui-single-post-badge {
		font-size: 0.625rem;
		padding: 0.125rem 0.375rem;
	}

	/* 内容 */
	.hui-single-post-content {
		font-size: 0.875rem;
		line-height: 1.7;
	}

	/* 图片画廊 */
	.hui-single-post-images-grid {
		gap: 0.375rem;
	}

	.hui-single-post-images--grid-3,
	.hui-single-post-images--grid {
		max-width: 100%;
	}

	/* 帖子详情页图片画廊 - 移动端九宫格布局 */
	.hui-post-gallery {
		gap: 0.25rem !important;
	}

	/* 多张图片（3张及以上）强制使用 3 列九宫格布局 */
	.hui-single-post-card .hui-post-gallery.xun-gallery-cols-3,
	.hui-post-gallery.xun-gallery-cols-3 {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* 2 张图片保持 2 列 */
	.hui-single-post-card .hui-post-gallery.xun-gallery-cols-2,
	.hui-post-gallery.xun-gallery-cols-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* 单张图片保持原样，限制最大宽度 */
	.hui-single-post-card .hui-post-gallery.xun-gallery-cols-1,
	.hui-post-gallery.xun-gallery-cols-1 {
		grid-template-columns: 1fr !important;
		max-width: 70%;
	}

	/* 文件附件 */
	.hui-single-post-file-link {
		padding: 0.75rem;
	}

	.hui-single-post-file-icon {
		width: 40px;
		height: 40px;
	}

	.hui-single-post-file-name {
		font-size: 0.875rem;
	}

	/* 话题标签 */
	.hui-single-post-topics {
		gap: 0.375rem;
	}

	.hui-single-post-topic {
		padding: 0.25rem 0.625rem;
		font-size: 0.75rem;
	}

	/* 底部统计 */
	.hui-single-post-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.hui-single-post-stats {
		gap: 0.75rem;
	}

	.hui-single-post-stat {
		font-size: 0.75rem;
	}

	/* 评论区 */
	.hui-single-post-comments {
		padding: 1rem;
		border-radius: var(--radius-md, 6px);
	}

	.hui-single-post-comments-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.hui-single-post-comments-sort {
		width: 100%;
		justify-content: flex-start;
	}

	.hui-single-post-comments-sort-btn {
		padding: 0.25rem 0.5rem;
		font-size: 0.75rem;
	}

	.hui-single-post-comment-form {
		gap: 0.5rem;
	}

	.hui-single-post-comment-avatar img {
		width: 32px;
		height: 32px;
	}

	.hui-single-post-comment-input {
		min-height: 60px;
		padding: 0.625rem;
		font-size: 0.875rem;
	}

	.hui-single-post-comment-submit {
		padding: 0.375rem 1rem;
		font-size: 0.8125rem;
	}

	.hui-single-post-comment-login {
		flex-direction: column;
		padding: 1.5rem 1rem;
		gap: 0.75rem;
	}

	.hui-single-post-comment-login p {
		font-size: 0.875rem;
	}

	/* 评论列表 */
	.hui-single-post-comment-item {
		gap: 0.5rem;
	}

	.hui-single-post-comment-item-avatar img {
		width: 32px;
		height: 32px;
	}

	.hui-single-post-comment-item-author {
		font-size: 0.8125rem;
	}

	.hui-single-post-comment-item-text {
		font-size: 0.875rem;
	}

	.hui-single-post-comment-item-actions {
		gap: 0.75rem;
	}

	.hui-single-post-comment-item-action {
		font-size: 0.75rem;
	}

	/* 评论头部徽章 - 移动端适配 */
	.hui-single-post-comment-item-header {
		flex-wrap: wrap;
		gap: 0.25rem 0.375rem;
	}

	/* 评论作者名 */
	.hui-single-post-comment-item-author {
		font-size: 0.8125rem;
	}

	/* 评论头部徽章缩小 */
	.hui-single-post-comment-item-badge,
	.hui-single-post-comment-item-location,
	.hui-single-post-comment-item-vip {
		font-size: 0.5625rem;
		padding: 0.0625rem 0.25rem;
	}

	.hui-single-post-comment-item-location svg {
		width: 10px;
		height: 10px;
	}

	.hui-single-post-comment-item-vip svg {
		width: 10px;
		height: 10px;
	}

	/* 靓号徽章移动端适配 */
	.hui-single-post-comment-item-header .hui-fancy-id-badge {
		font-size: 0.5625rem;
		padding: 0.0625rem 0.25rem;
	}

	/* 等级徽章移动端适配 */
	.hui-comment-level-badge.xun-level-badge--icon .xun-level-icon {
		height: 14px;
		max-height: 14px;
	}

	.hui-comment-level-badge.xun-level-badge--text {
		font-size: 0.5625rem;
		padding: 0.0625rem 0.25rem;
	}

	/* 评论操作区 - 移动端适配 */
	.hui-single-post-comment-item-actions {
		flex-wrap: wrap;
		gap: 0.5rem 0.75rem;
	}

	/* 评论时间 */
	.hui-single-post-comment-item-time {
		font-size: 0.6875rem;
	}

	/* 三点菜单移动端适配 */
	.hui-comment-more-menu {
		margin-left: auto;
	}

	.hui-comment-more-btn {
		width: 20px;
		height: 20px;
	}

	.hui-comment-more-btn svg {
		width: 12px;
		height: 12px;
	}

	.hui-comment-more-dropdown {
		right: 0;
		left: auto;
		min-width: 90px;
	}

	.hui-comment-more-item {
		padding: 0.375rem 0.625rem;
		font-size: 0.75rem;
	}

	.hui-comment-more-item svg {
		width: 12px;
		height: 12px;
	}

	/* 子评论头部徽章 - 移动端适配 */
	.hui-single-post-comment-reply-header {
		gap: 0.25rem 0.375rem;
	}

	.hui-single-post-comment-reply-author {
		font-size: 0.75rem;
	}

	.hui-single-post-comment-reply-location {
		font-size: 0.5625rem;
	}

	/* 子评论头部徽章缩小 */
	.hui-single-post-comment-reply-header .hui-single-post-comment-item-badge,
	.hui-single-post-comment-reply-header .hui-single-post-comment-item-vip {
		font-size: 0.5rem;
		padding: 0.0625rem 0.1875rem;
	}

	.hui-single-post-comment-reply-header .hui-single-post-comment-item-vip svg {
		width: 9px;
		height: 9px;
	}

	/* 子评论靓号徽章 */
	.hui-single-post-comment-reply-header .hui-fancy-id-badge {
		font-size: 0.5rem;
		padding: 0.0625rem 0.1875rem;
	}

	/* 子评论等级徽章 */
	.hui-single-post-comment-reply-header .hui-comment-level-badge.xun-level-badge--icon .xun-level-icon {
		height: 12px;
		max-height: 12px;
	}

	.hui-single-post-comment-reply-header .hui-comment-level-badge.xun-level-badge--text {
		font-size: 0.5rem;
		padding: 0.0625rem 0.1875rem;
	}

	/* 子评论操作区 - 移动端适配 */
	.hui-single-post-comment-reply-actions {
		flex-wrap: wrap;
		gap: 0.375rem 0.5rem;
	}

	.hui-single-post-comment-reply-action {
		font-size: 0.6875rem;
	}

	.hui-single-post-comment-reply-time {
		font-size: 0.625rem;
	}

	/* 子评论三点菜单 */
	.hui-comment-more-menu--reply {
		margin-left: auto;
	}

	.hui-comment-more-menu--reply .hui-comment-more-btn {
		width: 18px;
		height: 18px;
	}

	.hui-comment-more-menu--reply .hui-comment-more-btn svg {
		width: 10px;
		height: 10px;
	}

	.hui-comment-more-menu--reply .hui-comment-more-dropdown {
		right: 0;
		left: auto;
	}

	/* 右侧边栏 */
	.hui-single-post-sidebar {
		grid-template-columns: 1fr;
	}

	.hui-single-post-author-card {
		padding: 1rem;
	}

	.hui-single-post-author-card-img {
		width: 56px;
		height: 56px;
	}

	.hui-single-post-author-card-name {
		font-size: 0.9375rem;
	}

	.hui-single-post-author-card-stats {
		gap: 1rem;
		padding: 0.75rem 0;
	}

	.hui-single-post-author-card-stat-value {
		font-size: 1rem;
	}

	.hui-single-post-author-card-stat-label {
		font-size: 0.6875rem;
	}

	.hui-single-post-author-card-follow {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
	}

	/* 小工具 */
	.hui-single-post-widget-header {
		padding: 0.75rem;
	}

	.hui-single-post-widget-title {
		font-size: 0.875rem;
	}

	.hui-single-post-widget-link {
		padding: 0.625rem 0.75rem;
	}

	.hui-single-post-widget-name {
		font-size: 0.8125rem;
	}

	.hui-single-post-widget-circle-link {
		padding: 0.625rem 0.75rem;
	}

	.hui-single-post-widget-circle-avatar {
		width: 36px;
		height: 36px;
	}

	.hui-single-post-widget-circle-name {
		font-size: 0.8125rem;
	}

	.hui-single-post-widget-circle-stats {
		font-size: 0.6875rem;
	}
}

/* 超小屏幕 */
@media (max-width: 480px) {
	.hui-single-post-actions-inner {
		padding: 0.375rem 0.5rem;
	}

	.hui-single-post-action {
		padding: 0.375rem;
	}

	.hui-single-post-action svg {
		width: 20px;
		height: 20px;
	}
}


/* ============================================================================
   分享弹窗样式
   ============================================================================ */

.hui-share-popup {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.hui-share-popup.is-active {
	opacity: 1;
	visibility: visible;
}

.hui-share-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.hui-share-popup-content {
	position: relative;
	width: 90%;
	max-width: 360px;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	transform: scale(0.95);
	transition: transform 0.3s var(--ease-smooth);
}

.hui-share-popup.is-active .hui-share-popup-content {
	transform: scale(1);
}

.hui-share-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-share-popup-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-share-popup-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-share-popup-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-share-popup-body {
	padding: 1.25rem;
}

.hui-share-popup-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.hui-share-popup-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s var(--ease-smooth);
}

.hui-share-popup-item:hover {
	background: var(--color-fill-quaternary);
}

.hui-share-popup-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full, 9999px);
}

.hui-share-popup-icon--qq {
	background: #e8f4ff;
	color: #12b7f5;
}

.hui-share-popup-icon--qzone {
	background: #fff8e6;
	color: #ffb800;
}

.hui-share-popup-icon--weibo {
	background: #ffebeb;
	color: #e6162d;
}

.hui-share-popup-icon--wechat {
	background: #e8f8e8;
	color: #07c160;
}

.hui-share-popup-label {
	font-size: 0.8125rem;
	color: var(--color-text);
}

.hui-share-popup-divider {
	display: flex;
	align-items: center;
	margin: 1.25rem 0;
}

.hui-share-popup-divider::before,
.hui-share-popup-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border-secondary);
}

.hui-share-popup-divider span {
	padding: 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.hui-share-popup-copy {
	display: flex;
	gap: 0.5rem;
}

.hui-share-popup-copy-input {
	flex: 1;
	min-width: 0;
	padding: 0.625rem 0.875rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	color: var(--color-text);
	outline: none;
}

.hui-share-popup-copy-input:focus {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-share-popup-copy-btn {
	flex-shrink: 0;
	padding: 0.625rem 1rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-share-popup-copy-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
}

.hui-share-popup-copy-btn.is-copied {
	background: var(--color-success);
}

/* 移动端分享弹窗 */
@media (max-width: 480px) {
	.hui-share-popup-content {
		width: 95%;
	}

	.hui-share-popup-grid {
		gap: 0.75rem;
	}

	.hui-share-popup-icon {
		width: 44px;
		height: 44px;
	}

	.hui-share-popup-label {
		font-size: 0.75rem;
	}
}

/* ============================================================================
   举报弹窗样式
   ============================================================================ */

.hui-report-popup {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.hui-report-popup.is-active {
	opacity: 1;
	visibility: visible;
}

.hui-report-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.hui-report-popup-content {
	position: relative;
	width: 90%;
	max-width: 400px;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	transform: scale(0.95);
	transition: transform 0.3s var(--ease-smooth);
}

.hui-report-popup.is-active .hui-report-popup-content {
	transform: scale(1);
}

.hui-report-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-report-popup-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-report-popup-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-report-popup-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-report-popup-body {
	padding: 1.25rem;
}

.hui-report-popup-desc {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

.hui-report-popup-options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.hui-report-popup-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid transparent;
	border-radius: var(--radius-md, 6px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-report-popup-option:hover {
	background: var(--color-fill-tertiary);
}

.hui-report-popup-option:has(input:checked) {
	background: var(--color-primary-bg);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-report-popup-option input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--xun-secondary, var(--color-secondary));
}

.hui-report-popup-option span {
	font-size: 0.875rem;
	color: var(--color-text);
}

.hui-report-popup-textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	color: var(--color-text);
	resize: vertical;
	outline: none;
	transition: border-color 0.2s var(--ease-smooth);
}

.hui-report-popup-textarea:focus {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-report-popup-textarea::placeholder {
	color: var(--color-text-tertiary);
}

.hui-report-popup-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-report-popup-cancel {
	padding: 0.625rem 1.25rem;
	background: var(--color-fill-quaternary);
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-report-popup-cancel:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-report-popup-submit {
	padding: 0.625rem 1.25rem;
	background: var(--color-error);
	border: none;
	border-radius: var(--radius-md, 6px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-report-popup-submit:hover {
	opacity: 0.9;
}

.hui-report-popup-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 移动端举报弹窗 */
@media (max-width: 480px) {
	.hui-report-popup-content {
		width: 95%;
	}

	.hui-report-popup-option {
		padding: 0.625rem 0.875rem;
	}

	.hui-report-popup-option span {
		font-size: 0.8125rem;
	}
}


/* ============================================================================
   操作栏标签样式
   ============================================================================ */

.hui-single-post-action-label {
	font-size: 0.6875rem;
	font-weight: 500;
	margin-top: 0.125rem;
}

/* 举报按钮特殊样式 */
.hui-single-post-action--report {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-single-post-action--report:hover {
	color: var(--color-error);
}


/* ============================================================================
   SPA 底部抽屉弹窗适配
   ============================================================================ */

/* 
 * 父主题 SPA 底部抽屉弹窗使用以下类名：
 * - .bottom-sheet-overlay: 遮罩层
 * - .bottom-sheet-content: 内容容器
 * 
 * 问题：在平板端（1024px 以下），左侧操作栏使用 position: fixed 变成底部固定栏，
 * 但在弹窗内 fixed 定位是相对于视口而不是弹窗容器，导致布局错乱。
 * 
 * 解决方案：在弹窗内强制使用三栏 grid 布局，禁用 fixed 定位。
 */

/* 在 SPA 底部抽屉弹窗中，确保三栏布局顶部对齐 */
.bottom-sheet-content .hui-single-post-wrapper {
	padding-top: 0;
	min-height: auto;
	background: transparent;
}

.bottom-sheet-content .hui-single-post-container {
	align-items: flex-start;
}

/* 在弹窗中禁用 sticky/fixed 定位，改用普通定位 */
.bottom-sheet-content .hui-single-post-actions {
	position: relative !important;
	top: 0 !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	z-index: auto !important;
	background: var(--color-bg-container) !important;
	border: 1px solid var(--color-border-secondary) !important;
	border-radius: var(--xun-radius, 8px) !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.bottom-sheet-content .hui-single-post-actions-inner {
	flex-direction: column !important;
	justify-content: flex-start !important;
	padding: 0.75rem !important;
	border: none !important;
	border-radius: 0 !important;
	gap: 0.5rem !important;
}

.bottom-sheet-content .hui-single-post-sidebar {
	position: relative;
	top: 0;
}

/* 确保弹窗内的内容区域正确显示 */
.bottom-sheet-content .hui-single-post-main {
	min-width: 0;
	padding-bottom: 0 !important;
}

/* 修复弹窗内的 grid 布局 - 桌面端保持三栏 */
@media (min-width: 1025px) {
	.bottom-sheet-content .hui-single-post-container {
		display: grid !important;
		grid-template-columns: 60px 1fr 280px !important;
		gap: 1.5rem !important;
		align-items: start !important;
	}
}

/* 平板端弹窗适配 - 保持三栏但调整宽度 */
@media (min-width: 769px) and (max-width: 1024px) {
	.bottom-sheet-content .hui-single-post-container {
		display: grid !important;
		grid-template-columns: 50px 1fr 220px !important;
		gap: 1rem !important;
		align-items: start !important;
	}

	.bottom-sheet-content .hui-single-post-actions {
		display: block !important;
	}

	.bottom-sheet-content .hui-single-post-sidebar {
		display: block !important;
	}
}

/* 移动端弹窗适配 - 隐藏左右栏 */
@media (max-width: 768px) {
	.bottom-sheet-content .hui-single-post-container {
		grid-template-columns: 1fr !important;
	}

	.bottom-sheet-content .hui-single-post-actions {
		display: none !important;
	}

	.bottom-sheet-content .hui-single-post-sidebar {
		display: none !important;
	}
}


/* ============================================================================
   评论区图片预览样式
   ============================================================================ */

/* 评论图片预览容器 */
.hui-comment-image-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

/* 评论图片预览项 */
.hui-comment-image-preview-item {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	background: var(--color-fill-quaternary);
}

.hui-comment-image-preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 删除按钮 */
.hui-comment-image-preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-comment-image-preview-remove:hover {
	background: rgba(0, 0, 0, 0.8);
	transform: scale(1.1);
}

/* 评论工具按钮状态 */
.hui-single-post-comment-tool.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.hui-single-post-comment-tool.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid var(--color-text-tertiary);
	border-top-color: transparent;
	border-radius: 50%;
	animation: hui-spin 0.8s linear infinite;
}

@keyframes hui-spin {
	to {
		transform: rotate(360deg);
	}
}

.hui-single-post-comment-tool.is-active {
	color: var(--xun-secondary, var(--color-secondary));
	background: var(--color-primary-bg);
}

/* ============================================================================
   评论区表情选择器样式
   ============================================================================ */

.hui-comment-emoji-picker {
	position: absolute;
	z-index: 1000;
	width: 320px;
	max-height: 280px;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	overflow: hidden;
}

.hui-comment-emoji-picker .hui-emoji-picker-header {
	padding: 0.625rem 0.875rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-comment-emoji-picker .hui-emoji-picker-title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-comment-emoji-picker .hui-emoji-picker-body {
	max-height: 220px;
	overflow-y: auto;
	padding: 0.5rem;
}

.hui-comment-emoji-picker .hui-emoji-picker-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.25rem;
}

.hui-comment-emoji-picker .hui-emoji-picker-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm, 4px);
	font-size: 1.25rem;
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
}

.hui-comment-emoji-picker .hui-emoji-picker-item:hover {
	background: var(--color-fill-tertiary);
	transform: scale(1.15);
}

/* ============================================================================
   评论内容中的图片样式 - 使用父主题灯箱
   ============================================================================ */

.hui-single-post-comment-image {
	margin-top: 0.5rem;
	max-width: 200px;
	border-radius: var(--radius-md, 6px) !important;
	overflow: hidden;
}

/* 覆盖父主题画廊的默认样式 */
.hui-single-post-comment-image.xun-image-gallery {
	margin: 0.5rem 0 0 0;
	gap: 0;
}

.hui-single-post-comment-image .xun-gallery-item {
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
}

.hui-single-post-comment-image .xun-gallery-image-wrapper {
	max-height: 200px;
}

.hui-single-post-comment-image .xun-gallery-image {
	max-height: 200px;
	object-fit: cover;
}

/* 子评论中的图片稍小一些 */
.hui-single-post-comment-reply-text .hui-single-post-comment-image {
	max-width: 160px;
}

.hui-single-post-comment-reply-text .hui-single-post-comment-image .xun-gallery-image-wrapper,
.hui-single-post-comment-reply-text .hui-single-post-comment-image .xun-gallery-image {
	max-height: 160px;
}

/* 响应式适配 */
@media (max-width: 768px) {
	.hui-comment-emoji-picker {
		width: 280px;
	}

	.hui-comment-emoji-picker .hui-emoji-picker-grid {
		grid-template-columns: repeat(7, 1fr);
	}

	.hui-comment-image-preview-item {
		width: 64px;
		height: 64px;
	}

	.hui-single-post-comment-image {
		max-width: 160px;
	}

	.hui-single-post-comment-image .xun-gallery-image-wrapper,
	.hui-single-post-comment-image .xun-gallery-image {
		max-height: 160px;
	}

	.hui-single-post-comment-reply-text .hui-single-post-comment-image {
		max-width: 120px;
	}

	.hui-single-post-comment-reply-text .hui-single-post-comment-image .xun-gallery-image-wrapper,
	.hui-single-post-comment-reply-text .hui-single-post-comment-image .xun-gallery-image {
		max-height: 120px;
	}
}


/* ============================================================================
   评论排序按钮加载状态
   ============================================================================ */

.hui-single-post-comments-sort-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.hui-single-post-comments-sort-btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid var(--color-text-tertiary);
	border-top-color: transparent;
	border-radius: 50%;
	animation: hui-spin 0.8s linear infinite;
}

.hui-single-post-comments-sort-btn.is-active.is-loading::after {
	border-color: rgba(255, 255, 255, 0.3);
	border-top-color: transparent;
}


/* ============================================================================
   分享弹窗
   ============================================================================ */

.hui-share-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ease-smooth), visibility 0.3s var(--ease-smooth);
}

.hui-share-modal.is-active {
	opacity: 1;
	visibility: visible;
}

.hui-share-modal-overlay {
	position: absolute;
	inset: 0;
	background: var(--color-bg-mask);
	cursor: pointer;
}

.hui-share-modal-content {
	position: relative;
	width: 100%;
	max-width: 360px;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	transform: scale(0.95) translateY(10px);
	transition: transform 0.3s var(--ease-smooth);
}

.hui-share-modal.is-active .hui-share-modal-content {
	transform: scale(1) translateY(0);
}

.hui-share-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-share-modal-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.hui-share-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-share-modal-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text);
}

.hui-share-modal-body {
	padding: 1.25rem;
}

/* 分享平台网格 */
.hui-share-modal-platforms {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.hui-share-modal-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 0.5rem;
	background: transparent;
	border: none;
	border-radius: var(--xun-radius, 8px);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-share-modal-item:hover {
	background: var(--color-fill-quaternary);
}

.hui-share-modal-item:hover .hui-share-modal-icon {
	transform: scale(1.1);
}

.hui-share-modal-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full, 9999px);
	transition: transform 0.2s var(--ease-smooth);
}

.hui-share-modal-icon--qq {
	background: linear-gradient(135deg, #12b7f5 0%, #0d9de8 100%);
	color: #fff;
}

.hui-share-modal-icon--qzone {
	background: linear-gradient(135deg, #fece00 0%, #f5b800 100%);
	color: #fff;
}

.hui-share-modal-icon--weibo {
	background: linear-gradient(135deg, #e6162d 0%, #d91020 100%);
	color: #fff;
}

.hui-share-modal-icon--wechat {
	background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
	color: #fff;
}

.hui-share-modal-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-secondary);
}

/* 复制链接区域 */
.hui-share-modal-copy {
	padding-top: 1rem;
	border-top: 1px solid var(--color-border-secondary);
}

.hui-share-modal-copy-input {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
}

.hui-share-modal-copy-input input {
	flex: 1;
	min-width: 0;
	padding: 0.375rem 0.5rem;
	background: transparent;
	border: none;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	outline: none;
}

.hui-share-modal-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--xun-radius-sm, 6px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	white-space: nowrap;
}

.hui-share-modal-copy-btn:hover {
	background: var(--xun-secondary-hover, oklch(from var(--xun-secondary, var(--color-secondary)) calc(l - 0.05) c h));
}

.hui-share-modal-copy-btn svg {
	flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 480px) {
	.hui-share-modal {
		padding: 0;
		align-items: flex-end;
	}

	.hui-share-modal-content {
		max-width: 100%;
		border-radius: var(--xun-radius-lg, 12px) var(--xun-radius-lg, 12px) 0 0;
		transform: translateY(100%);
	}

	.hui-share-modal.is-active .hui-share-modal-content {
		transform: translateY(0);
	}

	.hui-share-modal-platforms {
		gap: 0.75rem;
	}

	.hui-share-modal-icon {
		width: 44px;
		height: 44px;
	}

	.hui-share-modal-icon svg {
		width: 24px;
		height: 24px;
	}
}



/* ============================================================================
   帖子权限设置样式
   ============================================================================ */

/* 可见性设置容器 */
.hui-post-form-visibility {
	position: relative;
}

.hui-post-form-visibility-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 0.5rem);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-visibility-btn:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary);
}

.hui-post-form-visibility-btn svg {
	flex-shrink: 0;
}

/* 可见性下拉菜单 */
.hui-post-form-visibility-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 160px;
	margin-top: 0.25rem;
	padding: 0.5rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-lg, 0.75rem);
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s var(--ease-smooth);
	z-index: 1000;
}

.hui-post-form-visibility.is-open .hui-post-form-visibility-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hui-post-form-visibility-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	color: var(--color-text);
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 0.5rem);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
	text-align: left;
}

.hui-post-form-visibility-option:hover {
	background: var(--color-fill-tertiary);
}

.hui-post-form-visibility-option.is-selected {
	color: var(--xun-secondary, var(--color-secondary));
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
}

.hui-post-form-visibility-option svg {
	flex-shrink: 0;
	color: var(--color-text-tertiary);
}

.hui-post-form-visibility-option.is-selected svg {
	color: var(--xun-secondary, var(--color-secondary));
}

/* 隐藏内容区域 */
.hui-post-form-hidden-content {
	margin: 0.75rem 0;
	background: var(--color-fill-quaternary);
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
}

.hui-post-form-hidden-content-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-post-form-hidden-content-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #fff;
	background: var(--badge-color, var(--xun-secondary, var(--color-secondary)));
	border-radius: var(--radius-full, 9999px);
	white-space: nowrap;
}

.hui-post-form-hidden-content-badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hui-post-form-hidden-content-badge-icon svg {
	width: 14px;
	height: 14px;
}

.hui-post-form-hidden-content-settings {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-post-form-hidden-setting {
	display: none;
}

.hui-post-form-hidden-setting.is-active {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hui-post-form-hidden-setting-input {
	width: 100px;
	padding: 0.375rem 0.5rem;
	font-size: 0.8125rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 0.5rem);
	outline: none;
	transition: border-color 0.2s var(--ease-smooth);
}

.hui-post-form-hidden-setting-input:focus {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-hidden-setting-input::placeholder {
	color: var(--color-text-quaternary);
}

.hui-post-form-hidden-setting-suffix {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* 等级选择 */
.hui-post-form-hidden-setting--levels {
	flex-direction: column;
	gap: 0.75rem;
}

.hui-post-form-hidden-setting--levels.is-active {
	display: flex;
}

.hui-post-form-hidden-level-item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 0.5rem);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
}

.hui-post-form-hidden-level-item:hover {
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-hidden-level-item:has(input:checked) {
	color: var(--xun-secondary, var(--color-secondary));
	background: oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.1);
	border-color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-hidden-level-item input {
	display: none;
}

/* 等级分组 */
.hui-post-form-hidden-level-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.hui-post-form-hidden-level-group-title {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-tertiary);
}

.hui-post-form-hidden-level-items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* 移除按钮 */
.hui-post-form-hidden-content-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: auto;
	color: var(--color-text-tertiary);
	background: transparent;
	border: none;
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
}

.hui-post-form-hidden-content-remove:hover {
	color: var(--color-error);
	background: oklch(from var(--color-error) l c h / 0.1);
}

/* 隐藏内容输入框 */
.hui-post-form-hidden-content-input {
	width: 100%;
	min-height: 80px;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
	background: transparent;
	border: none;
	outline: none;
	resize: vertical;
}

.hui-post-form-hidden-content-input::placeholder {
	color: var(--xun-secondary, var(--color-secondary));
	opacity: 0.6;
}

/* 预览按钮 */
.hui-post-form-preview-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: color 0.15s var(--ease-smooth);
}

.hui-post-form-preview-btn:hover {
	color: var(--xun-secondary, var(--color-secondary));
}

.hui-post-form-content-row {
	position: relative;
}

/* ============================================================================
   帖子详情页隐藏内容样式
   ============================================================================ */

.hui-hidden-content {
	margin: 1.5rem 0;
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
}

/* 已解锁状态 */
.hui-hidden-content-unlocked {
	background: var(--color-fill-quaternary);
}

.hui-hidden-content-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-hidden-content-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: #fff;
	background: var(--badge-color, var(--color-secondary));
	border-radius: var(--radius-full, 9999px);
}

.hui-hidden-content-status {
	font-size: 0.75rem;
	color: var(--color-success);
}

.hui-hidden-content-body {
	padding: 1rem;
}

.hui-hidden-content-body p:last-child {
	margin-bottom: 0;
}

/* 未解锁状态 */
.hui-hidden-content-locked {
	background: linear-gradient(135deg, var(--color-fill-quaternary) 0%, var(--color-fill-tertiary) 100%);
	border: 1px dashed var(--color-border);
}

.hui-hidden-content-lock-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem 1rem;
	text-align: center;
}

.hui-hidden-content-lock-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	color: var(--color-text-tertiary);
	background: var(--color-fill-secondary);
	border-radius: var(--radius-full, 9999px);
}

.hui-hidden-content-lock-text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.hui-hidden-content-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	background: var(--xun-secondary, var(--color-secondary));
	border: none;
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	text-decoration: none;
}

.hui-hidden-content-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.3);
}

.hui-hidden-content-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 密码输入表单 */
.hui-hidden-content-password-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-hidden-content-password-input {
	width: 160px;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full, 9999px);
	outline: none;
	transition: border-color 0.2s var(--ease-smooth);
}

.hui-hidden-content-password-input:focus {
	border-color: var(--xun-secondary, var(--color-secondary));
}

/* 积分信息 */
.hui-hidden-content-points-info,
.hui-hidden-content-level-info {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* 付费按钮特殊样式 */
.hui-hidden-content-btn--pay {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.hui-hidden-content-btn--pay:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* 积分按钮特殊样式 */
.hui-hidden-content-btn--points {
	background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.hui-hidden-content-btn--points:hover {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* 响应式 */
@media (max-width: 640px) {
	.hui-post-form-hidden-content-header {
		flex-wrap: wrap;
	}

	.hui-post-form-hidden-content-settings {
		width: 100%;
		margin-top: 0.5rem;
	}

	.hui-post-form-hidden-setting--levels {
		width: 100%;
	}

	.hui-hidden-content-password-form {
		flex-direction: column;
		width: 100%;
	}

	.hui-hidden-content-password-input {
		width: 100%;
	}
}


/* ============================================================================
   文件权限设置样式
   ============================================================================ */

/* 文件权限容器 */
.hui-post-form-file-permission {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-secondary);
}

/* 权限设置头部 */
.hui-post-form-file-permission-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* 权限切换按钮 */
.hui-post-form-file-permission-toggle {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-file-permission-toggle:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border);
	color: var(--color-text);
}

.hui-post-form-file-permission-toggle svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.hui-post-form-file-permission-arrow {
	transition: transform 0.2s var(--ease-smooth);
}

.hui-post-form-file-permission.is-open .hui-post-form-file-permission-arrow {
	transform: rotate(180deg);
}

/* 权限徽章 */
.hui-post-form-file-permission-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	background: color-mix(in oklch, var(--badge-color, #6b7280) 15%, transparent);
	color: var(--badge-color, #6b7280);
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: var(--radius-sm, 4px);
}

/* 权限下拉菜单 */
.hui-post-form-file-permission-dropdown {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	z-index: 1000;
	min-width: 160px;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 6px);
	box-shadow: var(--shadow-dropdown);
	padding: 0.25rem;
}

.hui-post-form-file-permission {
	position: relative;
}

/* 权限选项 */
.hui-post-form-file-permission-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem 0.625rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm, 4px);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
	text-align: left;
}

.hui-post-form-file-permission-option:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-post-form-file-permission-option.is-selected {
	background: var(--color-primary-bg);
	color: var(--color-primary);
}

.hui-post-form-file-permission-option svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* 权限设置详情 */
.hui-post-form-file-permission-settings {
	margin-top: 0.75rem;
}

.hui-post-form-file-permission-setting {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hui-post-form-file-permission-input {
	flex: 1;
	max-width: 150px;
	padding: 0.375rem 0.625rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.8125rem;
	color: var(--color-text);
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-form-file-permission-input:focus {
	outline: none;
	border-color: var(--color-primary);
	background: var(--color-bg-container);
}

.hui-post-form-file-permission-suffix {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* 等级设置 */
.hui-post-form-file-permission-setting--levels {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.hui-post-form-file-permission-level-group {
	width: 100%;
}

.hui-post-form-file-permission-level-title {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-tertiary);
	margin-bottom: 0.375rem;
}

.hui-post-form-file-permission-level-items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.hui-post-form-file-permission-level-item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.15s var(--ease-smooth);
}

.hui-post-form-file-permission-level-item:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border);
}

.hui-post-form-file-permission-level-item:has(input:checked) {
	background: var(--color-primary-bg);
	border-color: var(--color-primary-border);
	color: var(--color-primary);
}

.hui-post-form-file-permission-level-item input {
	display: none;
}

/* ============================================================================
   文件下载区域样式（帖子详情页）
   ============================================================================ */

.hui-file-download {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-md, 8px);
	margin: 1rem 0;
}

.hui-file-download-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hui-file-download-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-primary-bg);
	border-radius: var(--radius-sm, 6px);
	color: var(--color-primary);
	flex-shrink: 0;
}

.hui-file-download-icon--link {
	background: var(--color-info-bg);
	color: var(--color-info);
}

.hui-file-download-icon svg {
	width: 24px;
	height: 24px;
}

.hui-file-download-details {
	flex: 1;
	min-width: 0;
}

.hui-file-download-name {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hui-file-download-size {
	display: block;
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	margin-top: 0.125rem;
}

.hui-file-download-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	background: color-mix(in oklch, var(--badge-color, #6b7280) 15%, transparent);
	color: var(--badge-color, #6b7280);
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: var(--radius-sm, 4px);
	flex-shrink: 0;
}

/* 下载按钮 */
.hui-file-download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 1rem;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	border: none;
	border-radius: var(--radius-md, 6px);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
	text-decoration: none;
}

.hui-file-download-btn:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 102, 126, 234), 0.3);
}

.hui-file-download-btn svg {
	width: 18px;
	height: 18px;
}

/* 锁定状态 */
.hui-file-download-locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

.hui-file-download-lock-text {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	text-align: center;
	margin: 0;
}

/* 作者/管理员提示 */
.hui-file-download-author-note {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-info-bg);
	border: 1px solid var(--color-info-border);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.75rem;
	color: var(--color-info);
	margin-bottom: 0.75rem;
	width: 100%;
}

.hui-file-download-author-note svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.hui-file-download-btn--locked {
	background: var(--color-fill-secondary);
	color: var(--color-text-secondary);
}

.hui-file-download-btn--locked:hover {
	background: var(--color-fill);
	box-shadow: none;
}

/* 密码表单 */
.hui-file-download-password-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 300px;
}

.hui-file-download-password-input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.875rem;
	color: var(--color-text);
}

.hui-file-download-password-input:focus {
	outline: none;
	border-color: var(--color-primary);
}

/* 积分/等级信息 */
.hui-file-download-points-info,
.hui-file-download-level-info {
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

/* 付费按钮特殊样式 */
.hui-file-download-btn--pay {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.hui-file-download-btn--pay:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* 积分按钮特殊样式 */
.hui-file-download-btn--points {
	background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.hui-file-download-btn--points:hover {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* 响应式 */
@media (max-width: 640px) {
	.hui-file-download-info {
		flex-wrap: wrap;
	}

	.hui-file-download-badge {
		margin-left: auto;
	}

	.hui-file-download-password-form {
		flex-direction: column;
		max-width: none;
	}

	.hui-file-download-password-input {
		width: 100%;
	}

	.hui-post-form-file-permission-dropdown {
		min-width: 140px;
	}
}


/* ============================================================================
   帖子卡片 - 隐藏内容区域
   ============================================================================ */

.hui-post-card-hidden {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
}

.hui-post-card-hidden-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--color-fill-tertiary);
	border-radius: var(--radius-md, 6px);
	color: var(--color-text-tertiary);
}

.hui-post-card-hidden-icon svg {
	opacity: 0.7;
}

.hui-post-card-hidden-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.hui-post-card-hidden-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text);
}

.hui-post-card-hidden-type {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
}

.hui-post-card-hidden-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.375rem 0.875rem;
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	border: none;
	border-radius: var(--radius-md, 6px);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s var(--ease-smooth);
}

.hui-post-card-hidden-btn:hover {
	background: var(--xun-secondary-hover, var(--color-secondary-dark, var(--color-secondary)));
	box-shadow: 0 2px 8px oklch(from var(--xun-secondary, var(--color-secondary)) l c h / 0.25);
}

/* 付费按钮特殊样式 */
.hui-post-card-hidden-btn--pay {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.hui-post-card-hidden-btn--pay:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

/* 积分按钮特殊样式 */
.hui-post-card-hidden-btn--points {
	background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.hui-post-card-hidden-btn--points:hover {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

/* 已解锁状态 */
.hui-post-card-hidden.is-unlocked {
	background: var(--color-success-bg);
	border-color: var(--color-success-border);
}

.hui-post-card-hidden.is-unlocked .hui-post-card-hidden-icon {
	background: oklch(from var(--color-success) l c h / 0.15);
	color: var(--color-success);
}

.hui-post-card-hidden-btn--unlocked {
	background: var(--color-success);
}

.hui-post-card-hidden-btn--unlocked:hover {
	background: var(--color-success-dark, var(--color-success));
	box-shadow: 0 2px 8px oklch(from var(--color-success) l c h / 0.25);
}

/* 响应式 */
@media (max-width: 640px) {
	.hui-post-card-hidden {
		padding: 0.625rem 0.75rem;
		gap: 0.625rem;
	}

	.hui-post-card-hidden-icon {
		width: 32px;
		height: 32px;
	}

	.hui-post-card-hidden-icon svg {
		width: 16px;
		height: 16px;
	}

	.hui-post-card-hidden-btn {
		padding: 0.3125rem 0.75rem;
		font-size: 0.75rem;
	}
}


/* ============================================================================
   我的帖子抽屉（普通用户版本）
   ============================================================================ */

/* 我的帖子抽屉 - 无左侧菜单，单栏布局 */
.hui-myposts-drawer-content {
	max-width: 600px;
}

.hui-myposts-drawer-content .hui-circle-manage-body {
	padding: 1rem;
}

/* 我的帖子抽屉 - 帖子筛选标签 */
.hui-myposts-drawer-content .hui-circle-manage-posts-header {
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border-secondary);
}

.hui-myposts-drawer-content .hui-circle-manage-posts-tabs {
	display: flex;
	gap: 0.5rem;
}

.hui-myposts-drawer-content .hui-circle-manage-posts-tab {
	padding: 0.5rem 1rem;
	background: var(--color-fill-quaternary);
	border: none;
	border-radius: var(--xun-radius-sm, 6px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s var(--ease-smooth);
}

.hui-myposts-drawer-content .hui-circle-manage-posts-tab:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
}

.hui-myposts-drawer-content .hui-circle-manage-posts-tab.is-active {
	background: var(--xun-secondary, var(--color-secondary));
	color: #fff;
}

/* 我的帖子抽屉 - 帖子列表 */
.hui-myposts-drawer-content .hui-circle-manage-posts-list {
	max-height: calc(100vh - 180px);
	overflow-y: auto;
}

/* 我的帖子抽屉 - 空状态 */
.hui-myposts-drawer-content .hui-circle-manage-posts-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
	color: var(--color-text-tertiary);
	font-size: 0.875rem;
}

/* 我的帖子抽屉 - 加载状态 */
.hui-myposts-drawer-content .hui-circle-manage-posts-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 2rem;
	color: var(--color-text-tertiary);
	font-size: 0.875rem;
}

/* 响应式 - 我的帖子抽屉 */
@media (max-width: 768px) {
	.hui-myposts-drawer-content {
		max-width: 100%;
		width: 100%;
	}

	.hui-myposts-drawer-content .hui-circle-manage-posts-tabs {
		flex-wrap: wrap;
	}

	.hui-myposts-drawer-content .hui-circle-manage-posts-tab {
		flex: 1;
		min-width: 0;
		text-align: center;
	}
}