ItemPreviewDebugger {
	position: absolute;
	//inset: 0;
	pointer-events: none;

	root {
		position: absolute;
		top: 64px;
		right: 24px;
		width: 760px;
		max-height: calc( 100% - 88px );
		pointer-events: auto;
	}

	.debug-shell {
		width: 100%;
		max-height: 100%;
		padding: 18px;
		display: flex;
		flex-direction: column;
		gap: 18px;
		background-color: rgba( 10, 14, 18, 0.96 );
		border: 1px solid rgba( 255, 190, 130, 0.28 );
		border-radius: 14px;
		box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.45 );
		overflow-y: scroll;
	}

	.debug-header,
	.debug-section {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.debug-title,
	.section-title {
		font-family: "Alphazet SemiBold", "Alphazet-SemiBold", "Akshar", "Segoe UI", sans-serif;
		font-size: 22px;
		color: white;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.debug-subtitle,
	.section-subtitle,
	.debug-hint,
	.preview-subtitle,
	.preview-mode {
		font-family: "Akshar", "Segoe UI", sans-serif;
		color: rgba( 255, 255, 255, 0.72 );
		font-size: 14px;
	}

	.debug-hint {
		color: rgba( 255, 206, 160, 0.8 );
	}

	.preview-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.preview-card {
		width: 166px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		background-color: rgba( 255, 255, 255, 0.035 );
		border: 1px solid rgba( 255, 255, 255, 0.08 );
		border-radius: 12px;
	}

	.preview-visual {
		width: 100%;
		height: 166px;
		padding: 8px;
		background:
			//radial-gradient( circle at 50% 24%, rgba( 255, 255, 255, 0.08 ), transparent 58% ),
			linear-gradient( 180deg, rgba( 28, 34, 40, 0.95 ), rgba( 14, 18, 22, 0.95 ) );
		border-radius: 10px;
		border: 1px solid rgba( 255, 255, 255, 0.06 );
	}

	.preview-title {
		font-family: "Akshar", "Segoe UI", sans-serif;
		font-size: 18px;
		color: white;
	}

	.preview-mode {
		color: rgba( 255, 190, 130, 0.82 );
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 12px;
	}
}