.tv-avatar-editor {
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	box-sizing: border-box;
	padding: 22px;
	border: 0;
	border-radius: 16px;
	color: #24232a;
	background: #fff;
	box-shadow: 0 20px 70px #0004;
}
.tv-avatar-editor::backdrop { background: #111a; }
.tv-avatar-editor header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tv-avatar-editor h2 { margin: 0; font-size: 21px; }
.tv-avatar-editor header button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f1f1f3; color: #555; font-size: 25px; line-height: 1; }
.tv-avatar-editor p { margin: 12px 0 16px; color: #72717a; font-size: 13px; line-height: 1.5; }
.tv-avatar-editor canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background: repeating-conic-gradient(#e8e8eb 0% 25%, #f5f5f7 0% 50%) 50% / 20px 20px; cursor: grab; touch-action: none; }
.tv-avatar-editor canvas:active { cursor: grabbing; }
.tv-avatar-editor canvas:focus-visible { outline: 2px solid var(--tales-red, #ef3040); outline-offset: 3px; }
.tv-avatar-zoom { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 13px; }
.tv-avatar-zoom input { flex: 1; min-width: 0; accent-color: var(--tales-red, #ef3040); }
.tv-avatar-editor footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.tv-avatar-editor footer button { padding: 10px 13px; font-size: 13px; }
.tv-avatar-editor footer button:first-child { margin-right: auto; }
.tv-avatar-feedback { display: block; font-size: 12px; line-height: 1.5; color: #777; }
.tv-avatar-error { color: #d52a42; }
@media (max-width: 768px) {
	.tv-avatar-editor { background: #24242a; color: #f3f3f3; padding: 18px; }
	.tv-avatar-editor p { color: #b5b4be; }
	.tv-avatar-editor header button { background: #3a3a43; color: #ddd; }
	.tv-avatar-editor .tv-button-ghost { border-color: #55505a; background: #29292e; color: #ddd; }
}