/* Twikoo 2.0.17：限定在本站挂载点，覆盖 SDK 注入样式的优先级。 */
#tcomment .twikoo {
	--tk-accent: var(--primary);
	--tk-on-accent: #17212b;
	--tk-bg: var(--card-bg);
	--tk-border: var(--line-divider);
	--tk-text: color-mix(in oklch, var(--card-bg) 12%, #000 88%);
	--tk-muted: color-mix(in oklch, var(--card-bg) 35%, #666 65%);
	--tk-accent-soft: color-mix(in oklch, var(--primary) 18%, transparent);
	color: var(--tk-text);
}

.dark #tcomment .twikoo {
	--tk-text: color-mix(in oklch, var(--card-bg) 12%, #fff 88%);
	--tk-muted: color-mix(in oklch, var(--card-bg) 45%, #c0c4cc 55%);
}

#tcomment .tk-comments-title,
#tcomment .tk-action-link,
#tcomment .tk-action-icon,
#tcomment .tk-icon.__comments,
#tcomment .tk-nick-link:hover,
#tcomment .tk-expand,
#tcomment .tk-login-msg a,
#tcomment .tk-panel-logout,
#tcomment .tk-actions button {
	color: var(--tk-accent);
}

#tcomment .tk-icon.__comments.__active {
	color: var(--tk-on-accent);
	background-color: var(--tk-accent);
	box-shadow: 0 0 0 0.2rem var(--tk-accent);
}

#tcomment .tk-tag-blue {
	color: var(--tk-accent);
	background-color: var(--tk-accent-soft);
	border-color: var(--tk-accent);
}

#tcomment .tk-input__inner,
#tcomment .tk-input-group__append,
#tcomment .tk-input-group__prepend,
#tcomment .OwO .OwO-body,
#tcomment .tk-preview-container,
#tcomment .tk-admin select,
#tcomment .tk-admin select option {
	background-color: var(--tk-bg);
	border-color: var(--tk-border);
	color: var(--tk-text);
}

#tcomment .tk-input__inner:not(:disabled):hover,
#tcomment .tk-admin select:hover {
	border-color: color-mix(in oklch, var(--tk-accent) 55%, var(--tk-border) 45%);
}

#tcomment .tk-input__inner:focus,
#tcomment .tk-admin select:focus {
	border-color: var(--tk-accent);
	box-shadow: 0 0 0 2px color-mix(in oklch, var(--tk-accent) 20%, transparent);
}

/* 保留原生表单校验的错误提示色。 */
#tcomment .tk-input input:invalid {
	border-color: #f56c6c;
}

#tcomment .tk-input.is-disabled .tk-input__inner {
	background-color: color-mix(in oklch, var(--tk-bg) 88%, var(--tk-border) 12%);
	border-color: var(--tk-border);
	color: color-mix(in oklch, var(--tk-text) 55%, var(--tk-bg) 45%);
}

#tcomment .tk-input__inner::placeholder {
	color: color-mix(in oklch, var(--tk-muted) 75%, var(--tk-bg) 25%);
}

#tcomment .tk-input-group__append,
#tcomment .tk-input-group__prepend {
	background-color: color-mix(in oklch, var(--tk-bg) 90%, var(--tk-accent) 10%);
	color: var(--tk-muted);
}

#tcomment .tk-input__suffix,
#tcomment .tk-input__count,
#tcomment .tk-extras,
#tcomment .tk-footer,
#tcomment .tk-extra-text,
#tcomment .tk-action-count,
#tcomment .tk-comments-sort .tk-sort-item {
	color: var(--tk-muted);
}

#tcomment .tk-input__icon:hover,
#tcomment .tk-comments-sort .tk-sort-item:hover,
#tcomment .tk-comments-sort .tk-sort-item:focus,
#tcomment .tk-comments-sort .tk-sort-item.__active {
	color: var(--tk-accent);
}

#tcomment .twikoo :is(button, a, select, [tabindex]):focus-visible {
	outline: 2px solid var(--tk-accent);
	outline-offset: 3px;
}

#tcomment .tk-button:not(.tk-button--primary):not(.tk-button--text) {
	background-color: color-mix(in oklch, var(--tk-bg) 90%, var(--tk-accent) 10%);
	border-color: var(--tk-border);
	color: var(--tk-text);
}

#tcomment
	.tk-button:not(.tk-button--primary):not(.tk-button--text):not(:disabled):is(
		:hover,
		:focus,
		:active
	) {
	background-color: var(--tk-accent-soft);
	border-color: var(--tk-accent);
	color: var(--tk-accent);
}

#tcomment .tk-button--primary,
#tcomment .tk-pagination-pager.__current {
	background-color: var(--tk-accent);
	border-color: var(--tk-accent);
	color: var(--tk-on-accent);
}

#tcomment .tk-button--primary:not(:disabled):is(:hover, :focus) {
	background-color: color-mix(in oklch, var(--tk-accent) 88%, #fff 12%);
	border-color: color-mix(in oklch, var(--tk-accent) 88%, #fff 12%);
	color: var(--tk-on-accent);
}

#tcomment .tk-button--primary:not(:disabled):active {
	background-color: color-mix(in oklch, var(--tk-accent) 86%, #000 14%);
	border-color: color-mix(in oklch, var(--tk-accent) 86%, #000 14%);
	color: var(--tk-on-accent);
}

#tcomment .tk-button--primary:disabled {
	color: var(--tk-on-accent);
	background-color: color-mix(in oklch, var(--tk-accent) 55%, var(--tk-bg));
	border-color: transparent;
}

#tcomment .tk-button--text {
	color: var(--tk-accent);
}

#tcomment .tk-button--text:not(:disabled):is(:hover, :focus, :active) {
	color: color-mix(in oklch, var(--tk-accent) 75%, var(--tk-text));
}

#tcomment .tk-button--text:disabled {
	color: var(--tk-muted);
}

#tcomment .tk-input-group__append .tk-button {
	background: transparent;
	border: 0;
	color: var(--tk-text);
}

#tcomment .tk-input-group__append .tk-button:not(:disabled):hover {
	color: var(--tk-accent);
}

#tcomment .tk-loading-spinner .path {
	stroke: var(--tk-accent);
}

#tcomment .tk-avatar .tk-avatar-img {
	color: color-mix(in oklch, var(--tk-accent) 58%, var(--tk-muted) 42%);
}

#tcomment .tk-avatar .tk-avatar-img svg,
#tcomment .tk-avatar .tk-avatar-img svg path {
	fill: currentColor;
}

body.wallpaper-transparent #tcomment .twikoo {
	--tk-bg: var(--card-bg-transparent);
	--tk-border: color-mix(in oklch, var(--line-divider) 70%, transparent 30%);
	--tk-text: color-mix(in oklch, var(--card-bg) 8%, #000 92%);
	--tk-muted: color-mix(in oklch, var(--card-bg) 28%, #666 72%);
}

:root.dark body.wallpaper-transparent #tcomment .twikoo {
	--tk-text: color-mix(in oklch, var(--card-bg) 8%, #fff 92%);
	--tk-muted: color-mix(in oklch, var(--card-bg) 40%, #c0c4cc 60%);
}

body.wallpaper-transparent
	#tcomment
	:is(
		.tk-input__inner,
		.tk-input-group__append,
		.tk-input-group__prepend,
		.tk-preview-container,
		.OwO-body
	) {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* 上游管理面板固定深色，局部变量避免继承浅色站点的输入背景。 */
#tcomment .tk-admin {
	--tk-bg: #252525;
	--tk-border: #555;
	--tk-text: #f2f2f2;
	--tk-muted: #c0c4cc;
	color-scheme: dark;
	color: var(--tk-text);
}

#tcomment .tk-admin-comment-item,
#tcomment .tk-tabs {
	border-color: var(--tk-border);
}

#tcomment .tk-tab {
	color: var(--tk-muted);
}

#tcomment .tk-tab.__active {
	color: var(--tk-accent);
	border-color: var(--tk-accent);
}

#tcomment :is(.tk-col, .tk-input, .tk-admin-config-input) {
	min-width: 0;
}

#tcomment :is(.tk-content, .tk-preview-container, .tk-admin-comment-meta) {
	overflow-wrap: anywhere;
}

#tcomment .tk-content img {
	max-width: min(300px, 100%);
}

#tcomment :is(.tk-comments-title, .tk-admin-actions, .tk-admin-comment-filter) {
	flex-wrap: wrap;
	gap: 0.5rem;
}

@media (max-width: 480px) {
	#tcomment .tk-panel {
		padding: 1rem;
	}

	#tcomment .tk-admin-comment-filter-keyword {
		flex-basis: 100%;
	}

	#tcomment .tk-admin-config-item {
		grid-template-columns: minmax(0, 1fr);
	}

	#tcomment .tk-admin-config-title {
		text-align: start;
		white-space: normal;
		margin: 0 0 0.5rem;
	}

	#tcomment .tk-row.actions {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
}