/* 文章头部区域 - 用于侧边栏切换按钮定位 */
.category-header-section {
	position: relative !important;
	overflow: visible !important;
}

.main-column {
	overflow: visible !important;
}

.vertical-action-btn .icon {
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 auto;
}

.post51 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 20px 0;
	padding-bottom: 0px;
	border-bottom: 1px solid var(--border);
}

.post51 h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.post52 {
	background: #ffffff;
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
	height: auto;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	margin: 10px;
	cursor: pointer;
	padding-bottom: 0px;
}

.post52:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	border-color: var(--primary);
}

.post52 .tool-header {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.post52 .tool-thumbnail {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.post52 .tool-title {
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 0 10px;
	color: #334155;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.post52 .tool-description {
	color: #64748b;
	font-size: 13px;
	line-height: 1.6;
	margin: 4px 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 41.6px;
}

.post52 .tool-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #edf2f7;
	padding-top: 12px;
	font-size: 0.9rem;
	flex-shrink: 0;
}

.post52 .tool-views {
	color: var(--text-lighter);
	font-weight: 500;
}

.post52 .tool-link {
	background: var(--primary-opacity-10);
	padding: 0px 14px;
	border-radius: 40px;
	color: var(--primary);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	transition: all 0.3s ease;
}

.post52 .tool-link:hover {
	background: var(--primary);
	color: #ffffff;
}

@media (max-width: 768px) {
	.tool-operation-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px;
	}

	.tool-operation-header h3 {
		margin-left: 0 !important;
	}

	.tool-operation-actions {
		flex-direction: column !important;
		align-items: flex-start !important;
		width: 100%;
		gap: 10px !important;
	}

	.tool-operation-actions .recent-users {
		order: 1;
		width: 100%;
	}

	.tool-operation-actions #fullscreenBtn {
		order: 2;
	}
}

.icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.icon-like {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='21 64 470 427' fill='white' stroke='none'%3E%3Cpath d='M491 256L491 299Q491 307 488 315L423 465Q413 491 384 491L192 491Q175 491 162 478Q149 465 149 448L149 235Q149 218 162 205L302 64L325 87Q334 96 334 109L334 116L313 214L448 214Q465 214 478 226.50Q491 239 491 256ZM21 491L21 235L107 235L107 491Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-like1 {
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='43 85 426 384' fill='white' stroke='none'%3E%3Cpath d='M466 317L409 448Q396 469 372 469L199 469Q179 469 164 454Q149 439 149 419L149 252Q149 234 162 221L299 85L308 95Q320 107 327 121Q330 128 329 135L309 234L427 234Q444 234 456.50 247Q469 260 469 277L469 300Q469 309 466 317ZM85 469L43 469L43 234L85 234Q94 234 100.50 240Q107 246 107 255L107 447Q107 456 100.50 462.50Q94 469 85 469Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	width: 14px;
	height: 14px;
}

.icon-like.liked {
	background-color: white;
}

.icon-report {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 -128 1280 1536' fill='white' stroke='none'%3E%3Cpath d='M1088 704L1088 64L640 64L640 1201Q759 1138 853 1064Q1088 880 1088 704ZM1280-64L1280 704Q1280 790 1246.50 874.50Q1213 959 1163.50 1024.50Q1114 1090 1045.50 1152Q977 1214 919 1255Q861 1296 798 1332.50Q735 1369 708.50 1382Q682 1395 666 1402Q654 1408 640 1408Q626 1408 614 1402Q598 1395 571.50 1382Q545 1369 482 1332.50Q419 1296 361 1255Q303 1214 234.50 1152Q166 1090 116.50 1024.50Q67 959 33.50 874.50Q0 790 0 704L0-64Q0-90 19-109Q38-128 64-128L1216-128Q1242-128 1261-109Q1280-90 1280-64Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	width: 14px;
	height: 14px;
}

.icon-share {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -256 1791.9230769230771 1792' fill='white' stroke='none'%3E%3Cpath d='M1764-245Q1797-221 1791-181L1535 1355Q1530 1384 1503 1400Q1489 1408 1472 1408Q1461 1408 1448 1403L995 1218L753 1513Q735 1536 704 1536Q691 1536 682 1532Q663 1525 651.50 1508.50Q640 1492 640 1472L640 1123L1504 64L435 989L40 827Q3 813 0 772Q-2 732 32 713L1696-247Q1711-256 1728-256Q1748-256 1764-245Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-view {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='21 96 470 320' fill='white' stroke='none'%3E%3Cpath d='M211 211Q230 192 256 192Q282 192 301 211Q320 230 320 256Q320 282 301 301Q282 320 256 320Q230 320 211 301Q192 282 192 256Q192 230 211 211ZM180.50 331.50Q212 363 256 363Q300 363 331.50 331.50Q363 300 363 256Q363 212 331.50 180.50Q300 149 256 149Q212 149 180.50 180.50Q149 212 149 256Q149 300 180.50 331.50ZM113 140Q177 96 256 96Q335 96 399 140Q463 184 491 256Q463 328 399 372Q335 416 256 416Q177 416 113 372Q49 328 21 256Q49 184 113 140Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-comment {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='426' height='426' viewBox='43 43 426 426'%3E%3Cpath d='M363 235L363 192L320 192L320 235ZM277 235L277 192L235 192L235 235ZM192 235L192 192L149 192L149 235ZM85 43L427 43Q444 43 456.50 55.50Q469 68 469 85L469 341Q469 358 456.50 371Q444 384 427 384L128 384L43 469L43 85Q43 68 55.50 55.50Q68 43 85 43Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: white;
}

.like-button .icon-like {
	transition: opacity 0.2s ease;
}

.like-button:hover .icon-like {
	opacity: 0.9;
}

.comment-stat .icon-comment,
.topic-actions .icon-comment,
.reply-actions-inline .icon-comment,
.comment-reply-action .icon-comment,
.reply-delete .icon-comment {
	width: 14px;
	height: 14px;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	color: var(--text-lighter);
}

.comment-stat .icon-like,
.comment-stat .icon-like1,
.topic-actions .icon-like,
.topic-actions .icon-like1,
.reply-actions-inline .icon-like,
.reply-actions-inline .icon-like1,
.comment-reply-action .icon-like,
.comment-reply-action .icon-like1,
.comment-like .icon-like,
.comment-like .icon-like1,
.reply-like .icon-like,
.reply-like .icon-like1 {
	width: 14px;
	height: 14px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='21 64 470 427' fill='white' stroke='none'%3E%3Cpath d='M491 256L491 299Q491 307 488 315L423 465Q413 491 384 491L192 491Q175 491 162 478Q149 465 149 448L149 235Q149 218 162 205L302 64L325 87Q334 96 334 109L334 116L313 214L448 214Q465 214 478 226.50Q491 239 491 256ZM21 491L21 235L107 235L107 491Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-bottom: 3px
}

.comment-stat .icon-like.liked,
.comment-stat .icon-like1.liked,
.comment-actions .icon-like.liked,
.comment-actions .icon-like1.liked,
.topic-actions .icon-like.liked,
.topic-actions .icon-like1.liked,
.reply-actions-inline .icon-like.liked,
.reply-actions-inline .icon-like1.liked,
.comment-reply-action .icon-like.liked,
.comment-reply-action .icon-like1.liked,
.comment-like .icon-like.liked,
.comment-like .icon-like1.liked,
.reply-like .icon-like.liked,
.reply-like .icon-like1.liked {
	background-color: #ff4444;
}

.comment-report .icon-report {
	width: 14px;
	height: 14px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 -128 1280 1536' fill='white' stroke='none'%3E%3Cpath d='M1088 704L1088 64L640 64L640 1201Q759 1138 853 1064Q1088 880 1088 704ZM1280-64L1280 704Q1280 790 1246.50 874.50Q1213 959 1163.50 1024.50Q1114 1090 1045.50 1152Q977 1214 919 1255Q861 1296 798 1332.50Q735 1369 708.50 1382Q682 1395 666 1402Q654 1408 640 1408Q626 1408 614 1402Q598 1395 571.50 1382Q545 1369 482 1332.50Q419 1296 361 1255Q303 1214 234.50 1152Q166 1090 116.50 1024.50Q67 959 33.50 874.50Q0 790 0 704L0-64Q0-90 19-109Q38-128 64-128L1216-128Q1242-128 1261-109Q1280-90 1280-64Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.comment-actions .icon-like {
	width: 16px;
	height: 16px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='21 64 470 427' fill='white' stroke='none'%3E%3Cpath d='M491 256L491 299Q491 307 488 315L423 465Q413 491 384 491L192 491Q175 491 162 478Q149 465 149 448L149 235Q149 218 162 205L302 64L325 87Q334 96 334 109L334 116L313 214L448 214Q465 214 478 226.50Q491 239 491 256ZM21 491L21 235L107 235L107 491Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.comment-actions .icon-report {
	width: 16px;
	height: 16px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='12 0 269.4 300' fill='white' stroke='none'%3E%3Cpath d='M218 255L20 58Q14 114 29 163Q42 204 68 238Q88 264 115 284Q125 291 134.50 295.50Q144 300 150 300Q156 300 166 295.50Q176 291 185 284Q203 271 218 255ZM250 212L59 21Q77 16 95 11Q134 0 150 0Q166 0 205 10Q229 17 259 27Q267 29 272.50 35.50Q278 42 279 50Q285 98 276 142Q268 179 250 212ZM256 269L12 25L25 12L269 256Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon.clock2 {
	background-color: var(--text-lighter, #999);
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 141 998 966'%3E%3Cpath d='M1065 1001Q1075 1011 1075 1024Q1075 1037 1065 1047L1015 1097Q1005 1107 992 1107Q979 1107 969 1097L576 704L183 1097Q173 1107 160 1107Q147 1107 137 1097L87 1047Q77 1037 77 1024Q77 1011 87 1001L553 535Q563 525 576 525Q589 525 599 535L1065 1001ZM1065 617Q1075 627 1075 640Q1075 653 1065 663L1015 713Q1005 723 992 723Q979 723 969 713L576 320L183 713Q173 723 160 723Q147 723 137 713L87 663Q77 653 77 640Q77 627 87 617L553 151Q563 141 576 141Q589 141 599 151L1065 617Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 141 998 966'%3E%3Cpath d='M1065 1001Q1075 1011 1075 1024Q1075 1037 1065 1047L1015 1097Q1005 1107 992 1107Q979 1107 969 1097L576 704L183 1097Q173 1107 160 1107Q147 1107 137 1097L87 1047Q77 1037 77 1024Q77 1011 87 1001L553 535Q563 525 576 525Q589 525 599 535L1065 1001ZM1065 617Q1075 627 1075 640Q1075 653 1065 663L1015 713Q1005 723 992 723Q979 723 969 713L576 320L183 713Q173 723 160 723Q147 723 137 713L87 663Q77 653 77 640Q77 627 87 617L553 151Q563 141 576 141Q589 141 599 151L1065 617Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 3px;
	width: 12px;
	height: 12px;
	transform: translateZ(0)
}

.icon.fire1 {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 173 998 966'%3E%3Cpath d='M1065 617Q1075 627 1075 640Q1075 653 1065 663L599 1129Q589 1139 576 1139Q563 1139 553 1129L87 663Q77 653 77 640Q77 627 87 617L137 567Q147 557 160 557Q173 557 183 567L576 960L969 567Q979 557 992 557Q1005 557 1015 567L1065 617ZM1065 233Q1075 243 1075 256Q1075 269 1065 279L599 745Q589 755 576 755Q563 755 553 745L87 279Q77 269 77 256Q77 243 87 233L137 183Q147 173 160 173Q173 173 183 183L576 576L969 183Q979 173 992 173Q1005 173 1015 183L1065 233Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 173 998 966'%3E%3Cpath d='M1065 617Q1075 627 1075 640Q1075 653 1065 663L599 1129Q589 1139 576 1139Q563 1139 553 1129L87 663Q77 653 77 640Q77 627 87 617L137 567Q147 557 160 557Q173 557 183 567L576 960L969 567Q979 557 992 557Q1005 557 1015 567L1065 617ZM1065 233Q1075 243 1075 256Q1075 269 1065 279L599 745Q589 755 576 755Q563 755 553 745L87 279Q77 269 77 256Q77 243 87 233L137 183Q147 173 160 173Q173 173 183 183L576 576L969 183Q979 173 992 173Q1005 173 1015 183L1065 233Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 3px;
	width: 12px;
	height: 12px
}

.replied-comment-label {
	font-weight: 500;
	color: var(--text-light);
}

.replied-comment-text {
	word-break: break-word;
}

.comment-reply-item {
	margin-top: 12px;
	margin-left: 75px;
	padding: 0px;
	position: relative;
	max-width: calc(100% - 40px);
}

.reply-avatar img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.comment-reply-header {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.comment-reply-avatar-container {
	position: relative;
	display: inline-block;
	margin-right: 8px;
}

.comment-reply-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 8px;
	object-fit: cover;
}

.comment-reply-username {
	font-weight: 600;
	font-size: 14px;
	color: #333;
	margin-right: 8px;
}

.reply-header span {
	font-size: 14px;
	color: var(--text-light);
}

.comment-reply-content {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	word-wrap: break-word;
	padding-left: 0;
	margin-bottom: 8px;
}

.comment-reply-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 8px;
	font-size: 12px;
	color: #999;
	position: relative;
}

.comment-reply-action {
	margin-left: 16px;
	cursor: pointer;
	transition: color 0.2s;
	display: flex;
	align-items: center;
	gap: 4px;
}

.comment-reply-action:hover {
	color: var(--theme-color, #ff4d4f);
}

.floor-indicator {
	position: absolute !important;
	top: -5px !important;
	right: -5px !important;
	background-color: var(--theme-color, #ff4d4f) !important;
	color: white !important;
	font-size: 10px !important;
	font-weight: bold !important;
	border-radius: 50% !important;
	width: 20px !important;
	height: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><rect x="3" y="13" width="18" height="8" rx="1"/><line x1="3" y1="13" x2="3" y2="11"/><line x1="21" y1="13" x2="21" y2="11"/><rect x="7" y="5" width="10" height="6" rx="1"/></svg>') !important;
	background-size: 12px 12px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 2px solid white;
}

.replied-comment-container {
	background-color: #ffffff;
	border: none;
	border-radius: 6px;
	position: relative;
}

.comment-item-removing {
	height: 0 !important;
	opacity: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	transition: all 0.3s ease;
}

.replied-comment-container.hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

.replied-comment-container.show {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
	margin: 0 0 25px 0 !important;
	padding: 12px !important;
	background-color: var(--bg-secondary);
	border: none;
}

.action-buttons {
	display: flex;
	gap: 15px;
	margin: 20px 0;
}

.action-button {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background-color: #f8f9fa;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	color: var(--text-secondary);
	transition: all 0.3s;
}

.action-button:hover {
	background-color: #e9ecef;
	color: var(--primary-color);
}

.action-button.liked {
	background-color: rgba(67, 97, 238, 0.1);
	color: var(--primary-color);
}

.comments-section {
	background-color: var(--background-color);
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.comments-title {
	font-size: 20px;
	margin-bottom: 20px;
}

.comment-input {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	resize: vertical;
	min-height: 100px;
	font-size: 14px;
	background: #ffffff
}

.comment-submit {
	margin-top: 0;
	width: 100%;
	height: 40px;
	border-radius: 0 !important;

	color: #ffffff !important;
	border: none !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background-color 0.3s ease !important;
}



.comment-submit:active {
	background: #1e7e34 !important;
}

/* 评论表单容器样式 */
.comment-form {
	margin-bottom: 0;
}

/* 调整Quill编辑器样式，确保与按钮无缝连接 */
#comment-quill-editor {
	height: 130px;
	position: relative;
	border: 1px solid var(--border-color);
	border-bottom: none !important;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	margin-bottom: 0;
}

#comment-quill-editor .ql-container {
	border: none !important;
	border-radius: 0 !important;
	margin-bottom: 0;
}

#comment-quill-editor .ql-toolbar {
	border: none !important;
	border-bottom: 1px solid var(--border-color) !important;
	border-radius: 0 !important;
	background: #f8f9fa !important;
}

.comments-filter {
	display: flex;
	margin-bottom: 20px;
	background-color: #f8f9fa;
	border-radius: 6px;
	padding: 5px;
}


.topic-content1 {
	flex: 1;
	min-width: 0;
}

.topic-content1 p {
	font-size: 15px;

	line-height: 26px;
}


.filter-button {
	flex: 1;
	padding: 8px 16px;
	background-color: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s;
	color: #666;
}

.filter-button.active {
	background-color: #ff4757;
	color: white;
}

.filter-button:hover:not(.active) {
	background-color: rgba(0, 0, 0, 0.05);
}

.topic-item .comment-author-avatar img,
.comment-item .comment-author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.topic-item .comment-content,
.comment-item .comment-content {
	flex: 1;
	min-width: 0;
}

.topic-item .comment-header-row,
.comment-item .comment-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.topic-item .comment-meta,
.comment-item .comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.topic-item .comment-author,
.comment-item .comment-author {
	font-weight: 600;
	color: #333;
	text-decoration: none;
}

.topic-item .comment-author:hover,
.comment-item .comment-author:hover {
	color: #ddd;
}

.topic-item .comment-time,
.comment-item .comment-time {
	font-size: 12px;
	color: #999;
}

.topic-item .topic-footer,
.comment-item .topic-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}

.comment-author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.comment-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.comment-author {
	font-weight: 600;
	color: #333;
	text-decoration: none;
}

.comment-author:hover {
	color: #ddd;
}

.comment-time {
	font-size: 12px;
	color: #999;
}

.topic-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}

.topic-actions {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.avatar-container {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-right: 10px;
	margin-top: -5px;
}



.avatar-container img:hover {
	transform: scale(1.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}



.user-level-tag {
	text-align: center;
	font-size: 12px;
	margin-top: 15px;
	color: var(--text-lighter);
}

.topic-actions button {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-lighter);
	font-size: 14px;
	padding: 0;
	margin: 0;
}

.topic-actions button .icon {
	color: var(--text-lighter);
}

.topic-actions button:hover {
	color: var(--text-lighter);
	opacity: 0.8;
}

.comment-tags {
	display: flex;
	gap: 8px;
}

.comment-tag {
	background-color: #f0f0f0;
	color: #666;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 4px;
}

.comment-text {
	margin-bottom: 12px;
	word-wrap: break-word;
	white-space: pre-wrap;
	color: #333;
	line-height: 1.6;
	font-size: 14px;
	font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
}

.comment-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.comment-stats {
	display: flex;
	gap: 16px;
}

.comment-stat {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #999;
}

.comment-stat .icon {
	display: inline-block;
	vertical-align: middle;
}

.comment-actions {
	display: flex;
	gap: 12px;
}

.comment-like,
.comment-delete,
.comment-report,
.reply-like,
.reply-delete,
.like-button {
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	color: var(--text-light);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	transition: color 0.3s;
	padding: 0;
	margin: 0;
}

.comment-like {
	transform: translateY(2px);
}

.comment-reply-item::before {
	content: '';
	position: absolute;
	left: -24px;
	top: 20px;
	bottom: 0;
	width: 2px;
	background-color: #ddd;
	z-index: 0;
}

.reply-avatar {
	position: relative;
	margin-right: 15px;
	z-index: 1;
}

.reply-number {
	position: absolute;
	left: -33px;
	top: 13;
	width: 20px;
	height: 20px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
	z-index: 2;
}

.reply-actions {
	display: none;
}

.reply-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0px;
	font-size: 14px;
	width: 100%;
}

.reply-header>div:first-child {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.reply-header>div:last-child {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: flex-end;
	margin-left: auto;
}

.reply-actions-inline {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: flex-end;
	width: auto;
}

.reply-author {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-light);
}

.reply-time {
	color: var(--text-light);
	font-size: 12px;
}

.reply-to {
	color: var(--text-light);
	font-size: 12px;
}

.reply-body p {
	margin: 0;
	color: #333;
	line-height: 1.6;
	font-size: 14px;
}

.comment-like.liked,
.reply-like.liked {
	color: #ff4444;
}

.icon.liked {
	fill: var(--primary);
	color: var(--primary);
	stroke: var(--primary);
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	background-color: white;
	border-radius: 12px;
	max-width: 500px;
	width: 90%;
	transform: translateY(-20px);
	opacity: 0;
	transition: transform 0.3s, opacity 0.3s;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.modal-title {
	font-size: 18px;
	font-weight: 600;
}

.close-modal {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--text-secondary);
}

.form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.form-control {
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	font-size: 14px;
}

.textarea {
	resize: vertical;
	min-height: 100px;
}

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

.btn-secondary {
	background-color: #f0f0f0;
	color: var(--text-primary);
}

.btn-secondary:hover {
	background-color: #e0e0e0;
}

:root {
	--toast-bg: rgba(0, 0, 0, 0.75);
}

#toast-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.toast {
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	max-width: 400px;
	white-space: normal;
	text-align: center;
	line-height: 1.5;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.toast.toast-visible {
	opacity: 1;
	transform: translateX(0);
}

.toast.toast-error {
	background-color: rgba(255, 69, 0, 0.85);
}

.vertical-actions {
	position: fixed;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 15px;
	z-index: 100;
}

.vertical-action-btn {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.count-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: white;
	font-size: 11px;
	padding: 0px 4px;
	border-radius: 400px;
	min-width: 12px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	border: 1px solid;
	font-weight: 600;
}

.like-button .count-badge {
	border-color: #3B82F6;
	color: #3B82F6;
}

.share-button .count-badge {
	border-color: #10B981;
	color: #10B981;
}

.report-button .count-badge {
	border-color: #F59E0B;
	color: #F59E0B;
}

.view-button .count-badge {
	border-color: #6366F1;
	color: #6366F1;
}

.comment-button .count-badge {
	border-color: #ff5722;
	color: #ff5722;
}

.vertical-action-btn.like-button {
	background-color: #3B82F6;
}

.vertical-action-btn.share-button {
	background-color: #10B981;
}

.vertical-action-btn.report-button {
	background-color: #F59E0B;
}

.vertical-action-btn.view-button {
	background-color: #6366F1;
}

.vertical-action-btn.comment-button {
	background-color: #ff5722;
}

.vertical-action-btn.comment-button .icon {
	width: 18px;
	height: 18px;
}

.vertical-action-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-tooltip {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 101;
}

.action-tooltip::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-right-color: rgba(0, 0, 0, 0.8);
}

.vertical-action-btn:hover .action-tooltip {
	opacity: 1;
	visibility: visible;
	margin-left: 15px;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease
}

.modal.modal-visible {
	opacity: 1;
	visibility: visible
}

.modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	transition: opacity 0.3s ease
}

.modal-content {
	position: relative;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	width: 100%;
	max-width: 550px;
	max-height: 650px;
	overflow-y: auto;
	transform: scale(0.95);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease
}

.modal.modal-visible .modal-content {
	transform: scale(1);
	opacity: 1
}

.modal-header {
	padding: 16px 20px;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-header h3 {
	margin: 0;
	font-size: 18px;
	color: var(--text-primary)
}

.modal-close {
	width: 28px;
	height: 28px;
	border: none;
	background: #dbdbdb;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
	color: transparent;
	font-size: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 5px
}

.modal-close::before,
.modal-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: #fff;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: all 0.3s ease
}

.modal-close::after {
	transform: translate(-50%, -50%) rotate(-45deg)
}

.modal-close:hover {
	background: #ff5252;
	transform: rotate(90deg)
}

.modal-close:hover::before,
.modal-close:hover::after {
	width: 14px
}

.modal-body {
	padding: 0px 30px;
	margin-bottom: 20px;
}

.modal-actions {
	padding: 16px 30px 35px 30px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	box-sizing: border-box
}

.form-group {
	margin-bottom: 0px
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: #2d3748;
	font-size: 14px
}

.form-control {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 14px;
	transition: border-color 0.2s ease;
	box-sizing: border-box
}

textarea.form-control {
	resize: vertical;
	min-height: 140px;
	font-family: inherit;
}

.submit-button {
	width: 100% !important;
	padding: 12px;
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
	box-sizing: border-box
}

.submit-button:hover {
	filter: alpha(opacity:90);
	opacity: 0.9;
}

.modal-open {
	overflow: hidden;
	position: relative;
}

#modal-comment-input.form-control {
	border: 1px solid #d1d5db;
	outline: none;
	color: var(--text);
	line-height: 26px;
}

.replied-comment-container::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--primary-color);
	border-radius: 3px 0 0 3px;
}

.replied-comment-label {
	font-weight: 600;
	font-size: 14px;
	color: #666;
	display: inline-block;
	margin-right: 0px;
}

.replied-comment-text {
	font-size: 14px;
	color: var(--text-light);
	line-height: 1.5;
	word-wrap: break-word;
	display: inline;
}

.post01 {
	padding: 0.5px;
	display: block;
	width: 99%;
	box-sizing: border-box;
	color: var(--text);
	line-height: 26px;
	min-height: 40px;
	border-left: 3px solid var(--primary-color);
	border-radius: 8px 0px 0px 8px;
	padding-left: 15px;
	font-size: 15px;
	margin-top: 15px;
	margin-left: 10px;
	word-break: break-word !important;
	word-break: break-word !important;
	font-size: inherit !important;
}

.reply-body {
	font-size: 14px;
	color: var(--text);
}

.comment-text .ql-size-small {
	font-size: 0.75em !important;
}

.comment-text .ql-size-large {
	font-size: 1.5em !important;
}

.comment-text .ql-size-huge {
	font-size: 1.2em !important;
}

.topic-content p {
	color: var(--text);
	margin: 0;
	line-height: 28px;
}

.content p {
	margin: 0;
	line-height: 32px;
}

.comment-text p,
.comment-text span,
.comment-text strong,
.comment-text em,
.comment-text u {
	font-size: inherit !important;
	line-height: inherit;
}

.comment-text {
	display: block;
	position: relative;
	z-index: 1;
}

.topic-author {
	color: var(--text-light)
}

.reply-number img {
	width: 28px;
	height: 28px;
	border-radius: 28px;
	margin-top: 40px;
}

.content {
	padding: 40px;
	line-height: 32px;
	font-size: 16px;
	color: #555;
	padding-top: 30px;
	border-top-color: var(--primary);
	font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
}


/* 代码块样式 - 参考CSDN风格 */
.code-block-container {
	position: relative;
	margin: 1.2em 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	background-color: #f6f8fa;
}

.code-block-header {
	background-color: #f6f8fa;
	padding: 8px 16px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-bottom: 1px solid #e6e6e6;
}

.copy-code-btn {
	background-color: #fff;
	color: #555;
	border: 1px solid #ddd;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s;
	font-weight: 400;
}

.copy-code-btn:hover {
	background-color: #f0f0f0;
	border-color: #ccc;
}

.copy-code-btn.copied {
	background-color: #28a745;
	color: white;
	border-color: #28a745;
}

.code-block-content {
	display: block;
	background-color: #ffffff;
	color: #333;
	padding: 0;
}

.code-line {
	display: flex;
	line-height: 1.5;
	align-items: stretch;
	margin: 0;
	padding: 0;
	height: auto;
}

.line-number {
	display: block;
	width: 30px;
	min-width: 30px;
	font-size: 12px;
	line-height: 1.5;
	color: #999;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
	padding: 0;
	margin: 0;
	text-align: right;
	padding-right: 12px;
	background-color: #f6f8fa;
	flex-shrink: 0;
	user-select: none;
}



.line-content {
	display: block;
	flex: 1;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
	font-size: 14px;
	line-height: 25px;
	color: #333;
	padding-left: 12px;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	margin: 0;
}





.content img {
	max-width: min(100%, 790px);
	height: auto !important;
	display: block;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	margin-top: 10px;
	margin-bottom: 10px;
}


.content a {
	margin-top: 5px;
	margin-bottom: 5px;
	color: #444;
}

.avatar-container {
	position: relative;
	display: inline-block;
}

.post1 {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var(--spacing-sm);
	border: 3px solid var(--primary);
	margin-top: 5px;
}

.post2 {
	font-weight: 700;
	color: var(--primary);
	border-color: var(--primary);
	border: 2px solid var(--primary);
	background-color: var(--bg);
	font-size: 14px;
	text-align: center;
	height: 34px;
	border-radius: 400px;
	line-height: 34px;
	float: right;
	text-decoration: none;
	padding: 0px 20px
}

.post2:hover {
	background: var(--primary);
	color: #fff
}

.post01 .ql-size-small {
	font-size: 0.75em !important;
}

.post01 .ql-size-large {
	font-size: 1.5em !important;
}

.post01 .ql-size-huge {
	font-size: 2.5em !important;
}

.post01 span {
	display: inline !important;
}

.ql-editor img {
	position: relative;
	cursor: pointer;
}

.ql-editor img.selected {
	outline: 2px solid #4285f4;
	outline-offset: 1px;
}

.image-resize-handle {
	position: absolute !important;
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	background-color: #ff4757 !important;
	border: 3px solid #fff !important;
	border-radius: 50% !important;
	z-index: 999999 !important;
	bottom: -40px !important;
	right: -40px !important;
	cursor: se-resize !important;
	color: #fff !important;
	font-size: 24px !important;
	font-weight: bold !important;
	line-height: 34px !important;
	text-align: center !important;
	user-select: none !important;
	box-shadow: 0 0 15px rgba(255, 71, 87, 0.6) !important;
	opacity: 1 !important;
	transition: none !important;
	pointer-events: auto !important;
	overflow: visible !important;
	transform: none !important;
}

.post01 img {
	max-width: min(100%, 790px);
	height: auto;
	object-fit: contain;
}

.custom-tooltip {
	position: absolute;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 1000;
	transform: translateX(-50%);
}

.quill-resize-handle {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 14px;
	height: 14px;
	border: 2px solid var(--primary);
	border-top: none;
	border-left: none;
	cursor: se-resize;
}

.ql-editor img.selected {
	position: relative !important;
	outline: 2px solid #4285f4;
	outline-offset: 1px;
}

.main-content {
	padding-top: 0 !important;
}

.reply-body {
	word-break: break-word !important;
	font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
}

.text-center {
	text-align: center !important;
}

.author-title {
	margin: 10px 10px 0px 0px !important;
}

.author-home-btn {
	width: 120px !important;
	margin-bottom: 10px !important;
}

.spaced-item {
	margin-top: 20px !important;
}

#comment-quill-editor {
	height: 130px;
	position: relative;
}

#comment-input {
	display: none !important;
}

.comment-author-date {
	color: var(--text-light) !important;
	font-size: 16px !important;
}

.comment-content img,
.post01 img {
	max-width: min(100%, 790px);
	height: auto;
	display: block;
	margin: 10px 0;
	border-radius: 4px;
	box-sizing: border-box;
}

.comment-content img[style*="width: 100%"],
.post01 img[style*="width: 100%"] {
	margin: 10px auto;
}

.comment-content {
	padding: 0 10px;
	overflow-x: hidden;
}

.no-user-select {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* 购买内容样式 */
.buy-content-block {
	background: #fff0e8;
	border: 1px solid #f7cbb5;
	border-radius: 12px;
	margin: 24px 0;
	padding: 12px 24px;
	box-shadow: 0 2px 8px rgba(247, 203, 181, 0.3);
	transition: all 0.3s ease;
}

.buy-content-block>div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.buy-content-info {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 250px;
}

.buy-content-icon {
	width: 40px;
	height: 40px;
	background: #fff0e8;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px dashed #f7cbb5;
}

.buy-content-icon svg {
	width: 20px;
	height: 20px;
	color: #8b5739;
}

.buy-content-text {
	flex: 1;
}

.buy-content-text>span:first-child {
	display: block;
	color: #8b5739;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.buy-content-text>span:last-child {
	display: block;
	color: #8b5739;
	font-size: 14px;
	font-weight: 500;
}

.points-badge {
	background: #fff0e8;
	color: #8b5739;
	font-size: 14px;
	font-weight: 600;
	padding: 0 24px;
	border-radius: 50px;
	border: 1px dashed #f7cbb5;
	flex-shrink: 0;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.buy-content-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.buy-post-btn {
	padding: 0 24px;
	background: #ff6b35;
	color: white;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.buy-post-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s;
}

.buy-post-btn:hover::before {
	left: 100%;
}

.buy-post-btn:hover {
	background: #ff5a20;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(255, 107, 53, 0.4);
}

.buy-post-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
}

.ignore-post-btn {
	padding: 0 24px;
	background: #fff0e8;
	color: #8b5739;
	border: 1px solid #f7cbb5;
	border-radius: 50px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.ignore-post-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(139, 87, 57, 0.2), transparent);
	transition: left 0.5s;
}

.ignore-post-btn:hover::before {
	left: 100%;
}

.ignore-post-btn:hover {
	background: #ffe8d8;
	border-color: #f7cbb5;
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(247, 203, 181, 0.3);
}

.ignore-post-btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(247, 203, 181, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.buy-content-block {
		padding: 16px 20px;
	}

	.buy-content-block>div {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.buy-content-info {
		width: 100%;
		min-width: unset;
	}

	.buy-content-actions {
		width: 100%;
		justify-content: flex-end;
	}

	.buy-post-btn,
	.ignore-post-btn,
	.points-badge {
		padding: 0 24px;
		height: 40px;
		box-sizing: border-box;
	}
}

/* 侧边栏切换按钮 */
.sidebar-toggle-btn {
	position: absolute;
	top: 50%;
	right: -10px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 100;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.sidebar-toggle-btn:hover {
	background: #f3f4f6;
	transform: translateY(-50%) scale(1.1);
}

.sidebar-toggle-btn svg {
	stroke: #6b7280;
}

/* 收起状态 */
body.sidebar-collapsed .content-layout {
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 1050px;
	margin: 0 auto;
}

body.sidebar-collapsed .sidebar {
	display: none;
}

body.sidebar-collapsed .sidebar-toggle-btn {
	right: -14px;
}

@media (max-width: 768px) {
	body.sidebar-collapsed .sidebar {
		display: block;
	}

	.sidebar-toggle-btn {
		display: none;
	}
}

@media (max-width: 768px) {
	.buy-content-block>div {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.post01 {

		width: 93%;
		padding: 0px;


	}



	.topic-content1 p {
		font-size: 12px;
		margin-left: 10px;
	}

	.buy-post-btn {
		width: 100%;
		text-align: center;
	}

	/* 隐藏评论区域的点赞、举报、回复按钮 */
	.topic-actions {
		display: none !important;
	}

	/* 将时间移动到右侧 */
	.topic-header-row {
		justify-content: flex-end;
	}

	/* 时间添加右边距 */
	.comment-author-date {
		margin-right: 15px;
	}
}



.category-title-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.post-admin-tools {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.category-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.post-stamp-btn {
	height: 26px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgba(240, 66, 66, 0.35);
	background: rgba(240, 66, 66, 0.08);
	color: #f04242;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	
	margin-left: 10px;
	line-height: 26px;
}

.post-stamp-btn:hover {
	background: rgba(240, 66, 66, 0.14);
	border-color: rgba(240, 66, 66, 0.5);
}

/* 头部区域样式 */
.category-header-section {
	background: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
	padding: 20px 0;
	margin-bottom: 20px;
}

.category-header-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 确认对话框样式 */
#confirm-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	backdrop-filter: blur(2px);
}

.confirm-dialog {
	background: white;
	border-radius: 12px;
	padding: 32px 32px 24px 32px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: scale(0.95) translateY(20px);
	transition: all 0.25s ease;
	min-width: 340px;
	max-width: 400px;
	text-align: center;
}

.confirm-dialog.confirm-visible {
	opacity: 1;
	transform: scale(1) translateY(0);
}

.confirm-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 16px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(251, 191, 36, 0.1);
	border-radius: 50%;
}

.confirm-icon svg {
	width: 24px;
	height: 24px;
	color: #f59e0b;
}

.confirm-message {
	color: #4b5563;
	font-weight: 500;
	line-height: 30px;
	font-size: 16px;
	margin: 0 0 25px 0;
}

.confirm-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 15px;
}

.confirm-btn {
	padding: 10px 28px;
	border: none;
	border-radius: 80px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 100px;
	height: 40px;
}

.cancel-btn {
	background: #f9fafb;
	color: #6b7280;
	border: 1px solid #e5e7eb;
}

.cancel-btn:hover {
	background: #f3f4f6;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.confirm-btn {
	background: var(--primary-color);
	color: white;
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.confirm-btn:hover {
	background: var(--primary-color);
	transform: translateY(-1px);

}

.confirm-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(236, 72, 153, 0.2);
}