/* --- 评论区 --- */
body.theme-ethereal .comment-card {
	background: var(--bg-card);
	border-color: var(--border-color);
}
body.theme-ethereal .comment-card:hover {
	border-color: var(--iris);
}
body.theme-ethereal .comment-card__badge {
	background: rgba(0, 212, 255, 0.1);
	color: var(--iris);
	border-color: var(--border-color);
}
body.theme-ethereal .comment-reply-btn:hover,
body.theme-ethereal .comment-like-btn:hover {
	color: var(--iris);
	background: rgba(0, 212, 255, 0.08);
}
body.theme-ethereal .comment-replies {
	border-left-color: var(--border-color);
}
body.theme-ethereal .comment-form-wrap {
	background: var(--bg-card);
	border-color: var(--border-color);
}
body.theme-ethereal .comment-form input:focus,
body.theme-ethereal .comment-form textarea:focus {
	border-color: var(--iris);
	box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15);
}
body.theme-ethereal .comment-form-submit {
	background: var(--iris);
}
body.theme-ethereal .comment-form-submit:hover {
	background: var(--hot-magenta);
}


/* 回复列表 */
.comment-replies {
	margin-top: var(--spacing-md);
	padding-left: var(--spacing-md);
	border-left: 2px solid var(--border-color);
}

.comment-replies-toggle {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	transition: color var(--transition-fast);
	width: 100%;
	text-align: left;
}

.comment-replies-toggle:hover {
	color: var(--accent);
}

.comment-replies-toggle__icon {
	transition: transform var(--transition-fast);
}

.comment-replies-toggle.expanded .comment-replies-toggle__icon {
	transform: rotate(180deg);
}

.comment-replies-list {
	list-style: none;
	margin: var(--spacing-sm) 0 0;
	padding: 0;
	display: none;
}

.comment-replies-list.expanded {
	display: block;
}

.comment-replies .comment-card {
	background: var(--bg-secondary);
	margin-bottom: var(--spacing-sm);
}

.comment-replies .comment-card:last-child {
	margin-bottom: 0;
}


/* 评论表单 */
.comment-form-wrap {
	margin-top: var(--spacing-3xl);
	padding: var(--spacing-xl);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
}

.comment-form-wrap__header {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border-color);
}

.comment-form-wrap__title {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.comment-form-wrap__hint {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin: 0 0 var(--spacing-lg);
}

.comment-form-logged-in {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-md);
	background: var(--bg-elevated);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.comment-form-logged-in__avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.comment-form-logged-in a {
	color: var(--accent);
	text-decoration: none;
}

.comment-form-logged-in a:hover {
	color: var(--accent-light);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%;
	padding: var(--spacing-md);
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	font-family: inherit;
	transition: border-color var(--transition-fast);
	box-sizing: border-box;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.comment-form input[type="text"]::placeholder,
.comment-form input[type="email"]::placeholder,
.comment-form textarea::placeholder {
	color: var(--text-light);
}

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

.comment-form-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--spacing-sm);
}

.comment-form-submit {
	padding: var(--spacing-sm) var(--spacing-xl);
	background: var(--accent);
	color: var(--bg-primary);
	font-size: var(--font-size-sm);
	font-weight: 600;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.comment-form-submit:hover {
	background: var(--accent-light);
}


	/* 评论区响应式 */
	.comments-area {
		padding: var(--spacing-lg) var(--spacing-md);
	}

	.comments-area .comments-header,
	.comments-area .comment-list,
	.comments-area .comment-respond {
		max-width: 100%;
	}

	.comment-card {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.comment-card__avatar {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
	}

	.comment-card__body {
		width: 100%;
	}

	.cta-section {
		padding: var(--spacing-3xl) var(--spacing-md);
	}

	.cta-section__title {
		font-size: var(--text-2xl);
	}
}

@media (max-width: 768px) {
	.container {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	.container--fluid {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	.hero-full {
		padding: var(--spacing-lg) var(--spacing-md);
		min-height: 30vh;
	}

	.hero-full__title {
		font-size: var(--text-2xl);
	}

	.hero-full__desc {
		font-size: var(--text-sm);
	}